spug配置前端自动化发布

发表于 更新于 分类于 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 5 分钟

spug配置前端自动化发布

1. 先ssh连接服务器

1
ssh root@服务器地址

2. 进入到登录用户系统目录下

1
cd ~

3. 创建一个名为spug的文件夹

1
mkdir spug

4. 创建docker-compose.yml

1
vi docker-compose.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
version: "3.3"
services:
  db:
    image: mariadb:10.8.2
    container_name: spug-db
    restart: always
    command: --port 3306 --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - /data/spug/mysql:/var/lib/mysql
    environment:
      - MYSQL_DATABASE=spug
      - MYSQL_USER=spug
      - MYSQL_PASSWORD=spug.cc
      - MYSQL_ROOT_PASSWORD=spug.cc
  spug:
    image: openspug/spug-service
    container_name: spug
    privileged: true
    restart: always
    volumes:
      - /data/spug/service:/data/spug
      - /data/spug/repos:/data/repos
    ports:
      # 如果80端口被占用可替换为其他端口，例如: - "8000:80"
      - "80:80"
    environment:
      - MYSQL_DATABASE=spug
      - MYSQL_USER=spug
      - MYSQL_PASSWORD=spug.cc
      - MYSQL_HOST=db
      - MYSQL_PORT=3306
    depends_on:
      - db

5. 创建docker-compose.yml

1
vi docker-compose.yml

6. 启动容器

1
docker compose up -d

7. 初始化spug

以下操作会创建一个用户名为 admin 密码为 123456 的管理员账户，可自行替换管理员账户/密码。

1
docker exec spug init_spug admin 123456

不出意外此时已经安装好spug了

8. 浏览器输入服务器ip地址加上面配置的端口号，用第7步设置的账户登录

此处有一个可能会有一个问题，浏览器输入服务器ip地址加上面配置的端口号会访问不到spug应用，这是因为服务器端口没打开，需要去服务器后台打开，比如阿里云的话就是在阿里云服务器后台去设置，此处不过多赘述

9. 应用配置

1.主机管理>添加主机

title text

2.环境管理>新建环境

title text

3.发布配置>新建应用>新建发布>常规发布

title text

4.配置发布信息

title text title text

1.文件过滤规则

1
dist

此处以前端vue项目为例子，因为项目build之后我们只需dist目录里的东西，所有只需要把包含dist的文件夹打包到目标主机

2.代码检出前执行

1
2
3
4
5
6
echo '代码检出前路径' # 控制台输出语句
env | grep SPUG # 打印spug的内置的全局变量
pwd # 打印当前所在目录位置
echo '创建公共node_modules目录'
mkdir -p $SPUG_REPOS_DIR/$SPUG_DEPLOY_ID/node_modules  # 创建公共node_modules目录
ls # 打印当前目录下的所有文件

作为前端项目免不了要处理项目依赖包的问题，依赖安装一般在 package.json 所在的目录（在本示例中即spug_web）中执行 npm install 或 yarn 来安装。这里使用了 全局环境变量 中的 SPUG_REPOS_DIR 和 SPUG_DEPLOY_ID 来切换到源码目录创建公共的 node_modules 目录，以后每次发布时都通过软链接的形式使用它来避免每次 发布都需要全量安装依赖包。

3.代码检出后执行

1
2
3
4
5
6
7
8
9
10
11
12
13
echo '代码检出后路径'
pwd
# 配置node环境变量
PATH=$PATH:/root/.nvm/versions/node/v16.14.0/bin
node -v
# 创建软链接，指向公共的node_modules,避免每次发布重复安装依赖包
ln -s $SPUG_REPOS_DIR/$SPUG_DEPLOY_ID/node_modules .
# 执行依赖安装
echo '执行依赖安装'
npm install
# 执行代码编译
echo '执行代码编译'
npm run build

在这里进行项目的依赖包安装和编译工作，该钩子中当前目录即为按发布申请中选择 Git 分支/版本 检出后的代码目录，我们需要先把上一步创建的公共 node_modules 目录链接到当前目录（这样可以避免每次都完整的执行npm install来重复安装依赖包），然后执行 npm build 来进行项目编译。

编译后也就生成了我们在 文件过滤 中设置的 spug_web/build 目录。

此处会遇到一个问题，因为代码检出后此时环境在spug docker容器中如果在容器外安装node此时会报 node command not found, 所以此时最好在容器里安装node，推荐使用nvm安装，nvm可以自由切换node版本

4.命令执行如下代码安装nvm

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

安装完配置一下nvm的环境变量

1
export NVM_DIR="$HOME/.nvm

输入如下命令验证nvm是否正确安装

1
nvm -v

5.通过nvm安装指定的node版本，此处可以输入自己要安装的版本

1
nvm install v16.14.0

输入如下命令验证node是否正确安装

1
node -v

5.应用发布前

1
2
3
4
5
6
7
echo '准备发布'
echo '应用发布前路径'
pwd
echo '应用构建完路径'
ls
mv dist/* .  # 调整目录结构，把编译结果放在项目根目录
rm -rf dist

由于我们设置的文件过滤规则 dist，所以传输到目标主机上文件结构也是 dist/xx，我们需要调整下目录结构， 让 dist 目录下内容放到项目的根目录中。

6.应用发布后

前端项目编译后就是纯静态的 html、js 和一些静态文件，这里一般就不需要额外的处理了。

点击提交这时候环境就已经配置好了，此时点击应用发布>发布申请>新建发布，就可以发布代码了

由于各个电脑系统不同，环境，目录也不同所以需要开发者根据自身项目进行调整