教程 ｜ 手把手教你如何借助 Gitlab CI 将项目部署到云开发静态网站托管

JasminZhao
833 阅读4分钟

文章引自【腾讯云云开发】公众号

云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持。在过去的几个月中，越来越多的用户支持了静态托管能力，众多开发者也给予了越来越多的关注。

已有能力的不断优化，是云开发团队的使命。本文使用create-react-app创建了一个React应用，借助Gitlab CI向大家讲述将项目部署到云开发静态网站托管的过程。

作者介绍

钟炜达，任职于腾讯在线教育部IMWEB团队，是一名前端开发工程师。有丰富Web应用开发经验和在前端工程化方面有较多的实践。

GitLab中创建 test-cra 项目

到GitLab首页，点击NewProject创建新的工程

Project Name和Project Slug都填上test-cra，点击Create Project

创建web应用

在本地环境通过create-react-app创建了一个名为test-cra的项目

yarn create react-app test-cra

设置git相关设置，并上传应用到GitLab

cd test-cra
git init
# 这里需要注意username为你的gitlab账户名
git remote add origin git@gitlab.com:username/test-cra.git
git add .
git commit -m "Initial commit"
git push -u origin master

接下来到腾讯云中创建云开发环境

创建云开发环境

输入网址：console.cloud.tencent.com/tcb/env/ind…，如果没有授权会弹出以下画面。

点击访问管理，进入授权。

创建一个云开发环境。这里命名环境为test-cra。

设置SecretId和SecretKey

输入网址：console.cloud.tencent.com/cam/capi点击新建秘钥即可。

GitLab CI设置

SecretId和SecretKey属于敏感数据，不应该直接写到CI配置文件中。

回到刚刚创建的GitLab项目，找到Settings->CI/CD

找到Variables项如图新建3个key，SecretId、SecretKey和EnvId。并输入对应的value值。注意必须要开启protected和masked，这样能有效保证数据保密和安全。

在云开发面板中，找到环境设置中的环境ID。EnvId的value为环境ID

创建.gitlab-ci.yml配置文件

在本地工程_test-cra_的根目录中创建.gitlab-ci.yml文件

.gitlab-ci.yml配置文件如下，这里可查看更多的gitlab ci 配置

image: node:12.16.2
stages:
  - build
  - deploy

build:
  stage: build
  script:
    - npm i
    - npm run build
  artifacts:
    paths:
      - ./build/
  only:
    - maste

deploy:
  stage: deploy
  script:
    - cd ./build
    - npm i -g @cloudbase/cli
    - tcb login --apiKeyId $SecretId --apiKey $SecretKey
    - tcb hosting:deploy -e $EnvId
  only:
    - master
  • 使用node12的镜像作为基础环境
  • 整个CI流程有2个stage
  1. 构建阶段（build）：生成构建产物，并把构建产物进行存档（artifacts操作）
  2. 部署阶段（deploy）：
    1. 需要使用腾讯云提供的cli工具（@cloudbase/cli）
    2. 使用API秘钥直接登录，这里需要使用到上一步的SecretId和SecretKey环境变量
    3. 进入构建产物目录（这里为./build目录），执行全量部署。这里需要使用上一步的EnvId环境变量。

更多的tcb部署静态网站方法可以在：docs.cloudbase.net/cli/hosting…进行查看。

push到远程仓库触发构建

查看CI结果，显示upload成功。

打开console.cloud.tencent.com/tcb/hosting，选择设置，点击默认域名即可访问刚刚部署的web应用。

​

大功告成！

为了帮助开发者更好的使用静态托管，云开发为开发者提供了丰富的使用教程，你可以进入云开发社区官网查看具体教程。

一些常见用法如下：

what's more

最近云开发静态托管针对站长和新用户也推出了不同优惠的活动，可以查看这里：
网站托管9.9活动页：cloud.tencent.com/act/pro/wh9…
静态托管新用户活动页：cloud.tencent.com/act/pro/hos…

云开发（CloudBase）是云端一体化的后端云服务，采用 serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力极大的降低了应用开发的门槛。使用云开发可以快速构建完整的小程序/小游戏、H5、Web、移动 App 等应用。

产品文档：cloud.tencent.com/product/tcb

技术文档：cloudbase.net

技术交流加Q群：601134960

最新资讯关注微信公众号【腾讯云云开发】

☁ 更多精彩 扫描二维码了解更多

img

avatar
文章
阅读
粉丝