Cloud Development Deploy React .js projects

Lead

React is one of the hottest front-end frameworks of the day, and in addition to being able to deploy on your own server, Github Pages, you now have a new option to deploy using the cloud to develop static site features.

Cloud development static site hosting supports the use of cloud development SDK to invoke service-side resources such as cloud functions, cloud storage, cloud databases, etc., thereby expanding static sites to full stack sites

CloudBase is a one-stop back-end cloud service provided by Tencent Cloud for developers, which helps developers build and manage resources in a unified way, eliminates the cumbersome server construction and operation, domain name registration and filing, data interface implementation and other cumbersome processes in the process of mobile application development, so that developers can focus on the implementation of business logic, without understanding back-end logic and server operation knowledge, the development threshold is lower and more efficient.

Whether it is Tencent cloud development users, or small program cloud development users, as long as the opening of pay-per-view, you can enjoy cloud development static website hosting services.

​

System dependency

Before you go on, make sure you have Node installed in your PC .js the environment. If it is not installed, you can nodejs.org download the installation.

Install cloud development cli tools and React scaffolding

Once the NodeJs environment is configured, perform the following commands to install the cloud development cli tool and react scaffolding:

npm install -g @cloudbase/cli
npx create-react-app reactdemo

Locally initialize a React project

During the process scaffolding automatically installs the relevant dependencies required in the project, and you can see the following output after installation

Once the installation is complete, go to the project directory, start the local preview, and when successful, the project will run on the local 3000 port

cd reactdemo
yarn start

Open the localhost:3000 in the browser and you can see the Real interface, which indicates that the project was successfully built locally

Create a cloud development environment

Create a cloud development environment for the deployment of Real projects, which can be created from WeChat development tools, or through the Tencent Cloud Console, where cloud development can be found in products, for example, from Tencent Cloud

Go to the cloud development management console, click New Environment, or deploy using an existing environment

Create a new environment, or use an environment you've created, note that billing here requires you to choose metered billing, because only metered accounting allows you to open static sites

After opening the environment, there is an environment ID, this ID will be used later, click on the corresponding environment to enter the environment management page, click on the static website in the menu bar, open static website services

The interface shown below indicates that it has been successfully opened.

Now let's complete the deployment of the React project with a cloud-developed CLI.

Initialize the cloud development CLI

Once the cloud development environment is configured, you need to log on to the cloud development cli for deployment with cli (or, of course, upload directly from the web side)

Enter it on the command line

will jump to the cloud development console page for authorization.

After confirming the authorization, the interface in the following image appears to prove that the login was successful, and there is a small tip, that is, cloudbase can use the short-case command tcb

Package react projects and deploy them

Back in the React project catalog to perform yarn build packaging of the project, react scaffolding will package the files into the build directory by default

Once packaged, the directory that goes into the build executes the following commands for deployment, and envID needs to be replaced with its own envID

cloudbase hosting:deploy -e envId

Once the deployment is complete, you're ready to preview

Online access

Go to the corresponding environment settings page, you can find the default domain name, click on the domain name, you can see that you have just deployed The act project, because the default domain name is for testing only, limit down the speed of 10KB/S.

If you need to formally provide website services to the outside world, it is best to bind a custom domain name that has been filed.

Summarize

With just a few simple steps, you can easily deploy React-generated SPA applications to cloud development without having to buy servers for deployment or the unbearable speed of deployment on Github! Save the cost of server purchases and don't act quickly?