使用各种姿势舒服的部署微前端项目

微前端作为解决巨石应用和降低技术框架变动风险的神器，我觉得是当下前端发展的一大方向，可以在未来5-10年内保持生命力。
作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了一年多的时间，期间也产出了两篇入门文章：qiankun微前端实战看这篇就够了 - Vue项目篇 和 vue3.0&qiankun2.0极速尝鲜，微前端进阶实战！，有兴趣或者刚接触微前端的同学可以去看下。
经过拆分之后，一个巨石应用变成了几个甚至几十个子应用，那么这么多应该该如何友好又舒服的部署呢，下面就来详细的说说几种不同的使用姿势。

[x] 脚本部署
[x] docker部署
[ ] CICD

脚本部署

作者在实际项目中编写了两种部署脚本，一种是前端开发人员使用的，一种是无需了解代码的实施人员使用的，我们之间一步到位讲无需代码知识的部署脚本设计。
先说下大致思路：

1. 使用node+inquirer编写交互式命令行脚本，以伪可视化的形式创建目标服务器列表。
2. 使用node+inquirer+ssh2-sftp-client，以伪可视化的形式将代码发布至服务器
3. 将脚本放在测试服务器（win），实施人员可以登录测试服务器将测试通过的前端静态文件上传至任意linux服务器。
4. 将脚本启动命令文件改成.bat文件，可以实现在win系统上双击运行。

效果如下：

添加目标服务器信息

一键部署

具体原理就不细说了，node读写，inquirer交互插件的使用inquirer+ssh2-sftp-client将文件推送到服务器指定地址，都是很成熟的插件，脚本部署这块就直接上代码：Github，此外还可以继续优化，将拉取代码、打包、部署做到一起去，更适合非程序人员。
这种方案优点是对外简单易操作，缺点是需要源码或者至少打包好后的代码，以及需要记录服务器的登录名及密码。

docker 部署

作者只花了半天时间从认识docker到产出可用工程，如有不对之处，欢迎斧正。

docker-compose

既然是多个微应用，那直接来docker-compose吧。官方简介是这么介绍compose的：负责实现对 Docker 容器集群的快速编排。

1. 安装。win版的docker自带有docker-compose，我们直接下载安装docker；其他版本见docker，docker-compose
2. 在项目根目录添加docker-compose.yml文件。

services:
  # 主应用配置
  master:             # docker-compose内的容器名
    container_name: master      # 容器名
    restart: always        # 重启策略: 容器退出时总是重启容器
    build: 
      context: ./master        # 服务指定上下文目录
      dockerfile: Dockerfile    # 相对于context的dockerfile文件路径
    environment:
      NODE_ENV: 'production' 
    ports:
      - '2750:2750'          # 端口映射，宿主机端口：容器端口
  # subapp-login配置
  login:
    container_name: subapp-login
    restart: always
    build: 
      context: ./subapp-login
      dockerfile: Dockerfile
    environment:
      NODE_ENV: 'production'
    ports:
      - '2753:2753'
    depends_on:            # 依赖容器名，会在此容器启动之后启动
      - master
  # ...其他子应用配置方法如上

1. 在根目录添加.dockerignore文件，里面写入node_modules
2. 根据docker-compose.yml的设置，在每个子应用文件夹下添加Dockerfile和对应的nginx配置文件yourname.conf。

Dockerfile文件，注意里面路径即可

# 从官方拉取nginx镜像
FROM nginx  
# 复制dist文件夹到镜像空间，注意docker-compose.yml中指定master的build从./master文件夹开始
COPY dist/ /usr/local/web/master/ 
# 复制master.conf到镜像空间
COPY master.conf /etc/nginx/conf.d/master.conf

master.conf文件，这里nginx配置和普通无二，主应用比子应用多了接口代理，少了允许跨域头信息，其他一致。

    server {
        listen       2750;
        server_name  127.0.0.1;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/local/future/web/master;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;

            # 普通模块接口地址
            location ^~ /Api/ {
                proxy_pass $host:3700/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                #由于服务器端源码(建议大家做好大小写匹配)只匹配了"Upgrade"字符串,所以如果这里填"upgrade"服务器端会将这条http请求当成普通的请求,导致websocket握手失败
                proxy_set_header Connection "Upgrade";
                proxy_set_header Remote_addr $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_read_timeout 600s;
            }

            # 解决 nginx 禁止post请求问题，需要后台配置跨域
            error_page 405 =200 http://$host$request_uri; 
        }

        error_page    502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/local/future/web/master;
        }
    }

1. 启动配置好的docker容器集群快速编排

docker-compose up -d

终端会依次显示步骤的打印信息，等待即可，成功后如果是win系统，可以打开
docker可视化客户端查看

项目地址：Github

重启docker-compose中的单个容器，如login

1. 先停止运行容器login

  docker-compose stop login 

命令后面的名字应该是你docker-compose.yml中的service里的key

1. 删除容器login

  docker container rm subapp-login

命令后面的名字应该是你docker-compose.yml中的service下container_name的值

1. 删除镜像login

  docker rmi 9d8592118538

命令后面的名字应该是你docker ps查看到的id或IMAGE

1. 重新打包镜像和容器

  docker-compose up -d login

命令后面的名字应该是你docker-compose.yml中的service里的key

将docker打包好的镜像推送到阿里云私服

1. 在阿里云镜像中心创建你的命名空间
2. 根据提示创建镜像仓库

3. 登陆阿里云镜像

    docker login --username=你的用户名 registry.cn-hangzhou.aliyuncs.com

4. docker push 推送到仓库
5. 在你需要部署的服务器docker pull 地址 下载

docker使用后续优化

nginx的配置更改不应该影响到容器的运行；修改后重新启生成容器启动也可以再通过脚本简化等，待我再研究一天

CICD

目前使用jenkins，社区内教程非常之多，docker的教程也不少，后续研究完补上。

微前端nginx正常多端口配置及主应用+所有子应用双端口配置

见：双端口nginx配置

如果有微前端项目工程优化需求，作者可以另开一篇文章介绍