使用docker模拟生产环境-复现生产环境bug

一、问题背景

        vue-cli提供了development、test、production三个模式。在build项目时，production模式下打包出的项目文件与其他模式略有不同，导致生产环境与开发环境运行差异。当需要在开发环境复现生产环境问题时，可使用docker。

二、操作步骤

1、安装docker（本文不赘述docker安装过程，可自行参考其他文章），在项目根目录创建docker文件夹。

2、在docker文件夹下创建 Dockerfile 文件

FROM nginx

RUN mkdir /app

COPY ./docker/nginx.conf /etc/nginx/nginx.conf

3、在docker文件夹下创建 nginx.conf，其中 proxy_pass 为项目的代理地址

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location  / {
       alias     /app/;
       index  index.html;
       # 查找时，会带上/
       try_files $uri $uri/ /index.html; 
    }
    location  /api {
      # 后台服务没有api，因此末尾以/结尾
      proxy_pass https://xxxxx.com.cn/; 
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

4、创建docker镜像，imagesName 为创建的镜像名称（注意命令后面的点.)

docker build -f ./docker/Dockerfile -t imagesName .

      执行成功后，可在docker中看到创建的镜像

 5、使用 production 模式打包本地项目，生成 dist 目录

vue-cli-service build --mode production

6、创建docker应用，appName 为创建的应用名称。

• :80 对应 nginx.conf 中配置的 listen
• -v 后面为上一步打包的项目路径
• :/app 对应 nginx.conf 中配置的 alias
• imagesName 为第4步创建的docker 镜像名称

docker run --name appName -p 81:80 -v /Users/annie/Documents/workspace/appName/dist:/app imagesName

      执行成功后，可在docker中看到创建的应用，点击按钮，即可在浏览器中打开。