如何将dumi部署到gitlab实操案例

这篇文章主要是记录如何将dumi项目部署到gitlab页面上，在自己部署的过程中，搜索出来的大多都是部署到github上的案例，唯独搜索不到如何在gitlab上部署，故有此文章。如果已经将前置条件准备好，可以直接阅读.gitlab-ci.yml配置

前期准备

创建gitlab仓库

注意点：

1. 仓库权限需选择public，要不然不能免费部署到gitlab
2. 不用勾选【Add a README file】，因为dumi的脚手架中自带README文件

搭建dumi项目

1. 克隆新建的远程gitlab仓库至本地
2. 按照官网文档安装dumi
3. 启动dumi

注意： 尽量选择react版本的，如果选择Vue 版本的，在构建时会卡在husk install阶段（目前不知道什么原因）

自动化部署

1. 配置流水线（可直接在本地配置也可以在gitlab-构建-流水线编辑器上配置）

image: node:18.18.2

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - .pnpm-store/  # pnpm 专用缓存目录
    - node_modules/

stages:
  - build
  - deploy

before_script:
  # 全局安装 pnpm
  - npm install -g pnpm@latest

build:
  stage: build
  script:
    - pnpm install --frozen-lockfile
    - pnpm docs:build
  artifacts:
    paths:
      - dist/

pages:
  stage: deploy
  dependencies:
    - build
  script:
    - mkdir -p public
    - cp -r dist/* public/
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == "main"
    - if: $CI_COMMIT_BRANCH == "master"

3. 修改dumi文件，配置路径 在dumi项目跟路径上寻找.dumirc.ts文件

import { defineConfig } from 'dumi';
export default defineConfig({
  outputPath: 'dist',
  themeConfig: {
    name: 'skillMap',
  },
  base:'/',
  publicPath: '/',
});

注意: base和publicPath必须要配置，不然打包完成后，找不到启动文件，outputPath: 'dist',可以根据需要自定决定运行 docs:build后打包文件名，此名称和yml文件要匹配

4. 直接上传 等待流水线打包完成
5. 访问项目URL（查看URL地址路径：部署-pages）

注意： 如果访问404，先确认一下安全性配置中，pages的相关配置（路径：通用-可见性-Pages）选择具有访问权限的任何人，

至此，就可以愉快的访问网站了！！！！！