专栏首页云开发使用 GitLab CI 在云开发上部署React应用

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

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

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

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应用。

作者介绍

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

本文分享自微信公众号 - 腾讯云云开发(tcb2tcb),作者:钟炜达

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    腾讯云开发TCB
  • 如何用云开发打造“万人同屏”高并发实时互动小程序

    在发布会过程中,一个重要的环节就是跟随着活动的进展,每个环节都会有自己的定制互动。例如和平精英环节,会有和平精英专场掉落抽奖、和平精英闪现社区弹幕、议程也需要高...

    腾讯云开发TCB
  • 用小程序·云开发轻松构建二手书商城小程序丨实战

    使用组件开发效率会高很多,避免重复工作,同时可以参考部分组件的写法,还是有很多值得学习的地方的。

    腾讯云开发TCB
  • Linux 搭建 Jenkins

    Jenkins,是从Hudson fork出的一个开发分支,因与Oracle Hudson商标纠纷改名为Jenkins(详见),Jenkins是基于Java开发...

    阳光岛主
  • 通过 API 远程管理 Jenkins

    最近接到一个需求,需要对公司内部的Android性能测试平台的分支管理模块进行改造。

    DevOps时代
  • CentOS 7 下Jenkins安装部署教程

    Jenkins是一个开源的支持自动化构建、部署等任务的平台。基本上可以说是持续集成(CI)、持续发布(CD)不可或缺的工具。

    KenTalk
  • Stealth Falcon黑客组织无文件后门分析

    Stealth Falcon黑客组织,自2012年以来一直活跃,其主要目标是中东的政治活动家和记者。citizen lab机构在2016年发表了一份针对某一网络...

    FB客服
  • Python迭代器和生成器

    迭代器 (iterator): 如果一个对象同时有__iter__()和__next__()魔术方法的话,这个对象就可以称为是迭代器。__it...

    橙子探索测试
  • 腾讯广告全新定位“商业服务中台”,助推企业构筑全链数字化营销模型

    新冠疫情对线下商业的冲击,带来一场数字化能力“大考”,迫使各行业数字化转型的提速。为探索数字化变革的方向与路径,腾讯广告联合腾讯青腾大学与吴晓波频道,于6月29...

    曾响铃
  • 致广大 Jenkins 中文社区关注者的感谢信

    5月12日,公众号发布了一篇有关 Jenkins 备份与恢复的文章,其中分享了以下一段备份 Shell 脚本:

    LinuxSuRen

扫码关注云+社区

领取腾讯云代金券