本文使用 gitlab 官方仓库及 pages 服务，非自建 gitlab，同时也未使用自己的 runner。
react 等项目也是没问题的。不如说大多数前端项目都是可以的。
我之前用 vue-cli 创建了一个项目，用于展示自己的简历。之前有接触过 gitlab-ci，今天突然想到 gitlab 也有 pages 服务。如果把他们结合起来，那么我就可以节省一笔服务器费用。还可以水一篇文章。
vue-ci 是什么？简而言之就是在你 push 代码到仓库的时候，它可以根据你项目中的 .gitlab-ci.yml 文件来自动构建项目，然后部署到服务器中。
这样带来的好处就是不用自己在本地构建项目，然后打包成 zip 文件上传到服务器，再解压。我们只需要 git push 就完事了。
gitlab-pages 就跟 gitlab 的 pages 差不多，就是个静态站点服务器。我们可以把静态站点部署到 gitlab 的 pages 服务器上，然后通过 https://username.gitlab.io/projectName 来访问，或者绑定自定义的域名。
整篇文章分三步走，创建项目 -> 编写.gitlab-ci.yml -> 绑定自定义域名
创建项目
首先，在 gitlab 官网注册一个账号并登录，然后将语言设置为中文，可参考这篇文章(https://blog.csdn.net/wh2574021892/article/details/106062266/)。
然后创建一个空仓库，再把自己的项目上传到仓库中。仓库的公开性可以设置为私有，然后在仓库设置的通用设置中有一个pages的可见性设置，能设置成公开。
vue 项目中记得要创建一个 vue.config.js 文件，写入下面的代码：
module.exports = {
publicPath: ''
}
它的作用是表示项目打包后的资源文件引用目录，这里改成空字符串能让资源文件引用变成相对路径，更多详解的自己去查。
编写 .gitlab-ci.yml
接着在项目根目录创建一个 .gitlab-ci.yml 文件，写入如下代码：
image: node:latest
stages:
- build
- deploy
build:
stage: build
script:
- npm install
- npm run build
pages:
stage: deploy
script:
- rm -rf public
- mkdir public && cp -rf dist/* public
artifacts:
paths:
- public
expire_in: 30 days
cache:
paths:
- node_modules
- dist
关于 .gitlab-ci.yml 文件如何编写,可参考文章: https://scarletsky.github.io/2016/07/29/use-gitlab-ci-for-continuous-integration/#gitlab-ci-yml
当然也可以直接拿我这份去用，我这里只解释一些我写的，下面是带注释版
image: node:latest # 表示使用有 nodejs 环境的 docker，python等也有其他的 docker。
stages: # 定义阶段顺序
- build # 先 build
- deploy # 再部署
build: # 定义一个 job 叫 build
stage: build # 它属于 build 阶段
script: # 该 Job 要执行的命令行
- npm install # npm 安装项目依赖
- npm run build # build 项目
pages: # 定义一个 job 叫 pages，最后一个阶段一定要叫 pages，这样 gitlab-pages 才会开始工作
stage: deploy # 他属于 deploy 阶段
script: # 该 Job 要执行的命令行
- rm -rf public # 删除 public 目录及目录下的文件。
- mkdir public && cp -rf dist/* public # 创建一个 public 目录，并且把 build 结果 dist 下的文件复制到 public
artifacts: # 定义工件，在 jobs 执行完了后，gitlab-pages 会把工件目录下的文件自动部署到 pages 服务器中
paths: # 将项目中的文件夹定义为工件目录
- public # 要想部署到 pages 服务器中，这个文件夹必须叫 public ,所以前面一定要把打包结果复制到 public 文件夹
expire_in: 30 days # 工件有效期为 30 天，工件到期不会影响 pages
cache: # 定义缓存文件，从一个 job 到另一个 job ，除仓库外的文件都会被删除，然后把缓存文件复制到下一个 job
paths: # 定义缓存文件的路径
- node_modules # 这里要缓存 node_modules，在下一次触发 gitlab-ci 时，缓存会被还原，就不用重复安装依赖。
- dist # 同时把 build 阶段生成的 dist 文件夹也缓存起来，在 deploy 阶段会用到。
写好后，把他添加到 git ,然后提交，再 push。
打开项目，找到 CI/CD
image
就可以看到流水线的状态了，点已通过状态进去看看详情。
image
看到下面这个 job 通过了，就表示 pages 部署成功了。
这个时候再打开项目设置中的 pages 菜单
image
当看到图中 https://username.gitlab.io/projectName 这样的地址，就表示成功了。
绑定自定义域名
到这里其实是可选项了，因为服务已经启动起来了。如果你有域名，那就继续，没有域名就不用往下看了。
绑定新域名前，一定要确保默认的域名能够访问到 pages。否则会导致自定义域名的 https 证书创建失败。
先点击 pages 设置中的 新域名按钮来添加一个域名，在域名输入框中输入你要绑定的域名，我这里是 resume.jethro.fun 。
image
点击创建新域
然后会提示“此域名未经过验证。在启用访问权限之前，您需要验证所有权。”
我们先创建一个 DNS 解析，我是阿里云买的域名，所以去阿里云创建解析。
复制 pages 的 DNS 解析提示： resume.jethro.fun CNAME jethroH.gitlab.io.
image
按照提示，创建一个记录，类型为 CNAME ，主机记录为 resume.jethro.fun，记录值为 jethroH.gitlab.io
其他的保持默认即可。
然后来验证域名所有权，按照提示添加一个 TXT 记录
image
复制出来粘贴到记事本
_gitlab-pages-verification-code.resume.jethro.fun TXT gitlab-pages-verification-code=482bf2bc6050214ad1424b0cc7f54be0
TXT 前面的是域名，后面的是值：设置出来像这样：
image
到这里解析已经创建好了，点刷新按钮验证一下：
image
验证通过后保存修改，然后等几分钟创建HTTPS证书，创建好以后就可以通过自定义域名来访问你的 pages 啦！
下一步计划整一个 CDN 加速。
网友评论