Shulou(Shulou.com)06/01 Report--

This article is to share with you about how to quickly migrate Next.js applications to function computing, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

First of all, we will introduce several more important concepts that have emerged:

Function computing (Function Compute): function computing is an event-driven service. Through function calculation, users do not need to manage the operation of the server, but only need to write code and upload. The function calculation prepares the computing resources and runs the user code in an elastic way, while the user only needs to pay according to the resources consumed by the actual code.

Fun: Fun is a tool for supporting Serverless application deployment, which can help you easily manage resources such as function computing, API gateways, log services, and so on. It assists you in developing, building, and deploying operations through a resource configuration file (template.yml).

Note: the skills introduced by the editor require a Fun version greater than or equal to 3.7.0.

Background

Next.js is a server-side rendering framework for React, and Next.js is highly integrated. The framework itself integrates webpack, babel, express, etc., so that developers can easily build their own SSR React applications only by relying on Next, react and react-dom. Developers do not even have to care about routing as before.

The high degree of integration of Next.js makes it easy to implement code segmentation, route hopping, hot updates, server-side rendering and front-end rendering.

Environmental preparation

First install Fun on this machine as described in the Fun installation documentation.

The method introduced by the editor does not need to install Docker, just install Fun. The easiest way is to download executable binaries directly.

After the installation is complete, you can execute fun-version to check that the Fun installation is successful.

Quick start

To create a Next project, take nextjs as an example:

Npm init next-app

Go to the sample project you just created:

Cd nextjs

Run the test locally. The example:

Npm run dev or yarn dev

Compile the nextjs project:

Npm run build

Deploy the project to function calculation:

All you need is a command fun deploy,Fun to automatically enter the deployment process, in which the user only needs to press a series of enter. The process details are as follows:

Fun detects that this is not a Fun project and prompts you to help create it (enter directly or enter y)

The Fun project is automatically created successfully. Do you want to deploy it? You can enter directly, or enter y to confirm.

Then Fun will deploy the application directly online.

After the deployment is completed, according to the log of the successful deployment, we can see that the temporary domain name 14069166-1986114430573743.test.functioncompute.com has been generated for us by the function calculation, through which we can directly access the application we just deployed.

Note: the temporary domain name is only used for demonstration and development, it is time-limited. If it is used for production, please bind the domain name that has been registered.

This paper mainly introduces how to deploy Next.js application to function calculation. Compared with traditional deployment methods, it is not only no more complex, but also omits steps such as buying machines. To achieve, after the traditional Next.js application is developed locally, it can be deployed to the remote end directly for production, and has the characteristics of auto scaling, pay-per-use, operation and maintenance-free, and so on.

The above is how to quickly migrate Next.js to function calculation. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.