寫在開頭
微前端系列文章：
- 基于 qiankun 的微前端最佳實踐（萬字長文） - 從 0 到 1 篇
- 基于 qiankun 的微前端最佳實踐（圖文并茂） - 應(yīng)用部署篇
- 基于 qiankun 的微前端最佳實踐（圖文并茂） - 應(yīng)用間通信篇
- 萬字長文+圖文并茂+全面解析微前端框架 qiankun 源碼 - qiankun 篇
本系列其他文章計劃一到兩個月內(nèi)完成狐榔，點個 關(guān)注 不迷路洞坑。
計劃如下：
- 生命周期篇碳柱；
- IE 兼容篇儿捧；
- 性能優(yōu)化雕拼、緩存方案篇腺办；
引言
大家好~我們是明源云鏈前端團隊腕扶，我們使用 qiankun 進行微前端架構(gòu)改造已經(jīng)半年有余藻雌，已在生產(chǎn)環(huán)境得到成功驗證雌续。因此，本文介紹的 微前端應(yīng)用部署發(fā)布方案胯杭，可以放心食用啦驯杜。
由于公司項目不對外開放，所以下面給大家展示我們的 Demo 案例（Demo 服務(wù)器帶寬比較低做个，可能訪問起來比較慢）（效果如下圖）鸽心。
OK，話不多說居暖，我們進入到正文吧~
概述
本文是基于 qiankun 的微前端最佳實踐系列文章之 應(yīng)用部署篇顽频，采用 qiankun 完成主應(yīng)用與多個微應(yīng)用之間的聯(lián)接，在部署發(fā)布時與普通的 Web 應(yīng)用并沒有太大區(qū)別太闺。
本教程將結(jié)合 實戰(zhàn)案例 的 feat-deploy 分支糯景，完成 qiankun 微應(yīng)用架構(gòu)的部署發(fā)布。
我們將演示在本地服務(wù)器上部署我們微前端應(yīng)用，在本地部署成功后莺奸，我們再介紹如何在線上進行部署發(fā)布丑孩。
注意：
保證
Web應(yīng)用的高可用性需要專業(yè)的服務(wù)器運維知識，本文對這方面知識不會有太多討論灭贷。主要是因為這不屬于前端開發(fā)人員的主要工作温学，二來這些知識對前端人員來說這有些難度，有需要的童鞋可以自己去了解甚疟。
本文首先從應(yīng)用的構(gòu)建打包開始仗岖，介紹不同技術(shù)棧的構(gòu)建打包方法：
- 主應(yīng)用的構(gòu)建打包；
-
Vue微應(yīng)用的構(gòu)建打包览妖； -
React微應(yīng)用的構(gòu)建打包轧拄； -
Angular微應(yīng)用的構(gòu)建打包； -
Static（無腳手架）微應(yīng)用的構(gòu)建打包讽膏；
介紹完不同技術(shù)棧的構(gòu)建打包方法后檩电，我們會先介紹如何使用 Nginx 部署發(fā)布，然后再介紹如何使用 Caddy 方案（對前端更友好的 Web 服務(wù)器）發(fā)布府树，也就是下面兩種方案：
-
Nginx服務(wù)器部署發(fā)布 - 極簡方案俐末； -
Caddy服務(wù)器部署發(fā)布 - 極簡方案；
Nginx 部署方案是我們在生產(chǎn)上驗證過的方案奄侠，Caddy 部署方案對前端而言更為簡單卓箫，比較適合個人站點。
應(yīng)用構(gòu)建打包
首先垄潮，我們結(jié)合 實戰(zhàn)案例 - feature-deploy 分支 來介紹主應(yīng)用和微應(yīng)用的構(gòu)建打包方法烹卒。
我們首先在根目錄下新建目錄 deployed，用于放置我們各個應(yīng)用構(gòu)建打包后的文件弯洗，接下來我們就可以開始各個應(yīng)用的構(gòu)建打包了旅急。
主應(yīng)用構(gòu)建打包
我們以 實戰(zhàn)案例 - feature-deploy 分支 為例，在主應(yīng)用構(gòu)建打包前牡整，我們需要先設(shè)置環(huán)境變量藐吮，在生產(chǎn)環(huán)境時加載 真實域名 的微應(yīng)用。
我們在 micro-app-main 根目錄下新建兩個配置文件 - .env.basic 和 .env.prod果正，用于存放我們不同環(huán)境的配置文件炎码，代碼實現(xiàn)如下：
# .env.basic 用于本地構(gòu)建測試
VUE_APP_REACT_MICRO_APP=http://localhost:10100
VUE_APP_VUE_MICRO_APP=http://localhost:10200
VUE_APP_ANGULAR_MICRO_APP=http://localhost:10300
VUE_APP_STATIC_MICRO_APP=http://localhost:10400
# .env.prod 用于線上構(gòu)建盟迟，下面這些域名是真實域名
VUE_APP_REACT_MICRO_APP=http://react-micro.jt-gmall.com
VUE_APP_VUE_MICRO_APP=http://vue-micro.jt-gmall.com
VUE_APP_ANGULAR_MICRO_APP=http://angular-micro.jt-gmall.com
VUE_APP_STATIC_MICRO_APP=http://static-micro.jt-gmall.com
我們在配置好了兩個環(huán)境的微應(yīng)用地址配置后秋泳，我們將其導出，代碼實現(xiàn)如下：
// micro-app-main/src/config/index.ts
type Config = {
REACT_MICRO_APP: string;
VUE_MICRO_APP: string;
ANGULAR_MICRO_APP: string;
STATIC_MICRO_APP: string;
};
const config: Config = {
REACT_MICRO_APP: process.env.VUE_APP_REACT_MICRO_APP,
VUE_MICRO_APP: process.env.VUE_APP_VUE_MICRO_APP,
ANGULAR_MICRO_APP: process.env.VUE_APP_ANGULAR_MICRO_APP,
STATIC_MICRO_APP: process.env.VUE_APP_STATIC_MICRO_APP,
}
export default config;
然后攒菠，我們需要在微應(yīng)用注冊信息中迫皱，將我們加載微應(yīng)用的地址換成我們配置的地址，代碼實現(xiàn)如下：
// micro-app-main/src/micro/apps.ts
import config from "@/config";
const {
REACT_MICRO_APP,
VUE_MICRO_APP,
ANGULAR_MICRO_APP,
STATIC_MICRO_APP,
} = config;
const apps = [
/**
* name: 微應(yīng)用名稱 - 具有唯一性
* entry: 微應(yīng)用入口 - 通過該地址加載微應(yīng)用，這里我們使用 config 配置
* container: 微應(yīng)用掛載節(jié)點 - 微應(yīng)用加載完成后將掛載在該節(jié)點上
* activeRule: 微應(yīng)用觸發(fā)的路由規(guī)則 - 觸發(fā)路由規(guī)則后將加載該微應(yīng)用
*/
{
name: "ReactMicroApp",
entry: REACT_MICRO_APP,
container: "#frame",
activeRule: "/react",
},
{
name: "VueMicroApp",
entry: VUE_MICRO_APP,
container: "#frame",
activeRule: "/vue",
},
{
name: "AngularMicroApp",
entry: ANGULAR_MICRO_APP,
container: "#frame",
activeRule: "/angular",
},
{
name: "StaticMicroApp",
entry: STATIC_MICRO_APP,
container: "#frame",
activeRule: "/static",
},
];
export default apps;
從上面的配置文件我們可以看出卓起，我們配置了 basic 和 prod 兩個環(huán)境加載的微應(yīng)用地址和敬。
最后，我們在 package.json 中戏阅，通過不同的命令區(qū)分不同環(huán)境昼弟，代碼實現(xiàn)如下：
"scripts": {
"serve": "vue-cli-service serve --mode basic",
"build:test": "vue-cli-service build --mode basic",
"build": "vue-cli-service build --mode prod",
"lint": "vue-cli-service lint"
}
在配置完成后，我們在命令行運行如下命令奕筐，將主應(yīng)用構(gòu)建打包：
# 我們的教程是先在本地進行測試舱痘，所以先構(gòu)建 test 包
yarn build:test
在構(gòu)建打包完成后，我們將構(gòu)建好的 dist 目錄移動到根目錄下的 deployed 目錄下离赫，并重命名為 micro-app-main芭逝，目錄結(jié)構(gòu)如下（見下圖）
到這里，我們的主應(yīng)用就構(gòu)建打包好了渊胸，接下來我們介紹各個技術(shù)棧的微應(yīng)用構(gòu)建打包過程旬盯。
Vue 微應(yīng)用構(gòu)建打包
我們以 實戰(zhàn)案例 - feature-deploy 分支 為例，我們進入到 micro-app-vue 目錄翎猛，直接使用 vue-cli 官方的打包命令構(gòu)建打包即可胖翰，在命令行運行：
yarn build
在構(gòu)建打包完成后，我們將構(gòu)建好的 dist 目錄移動到根目錄下的 deployed 目錄下办成，并重命名為 micro-app-vue泡态，目錄結(jié)構(gòu)如下（見下圖）
到這里，我們的 Vue 微應(yīng)用構(gòu)建打包就完成啦迂卢！
React 微應(yīng)用構(gòu)建打包
我們以 實戰(zhàn)案例 - feature-deploy 分支 為例某弦，我們進入到 micro-app-react 目錄，直接使用打包命令構(gòu)建打包即可而克，在命令行運行：
yarn build
在構(gòu)建打包完成后靶壮，我們將構(gòu)建好的 build 目錄移動到根目錄下的 deployed 目錄下，并重命名為 micro-app-react员萍，目錄結(jié)構(gòu)如下（見下圖）
到這里哆窿，我們的 React 微應(yīng)用構(gòu)建打包就完成啦！
Angular 微應(yīng)用構(gòu)建打包
我們以 實戰(zhàn)案例 - feature-deploy 分支 為例搪桂，我們進入到 micro-app-angular 目錄阅畴，直接使用打包命令構(gòu)建打包即可，在命令行運行：
yarn build
在構(gòu)建打包完成后筋帖，我們將構(gòu)建好的 dist/micro-app-angular 目錄移動到根目錄下的 deployed 目錄下奸晴，目錄結(jié)構(gòu)如下（見下圖）
到這里，我們的 Angular 微應(yīng)用構(gòu)建打包就完成啦日麸！
Static 微應(yīng)用構(gòu)建打包
我們以 實戰(zhàn)案例 - feature-deploy 分支 為例寄啼，由于 Static 微應(yīng)用沒有使用腳手架，所以我們直接將 static 目錄移動到根目錄下的 deployed 目錄下，并重命名為 micro-app-static墩划，目錄結(jié)構(gòu)如下（見下圖）
Nginx 服務(wù)器部署方案
在將我們的主應(yīng)用和微應(yīng)用全部打包完成后涕刚，我們將介紹如何使用 Nginx 完成微前端架構(gòu)的部署。
Nginx 部署方案是可以作為生產(chǎn)方案使用的乙帮。
Tips: 開始搭建
HTTP服務(wù)之前杜漠，確保你的9999、10100察净、10200碑幅、10300、10400端口是空閑的塞绿。
搭建 HTTP 服務(wù)器 - 運行主應(yīng)用
首先沟涨，我們以 實戰(zhàn)案例 - feature-deploy 分支 為例，我們項目構(gòu)建后的目錄如下圖异吻。
我們先搭建一個簡單的 HTTP 服務(wù)裹赴，使得我們的主應(yīng)用可以被訪問，我們在 deployed 目錄下新建一個 nginx.conf 配置文件诀浪，添加如下配置：
worker_processes 1; # Nginx 進程數(shù)棋返，一般設(shè)置為和 CPU 核數(shù)一樣
events {
worker_connections 1024; # 每個進程允許最大并發(fā)數(shù)
}
http {
include ./mime.types; # 文件擴展名與類型映射表
default_type application/octet-stream; # 默認文件類型
server {
set $root "/Users/Macxdouble/project/myy/micro-front/deployed"; # 設(shè)置靜態(tài)文件目錄的絕對路徑，該變量根據(jù)個人的項目配置有所不同
listen 9999; # 配置監(jiān)聽的端口
server_name localhost; # 配置的域名雷猪，目前是本地測試睛竣，所以直接使用 localhost
location / {
root $root/micro-app-main; # 網(wǎng)站根目錄，這里選用主應(yīng)用構(gòu)建后的文件目錄
index index.html; # 默認首頁文件
try_files $uri $uri/ /index.html @rewrites; # 兼容 history 路由模式求摇，找不到的文件直接重定向到 index.html
expires -1; # 首頁一般沒有強制緩存
add_header Cache-Control no-cache;
}
location @rewrites {
rewrite ^(.+)$ /index.html break; # 重定向規(guī)則
}
}
}
配置文件寫好后射沟，還有兩件重要的事情：
如果對
nginx不是很熟悉的童鞋，記得仔細查看配置文件的注釋內(nèi)容与境，這樣可以確保你的配置文件正確（特別是$root變量验夯，要根據(jù)個人項目進行設(shè)置）。別忘了把
nginx目錄下的mime.types復(fù)制到當前目錄（或者新建mime.types文件并復(fù)制下面的內(nèi)容）摔刁，否則你的樣式文件將無法正常加載挥转。
types {
text/html html htm shtml;
text/css css;
text/xml xml;
image/gif gif;
image/jpeg jpeg jpg;
application/javascript js;
application/atom+xml atom;
application/rss+xml rss;
text/mathml mml;
text/plain txt;
text/vnd.sun.j2me.app-descriptor jad;
text/vnd.wap.wml wml;
text/x-component htc;
image/png png;
image/svg+xml svg svgz;
image/tiff tif tiff;
image/vnd.wap.wbmp wbmp;
image/webp webp;
image/x-icon ico;
image/x-jng jng;
image/x-ms-bmp bmp;
font/woff woff;
font/woff2 woff2;
application/java-archive jar war ear;
application/json json;
application/mac-binhex40 hqx;
application/msword doc;
application/pdf pdf;
application/postscript ps eps ai;
application/rtf rtf;
application/vnd.apple.mpegurl m3u8;
application/vnd.google-earth.kml+xml kml;
application/vnd.google-earth.kmz kmz;
application/vnd.ms-excel xls;
application/vnd.ms-fontobject eot;
application/vnd.ms-powerpoint ppt;
application/vnd.oasis.opendocument.graphics odg;
application/vnd.oasis.opendocument.presentation odp;
application/vnd.oasis.opendocument.spreadsheet ods;
application/vnd.oasis.opendocument.text odt;
application/vnd.openxmlformats-officedocument.presentationml.presentation
pptx;
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
xlsx;
application/vnd.openxmlformats-officedocument.wordprocessingml.document
docx;
application/vnd.wap.wmlc wmlc;
application/x-7z-compressed 7z;
application/x-cocoa cco;
application/x-java-archive-diff jardiff;
application/x-java-jnlp-file jnlp;
application/x-makeself run;
application/x-perl pl pm;
application/x-pilot prc pdb;
application/x-rar-compressed rar;
application/x-redhat-package-manager rpm;
application/x-sea sea;
application/x-shockwave-flash swf;
application/x-stuffit sit;
application/x-tcl tcl tk;
application/x-x509-ca-cert der pem crt;
application/x-xpinstall xpi;
application/xhtml+xml xhtml;
application/xspf+xml xspf;
application/zip zip;
application/octet-stream bin exe dll;
application/octet-stream deb;
application/octet-stream dmg;
application/octet-stream iso img;
application/octet-stream msi msp msm;
audio/midi mid midi kar;
audio/mpeg mp3;
audio/ogg ogg;
audio/x-m4a m4a;
audio/x-realaudio ra;
video/3gpp 3gpp 3gp;
video/mp2t ts;
video/mp4 mp4;
video/mpeg mpeg mpg;
video/quicktime mov;
video/webm webm;
video/x-flv flv;
video/x-m4v m4v;
video/x-mng mng;
video/x-ms-asf asx asf;
video/x-ms-wmv wmv;
video/x-msvideo avi;
}
在配置文件完成后，我們直接運行 nginx 命令啟動我們的 nginx 服務(wù)（如下）：
# -c 后面跟著的是你的 nginx 配置文件路徑共屈，記得配置正確的路徑
nginx -s reload -c /Users/Macxdouble/project/myy/micro-front/deployed/nginx.conf
啟動完成后绑谣，打開瀏覽器 http://localhost:9999 查看效果（如下圖）：
這樣一來，我們的主應(yīng)用就啟動完成了拗引，接下來我們繼續(xù)配置我們的子應(yīng)用借宵。
搭建 HTTP 服務(wù)器 - 運行子應(yīng)用
子應(yīng)用和主應(yīng)用的 nginx 配置基本上是一致的，唯一不同的是子應(yīng)用需要配置允許跨域訪問寺擂。這是因為我們的微前端架構(gòu)需要通過 ajax 請求子應(yīng)用資源暇务，所以需要配置跨域，通過 同源策略 的限制怔软。
接下來我們配置子應(yīng)用的 nginx 配置垦细，我們四個子應(yīng)用需要新建 4 個 server（完整配置如下）：
worker_processes 1; # Nginx 進程數(shù)，一般設(shè)置為和 CPU 核數(shù)一樣
events {
worker_connections 1024; # 每個進程允許最大并發(fā)數(shù)
}
http {
include ./mime.types; # 文件擴展名與類型映射表
default_type application/octet-stream; # 默認文件類型
server {
set $root "/Users/Macxdouble/project/myy/micro-front/deployed"; # 設(shè)置靜態(tài)文件目錄的絕對路徑挡逼，該變量根據(jù)個人的項目配置有所不同
listen 9999; # 配置監(jiān)聽的端口
server_name localhost; # 配置的域名括改，目前是本地測試，所以直接使用 localhost
location / {
root $root/micro-app-main; # 網(wǎng)站根目錄家坎，這里選用主應(yīng)用構(gòu)建后的文件目錄
index index.html; # 默認首頁文件
try_files $uri $uri/ /index.html @rewrites; # 兼容 history 路由模式嘱能，找不到的文件直接重定向到 index.html
expires -1; # 首頁一般沒有強制緩存
add_header Cache-Control no-cache;
}
location @rewrites {
rewrite ^(.+)$ /index.html break; # 重定向規(guī)則
}
}
server {
set $root "/Users/Macxdouble/project/myy/micro-front/deployed"; # 設(shè)置靜態(tài)文件目錄的絕對路徑，該變量根據(jù)個人的項目配置有所不同
listen 10100; # 配置監(jiān)聽的端口虱疏，react 子應(yīng)用的端口號為 10100
server_name localhost; # 配置的域名惹骂，目前是本地測試，所以直接使用 localhost
location / {
root $root/micro-app-react; # 網(wǎng)站根目錄做瞪，這里選用 react 子應(yīng)用構(gòu)建后的文件目錄
index index.html; # 默認首頁文件
try_files $uri $uri/ /index.html @rewrites; # 兼容 history 路由模式对粪，找不到的文件直接重定向到 index.html
expires -1; # 首頁一般沒有強制緩存
add_header Cache-Control no-cache;
add_header "Access-Control-Allow-Origin" $http_origin; # 全局變量獲得當前請求origin，帶cookie的請求不支持*
add_header "Access-Control-Allow-Methods" "*"; # 允許請求方法
add_header "Access-Control-Allow-Headers" "*"; # 允許請求的 header
}
location @rewrites {
rewrite ^(.+)$ /index.html break; # 重定向規(guī)則
}
}
server {
set $root "/Users/Macxdouble/project/myy/micro-front/deployed"; # 設(shè)置靜態(tài)文件目錄的絕對路徑装蓬，該變量根據(jù)個人的項目配置有所不同
listen 10200; # 配置監(jiān)聽的端口著拭，vue 子應(yīng)用的端口號為 10200
server_name localhost; # 配置的域名，目前是本地測試牍帚，所以直接使用 localhost
location / {
root $root/micro-app-vue; # 網(wǎng)站根目錄儡遮，這里選用 vue 子應(yīng)用構(gòu)建后的文件目錄
index index.html; # 默認首頁文件
try_files $uri $uri/ /index.html @rewrites; # 兼容 history 路由模式，找不到的文件直接重定向到 index.html
expires -1; # 首頁一般沒有強制緩存
add_header Cache-Control no-cache;
add_header "Access-Control-Allow-Origin" $http_origin; # 全局變量獲得當前請求origin暗赶，帶cookie的請求不支持*
add_header "Access-Control-Allow-Methods" "*"; # 允許請求方法
add_header "Access-Control-Allow-Headers" "*"; # 允許請求的 header
}
location @rewrites {
rewrite ^(.+)$ /index.html break; # 重定向規(guī)則
}
}
server {
set $root "/Users/Macxdouble/project/myy/micro-front/deployed"; # 設(shè)置靜態(tài)文件目錄的絕對路徑鄙币，該變量根據(jù)個人的項目配置有所不同
listen 10300; # 配置監(jiān)聽的端口，angular 子應(yīng)用的端口號為 10300
server_name localhost; # 配置的域名蹂随，目前是本地測試爱榔，所以直接使用 localhost
location / {
root $root/micro-app-angular; # 網(wǎng)站根目錄，這里選用 angular 子應(yīng)用構(gòu)建后的文件目錄
index index.html; # 默認首頁文件
try_files $uri $uri/ /index.html @rewrites; # 兼容 history 路由模式糙及，找不到的文件直接重定向到 index.html
expires -1; # 首頁一般沒有強制緩存
add_header Cache-Control no-cache;
add_header "Access-Control-Allow-Origin" $http_origin; # 全局變量獲得當前請求origin详幽，帶cookie的請求不支持*
add_header "Access-Control-Allow-Methods" "*"; # 允許請求方法
add_header "Access-Control-Allow-Headers" "*"; # 允許請求的 header
}
location @rewrites {
rewrite ^(.+)$ /index.html break; # 重定向規(guī)則
}
}
server {
set $root "/Users/Macxdouble/project/myy/micro-front/deployed"; # 設(shè)置靜態(tài)文件目錄的絕對路徑，該變量根據(jù)個人的項目配置有所不同
listen 10400; # 配置監(jiān)聽的端口浸锨，static 子應(yīng)用的端口號為 10400
server_name localhost; # 配置的域名唇聘，目前是本地測試，所以直接使用 localhost
location / {
root $root/micro-app-static; # 網(wǎng)站根目錄柱搜，這里選用 static 子應(yīng)用構(gòu)建后的文件目錄
index index.html; # 默認首頁文件
try_files $uri $uri/ /index.html @rewrites; # 兼容 history 路由模式迟郎，找不到的文件直接重定向到 index.html
expires -1; # 首頁一般沒有強制緩存
add_header Cache-Control no-cache;
add_header "Access-Control-Allow-Origin" $http_origin; # 全局變量獲得當前請求origin，帶cookie的請求不支持*
add_header "Access-Control-Allow-Methods" "*"; # 允許請求方法
add_header "Access-Control-Allow-Headers" "*"; # 允許請求的 header
}
location @rewrites {
rewrite ^(.+)$ /index.html break; # 重定向規(guī)則
}
}
}
配置文件雖然看起來特別長聪蘸，但是大部分的配置都是大同小異的宪肖，比主應(yīng)用的配置只是多了一些跨域配置表制。
在配置完成后，我們需要重啟一下 nginx 服務(wù)控乾。
# -c 后面跟著的是你的 nginx 配置文件路徑么介，記得配置正確的路徑
nginx -s reload -c /Users/Macxdouble/project/myy/micro-front/deployed/nginx.conf
nginx 服務(wù)查看完成后，我們就可以打開瀏覽器 http://localhost:9999 查看我們的部署成果啦Ｍ珊狻（效果圖如下）
ok 啦壤短，nginx 服務(wù)部署大功告成！
注意注意慨仿，敲黑板：如果是需要把服務(wù)部署到真實服務(wù)器久脯，只需要把所有的
localhost都換成真實注冊的域名即可，其他配置都可以復(fù)用噢镰吆！
Caddy 服務(wù)器部署方案
在介紹完了 Nginx帘撰，我們將介紹如何使用 Caddy 完成微前端架構(gòu)的部署。
Caddy 的部署配置要比 Nginx 簡單很多万皿，對前端也比較友好骡和，推薦大家使用。
Tips: 開始搭建
HTTP服務(wù)之前相寇，確保你的9999慰于、10100、10200唤衫、10300婆赠、10400端口是空閑的。
nginx -s stop可以快速關(guān)閉nginx服務(wù)佳励。
搭建 HTTP 服務(wù)器 - 運行主應(yīng)用
我們需要先配置 Caddy 的配置文件休里，我們在 deployed 目錄下新建配置文件 Caddyfile，寫入下面的配置：
http://localhost:9999 {
root * ./micro-app-main # 網(wǎng)站根目錄赃承，這里選用主應(yīng)用構(gòu)建后的文件目錄
file_server # 啟用文件服務(wù)
try_files {path} ./index.html # 兼容 history 路由模式妙黍，找不到的文件直接重定向到 index.html
}
接下來我們使用 熱重載模式 運行 Caddy，在 deployed 目錄下運行命令：
# Caddy 會自動找到當前目錄的 Caddyfile 配置文件
# --watch 選項：當 Caddyfile 發(fā)生改變時瞧剖，Caddy 服務(wù)會自動重啟
caddy run --watch
caddy 運行成功后拭嫁，我們打開瀏覽器 http://localhost:9999 查看效果（如下圖）。
這樣一來抓于，我們的主應(yīng)用就啟動完成了做粤，接下來我們繼續(xù)配置我們的子應(yīng)用。
搭建 HTTP 服務(wù)器 - 運行子應(yīng)用
子應(yīng)用和主應(yīng)用的 nginx 配置基本上是一致的捉撮，唯一不同的是子應(yīng)用需要配置允許跨域訪問怕品。這是因為我們的微前端架構(gòu)需要通過 ajax 請求子應(yīng)用資源，所以需要配置跨域巾遭，通過 同源策略 的限制肉康。
接下來我們配置子應(yīng)用的 Caddy 配置闯估，我們四個子應(yīng)用需要配置（完整配置如下）：
http://localhost:9999 {
root * ./micro-app-main # 網(wǎng)站根目錄，這里選用主應(yīng)用構(gòu)建后的文件目錄
file_server # 啟用文件服務(wù)
try_files {path} ./index.html # 兼容 history 路由模式吼和，找不到的文件直接重定向到 index.html
}
http://localhost:10100 {
root * ./micro-app-react # 網(wǎng)站根目錄涨薪，這里選用 react 子應(yīng)用構(gòu)建后的文件目錄
file_server # 啟用文件服務(wù)
try_files {path} ./index.html # 兼容 history 路由模式，找不到的文件直接重定向到 index.html
header Access-Control-Allow-Origin * # 配置允許跨域請求的 Origin
header Access-Control-Allow-Headers * # 配置允許跨域請求的方法
header Access-Control-Allow-Methods * # 配置允許跨域請求的 header
}
http://localhost:10200 {
root * ./micro-app-vue # 網(wǎng)站根目錄纹安，這里選用 vue 子應(yīng)用構(gòu)建后的文件目錄
file_server # 啟用文件服務(wù)
try_files {path} ./index.html # 兼容 history 路由模式，找不到的文件直接重定向到 index.html
header Access-Control-Allow-Origin * # 配置允許跨域請求的 Origin
header Access-Control-Allow-Headers * # 配置允許跨域請求的方法
header Access-Control-Allow-Methods * # 配置允許跨域請求的 header
}
http://localhost:10300 {
root * ./micro-app-angular # 網(wǎng)站根目錄砂豌，這里選用 angular 子應(yīng)用構(gòu)建后的文件目錄
file_server # 啟用文件服務(wù)
try_files {path} ./index.html # 兼容 history 路由模式厢岂，找不到的文件直接重定向到 index.html
header Access-Control-Allow-Origin * # 配置允許跨域請求的 Origin
header Access-Control-Allow-Headers * # 配置允許跨域請求的方法
header Access-Control-Allow-Methods * # 配置允許跨域請求的 header
}
http://localhost:10400 {
root * ./micro-app-static # 網(wǎng)站根目錄，這里選用 static 子應(yīng)用構(gòu)建后的文件目錄
file_server # 啟用文件服務(wù)
try_files {path} ./index.html # 兼容 history 路由模式阳距，找不到的文件直接重定向到 index.html
header Access-Control-Allow-Origin * # 配置允許跨域請求的 Origin
header Access-Control-Allow-Headers * # 配置允許跨域請求的方法
header Access-Control-Allow-Methods * # 配置允許跨域請求的 header
}
Caddy 的配置文件比 Nginx 的要簡潔多了塔粒，此時 Caddy 服務(wù)將會自動重啟，我們直接打開瀏覽器 http://localhost:9999 查看效果即可（最終效果圖如下）筐摘。
ok 啦卒茬，Caddy 服務(wù)部署大功告成！
注意注意咖熟，敲黑板：如果是需要把服務(wù)部署到真實服務(wù)器圃酵，只需要把所有的
localhost+端口號都換成真實注冊的域名即可，其他配置都可以復(fù)用噢馍管！
總結(jié)
微前端服務(wù)的部署方案的話郭赐，這里只介紹最常用的 Nginx 和 Caddy 服務(wù)兩種。其中确沸，Nginx 方案是我們公司使用的生產(chǎn)方案捌锭，Caddy 是本文 Demo 案例方案。
前端人員如果能掌握上述兩種應(yīng)用部署方案罗捎，已經(jīng)足以完成一些簡單的運維工作观谦。
注意：應(yīng)用部署/服務(wù)器運維工作最好交給專業(yè)的運維人員來做，我們可以提供上述兩種方案供運維人員參考桨菜。
本文參考資料：
圖解跨域請求倒得、反向代理原理替蔬，對前端更友好的反向代理服務(wù)器 - Caddy
求賢若渴
明源云鏈前端團隊是個充滿激情的團隊，明源云也是對技術(shù)非常重視的公司屎暇。
我們有完善的福利：六險一金 +（豐厚）年終獎 + 帶薪休假 + 通訊補貼
我們的工作氛圍：彈性工作承桥，扁平結(jié)構(gòu)，崇尚以解決問題為核心根悼、簡單高效的互聯(lián)網(wǎng)文化凶异，鼓勵技術(shù)創(chuàng)新分享蜀撑，每年舉辦黑客馬拉松（最高獎 3W 獎金）、極客大賽剩彬、移動社群等技術(shù)性賽事
我們有人文關(guān)懷：花式下午茶（每周都有）酷麦、生日禮金、免費旅游喉恋、活動經(jīng)費沃饶、結(jié)婚禮金、免費體檢
我們還有豐富的業(yè)余社團活動：籃球轻黑、足球糊肤、瑜伽、羽毛球氓鄙、臺球馆揉、棋牌賽
我們招聘的崗位有：前端工程師、測試工程師抖拦、Java 工程師升酣、PHP 工程師
我們的 Base 有：深圳、武漢
心動了嗎态罪？如果你已經(jīng)做好準備噩茄，那么請投出你的簡歷到郵箱 lit31@mingyuanyun.com，明源云期待你的加入复颈！
