Recently, I wrote a “personal blog system”, and the background is “Tencent Cloud Development CloudBase” + “Webify automatic deployment”. This article briefly records my experience of deploying personal blog using Webify.
1. Preparation
Firstly, push the code of personal blog system to “GitHub” or “Gitee” and other code hosting platforms, and register Tencent cloud account on “Cloud Development CloudBase” to open CloudBase service.
2. Create an application
To enter Webify, first add GitHub or Gitee authorization:
Select the repository where the code is stored and import it:
My personal blog system code was pushed to both GitHub and Gitee, and THEN I imported the code from the “Gitee” repository so that it would be more stable to trigger automatic deployment later.
After clicking “Import”, the application configuration page is displayed. The system detects that I am using the React scaffolding and automatically selects React.
Click Deploy Application.
In the dialog box that appears, select I know.
The application is then deployed for the first time. It takes three to five minutes to deploy successfully.
3. The deployment is successful
If you change the code locally, it will automatically trigger the deployment as long as you commit it to the bound Git repository.
4. Bind the domain name
After the first successful build of the application, you can see that the system automatically assigns us a domain name. Use this default domain name to access the blog page!
If you want to customize the domain name, it is also possible, but the domain name needs to be recorded.
Click Application List on the left to enter the newly created application. Click the link corresponding to Environment to enter the application console page of Cloud Development.
Click “Static page hosting” on the left. You can see that the static files for the React application are stored there.
Click “Basic Configuration” above to add the customized domain name. The customized domain name needs to be recorded and the SSL certificate needs to be uploaded:
After that, I need to add the corresponding operation in “Domain name resolution” as prompted. Because MY customized domain name is purchased in “Ali Cloud”, I need to add records in the domain name resolution page of Ali Cloud:
After a few minutes, the custom domain name takes effect and you can access the application using the custom domain name.
5. Some trampling records
1. React-router 404 is displayed after BrowserRouter is used
If your app was developed using React and BrowserRouter was used, you would get this problem (which I did anyway) and a 404, Not Found, would appear after refreshing the page.
Here I found two solutions:
(1) Use HashRouter
Instead of BrowserRouter, use HashRouter.
<HashRouter>
<App />
</HashRouter>
Copy the code(2) Add “Routing Configuration” for cloud development
Continue to use BrowserRouter, but Tencent Cloud CloudBase needs to make some Settings.
Click “Basic Configuration” in “Static Web Hosting” and add a redirection rule in “Route Configuration” as follows:
404Is redirected to /index.htmlCan solve the problem.
2. The application page remains the same after the deployment
Click “Basic Configuration” in “Static Web hosting” and set the cache time to 0 in “Node Cache Configuration” :
In “Browser Cache Configuration”, set the cache time to no cache (time 0) :
3. The React application fails to be deployed if there is a warning
When the React application is previewed locally, it works even with a warning. However, an error message is displayed during automatic deployment, causing deployment failures.
It is recommended that you modify the code to remove warnings if they occur during the local preview.
As an alternative, open the package.json file in the root directory of the React application:
Find the build under scripts and precede its value with CI=false&&.
For example, the original was:
"build": "react-app-rewired build"
Copy the codeChange it to:
"build": "CI=false&&react-app-rewired build"
Copy the code