云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持
本文使用了create-react-app
创建了一个 React 应用,并把该应用部署到腾讯云的静态网站托管。
钟炜达,任职于腾讯在线教育部 IMWEB 团队,是一名前端开发工程师。有丰富 Web 应用开发经验和在前端工程化方面有较多的实践。
到 GitLab 首页,点击NewProject
创建新的工程
Project Name
和Project Slug
都填上test-cra
,点击Create Project
在本地环境通过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
。
输入网址:https://console.cloud.tencent.com/cam/capi点击新建秘钥即可。
SecretId 和 SecretKey 属于敏感数据,不应该直接写到 CI 配置文件中。
回到刚刚创建的 GitLab 项目,找到 Settings->CI/CD
找到 Variables 项如图新建 3 个 key,SecretId、SecretKey 和 EnvId。并输入对应的 value 值。注意必须要开启protected
和masked
,这样能有效保证数据保密和安全。
在云开发面板中,找到环境设置中的环境 ID。EnvId 的 value 为环境 ID
在本地工程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
构建阶段(build):生成构建产物,并把构建产物进行存档(artifacts 操作)
部署阶段(deploy):
需要使用腾讯云提供的 cli 工具(@cloudbase/cli)
使用 API 秘钥直接登录,这里需要使用到上一步的SecretId
和SecretKey
环境变量
进入构建产物目录(这里为./build
目录),执行全量部署。这里需要使用上一步的EnvId
环境变量。
更多的tcb
部署静态网站方法可以在:http://docs.cloudbase.net/cli/hosting.html进行查看。
查看 CI 结果,显示 upload 成功。
打开https://console.cloud.tencent.com/tcb/hosting,选择设置,点击默认域名即可访问刚刚部署的 web 应用。
本文出自 布道师白宦成