docker + nginx 实现web应用部署方案（以react为例）

1. 安装docker

使用yum install docker -y，此处不再详细说明

2. 配置react项目

可以使用脚手架，构建完成后可以看到如下的项目目录

在根目录下执行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参数，映射配置文件等，不再说明。