你知道，前端工程部署有哪些方式嘛？

2023-01-12 16:41:21

我将其分为四个阶段：手动部署、命令工具部署、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"

具体细节可以参考下面的文章↓

真香！GitHub Action一键部署;

前提：服务器上已有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构建前端项目;

平台化部署

平台化部署其实就是全流程： 命令工具部署+ docker镜像的组合版。

只需要将代码push提交，之后通过网页访问构建打包平台，例如：阿里云效流水线或 jekins打包构建等平台，可以通过点击按钮，下一步下一步的方式，完成打包构建，镜像上传。

至于更新，我是使用rancher平台来进行，服务的管理或更新，镜像上传完之后，可以在rancher平台配置好相关的负载服务，剩下就只是点击更新按钮就可以。

下面是以阿里codeup流水线 + rancher作为流程示例：

提示：_阿里codeup流水线或 jekins打包构建就类似于docker镜像打包，rancher部署就类似于我们将新镜像上传到服务器上，然后开启服务。（rancher部署可能更加复杂，因为还涉及到k8s集群知识）

流程：git push代码到代码仓库 ——> 通过_codeup_流水线构建打包上传镜像 ——> rancher等平台更新镜像 ——> 通过域名访问新文件

具体细节可以参考下面的文章↓

知识扩展-Rancher前端服务发布

总结

前端应用部署变化到现在的阶段，也是项目众多不便于管理导致，实际的业务情况，进而推动部署方式的发展。
前端部署的流程每个公司都有一套自己的流程，学习它，适应它，就好了，没有太多疑难问题。

使用工具没有什么难度，难度可能就是你用的不太熟。

分享好友

分享这个小栈给你的朋友们，一起进步吧。

前端问题剖析

创建时间：2020-07-08 10:02:14

本小栈包含前端问题、云服务器、以及包含更多大厂面试问题汇总。

展开

订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅：虚拟交易，一经交易不退款；若特殊情况，可3日内客服咨询

• 专区发布评论属默认订阅所评论专区（除付费小栈外）

栈主、嘉宾

查看更多

llittle
栈主

小栈成员

查看更多

小雨滴
浮夸流沙
long_32
LCR_

	// .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"

	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

	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;
	# }
	}

手动部署

流程：本地build构建打包 ——> FTP文件上传 ——> 通过域名访问新文件

命令工具部署

流程：git push代码到代码仓库 ——> gitlab CI/CD或github action 依赖配置文件打包并构建上传 ——> 通过域名访问新文件

Docker镜像部署

流程：本地 build打包文件** ——> **docker打包镜像_ ——> 服务器更新镜像并开启新镜像 ——> 通过域名访问新文件_

平台化部署

流程：git push代码到代码仓库 ——> 通过_codeup_流水线构建打包上传镜像 ——> rancher等平台更新镜像 ——> 通过域名访问新文件

总结

栈主、嘉宾

小栈成员

流程：本地 build打包文件 ——> docker打包镜像_ ——> 服务器更新镜像并开启新镜像 ——> 通过域名访问新文件_