共计 2810 个字符，预计需要花费 8 分钟才能阅读完成。
我将其分为四个阶段：手动部署 、 命令工具部署 、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 镜像可备份；
上面是 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 80nginx 配置文件:
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 等平台更新镜像 ——> 通过域名拜访最新文件_
具体细节能够参考上面的文章↓
总结
前端利用部署变动到当初的阶段，也是我的项目泛滥不便于管理导致，理论的业务状况，进而推动部署形式的倒退。
前端部署的流程每个公司都有一套本人的流程，学习它，适应它，就好了，没有太多疑难问题。
应用工具没有什么难度，难度可能就是你用的不太熟。
你的点赞、珍藏是我的更新的能源！！
