docker交付，多环境，自动化与团队协作

docker交付

docker有很多优势，启动快，资源利用率高，容灾和扩容方便等。这里不谈运维相关的优势，仅仅针对前端而言。

对前端来说，docker交付有几个显著优势：

1. 提供一致的运行环境。docker交付能保证运行环境的统一，包括node版本，包括依赖包，ng版本和配置文件等等。这样的好处是不需担心开发和生产环境的配置有问题，无论是部署到什么机器，如何扩容都没问题。
2. 持续交付和回滚方便。从开发到生产会经历多个环境，docker的镜像交付就能很轻松根据不同的环境提供不同的镜像。而当线上出现问题需要回滚的时候，也能直接把备用镜像部署上去，而不是像传统回滚需要重新拉tag打包。打包的过程又是不可控的。

前端部署Docker：

1. 根目录写好ci/cd以及dockerfile，直接往仓库推。
2. 构建平台打包，自动找dockerfile并且构建镜像。
3. 构建完毕ci/cd触发，推到服务器，接下来交给运维k8s编排和扩容，容灾等

自己测试可以这么做：

• 创建好dockerfile然后构建一个docker image
• docker images 命令查看镜像名称
• 将镜像跑起来即可，如 docker run --name test -p 9876:80 myapp:latest

# 简单的dockerfile
#第一阶段 
#FROM构建镜像
FROM node:14

#构建时的目录
WORKDIR /app/firstapp

#将package.json从当前目录copy至构建镜像的构建目录中
ADD package*.json /app/firstapp

#根据package.json下载依赖包
RUN npm install

#将源码从当前目录copy至构建镜像的该目录中
ADD . /app/firstapp

#编译
RUN npm run build

#第二阶段
#FROM nginx专用镜像
FROM nginx:lastest

#从第一阶段构建好的镜像镜像容器中COPY编译后的代码文件夹至nginx镜像
COPY --from=0 /app/firstapp/dist /usr/share/nginx/html

#将源码中的nginx配置文件copy至nginx镜像的固定目录
ADD nginx.conf /etc/nginx

#运行nginx，暴露80端口
EXPOSE 80

# nginx
events {
    worker_connections  1024;
}
http{
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }   
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

多环境区分

实际开发过程中需要根据情况区分构建环境，比如不同环境调用不同的api地址，比如dev环境允许调试，mock环境允许访问mock数据等等

多环境区分有两种常见方案：

1. cross-env

   • 安装cross-env的包
   • npm script注入环境如 "build:test": "cross-env NODE_ENV=test vue-cli-service build"
   • 在项目内通过 process.env.NODE_ENV 来读取环境配置

2. vue官方提供的模式设定

   • 项目根目录下创建 .env 文件，如 .env.test
   • 通过npm script注入环境 "build:test": "vue-cli-service build --mode test"
   • 项目中通过 process.env.VUE_APP_TITLE 来获取环境配置中的设置的属性

这两种方式各有优劣：

第一种只是改变当前环境标识，可以根据环境标识来引入不同的conf文件。但是需要根据环境手动载入需要用的其他变量。比如main.js判断到不同env后载入不同的conf文件，从而读取conf文件中的设置

第二种方式是vue官方提供的，他根据需求自动读取根目录下的某个配置文件。好处是vue自动载入了这个conf文件，不好的是如果环境很多，项目结构就会变得很乱，根目录会有一堆conf文件

自动化与团队协作

eslint，gitlab-ci，i18n，prettier，githook和哈士奇等