Docs

Code Pipeline

Best practices

Deploy React via a pipeline to TOS object storage

This article describes how to use the pipeline feature in Volcano Engine Code Pipeline (CP) to quickly deploy front-end applications to object storage TOS.

Prerequisites

The domain name has been registered and filed. For details, refer to Domain name registration and Domain name filing.

The React application has been brought under management in the code repository. In this example, Gitee is used as the repository.

The artifact repository workspace has been created. For details about operations, refer to create workspace.

Procedure

Step 1: Create object storage

Bucket policy: select Public read. Fill in other parameters based on your business requirements. For configuration details, refer to Create a bucket.

Log in to the created storage bucket, then go to basic configuration -> Create static network rules in the Static Network module. For details about Actions, refer to Setting up a static website.

configuration	Descriptions
Default homepage	Enter site address. This example is index.html.
The default 404 page	Enter site address. This example is index.html.

In Domain and Transfer -> Custom Domain Name, bind an ICP filed domain name to the bucket. For action details, refer to Set custom domain name.

Add DNS records for the domain in the Cloud DNS Console. For operation details, refer to add CNAME record.

Step 2: Create a pipeline

In the already created Code Pipeline workspace, create a code source and bring the React application code under management. For details about actions, refer to Create code source.

Create a blank template pipeline.

In the code source & trigger area, click Add -> Code Source. Add a managed code source.

Select the second pipeline node and reference the NodeJS compile and build task template.

In the Step area, click add -> artifact -> TOS upload.

Configure TOS upload parameters. For a detailed configuration description, refer to TOS upload.

Configuration Item	Descriptions
Step name	By default, uploads are made to TOS, and you can customize step names.
Source file path	Upload file/folder path. The starting position must be a path relative to the project folder; wildcards are not supported. This example is for build: upload the build folder.
The TOS file path	Directory uploaded to TOS Bucket If the target directory does not exist, a directory will be created. This example is for/. /: Upload to the root directory of the Bucket. demo/: Upload to the demo directory in Bucket. warning If you upload a single file, for example, a.txt. If b is entered, the file will be renamed to b and uploaded to the root directory under Bucket. If you enter b/, the file will be uploaded to the b directory under Bucket.
Bucket region	Select the Region where the bucket to be uploaded is located.
Bucket name	Select the target Bucket for upload.
Include relative parent directory on upload	Do you want to upload together with the relative parent directory? Yes: The upload will include the parent directory and all contents within the directory. No: The upload content does not include the parent directory; only all contents within the directory are included.
Skip on failure	Optional configuration. Turn on: If the current Step fails, it will be skipped directly. The remaining Steps in the current task can continue to execute, and the pipeline will also continue to run. Turn off: If the current step fails, the remaining steps of the current task will not be executed, and the pipeline will fail.

After modifications are complete, click Save, to finish creating,

Step 3: Run the pipeline

On the pipeline details page, click Execute now.

Actions result

In the TOS console, under the specified directory of a created bucket, view the uploaded files.

What to do next

Access React static pages

After deployment is complete, you can access the React static page through a custom domain name that has been registered and filed.

In the TOS console, view uploaded files in the specified directory of an already created bucket.

Obtain the custom domain name for static pages from the custom domain name list.

In the browser, enter custom domain + site address, and the React page will be displayed. For example https://cp-test-demo-*****/index.html.

Last updated: 2025.09.10 17:37:25