前置准备

一台性能尽可能强劲的服务器(如果只是单纯部署web项目，轻量应用服务器也无伤大雅）
一个可供部署的前端项目
ssh连接工具

安装nginx

使用ssh工具连接至目标服务器，运行如下命令

// 安装nginx
yum install nginx

// 开机自启nginx（可选）
systemctl enable nginx 

// 启动nginx
systemctl start nginx

配置nginx

安装docker

使用ssh工具连接至目标服务器
安装yum-utils
```
yum install -y yum-utils
```

添加yum仓库源

yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

安装最新的docker引擎和容器

yum install docker-ce docker-ce-cli containerd.io

启动docker并验证安装是否成功，docker --version显示版本号说明启动成功

// 启动docekr
systemctl start docker

// 查看docker版本，验证docker安装成功
docker --version

安装spug自动化部署平台

拉取 spug 镜像，这里建议拉取国内镜像

docker pull registry.aliyuncs.com/openspug/spug

检查镜像是否已经被成功拉取到本地
```
// 查看当前本地的docker镜像
docker images
```
结果如上图所示，说明镜像拉取成功

运行spug

docker run -d --restart=always --name=spug -p 8100:80 -v /spug:/data registry.aliyuncs.com/openspug/spug

8100为示例端口，部署时应根据实际情况修改端口号，请确认服务器控制台安全组中已经开启要映射的端口

命令	作用
-d	在后台运行容器并打印容器 ID
--restart=always	docker重启后自动启动该容器
--name=spug	设置容器别名为spug
-p	为容器映射端口
8100:80	服务器8100端口映射至容器80端口

初始化spug并设置admin登录账号
```
docker exec spug init_spug admin spug.dev
```
例：账号：admin，密码：spug.dev

重启spug容器

// 重启spug
docker restart spug

// 查看运行状态
docker ps -a

在 spug 容器内安装node环境

// 查看spug的镜像id
docker ps -a

// 进入到spug镜像中
docker exec -it [容器ID] /bin/bash

// 安装node
yum install nodejs
// 新版的yum nodejs包不再附带npm

// 安装npm
yum install npm

// 使用npm安装yarn（可选）
npm i yarn -g

// 检查是否安装成功
node -v
npm -v
yarn -v

进入spug平台浏览器输入服务器公网ip:端口即可进入

spug 配置

主机管理 => 新建 => 新建主机
配置中心 => 环境管理 => 新建环境
配置中心 => 应用配置 => 新建应用
发布配置 => 选择要发布的应用 => 新建发布 => 常规发布
基本配置
构建配置
- 文件过滤规则：提取打包后的文件/文件夹
- 代码检出后执行：成功拉取到最新代码后执行的脚本
- 配置完成后点击下一步
发布配置
- 部署路径：前端项目存放目录，应与nginx配置相同
- 存储路径：用于存储应用的历史版本
- 版本数量：存储的版本数量
- 发布前执行：此时还未进行文件变更，可进行一些发布前置操作
- 发布后执行：文件变更后执行的操作
- 配置完成后点击提交

手动新建发布

应用发布 => 发布申请 => 新建申请 => 发布
浏览器输入ip地址即可访问

spug快速实现前端自动化部署