使用各類姿式舒服的部署微前端項目（上：打包與上傳）

微前端做爲解決巨石應用模塊化和下降技術框架變更風險的神器，我以爲是當下前端發展的一大方向，能夠在將來5-10年內保持生命力。
做者從2019年12月第一次使用qiankun框架落地微服務以來已通過去了一年多的時間，造成了、腳手架、工程結構設計、平常開發維護、性能優化、部署等一整套流程。
以前有兩篇文章講了qiankun的入門文章：
qiankun微前端實戰看這篇就夠了 - Vue項目篇:這篇文章編寫的較早，大體在19年12月份當時qiankun還在1.x版本，如今關於微應用註冊及應用間通訊的部分已經和現版本再也不合適，所以再也不建議剛接觸qiankun的同窗閱讀了
vue3.0&qiankun2.0極速嚐鮮，微前端進階實戰！：這篇是基於qiankun2.0的入門文章，以及如何將1.0平滑升級至2.0版本，另外也探討了主應用+n子應用的雙端口配置方案
下面講講做者在部署上作的一系列方案探索（如下兩種方案都更適合一個團隊維護N個微應用的場景）：html

1 腳本部署
2 docker部署前端

每一個模塊一個鏡像【X】
只使用一個nginx鏡像，將前端代碼和nginx配置所有經過掛載的方式引入【X】
只使用一個nginx鏡像，將前端代碼copy至鏡像內部，只將nginx配置掛載【√】
每一個模塊一個鏡像，主應用鏡像使用掛載nginx配置保證靈活性；再配合腳本解決多鏡像維護繁瑣的缺點【√】

有條件能夠oss

腳本部署

腳本部署是指使用npm run xx的形式一個命令便可將前端靜態資源推送至服務器的方式vue

大體思路：

使用node+inquirer編寫交互式命令行腳本，像vueCli建立項目同樣以僞可視化的形式一步一步指引使用人員進行部署操做。
經過ssh2-sftp-client插件將讀node取到的本地文件上傳至linux服務器。
將腳本啓動命令文件改爲.bat文件，能夠實如今本身電腦上雙擊運行。

功能有：

使用node讀寫服務器配置文件，可經過交互式命令行以input框輸入的形式建立新的服務器信息
經過交互式命令行以選擇的形式，將前端打包好的文件按你所選要求部署至所選服務器

效果以下：

添加目標服務器信息node

一鍵部署linux

缺點

須要在目標服務器上配好nginx服務及開機運行（沒法帶運行環境一塊兒部署）
暫時沒法向windows系統推送部署
node讀取文件路徑雖然可配，但既然要配確定須要知道微應用打包好的文件位置
須要知道服務器root或者有足夠高權限的帳號密碼

其中node讀寫、inquirer命令行交互插件、ssh2-sftp-client將文件推送到服務器都是很成熟的插件，另外多個項目一鍵下載依賴、一鍵打包、一鍵部署腳本地址：多個微應用操做腳本，此外還能夠繼續優化，將拉取代碼、打包、部署作到一塊兒去，更適合非程序人員。nginx

docker 部署

做者剛接觸docker幾天時間，若有不對之處，歡迎斧；更歡迎指點更多巧妙姿式。
既然是多個微應用，那直接來docker-compose吧。官方簡介是這麼介紹compose的：負責實現對 Docker 容器集羣的快速編排。
按docker文檔將docker及docker-compose等相關配置都作好：（win版docker自帶docker-compose，開啓鏡像加速便可；contos須要設置docker用戶組、鏡像加速、單獨安裝docker-compose等，都按上面官方簡介文檔操做便可）
docker自帶前端運行環境，無需再面對在我這好好的在他那那會不能跑呢的尷尬局面git

使用docker-compose將每一個微應用都打包成一個鏡像部署

此方案每次微應用內容變動或nginx配置變動以後都須要從新打包鏡像，很是繁瑣，即使是在docker內npm run build打包並將dist COPY 至鏡像空間也依舊如此，且沒法保證git pull的代碼是功能完整且無錯的github

缺點

某一鏡像下內容或nginx配置變更，須要從新生成此應用的鏡像

此方案推薦指數：**web

步驟

在項目根目錄添加docker-compose.yml文件。經過docker-compose去調度每一個子應用和node服務裏面的Dockerfile

services:
  # 服務端配置
  wl-mfe.server:
    container_name: wl-mfe.server
    restart: always
    build: 
      context: ./_server
      dockerfile: Dockerfile
    ports:
      - '3700:3700'
  # 主應用配置
  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
  # ...其餘子應用配置方法如上
複製代碼

根據docker-compose.yml的build路徑，在每一個子應用文件夾下添加Dockerfile和對應的nginx配置文件yourname.conf。

Dockerfile文件，注意裏面路徑便可；另外注意在每一個應用目錄添加.dockerignore文件，忽略下node_modulesdocker

# 從官方拉取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-compose up -d 打包並啓動鏡像或 docker-compose build打包鏡像，上傳阿里雲或其餘私有鏡像中心便可

啓動成功後能夠在終端看到容器信息。代碼地址：Github & node服務Dockerfile & 主應用Dockerfile & 子應用Dockerfile

使用docker-compose打包一個nginx鏡像，並將全部微應用經過數據卷的方式掛載進來

此方案除了node服務端外，將全部web端微應用掛載到nginx鏡像下，其原理和正常一個nginx啓動所有前端靜態資源服務同樣。這樣部署的時候即帶nginx環境一塊兒部署，也不須要維護過多的鏡像資源，只把全部微應用打包好的dist目錄經過volumes掛載至nginx鏡像便可。

優勢

由於是掛載的方式，微應用的內容變動或者nginx的配置變動都無需從新制做鏡像，只須要重啓容器便可生效！
使用nginx官方鏡像便可，無需推送至阿里雲再拉取部署

缺點

也由於是掛載的方式，須要在宿主機上存在所有應用的dist文件，運維除了關注鏡像還需關注代碼

此方案推薦指數：**

步驟

在項目根目錄添加docker-compose.yml文件。

# by weilan in 2020.01.25 
 version: '3'
 services:
  # 服務端配置
  wl-mfe.server:
    container_name: wl-mfe.server
    restart: always
    build: 
      context: ./_server
      dockerfile: Dockerfile
    ports:
      - '3700:3700'
  wl-mfe.web:
    image: nginx
    restart: always
    container_name: nginx
    environment:
      - TZ=Asia/Shanghai
    ports:
      # nginx端口與宿主機端口映射
      - "8080:80"
      - "80:80"
      - "443:443"
      # 下面是各個微前端的端口映射
      - "2750:2750"
      - "2751:2751"
      - "2752:2752"
      - "2753:2753"
    volumes:
      # 掛載nginx配置
      - ./_docker/nginx/default.conf:/etc/nginx/nginx.conf
      # 掛載各個微前端靜態資源
      - ./master/dist/:/usr/local/web/master/
      - ./subapp-blog/dist/:/usr/local/web/subapp-blog/
      - ./subapp-login/dist/:/usr/local/web/subapp-login/
      - ./subapp-ui/dist/:/usr/local/web/subapp-ui/
複製代碼

運行 docker-compose up -d 打包並啓動鏡像或 docker-compose build打包鏡像，上傳阿里雲或其餘私有鏡像中心便可

只使用一個nginx鏡像，將前端代碼copy至鏡像內部，只將nginx配置掛載

此方案解決了運維除了關注鏡像還得關注代碼的問題，而且全部前端模塊都打包進一個鏡像內部，下降運維門檻

優勢

一個鏡像完成微前端n個模塊的部署，簡單粗暴
有些公司沒運維或被抓去頂崗型的運維，下降門檻節省認知成本
nginx掛載是由於nginx會有修改的需求，但只重啓容器便可

缺點

由於所有在一個鏡像，一個模塊改動重啓的是整個項目
微前端有個特性就是獨立部署，這下又一窩端了

此方案推薦指數 ****

步驟

在項目根目錄添加docker-compose.yml文件

# by weilan in 2020.02.22
 version: '3'
 services:
  # 服務端配置
  wl-mfe.server:
    container_name: wl-mfe.server
    restart: always
    build: 
      context: ./_server
      dockerfile: Dockerfile
    ports:
      - '3700:3700'
  wl-mfe.web:
    image: nginx
    restart: always
    container_name: nginx
    build: .
    environment:
      - TZ=Asia/Shanghai
    ports:
      # 下面是各個微前端的端口映射
      - "2750:2750"
      - "2751:2751"
      - "2752:2752"
      - "2753:2753"
    volumes:
      # 掛載nginx配置
      - ./_docker/nginx/default.conf:/etc/nginx/nginx.conf
複製代碼

FROM nginx
COPY master/dist/ /usr/local/future/web/master/
COPY subapp-login/dist/ /usr/local/web/subapp-login/
COPY subapp-ui/dist/ /usr/local/web/subapp-ui/
COPY subapp-blog/dist/ /usr/local/web/subapp-blog/
複製代碼

注意Dockerfile文件平級添加.dockerignore忽略一下依賴目錄

運行 docker-compose up -d 打包並啓動鏡像或 docker-compose build打包鏡像，上傳阿里雲或其餘私有鏡像中心便可

每一個模塊打包成一個鏡像，主應用nginx配置掛載，其餘子應用nginx配置打包進鏡像內部，並配合腳本作打包上傳

此方案和docker部署方案1大體相同，只是把主應用將nginx配置copy至鏡像內部改成數據卷掛載的方式，所以平常調整nginx只重啓容器便可

優勢

符合微前端獨立部署的風格
無需關注代碼層，只維護鏡像
配合腳本解決多鏡像維護操做繁瑣的問題

缺點

模塊多鏡像確實多，並且後續確定還須要增長模塊，須要設計一個好的部署管理方案

步驟

在項目根目錄添加docker-compose.yml文件。和docker部署方案1相同，可是在master應用下增長數據卷掛載nginx

services:
  # 服務端配置
  wl-mfe.server:
    container_name: wl-mfe.server
    restart: always
    build: 
      context: ./_server
      dockerfile: Dockerfile
    ports:
      - '3700:3700'
  # 主應用配置
  master: 			# docker-compose內的容器名
    container_name: master      # 容器名
    restart: always		# 重啓策略: 容器退出時老是重啓容器
    build: 
      context: ./master		# 服務指定上下文目錄
      dockerfile: Dockerfile    # 相對於context的dockerfile文件路徑
    environment:
      NODE_ENV: 'production' 
    ports:
      - '2750:2750'  		# 端口映射，宿主機端口：容器端口
    volumes:
      # 掛載nginx配置
      - ./nginx.conf:/etc/nginx/nginx.conf
  # 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
  # ...其餘子應用配置方法如上
複製代碼

根據docker-compose.yml的build路徑，在每一個子應用文件夾下添加Dockerfile和對應的nginx配置文件yourname.conf。

這一步只有master項目下有修改，由於在docker-compose中的master掛載了nginx配置，master的Dockerfile中須要將COPY nginx配置的命令去掉
3. 運行 docker-compose up -d 打包並啓動鏡像或 docker-compose build打包鏡像，上傳阿里雲或其餘私有鏡像中心便可 4. 編寫腳本幫助咱們一鍵處理n個鏡像的打包上傳操做

因篇幅過長，docker打包與上傳腳本另起一篇文章說明

傳送門：使用腳本一鍵打包並上傳docker鏡像

CICD

目前使用jenkins，社區內教程很是之多，docker的教程也很多，後續研究完補上。