你知道，前端工程部署有哪些方式嘛？
我將其分為四個階段：手動部署、命令工具部署、docker映象部署、平臺化部署。
這幾個階段，越往後越複雜，越往後越友好，畢竟平臺化部署有備份還可回退，那是相當安全的。
手動部署
// 打包檔案，生產dist目標檔案
npm run build
將dist下的檔案使用 _FTP檔案傳輸工具 _，上傳到伺服器上去，就可以直接訪問最新檔案了。
前提：伺服器上已有web伺服器，類似nginx服務、Apache服務，服務代理已經啟動。
流程：本地build構建打包 ——> FTP檔案上傳 ——> 透過域名訪問最新檔案
命令工具部署
命令工具部署其實和 手動部署是一樣，只是簡化而已。
命令工具部署就是將本地build構建 和 FTP檔案上傳，直接透過程式來實現。例如我們透過gitlab的CI/CD工具 或 github action上傳前端檔案。
gitlab CI/CD或github action透過監聽master分支push操作，進行執行你的配置命令，下面我以github action配置作為例子：
// .github/workflows/main.yml
# name: deploy to aliyun
# on:
# push:
# branches:
# - master
# jobs:
# build:
# runs-on: ubuntu-latest
# steps:
# # 切換分支
# - name: Checkout
# uses: actions/checkout@master
# - name: work around permission issue
# run: git config --global --add safe.directory /github/workspace
# # 使用 node:10
# - name: use Node.js 10
# uses: actions/setup-node@v1
# with:
# node-version: 10
# # npm install 同時 build 打包
# - name: npm install and build
# run: |
# npm install
# npm run build
# env:
# CI: true
# # Deploy 上傳到阿里雲, secrets.ACCESS_TOKEN為配置token
# - name: Deploy aliyun
# uses: easingthemes/ssh-deploy@v2.0.7
# env:
# SSH_PRIVATE_KEY: ${{ secrets.ACCESS_TOKEN }}
# ARGS: "-avz --delete"
# SOURCE: "./docs/.vuepress/dist/"
# REMOTE_HOST: "47.111.149.160"
# REMOTE_USER: "root"
# TARGET: "/var/www/HerryLo.github.io"
具體細節可以參考下面的文章↓
前提：伺服器上已有web伺服器，類似nginx服務、Apache服務，服務代理已經啟動。
流程：git push程式碼到程式碼倉庫 ——> gitlab CI/CD或github action 依賴配置檔案打包並構建上傳 ——> 透過域名訪問最新檔案
Docker映象部署
docker部署是平臺化部署的基礎，算是命令工具部署，如果說便捷程度，其實**命令工具部署 和 docker部署 **差不多，但是它有個好處：docker映象可備份；
// 打包檔案，生產dist目標檔案
npm run build
打包構建之後，就可以透過docker構架映象啦，下面是docker映象的Dockerfile檔案和配置：
FROM node:latest
COPY package.json /
RUN npm i --registry=https://registry.npm.taobao.org
RUN npm run build
FROM nginx:latest
# 這裡的dist/目錄是你的專案打包後的檔案目錄
COPY ./dist/ /usr/share/nginx/html/
COPY ./nginx.conf /etc/nginx/conf.d/
EXPOSE 80
nginx配置檔案:
server {
listen 80 default_server;
server_name _;
location / {
root /usr/share/nginx/html/web;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# 介面代理示例
# location /api {
# proxy_pass http://xxx.com;
# proxy_set_header Host $host:$server_port;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_set_header Cookie $http_cookie;
# proxy_buffering off;
# proxy_cache off;
# }
}
之後 透過 docker build 、docker push 映象名 將映象打包並推到遠端倉庫（一般是自己公司專案的私庫），然後在伺服器上拉取更新最新的映象，然後將最新的映象啟動即可。
提示：docker 映象一般會直接把nginx服務打包在一起，所以不用再在伺服器上開啟單獨的服務，只需要將docker埠開放即可。當然，如果是為了統一管理埠，也是可以透過專門的代理服務管理。
流程：本地 build打包檔案** ——> **docker打包映象_ ——> 伺服器更新映象並開啟最新映象 ——> 透過域名訪問最新檔案_
具體細節可以參考下面的文章↓
平臺化部署
平臺化部署其實就是全流程： 命令工具部署+ docker映象的組合版。
只需要將程式碼push提交，之後透過網頁訪問構建打包平臺，例如：阿里雲效流水線 或 jekins打包構建 等平臺，可以透過點選按鈕，下一步下一步的方式，完成打包構建，映象上傳。
至於更新，我是使用rancher平臺來進行，服務的管理或更新，映象上傳完之後，可以在rancher平臺配置好相關的負載服務，剩下就只是點選更新按鈕就可以。
下面是以 阿里codeup流水線 + rancher作為流程示例：
提示：_阿里codeup流水線 或 jekins打包構建 就類似於docker映象打包，rancher部署就類似於我們將最新映象上傳到伺服器上，然後開啟服務。（rancher部署可能更加複雜，因為還涉及到k8s叢集知識）
流程：git push程式碼到程式碼倉庫 ——> 透過_codeup_流水線構建打包上傳映象 ——> rancher等平臺更新映象 ——> 透過域名訪問最新檔案
具體細節可以參考下面的文章↓
總結
前端應用部署變化到現在的階段，也是專案眾多不便於管理導致，實際的業務情況，進而推動部署方式的發展。
前端部署的流程每個公司都有一套自己的流程，學習它，適應它，就好了，沒有太多疑難問題。
使用工具沒有什麼難度，難度可能就是你用的不太熟。