Recently, I found that byte’s internal light service (light service – pre-era cloud service (qingfuwu.cn)) was open for testing, so I gave it a try, and sure enough, the development and deployment process was as smooth as silk. Therefore, I wrote this article to record the general flow of use.

Registration and Certification

Since the light service allows users to quickly set up a website under the domain name provided by the service, in effect helping users skip the process of filing a website, they need to authenticate their real names before using the site after registration. After the input of real-name information, the email informed me that the review would be completed in 3 days, but after the actual submission, I was authenticated in about 1 minute, which is very fast ~

Use cloud functions to quickly build Server services

Before building a Web site, we need to prepare several API services. Light service actually supports cloud engineering and cloud function to build Server services. Cloud engineering can be built through Koa or Express frameworks, as well

For convenience, we use the cloud function to construct, and write a very simple greeting service. The requestor enters the name, and the service will return “Hello ${name}” greeting field. The code is as follows:

After the code is written, click online and copy the call address to Postman to test the interface:

As you can see, the newly deployed cloud function service is able to return the correct greeting field based on the entered name. Successful deployment!

Use site hosting to launch a Web application

Create a new React app called React (reactjs.org).

After creating the React project using creation-react-app, install the Axios and ANTD packages, and partially modify the main code in the app.js file to add logic for interacting with the server:

function App() { const [name, setName] = useState(''); const [greeting, setGreeting] = useState(''); function onInputChange(e) { setName(e.target.value); } / * * * / function sends a request for the greeting results onGreeting () {axios. Post (' https://qcox9g.fn.thelarkcloud.com/greeting ', { name }).then(res => setGreeting(res.data && res.data.greeting)); } return (<div className="App"> <header className=" app-header "> <div className="greeting aread"> <p> <div  className="action"> <Input onChange={onInputChange} /> <Button onClick={onGreeting} disabled={! </Button> <div className="response"> {' Greeting from server: ${greeting}`} </div> </div> </header> </div> ); }Copy the code

After the local test is correct, run the yarn build command to package the yarn. If no modifications have been made to the configuration, the build folder should appear in the root directory after the packaging is complete, with the packaging artifacts in it. Zip the Build folder, then go to the Light Service page, go to the “Page Hosting” page, and select the compressed ZIP file to directly upload ~

After the upload is successful, the Web page is successfully deployed. You can directly access the page through the link provided in the popup window:

Conclusion:

This is the end of the basic process, but there is more room to explore in many steps. For example, in the development of larger projects, it is easier for teams to collaborate and manage code through Git + cloud engineering + automated scripts.

In general, light service does provide a less stressful and less costly solution for lightweight services such as the website, small blogs, etc