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

微前端作为解决巨石利用和升高技术框架变动危险的神器，我感觉是当下前端倒退的一大方向，能够在将来5-10内放弃生命力。
作者从2019年12月第一次应用qiankun框架落地微服务一来一级过来了一年多的工夫，期间也产出了两篇入门文章：qiankun微前端实战看这篇就够了 - Vue我的项目篇和 vue3.0&qiankun2.0极速尝鲜，微前端进阶实战！，有趣味或者刚接触微前端的同学能够去看下。
通过拆分之后，一个巨石利用变成了几个甚至几十个子利用，那么这么多应该该如何敌对又难受的部署呢，上面就来具体的说说几种不同的应用姿态。

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

脚本部署

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

应用node+inquirer编写交互式命令行脚本，以伪可视化的模式创立指标服务器列表。
应用node+inquirer+ssh2-sftp-client，以伪可视化的模式将代码公布至服务器
将脚本放在测试服务器（win），施行人员能够登录测试服务器将测试通过的前端动态文件上传至任意linux服务器。
将脚本启动命令文件改成.bat文件，能够实现在win零碎上双击运行。

成果如下：

增加指标服务器信息

一键部署

具体原理就不细说了，node读写，inquirer交互插件的应用inquirer+ssh2-sftp-client将文件推送到服务器指定地址，都是很成熟的插件，脚本部署这块就间接上代码：Github，此外还能够持续优化，将拉取代码、打包、部署做到一起去，更适宜非程序人员。
这种计划长处是对外简略易操作，毛病是须要源码或者至多打包好后的代码，以及须要记录服务器的登录名及明码。

docker 部署

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

docker-compose

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

装置。win版的docker自带有docker-compose，咱们间接下载安装docker；其余版本见docker，docker-compose
在我的项目根目录增加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  # ...其余子利用配置办法如上

在根目录增加.dockerignore文件，外面写入node_modules
依据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;        }    }

启动配置好的docker容器集群疾速编排

docker-compose up -d

终端会顺次显示步骤的打印信息，期待即可，胜利后如果是win零碎，能够关上
docker可视化客户端查看

我的项目地址：Github

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

先进行运行容器login

  docker-compose stop login

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

删除容器login

  docker container rm subapp-login

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

删除镜像login

  docker rmi 9d8592118538

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

从新打包镜像和容器

  docker-compose up -d login

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

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

在阿里云镜像核心创立你的命名空间
依据提醒创立镜像仓库

登陆阿里云镜像

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

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

docker应用后续优化

nginx的配置更改不应该影响到容器的运行；批改后从新启生成容器启动也能够再通过脚本简化等，待我再钻研一天

CICD

目前应用jenkins，社区内教程十分之多，docker的教程也不少，后续钻研完补上。

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

见：双端口nginx配置