乐趣区

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

jiezi

微前端作为解决巨石利用和升高技术框架变动危险的神器，我感觉是当下前端倒退的一大方向，能够在将来 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 配置

如果有微前端我的项目工程优化需要，作者能够另开一篇文章介绍

退出移动版