Gitlab Pages 部署静态网站

• #gitlab

一、Gitlab Pages

Gitlab Pages 可以部署 Vue、React、Hexo、Umi、Dumi 等静态网站，这个过程不需要关心服务器、域名、https 证书这些琐事。

这些网站通常执行 npm run build 之后会生成一个静态目录（public/dist/build），里面是 html、js、css 等静态资源。

本文以 Dumi 为例介绍部署过程，其它框架类似。内容包含:

• 网站部署上线。通过 https 地址访问；
• 访问权限设置。公司项目不希望公网访问，可以设置访问权限，只允许项目成员访问网站；

二、网站部署

1. 创建项目

# 先找个地方建个空目录。
$ mkdir gitlab-pages-demo && cd gitlab-pages-demo

# 通过官方工具创建项目，选择第一个 Static Site 创建静态网站
$ npx create-dumi
? Pick template type › - Use arrow-keys. Return to submit.
❯   Static Site
    React Library
    Theme Package

# 安装依赖后启动项目
$ npm start

# 编译代码，生成产物目录默认为 dist 目录
$ npm run build

2. 配置 .gitlab-ci.yml

项目根目录下创建 .gitlab-ci.yml 文件，内容如下:

# 运行程序的 Docker 镜像，使用 nodejs 最新稳定版
image: node:lts

# 运行 Job 之前的脚本，安装依赖
before_script:
  - npm install

# Job 名称为 pages 是 Gitlab 约定的，不可修改
pages:
  script:
    # 编译代码，生成产物目录默认为 dist 目录
    - npm run build
    # 将 dist 目录名修改为 public
    - mv dist public
  artifacts:
    paths:
      - public
  rules:
    # main 分支有更新时自动部署静态网站
    - main

这里需要注意 Dumi 生成产物目录为 dist，而 Gitlab Pages 约定的静态目录是 public，所以需要将 dist 重命名为 public。而其它框架生成产物目录可能又不是 dist，需要根据实际情况相应修改。

3. 上传 Gitlab

Gitlab 上面创建项目 gitlab-pages-demo，将本地代码上传到 Gitlab。

$ git init
$ git commit -m "first commit"
$ git branch -M main
# 这里换成你自己的 gitlab 仓库地址
$ git remote add origin git@gitlab.com:dkvirus/gitlab-pages-demo.git
$ git push -u origin main

4. 查看运行状态

点击 Build > Pipelines，右边会看到两个 Job 都变成绿色，说明部署成功。

如果有 Job 变成红色，说明部署失败，定位原因然后重试。

5. 访问页面

点击 Deploy > Pages，右边会看到访问地址，点击访问即可。

三、访问权限设置

比如公司内部写了一个组件库，同事们需要查看组件文档，但是不希望公网访问，这时可以通过设置访问权限来限制访问。

点击 Settings > General。右边展开 Visibility，在下面找到 Pages 选项，可以修改所有人可见或者仅项目成员可见。操作完成后需要把页面往下拉，找到 Save changes 按钮点击下才会生效。

↶ 返回首页