docker自动化部署前端项目实战一

docker自动化部署前端项目实战一

本文适用于个人项目，如博客、静态文档，不涉及后台数据交互，以部署文档为例。

思路

利用服务器node脚本，监听github仓库webhook push事件触发post请求，自动拉取最新代码，再用docker接管项目编译、部署。

环境

本文使用云服务器搭建，环境版本：

• OS：CentOS Linux release 8.2.2004
• docker：19.03.12
• node：14.5.0
• git：2.18.4

云服务器如果没有安装以下环境，需要安装。

• docker
• node
• pm2
• git

docker

# Step 1: 安装必要的一些系统工具
sudo yum install -y yum-utils
# Step 2: 添加软件源信息，使用阿里云镜像
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
# Step 3: 安装 docker-ce
sudo yum install docker-ce docker-ce-cli containerd.io
# Step 4: 开启 docker服务
sudo systemctl start docker
# Step 5: 运行 hello-world 项目
sudo docker run hello-world

不出意外，出现==hello world==，docker安装成功

git

从代码仓库拉取最新代码

yum install git

node

创建js脚本。使用nvm管理node版本，先安装nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

将nvm设置环境变量

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

通过 nvm 安装最新版 node

nvm install node

PM2

安装pm2，服务器后台运行js脚本

npm i pm2 -g

webhook

github 的 webhook 会在当前仓库触发某些事件时，发送一个 post 形式的 http 请求

创建webhook

进入github项目仓库，按下图顺序操作