前提

有自己的服务器
有已经备案的域名并且已经DNS解析到自己的服务器
开通了对象存储服务

1.创建Bucket并设置为静态网站

一定要设置共有读写

创建完成后进入储存桶设置为静态网站打开并保存记住这个访问节点后面要用

然后将自己的项目打包后的文件上传到根目录此时就可以通过上面的访问节点进行访问了

2.使用DNS解析域名到我们自己的域名下

一定要选择回源鉴权和静态网站源站然后记住CNAME 后面要用然后点击添加CDN服务授权

去DNS解析创建一个解析记录十分钟后就可以通过我们的域名来访问该网页了

3.服务器上启动gitlab-runner容器

交互运行gitlabrunner

先去/srv/gitlab-runner/config目录下建立config.toml文件两个端口是后端服务端口，可以不加

docker run -it --privileged -v /srv/gitlab-runner/config:/etc/gitlab-runner -v /var/run/docker.sock:/var/run/docker.sock -v gitlabcache/cache -v /projects:/projects gitlab/gitlab-runner

注册runner

去gitlab项目下的setting ci/cd下拿到url和token按照下图填写

设置runner变量

1.查看SecretId和SecretKey

2.下图分别是BUCKETADDRESS和BUCKETNAME

4.创建yml文件

在项目根目录下创建.gitlab-ci.yml文件并写入内容其中除了前端的node镜像还是用了python镜像是用于下载腾讯云的上传文件到cos和刷新URL(因为走了CDN)所以需要刷新url才可以更新页面

image: python:3.9

cache:
  key: blog
  paths:
    - node_modules
    - dist

stages:
  - build
  - deploy
  - refresh

build:
  image: node:18
  stage: build
  script:
    - yarn
    - echo install success
    - yarn build:test
    - echo build success
  only:
    - main

deploy:
  stage: deploy
  script:
    - pip install coscmd -U
    - echo coscmd install success
    - coscmd config -a ${SecretId} -s ${SecretKey} -b ${BUCKETNAME} -r ${BUCKETADDRESS}
    - coscmd delete -r -f  /
    - echo delete success
    - coscmd upload -r ./dist/ /
    - echo upload success
  only:
    - main

refresh:
  stage: refresh
  script:
    - pip install tccli
    - tccli configure set secretId ${SecretId} secretKey ${SecretKey} region ${BUCKETADDRESS}
    - tccli cdn PurgeUrlsCache --cli-unfold-argument --Urls 'http://blog.lioblog.cn/'
  only:
    - main

解释一下deploy步骤：

pip install coscmd -U 下载并更新coscmd(cos的命令行操作Bucket)
coscmd config -a ${SecretId} -s ${SecretKey} -b ${BUCKETNAME} -r ${BUCKETADDRESS}设置用户数据
coscmd delete -r -f / 删除桶下所有文件
coscmd upload -r ./dist/ /上传dist目录下所有文件到桶下

解释一下refresh步骤：

pip install tccli下载cmd操作工具
tccli configure set secretId ${SecretId} secretKey ${SecretKey} region ${BUCKETADDRESS}i 设置用户数据
tccli cdn PurgeUrlsCache --cli-unfold-argument --Urls 'http://dd.lioblog.cn/'刷新dd.lioblog.cn/这个url的cdn缓存

一些错误排查

页面404 排查一下储存桶根目录下有没有index.html

2. 出现500的错误的话检查一下第二步的回源鉴权和静态网站源站是否开启

gitlab-runner+docker+腾讯云cos+DNS自动化部署前端项目

前提