背景

项目中使用Nginx部署前端代码，并配置相应的后端API地址。

使用这样的方式来搭建测试环境，方便QA测试。

解决

使用Docker安装Nginx并进行前端资源及后端API配置：

# 1.提前创建好所需目录（针对非root账号，如果有root权限，请忽略...）
# 因为docker是在root下安装的，而当前用户没有root权限，所以需要提前建好。
# 否则，创建好的文件夹及文件都属于root，当前用户就没法编辑了
mkdir /usr/local/mydocker/gsp-qa

mkdir /usr/local/mydocker/gsp-qa/conf.d
vi /usr/local/mydocker/gsp-qa/conf.d/nginx.conf

# 计划把前端代码放在dist目录下
mkdir /usr/local/mydocker/gsp-qa/html
mkdir /usr/local/mydocker/gsp-qa/html/dist 

mkdir /usr/local/mydocker/gsp-qa/logs
vi /usr/local/mydocker/gsp-qa/logs/access.log
vi /usr/local/mydocker/gsp-qa/logs/error.log

# 2. 给刚刚创建的目录赋予权限（注意：这里权限给的过大，请根据实际情况配置） 
chmod -R 777 /usr/local/mydocker/gsp-qa

# 3. 创建容器
# -v：目录挂载，左边是宿主机目录，右边是容器内目录
# -p：8686是宿主机端口，80是容器内端口
docker run --name gsp-qa-nginx 
    -v /usr/local/mydocker/gsp-qa/conf.d:/etc/nginx/conf.d 
    -v /usr/local/mydocker/gsp-qa/html:/usr/share/nginx/html 
    -v /usr/local/mydocker/gsp-qa/logs:/var/log/nginx 
    -d -p 8686:80 nginx
    
# 4.修改Nginx配置文件
vi /usr/local/mydocker/gsp-qa/conf.d/nginx.conf
# 修改为如下：

    #开启下划线
    underscores_in_headers on;
    #开启压缩
    gzip on;
    gzip_buffers 32 4K;
    gzip_comp_level 6;
    gzip_min_length 100;
    gzip_types application/javascript text/css text/xml;
    gzip_disable "MSIE [1-6]\."; 
    gzip_vary on;

    server {
        listen       80;
        server_name  localhost;
        client_max_body_size 100M;

        location / {
        	# 指定静态资源目录
            root   /usr/share/nginx/html/dist;
            index  index.html index.htm;
        }
        
        # 剩下的就是配置后台地址了...
    }
    
# 5.重启容器
docker container restart gsp-qa-nginx 

# 6.访问Nginx（假定Docker所在机器IP是192.168.1.100）
curl http://192.168.1.100:8686

扩展 - 配合Jenkins进行CI

项目中目前后端API已经可以在Jenkins上进行CI操作，但是前端代码还需要构建部署。

下面是Jenkins Job中“构建”选项中执行的Shell示例：

# 前端代码更新依赖，打包
npm install -g cnpm --registry=https://registry.npm.taobao.org && cnpm install && cnpm run build 
# 删除Docker所在机器上的前端代码
ssh root@92.168.1.100 "rm -rf /usr/local/mydocker/gsp-qa/html/dist/*"
# 将最新打包的dist复制到Docker所在机器
scp -r ${WORKSPACE}/dist/* root@192.168.1.100:/usr/local/mydocker/gsp-qa/html/dist/

参考

1. [Docker Nginx](https://hub.docker.com/_/nginx/)