专栏首页小程序·云开发专栏打通GitLab CI/CD到腾讯云的静态网站托管
原创

打通GitLab CI/CD到腾讯云的静态网站托管

云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持

本文使用了create-react-app创建了一个React应用,并把该应用部署到腾讯云的静态网站托管。

作者介绍

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

GitLab中创建test-cra项目

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

Project NameProject 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

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

创建云开发环境

输入网址:https://console.cloud.tencent.com/tcb/env/index,如果没有授权会弹出以下画面。

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

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

设置SecretId和SecretKey

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

GitLab CI设置

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

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

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

在云开发面板中,找到环境设置中的环境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秘钥直接登录,这里需要使用到上一步的SecretIdSecretKey环境变量
    3. 进入构建产物目录(这里为./build目录),执行全量部署。这里需要使用上一步的EnvId环境变量。

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

push到远程仓库触发构建

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用 GitLab CI 在云开发上部署React应用

    云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾...

    腾讯云开发TCB
  • 云开发常用数据结构设计剖析丨云开发101

    在使用云开发进行产品开发的时候,我们常常需要思考,我们的应用的数据结构应该如何设计,今天我们来看一些在进行应用开发时常见的一些场景的数据结构,来帮助你更好的理解...

    腾讯云开发TCB
  • 如何在云开发Cloudbase中使用Redis?

    云开发 Cloudbase 是腾讯云为移动开发者提供的云原生一体化应用开发平台,可用于开发多种客户端,它帮助开发者统一构建和管理资源,免去了应用开发过程中繁琐的...

    腾讯云开发TCB
  • 科学瞎想系列之四十二 飞机为什么没有倒档

    看到这个题目宝宝们一定认为这确实是瞎想,是闲着没事吃多了撑得的瞎想,但这正是老师勤于思考的体现!有次老师和一个宝宝聊起此话题,他的回答很有创意,令老师脑洞大开...

    标准答案
  • Android系统编译流程详解(二)

    查看下device/google/marlin/vendorsetup.sh文件,可以看到:

    李小白是一只喵
  • SparkSQL内核解析之逻辑计划

    LogicalPlan的父类QueryPlan主要分为六个模块: – 输入输出 涉及QueryPlan内属性相关的输入输出 – 基本属性 QueryPlan内的...

    王知无
  • OpenStack实践(一):Ubuntu16.04下DevStack方式搭建p版OpenStack

    OpenStack部署方式很多,常见的个人部署方式有DevStack、Rdo、all-in-one、multi-node、multi-HA-node等;企业部署...

    loong576
  • Linux下 fio磁盘压测笔记

    参考博客: http://lilinji.blog.51cto.com/5441000/1569623

    二狗不要跑
  • 单细胞测序揭示皮肤伤口中成纤维细胞的异质性

    不知不觉在单细胞转录组领域做知识分析也快两年了,很幸运聚集了五个小伙伴携手共进,我们承诺不间断更新5个月,把我们这两年的学习成果全部掏出来给大家,包括5个栏目:

    生信技能树jimmy
  • 程序员修神之路--设计一套RPC框架并非易事

    可以这么说,http协议是基于TCP协议的,底层的数据传输可以说是利用的socket

    架构师修行之路

扫码关注云+社区

领取腾讯云代金券