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

柔光的暖阳◎ 2022-05-14 11:41 1632阅读 0赞

## 1. 安装docker ##

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

## 2. 配置react项目 ##

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

![70][]

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

[70]: /images/20220514/393d854a653e418ea64519cf72eaa997.png