May 27, 2021 Web Cloud Development and Web Hosting Learning Guide
2. Create a test-cra project in GitLab
4. Create a cloud development environment
5. Set up SecretId and SecretKey
Cloud development static hosting is the ability to host static websites provided by cloud development, and the distribution of static resources (HTML, CSS, JavaScript, fonts, etc.) is supported by Tencent Cloud Object Storage COS and Tencent Cloud CDN with multiple edge outlets
This article
create-react-app
to create a React app and deploy the app to Tencent Cloud's static site hosting.
Zhong Weida, who works in tencent's online education department IMWEB team, is a front-end development engineer. Have rich experience in Web application development and have more practice in front-end engineering.
To the GitLab home page,
NewProject
create a new project
Project Name
and
Project Slug
are both filled in
test-cra
and click Create
Create Project
A project called
create-react-app
in the local environment
test-cra
yarn create react-app test-cra
Set git-related settings and upload apps to 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
Next, create a cloud development environment in Tencent Cloud
Enter THE URL: https://console.cloud.tencent.com/tcb/env/index, if not authorized, the following screen will pop up.
Click
访问管理
to access authorization.
Create a cloud development environment.
The environment is
test-cra
Enter the URL: https://console.cloud.tencent.com/cam/capi click on the new key.
SecretId and SecretKey are sensitive data and should not be written directly into the CI profile.
Go back to the GitLab project you just created and find Settings-C/CD
Find the Variables item and create three new keys, SecretId, SecretKey, and EnvId. a
nd enter the corresponding value of the value of the value.
Note that
protected
must
masked
to effectively keep your data confidential and secure.
In the cloud development panel, find the environment ID in the environment settings. EnvId's value is the environment ID
Create a ._test
.gitlab-ci.yml
cra_ the root of the local project-to-project
.gitlab-ci.yml
is below, and more
gitlab ci configurations can be found here
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
stage
SecretId
and SecretKey environment
SecretKey
go to the next step
./build
catalog) and perform a full deployment.
The
EnvId
environment variable from the next step is required here.
More
tcb
static
site methods can be
viewed http://docs.cloudbase.net/cli/hosting.html:
View ci results to show that upload succeeded.
Open https://console.cloud.tencent.com/tcb/hosting, select settings, and click on the default domain name to access the web app you just deployed.