Headless CMS 环境下 GitLab CI/CD 部署技巧

前言

Headless CMS（无头 CMS）是近年来流行起来的一种新型 CMS 架构，它与传统的 CMS 不同，它仅仅负责内容的管理和存储，而不涉及前端展示，因此可以做到更为灵活的内容管理。而 GitLab CI/CD 则是 GitLab 的持续集成和持续部署功能，可以将代码自动部署到指定的环境中。本文将介绍如何在 Headless CMS 环境下使用 GitLab CI/CD 进行持续部署。

准备工作

首先需要准备一些基础环境：

Headless CMS：本文将以 Strapi 为例进行演示，你也可以选择其他的 Headless CMS。
GitLab：需要在 GitLab 上创建一个项目，并开启 CI/CD 功能。
服务器：需要有一台服务器用于部署应用。

配置 GitLab CI/CD

在 GitLab 上创建项目并开启 CI/CD 功能后，需要在项目根目录下创建 .gitlab-ci.yml 文件，该文件用于配置 CI/CD 的流程。以下是一个简单的示例：

// javascriptcn.com 代码示例
image: node:12.16.1

stages:
  - build
  - deploy

cache:
  paths:
    - node_modules/

before_script:
  - npm install

build:
  stage: build
  script:
    - npm run build

deploy:
  stage: deploy
  script:
    - ssh user@server 'cd /path/to/app && git pull && npm install && pm2 restart app'
  only:
    - master

解释一下上述配置：

image：指定使用的 Docker 镜像，本示例使用的是 Node.js 12.16.1。
stages：定义流程的阶段，本示例定义了 build 和 deploy 两个阶段。
cache：定义需要缓存的文件路径，本示例缓存了 node_modules 目录，以加快构建速度。
before_script：定义在执行脚本之前需要执行的命令，本示例使用 npm install 安装依赖。
build：定义 build 阶段的脚本，本示例使用 npm run build 构建应用。
deploy：定义 deploy 阶段的脚本，本示例使用 SSH 登录到服务器并执行一些命令，包括拉取代码、安装依赖和重启应用。only 属性指定只有在 master 分支合并后才会执行该阶段。

部署 Strapi 应用

在配置好 GitLab CI/CD 后，需要将 Strapi 应用部署到服务器上。以下是一个简单的部署示例：

在服务器上安装 Node.js 和 MongoDB。
克隆 Strapi 项目到服务器上，并安装依赖：

git clone https://github.com/strapi/strapi.git
cd strapi
npm install

启动 Strapi 应用：

npm run start

访问 http://localhost:1337，如果能够正常访问，则说明 Strapi 应用已经成功部署到了服务器上。

配置 Strapi

在部署好 Strapi 应用后，需要进行一些配置才能让 Strapi 和 GitLab CI/CD 协同工作。以下是一些需要配置的内容：

在 Strapi 中创建一个管理员账号，并记录下账号和密码。
在 Strapi 中创建一个用于访问 API 的角色，并将该角色授予所有的权限。
在 Strapi 中创建一个用于访问 API 的用户，并将该用户添加到上一步创建的角色中。
在 Strapi 中创建一个用于访问 API 的应用，并将该应用绑定到上一步创建的用户中。记录下该应用的 ID 和密钥。

配置 GitLab CI/CD 和 Strapi 的环境变量

在部署好 Strapi 应用并完成了一些配置后，需要将相关信息配置到 GitLab CI/CD 和 Strapi 的环境变量中。以下是需要配置的环境变量：

GitLab CI/CD

SSH_PRIVATE_KEY：用于 SSH 登录到服务器的私钥。
SSH_KNOWN_HOSTS：用于 SSH 登录到服务器的知名主机。
SERVER_USER：用于 SSH 登录到服务器的用户名。
SERVER_HOST：服务器的 IP 或域名。
SERVER_PATH：应用在服务器上的路径。
STRAPI_ADMIN_USERNAME：Strapi 管理员账号的用户名。
STRAPI_ADMIN_PASSWORD：Strapi 管理员账号的密码。
STRAPI_API_ROLE_ID：用于访问 API 的角色的 ID。
STRAPI_API_USER_ID：用于访问 API 的用户的 ID。
STRAPI_API_APPLICATION_ID：用于访问 API 的应用的 ID。
STRAPI_API_APPLICATION_SECRET：用于访问 API 的应用的密钥。

Strapi

DATABASE_HOST：MongoDB 的 IP 或域名。
DATABASE_PORT：MongoDB 的端口。
DATABASE_NAME：MongoDB 数据库的名称。
DATABASE_USERNAME：MongoDB 的用户名。
DATABASE_PASSWORD：MongoDB 的密码。

编写前端代码

完成了所有的配置后，就可以开始编写前端代码了。以下是一个简单的示例代码：

// javascriptcn.com 代码示例
const axios = require('axios')

const API_URL = process.env.API_URL
const API_APPLICATION_ID = process.env.API_APPLICATION_ID
const API_APPLICATION_SECRET = process.env.API_APPLICATION_SECRET
const API_ROLE_ID = process.env.API_ROLE_ID
const API_USER_ID = process.env.API_USER_ID

async function main() {
  const token = await getAuthToken()
  const articles = await getArticles(token)
  console.log(articles)
}

async function getAuthToken() {
  const response = await axios.post(`${API_URL}/auth/local`, {
    identifier: process.env.STRAPI_ADMIN_USERNAME,
    password: process.env.STRAPI_ADMIN_PASSWORD,
  })
  return response.data.jwt
}

async function getArticles(token) {
  const response = await axios.get(`${API_URL}/articles`, {
    headers: {
      Authorization: `Bearer ${token}`,
      'X-Strapi-Application-Id': API_APPLICATION_ID,
      'X-Strapi-Access-Token': API_APPLICATION_SECRET,
      'X-Strapi-Role': API_ROLE_ID,
      'X-Strapi-User': API_USER_ID,
    },
  })
  return response.data
}

main().catch(console.error)

以上代码使用 axios 库访问 Strapi 的 API，并获取文章列表。需要注意的是，该代码中使用了环境变量 API_URL，需要在 GitLab CI/CD 中配置该变量。

总结

本文介绍了在 Headless CMS 环境下使用 GitLab CI/CD 进行持续部署的技巧，包括配置 GitLab CI/CD、部署 Strapi 应用、配置 Strapi 和 GitLab CI/CD 的环境变量以及编写前端代码。希望本文能够对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65587867d2f5e1655d2a56d5