React is one of the most popular front-end frameworks. In addition to deploying it on your own server or Github Pages, you now have an option to deploy it using the cloud to develop static web sites.
Cloud development static website hosting support through the cloud development SDK call server resources such as: cloud function, cloud storage, cloud database, so as to expand the static website to the full stack website
Cloud development (CloudBase) is tencent cloud for developers to provide “one-stop” work style the back-end cloud services, it helps developers to build and manage resources, dispense with the mobile application development process trival server set up and operations, domain name registration and filing, data interface, such as complicated process, allowing developers to focus on the business logic implementation, Without the need to understand back-end logic and server operation and maintenance knowledge, the development threshold is lower, higher efficiency.
Whether Tencent cloud · cloud development users, or small program · cloud development users, as long as the payment by volume, you can enjoy cloud development static website hosting services.
System is dependent on
Before proceeding, make sure you have the Node.js runtime environment installed on your computer. If not, visit nodejs.org to download the installation.
Install the cloud development CLI tool and React scaffolding
After configuring the NodeJs environment, run the following commands to install the CLOUD development CLI tool and React scaffolding:
npm install -g @cloudbase/cli create-react-app
npx create-react-app reactdemo
Copy the codeInitialize a React project locally
The scaffold automatically installs the dependencies needed for the project, and when the installation is complete, you can see the following output
After the installation is complete, go to the project directory and start the local preview. After success, the project will run on the local port 3000
cd reactdemo
npm run start
Copy the code
Open localhost:3000 in the browser. The React interface is displayed. This indicates that the local development project has been successfully set up
Create a cloud development environment
Create a cloud development environment for deploying the React project. You can create a cloud development environment for deploying the React project from the wechat development tool, or from the Tencent cloud console
Go to the administrative console for cloud development and click New Environment, or use an existing environment to deploy
Create an environment or use an existing environment. Note that the billing mode must be set to pay-per-view, because only pay-per-view can open a static website
After opening the environment, there is an environment ID, which will be used later. Click the corresponding environment to enter the management page of the environment, click the static website in the menu bar, and open the static website service
If the following interface appears, it indicates that the service has been successfully opened.
Now we deploy the React project using the CLI of cloud development.
Initialize the cloud development CLI
After completing the configuration of the cloud development environment, you need to land on the cloud to develop the CLI, so that you can use the CLI to deploy (of course, you can also upload directly through the web).
On the command line, enter Cloudbase login
It will jump to the cloud Development console page for authorization,
After the authorization is confirmed, the following interface appears, proving that the login is successful. At the same time, there is a tip, that is, Cloudbase can use the shorthand command TCB
Package the React project and deploy it
Go back to the React project directory and run YARN Build to package the project. The React scaffolding will package the files into the build directory by default
After the package is complete, go to the directory after build and run the following command to deploy the package. Replace envID with your own envID
tcb hosting:deploy -e envId
Copy the codeOnce the deployment is complete, you can preview it
Online access
Click the default domain name and you can see that you have just deployed the React project. Because the default domain name is only used for testing, the downlink speed is limited to 10KB/S.
If you need to formally provide website services, it is best to bind the registered custom domain name.
conclusion
With just a few simple steps, you can deploy React generated SPA applications to the cloud without having to buy servers to deploy them, or deploy them at a snail’s pace on Github. Save on the cost of server purchases and get started?
One More Things
9.9 yuan package annual static website hosting service sponsorship plan, as long as the technical site can participate, click to read the original article, apply immediately!
The original address: cloud.tencent.com/product/wh
Cloud development official account: Tencent Yunyun Development
Cloud development technical document: Cloudbase.net
Cloud development technology exchange plus Q group: 601134960
Win more wonderful scan QR code to learn more
