umi配置多环境变量并在docker中跑起来

• 1、项目背景
• 2、配置环境变量
• 3、使用docker 容器 + nginx在本地运行

1、项目背景

最近开始自己负责一个umi项目从0到1的开发，中间遇到的环境变量配置问题记录一下，顺便再熟悉下前端项目在docker中的部署过程。
主要依赖包版本如下：

安装cross-env包兼容不同的服务器（linux或者windows等）

2、配置环境变量

这里是配置了 test 和 prod 两个环境

• 先在跟目录下建立config文件夹，文件夹下再建立三个config文件: config.js,
  config.test.js, config.prod.js, 如下所示：

• 其中config.test.js 和 config.prod.js 中分别配置不同的process.env.UMI_ENV的值。
  然后在package.json中写入不同环境下的build命令
  
• 最后在页面中打印配置好的环境变量，不同的环境应该会看到不同的值

3、使用docker 容器 + nginx在本地运行

设置好不同的环境变量后，先试下测试环境在docker中跑起来，通过打印检查配置是否生效。在此之前我们要先在本地电脑安装好docker并打开（小白教程在这里）

• 第一步先在本地根目录建一个test.Dockerfile文件, 内容如下：

# 拉取nginx镜像
FROM nginx:alpine
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo '$TZ' > /etc/timezone && \mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default-conf-bak
# 运行nginx.config文件
ADD nginx/nginx.conf /etc/nginx/nginx.conf
# dist文件夹下的index.html替换到nginx的html
ADD dist/ /usr/share/nginx/html/
# 暴露容器端口
EXPOSE 8080
CMD [ "nginx", "-g", "daemon off;" ]

• 再建一个nginx文件夹，下面建nginx.config, 内容如下：

worker_processes  1;
events {worker_connections  1024;
}error_log  /var/log/nginx/error1.log debug;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/access1.log  main;sendfile        on;tcp_nopush      on;tcp_nodelay     on;keepalive_timeout  65;types_hash_max_size     2048;#gzip  on;gzip on;gzip_min_length 1k;gzip_comp_level 9;gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;gzip_vary on;gzip_disable "MSIE [1-6]\.";include /etc/nginx/conf.d/*.conf;add_header Access-Control-Allow-Credentials true;add_header Access-Control-Allow-Headers $http_access_control_request_headers;add_header Access-Control-Allow-Methods POST,GET,OPTIONS,DELETE,PUT,HEAD,PATCH;add_header Access-Control-Allow-Origin $http_origin;add_header Access-Control-Expose-Headers $http_access_control_request_headers;# 内容会变文件名不会变add_header Cache-Control "no-cache";etag on;proxy_set_header X-Forwarded-Proto  $scheme;proxy_set_header Host $proxy_host;server {listen       8080;server_name  test.com;location / {proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Host $http_host;client_max_body_size 600m;root   /usr/share/nginx/html;try_files $uri $uri/index.html $uri.html;index  index.html index.htm;}}
}

• 运行npm run build:test 对测试环境资源打包。打包后会看见多出这个dist文件夹
  

• 运行docker build -f test.Dockerfile -t umi-test .构建一个名为umi-test的镜像，构建成功后在docker desktop 上能找到刚刚构建的镜像：
  

• 最后运行docker run --rm -p 3001:8080 umi-test 将镜像跑起来，成功后打开 http://localhost:3001 就能看到我们的项目啦。也可以看到我们配置的process.env.UMI_ENV = test 有生效，生产环境同理可验证。