1. 安裝docker

使用yum install docker -y，此處不再詳細說明

2. 配置react專案

可以使用cmss-react-app，構建完成後可以看到如下的專案目錄

在根目錄下執行npm install & npm run build，即可構建出dist目錄，其中是打包後的檔案，也是我們構建docker映象要用的檔案

3. 編寫nginx.conf

在專案目錄下建立conf頁面，編寫nginx.conf檔案，配置如下：

daemon off;
user  root;
worker_processes  4;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       7070;
        server_name  localhost;

        location / {
            root   html/static;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }

	location ^~ /static/ {
	    root html;
	}
    }
}
 

其中daemon off用於控制nginx的啟動方式，建議加上，不然需要手動登入映象啟動nginx；

user root，讓nginx使用root使用者，不用控制訪問許可權，防止出現403 forbidden的錯誤。

4. 編寫Dockerfile

在根目錄下編寫Dockerfile，如下所示：

# Base images 基礎映象
FROM centos:centos7
 
#MAINTAINER 維護者資訊
MAINTAINER network-bigdata-cmss
 
#ADD  獲取url中的檔案,放在當前目錄下
ADD http://nginx.org/download/nginx-1.15.3.tar.gz .
 
#RUN 執行以下命令 
RUN yum install -y pcre-devel wget net-tools gcc zlib zlib-devel make openssl-devel
RUN tar -zxvf nginx-1.15.3.tar.gz
RUN mkdir -p /usr/local/nginx
RUN cd nginx-1.15.3 && ./configure && make && make install
RUN ln -s /usr/local/nginx/sbin/* /usr/local/sbin/

#REPLACE CONF 替換配置檔案
RUN rm /usr/local/nginx/conf/nginx.conf
ADD conf/nginx.conf /usr/local/nginx/conf/

#ADD RESOUCES 新增靜態資源
RUN rm /usr/local/nginx/html/index.html
RUN mkdir -p /usr/local/nginx/html/static
COPY dist/ /usr/local/nginx/html/static
 
#EXPOSE 對映埠
EXPOSE 7070
 
#CMD 執行以下命令
CMD ["nginx"]
 

5. 構建docker映象

使用 docker build --rm --tag ai-ops-web:nginx . 命令構建docker映象，完成後docker images即可檢視到剛構建成功的映象

6. 啟動docker映象

1. 使用 docker run -i -t -d -p 7070:7070 ai-ops-web:nginx 命令啟動，完成後開啟{ip}:7070即可看到nginx承載的web頁面

2. 使用 docker run -i -t -d -p 7070:7070 -v /data1/nginx/html:/usr/local/nginx/html ai-ops-web:nginx 命令啟動，講nginx裡面的html資料夾對映到物理儲存上，方便除錯。此處可以多加幾個-v引數，對映配置檔案等，不再說明。