Next.js rapid migration of applications to function calculation

m1.jpg

First introduced in several important concepts under article appears:

Function calculates (Function Compute): function computing is an event-driven service, by computing function, users need to manage the operation of the servers, just write code and upload. Function calculates ready to computing resources, and is elastically stretchable run user code, and users only need to pay according to the actual code that runs resources consumed. More information function calculation  reference .
Fun: Fun is a tool used to support Serverless application deployment, can help you easily manage function computing, API Gateway, logging services and other resources. It is through a resource configuration file (template.yml), help you develop, build, deploy operation. More Fun document  reference .

Note: This tip requires Fun version 3.7.0 or greater.

background

Next.js  service framework for React side rendering, and the high degree of integration Next.js, integrated frame itself webpack, babel, express the like, so that the developer can only rely Next, react, react-dom can be very easily the SSR React to build their own applications, developers do not even have to be as interested as before routing.
Next.js high level of integration, so we can easily implement the code segmentation, routing jumps, hot and update server-side rendering and front-end rendering.

Preparing the Environment

First, in accordance with the Fun of  installation documentation  method described in the Fun to install the machine.
PS: The method described in this article, does not require installation Docker, you can only install Fun, the easiest way is to directly download an executable binary file.
After installation is complete, you can perform Fun fun --version check whether the installation was successful.

Quick Start

  1. Next create a project here to nextjs example:
npm init next-app
  1. Into the sample project just created:
cd nextjs
  1. Local test run this example:
npm run dev 或者 yarn dev

Results are as follows:
20200313103411.jpg

  1. Compile nextjs items:
npm run build
  1. Deploy the project to function calculation:
    only need a command Fun Deploy , Fun will automatically enter the deployment process, in this process, users only need to press a series of press Enter. Process details are as follows:
1. Fun 检测到这不是一个 Fun 项目,会提示协助创建(直接回车或者输入 y 即可):
    ![20200313105720.jpg](https://intranetproxy.alipay.com/skylark/lark/0/2020/jpeg/200393/1584068254790-8f53c8aa-bcb5-4f91-9160-a028bbb9b13a.jpeg) 
2.     Fun 项目自动创建成功,提示是否进行部署?可以直接回车,或者输入 y 进行确认:
  ![20200313111040.jpg](https://intranetproxy.alipay.com/skylark/lark/0/2020/jpeg/200393/1584069057784-57021e01-287a-4169-9237-22a65984ced2.jpeg) 
3.  然后 Fun 会直接将应用部署到线上了。
    ![20200313111259.jpg](https://intranetproxy.alipay.com/skylark/lark/0/2020/jpeg/200393/1584069191767-2e544c50-a331-4dc3-9b45-f260f6447801.jpeg) 
部署完成后,我们可以根据部署成功的日志看到,函数计算为我们生成了临时域名 14069166-1986114430573743.test.functioncompute.com,我们可以通过这个临时域名直接访问我们刚刚部署的应用。
**注意:临时域名仅仅用作演示以及开发,是有时效的,如果用作生产,请绑定已经备案的域名,绑定自定义域名可以参考 [详情](https://statistics.functioncompute.com/?title=%E5%BF%AB%E9%80%9F%E8%BF%81%E7%A7%BB%20Next.js%20%E5%BA%94%E7%94%A8%E5%88%B0%E5%87%BD%E6%95%B0%E8%AE%A1%E7%AE%97&author=%E7%94%B0%E5%B0%8F%E5%8D%95&src=&url=https%3A%2F%2Fhelp.aliyun.com%2Fdocument_detail%2F90722.html)**

to sum up

This article describes how to deploy Next.js application to function calculation. Compared with the traditional deployment methods, not only it is more complicated, but also the purchase of machinery and other steps are omitted. Implementation, the traditional Next.js applied after the completion of the development of local, one-click deployment to the remote directly for the production, and has a resilient and elastic, pay by volume, operation and maintenance-free characteristics.

" Alibaba Cloud native concern micro service, Serverless, container, Service Mesh and other technical fields, focusing cloud native popular technology trends, cloud native large-scale landing practice, most do understand the developer's native cloud technology circles."

Original link
This article Yunqi community original content may not be reproduced without permission.

Released 2315 original articles · won praise 2024 · Views 1.41 million +

Guess you like

Origin blog.csdn.net/yunqiinsight/article/details/105097813