本文介绍如何将Next.js应用部署到函数计算。与传统的部署方法相比,您可以跳过购买机器等步骤,将传统的Next.js应用一键部署至云端直接用于生产,并且拥有弹性伸缩、按量付费及免运维等特性。

前提条件

您已完成以下操作:
注意

本文介绍的如何使用Funcraft迁移传统框架的相关内容,后期将不再维护,建议您使用Serverless Devs迁移相关框架到函数计算。关于如何将函数计算的相关资源从Funcraft迁移到Serverless Devs进行管理的详细操作,请参见从Funcraft迁移到Serverless Devs

关于如何使用Serverless Devs迁移Web框架的详细操作,请参见使用Serverless Devs迁移Web框架

由此带来的不便,敬请谅解!

背景信息

Next.js是一种React的服务端渲染框架,集成度极高,框架自身集成了Webpack、Babel及Express等,使得开发者仅依赖Next、React及React-dom就可以非常方便地构建自己的SSR React应用,开发者甚至都不用关心路由。Next.js的高度集成性,易于实现代码分割、路由跳转、热更新以及服务端渲染和前端渲染。

操作步骤

  1. 在目标目录中创建Next.js项目。
    1. 执行以下命令。
      npm init next-app                    
      说明 若已存在Next.js项目则跳过该步骤。
    2. 在命令输出的过程中自定义项目名称,然后单击回车。本文以nextjs为例。
      输出示例:
      npx: installed 1 in 4.593s
      √ What is your project named? ... nextjs
      Creating a new Next.js app in C:\Users\test\Desktop\ggg\nextjs.
      
      Using npm.
      
      Installing dependencies:
      - react
      - react-dom
      - next
      
      npm notice created a lockfile as package-lock.json. You should commit this file.
      npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\chokidar\node_modules\fsevents):
      npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
      
      + next@10.2.2
      + react-dom@17.0.2
      + react@17.0.2
      added 269 packages from 225 contributors and audited 270 packages in 83.034s
      
      45 packages are looking for funding
        run `npm fund` for details
      
      found 0 vulnerabilities
      
      
      Success! Created nextjs at C:\Users\test\Desktop\ggg\nextjs
      Inside that directory, you can run several commands:
      
        npm run dev
          Starts the development server.
      
        npm run build
          Builds the app for production.
      
        npm start
          Runs the built app in production mode.
      
      We suggest that you begin by typing:
      
        cd nextjs
        npm run dev
  2. 执行以下命令进入刚创建的示例项目或已存在的项目。
    cd nextjs
  3. 执行以下命令运行本地项目。
    npm run dev           
    输出示例:
    > nextjs@0.1.0 dev C:\Users\test\Desktop\ggg\nextjs
    > next dev
    
    ready - started server on 0.0.0.0:3000, url: http://localhost:3000
    info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
    event - compiled successfully
    在浏览器中输入预期输出的http://localhost:3000,效果如下所示:pre-view
  4. 执行以下命令编译Next.js项目。
    npm run build            
    预期输出:
    > nextjs@0.1.0 build C:\Users\test\Desktop\ggg\nextjs
    > next build
    
    info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
    info  - Checking validity of types
    info  - Creating an optimized production build
    info  - Compiled successfully
    info  - Collecting page data
    info  - Generating static pages (3/3)
    info  - Finalizing page optimization
    
    Page                                Size     First Load JS
    ┌ ○ /                               5.86 kB        68.9 kB
    ├   └ css/115bd9a6a9ada811c579.css  665 B
    ├   /_app                           0 B              63 kB
    ├ ○ /404                            3.06 kB        66.1 kB
    └ λ /api/hello                      0 B              63 kB
    + First Load JS shared by all       63 kB
      ├ chunks/framework.64eb71.js      42 kB
      ├ chunks/main.899697.js           19.4 kB
      ├ chunks/pages/_app.968165.js     555 B
      ├ chunks/webpack.189c53.js        994 B
      └ css/fb7e07ce64500530d3fc.css    194 B
    
    λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
    ○  (Static)  automatically rendered as static HTML (uses no initial props)
    ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
       (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
  5. 执行以下命令将应用部署至函数计算。
    fun deploy -y

    部署成功后,您可以在日志中看到函数计算为您生成的临时域名,通过这个临时域名您可直接访问刚部署的应用。

    说明 临时域名仅用作演示以及开发,具有时效性。如需用作生产,请绑定已经在阿里云备案的域名。详细信息,请参见绑定自定义域名