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

前提条件

您已完成以下操作:

背景信息

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

操作步骤

  1. 在目标目录中创建Next.js项目。
    s init devsapp/start-next -d start-next
    -d用于指定项目名称,本示例以项目名称start-next为例,介绍如何将Next.js迁移到函数计算。
    说明 若已存在该项目则跳过此步骤。
    输出示例:
     Serverless Awesome: https://github.com/Serverless-Devs/package-awesome
    
     devsapp!start-next@0.0.11.zip file decompression completed
     Do you want to install dependencies? No
     please select credential alias default
    
         _   _           _     _
        | \ | |         | |   (_)
        |  \| | _____  _| |_   _ ___
        | . ` |/ _ \ \/ / __| | / __|
        | |\  |  __/>  <| |_ _| \__ \
        \_| \_/\___/_/\_\\__(_) |___/
                             _/ |
                            |__/
    
    
        Welcome to the start-next application
         This application requires to open these services:
             FC : https://fc.console.aliyun.com/
             ACR: https://cr.console.aliyun.com/
         This application can help you quickly deploy the Next project:
             Full yaml configuration: https://github.com/devsapp/next#%E5%AE%8C%E6%95%B4yaml
             Next development docs  : https://www.nextjs.cn/docs/getting-started
         This application homepage: https://github.com/devsapp/start-next
    
    
    ‍ Thanks for using Serverless-Devs
     You could [cd /test/start-next] and enjoy your serverless journey!
    ️ If you need help for this example, you can use [s -h] after you enter folder.
     Document Star:https://github.com/Serverless-Devs/Serverless-Devs
  2. 执行以下命令,进入项目目录:
    cd start-next
  3. 执行以下命令部署项目:
    s deploy
    输出示例:
    [2021-08-19T20:45:12.397] [INFO ] [S-CLI] - Start ...
    [2021-08-19T20:45:12.406] [INFO ] [S-CLI] - Start the pre-action
    [2021-08-19T20:45:12.406] [INFO ] [S-CLI] - Action: npm install --production && npm run build
    npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
    npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
    npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
    npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
    npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
    npm notice created a lockfile as package-lock.json. You should commit this file.
    npm WARN sass-loader@8.0.2 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN sass-loader@8.0.2 requires a peer of sass@^1.3.0 but none is installed. You must install peer dependencies yourself.
    npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
    
    added 648 packages from 264 contributors in 13.273s
    
    24 packages are looking for funding
      run `npm fund` for details
    
    
    > nextjs@0.1.0 build /test/next
    > next build
    
    Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
    Attention: Next.js now collects completely anonymous telemetry regarding usage.
    This information is used to shape Next.js' roadmap and prioritize features.
    You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
    https://nextjs.org/telemetry
    
    Creating an optimized production build
    
    Compiled successfully.
    
    Automatically optimizing pages
    
    Page                                                           Size     First Load JS
    ┌ O /                                                          7.85 kB          66 kB
    └ O /404                                                       3.14 kB        61.2 kB
    + First Load JS shared by all                                  58.1 kB
      ├ static/pages/_app.js                                       964 B
      ├ chunks/eed867e9744a00396030409be59f28a8a396bd67.5b8a03.js  10.4 kB
      ├ chunks/framework.0f140d.js                                 40 kB
      ├ runtime/main.5d5400.js                                     6.01 kB
      └ runtime/webpack.b65cab.js                                  746 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)
    
    [2021-08-19T20:45:35.633] [INFO ] [S-CLI] - End the pre-action
      devsapp!next@0.0.8.zip file decompression completed
     Using web framework type: nas, If you want to deploy with container, you can [s cli fc-default set web-framework container] to switch.
    [2021-08-19T20:45:50.093] [WARN ] [NEXT] - The startup file is not found, create a [start.sh] as the startup file.
     Using web framework type: nas, If you want to deploy with container, you can [s cli fc-default set web-framework container] to switch.
    [2021-08-19T20:45:51.372] [INFO ] [WEB-FRAMEWORK] - The configuration of the domain name is not detected, and a temporary domain name is generated.
      End of request
      Deployed.
      End of request
    (node:27410) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
    (Use `node --trace-deprecation ...` to show where the warning was created)
    [2021-08-19T20:45:58.511] [INFO ] [FC-DEPLOY] - Using region: cn-shenzhen
    [2021-08-19T20:45:58.512] [INFO ] [FC-DEPLOY] - Using access alias: default
    [2021-08-19T20:45:58.513] [INFO ] [FC-DEPLOY] - Using accessKeyID: 188077086902****
    [2021-08-19T20:45:58.513] [INFO ] [FC-DEPLOY] - Using accessKeySecret: ldHUiJLoGto****
     Using fc deploy type: sdk, If you want to deploy with pulumi, you can [s cli fc-default set deploy-type pulumi] to switch.
    [2021-08-19T20:45:59.871] [INFO ] [FC-DEPLOY] - Checking Service serverless-devs-next exists
    [2021-08-19T20:46:00.079] [INFO ] [FC-DEPLOY] - Setting role: fcDeployDefaultRole-serverless-devs-next
    [2021-08-19T20:46:00.549] [INFO ] [RAM] - Checking Role fcDeployDefaultRole-serverless-devs-next exists
    [2021-08-19T20:46:00.732] [INFO ] [RAM] - Updating role: fcDeployDefaultRole-serverless-devs-next
    [2021-08-19T20:46:00.830] [INFO ] [RAM] - Checking Plicy AliyunECSNetworkInterfaceManagementAccess exists
    [2021-08-19T20:46:00.904] [INFO ] [RAM] - Checking Plicy AliyunContainerRegistryReadOnlyAccess exists
    [2021-08-19T20:46:01.023] [INFO ] [FC-DEPLOY] - Using vpcConfig: auto: fc will try to generate related vpc resources automatically
    [2021-08-19T20:46:02.992] [INFO ] [VPC] - Getting vpc: fc-deploy-component-generated-vpc-cn-shenzhen
    [2021-08-19T20:46:03.119] [INFO ] [VPC] - Getting vswitch: fc-deploy-component-generated-vswitch-cn-shenzhen
    [2021-08-19T20:46:03.264] [INFO ] [VPC] - Getting securityGroup: fc-deploy-component-generated-securityGroup-cn-shenzhen
    [2021-08-19T20:46:03.449] [INFO ] [FC-DEPLOY] - Generated vpcConfig:
    securityGroupId: sg-wz92ctigpi221smc****
    vSwitchId: vsw-wz9qnuult4q5g4f7n****
    vpcId: vpc-wz9x9bzs0wtvjgt6n****
    
    [2021-08-19T20:46:03.449] [INFO ] [FC-DEPLOY] - Using nasConfig: auto: fc will try to generate related nas file system automatically
      upload done
    [2021-08-19T20:46:30.505] [INFO ] [FC-DEPLOY] - Generated nasConfig:
    groupId: 10003
    mountPoints:
      - fcDir: /mnt/auto
        nasDir: /serverless-devs-next
        serverAddr: example.com
    userId: 10003
    
    [2021-08-19T20:46:30.559] [INFO ] [FC-DEPLOY] - Checking Function next exists
    [2021-08-19T20:46:31.014] [INFO ] [FC-DEPLOY] - Checking Trigger serverless-devs-next exists
    [2021-08-19T20:46:31.526] [INFO ] [FC-DEPLOY] - Checking Trigger serverless-devs-next exists
    [2021-08-19T20:46:31.763] [INFO ] [FC-DEPLOY] - Creating service: serverless-devs-next
    [2021-08-19T20:46:31.764] [INFO ] [FC-DEPLOY] - Creating function: next
    [2021-08-19T20:46:31.764] [INFO ] [FC-DEPLOY] - Creating triggers: ["serverless-devs-next"]
      Make service serverless-devs-next success.
      Make function serverless-devs-next/next success.
      Make trigger serverless-devs-next/next/serverless-devs-next success.
    [2021-08-19T20:46:35.350] [INFO ] [FC-DEPLOY] - Checking Service serverless-devs-next exists
    [2021-08-19T20:46:35.962] [INFO ] [FC-DEPLOY] - Checking Function next exists
    [2021-08-19T20:46:36.399] [INFO ] [FC-DEPLOY] - Checking Trigger serverless-devs-next exists
    [2021-08-19T20:46:36.599] [INFO ] [FC-DEPLOY] - Creating custom domain: next.serverless-devs-next.188077086902****.cn-shenzhen.fc.devsapp.net
    [2021-08-19T20:46:38.270] [INFO ] [FC-DOMAIN] - Creating custom domain: next.serverless-devs-next.188077086902****.cn-shenzhen.fc.devsapp.net
    
    There is auto config in the service: serverless-devs-next
    [2021-08-19T20:46:38.398] [INFO ] [WEB-FRAMEWORK] - nas component get src is: .
      upload done
    Packing ...
    file /test/next/.s/zip is ignored.
    Package complete.
      Start uploading file: /mnt/2bfb748534-tpm20-cn-shenzhen/serverless-devs-next/next/next.zip
      File uploaded successfully: /mnt/2bfb748534-tpm20-cn-shenzhen/serverless-devs-next/next/next.zip
      upload done
    [2021-08-19T20:48:20.713] [INFO ] [FC-NAS] - unzipping file
    [2021-08-19T20:48:54.372] [INFO ] [FC-NAS] - unzip done
      Try container acceleration
    function-test:
      region: cn-shenzhen
      serviceName: serverless-devs-next
      functionName: next
      customDomains:
        - >-
          http://next.serverless-devs-next.188077086902****.cn-shenzhen.fc.devsapp.net

执行结果

成功部署该项目后,您可以在执行输出中查看到函数计算生成的临时域名,通过该临时域名可以访问刚部署的应用,例如执行以下命令访问应用:

http://next.serverless-devs-next.188077086902****.cn-shenzhen.fc.devsapp.net
说明 临时域名仅用作演示以及开发,具有时效性。如需用作生产,请绑定已经在阿里云备案的域名。详细信息,请参见绑定自定义域名