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

前提条件

您已完成以下操作:

背景信息

Nuxt.js是一个基于Vue.js的通用应用框架。通过对客户端或服务端基础架构的抽象组织,主要关注的是应用的UI渲染。Nuxt.js预设了利用Vue.js开发服务端渲染的应用所需要的各种配置,为客户端或服务端这种典型的应用架构模式提供了很多有用的特性,例如异步数据加载、中间件支持和布局支持等。

操作步骤

  1. 执行以下命令初始化项目。
    s init devsapp/start-nuxt -d start-nuxt
    -d用于指定项目名称,本示例以项目名称start-nuxt为例,介绍如何将Nuxt.js迁移至函数计算。
    说明 若已存在该项目则跳过此步骤。
    输出示例:
     Serverless Awesome: https://github.com/Serverless-Devs/package-awesome
    
     File start-nuxt already exists, override this file ? No
     please select credential alias default
    
     Thanks for using Serverless-Devs
     You could [cd /test/start-nuxt] 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-nuxt
  3. 执行以下命令,部署项目。
    s deploy
    输出示例:
    [2021-08-30T14:44:15.126] [INFO ] [S-CLI] - Start ...
    [2021-08-30T14:44:15.136] [INFO ] [S-CLI] - Start the pre-action
    [2021-08-30T14:44:15.136] [INFO ] [S-CLI] - Action: npm install --production && npm run build
    npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
    npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
    npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
    npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
    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 fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
    npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
    npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    
    > core-js@2.6.12 postinstall /test/start-nuxt/node_modules/@nuxt/babel-preset-app/node_modules/core-js
    > node -e "try{require('./postinstall')}catch(e){}"
    
    Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
    
    The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
    > https://opencollective.com/core-js
    > https://www.patreon.com/zloirock
    
    Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
    
    
    > core-js@3.16.4 postinstall /test/start-nuxt/node_modules/core-js
    > node -e "try{require('./postinstall')}catch(e){}"
    
    Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
    
    The project needs your help! Please consider supporting of core-js:
    > https://opencollective.com/core-js
    > https://patreon.com/zloirock
    > https://paypal.me/zloirock
    > bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz
    
    Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
    
    
    > nuxt@2.15.8 postinstall /test/start-nuxt/node_modules/nuxt
    > opencollective || exit 0
    
    npm notice created a lockfile as package-lock.json. You should commit this file.
    npm WARN ws@7.5.4 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
    npm WARN ws@7.5.4 requires a peer of utf-8-validate@^5.0.2 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 1235 packages from 598 contributors in 23.172s
    
    96 packages are looking for funding
      run `npm fund` for details
    
    
    > start-nuxt@1.0.0 build /test/start-nuxt
    > nuxt build
    
    
      NuxtJS collects completely anonymous data about usage.                                             14:44:40
      This will help us improve Nuxt developer experience over time.
      Read more on https://git.io/nuxt-telemetry
    
    ? Are you interested in participating? Yes
    
      Production build                                                                                   14:45:18
      Bundling for server and client side                                                                14:45:18
      Target: server                                                                                     14:45:18
      Using components loader to optimize imports                                                        14:45:18
      Discovered Components: .nuxt/components/readme.md                                                  14:45:18
      Builder initialized                                                                                14:45:18
      Nuxt files generated                                                                               14:45:18
    
      Client
      Compiled successfully in 8.34s
    
      Server
      Compiled successfully in 705.28ms
    
    
    Hash: 98b96ef84de290aebf51
    Version: webpack 4.46.0
    Time: 8344ms
    Built at: 08/30/2021 2:45:28 PM
                             Asset       Size  Chunks                         Chunk Names
    ../server/client.manifest.json   8.29 KiB          [emitted]
                        16a680f.js    2.3 KiB       4  [emitted] [immutable]  runtime
                        2201e3d.js   53.5 KiB       0  [emitted] [immutable]  app
                        7312de9.js    199 KiB       1  [emitted] [immutable]  commons/app
                        757a892.js   3.04 KiB    3, 2  [emitted] [immutable]  pages/index
                        897c9ae.js   1.43 KiB       2  [emitted] [immutable]  components/logo
                          LICENSES  407 bytes          [emitted]
     + 2 hidden assets
    Entrypoint app = 16a680f.js 7312de9.js 2201e3d.js
    
    Hash: 35850c6832c4965ffd69
    Version: webpack 4.46.0
    Time: 706ms
    Built at: 08/30/2021 2:45:29 PM
                   Asset       Size  Chunks             Chunk Names
      components/logo.js    5.4 KiB       1  [emitted]  components/logo
          pages/index.js   11.5 KiB    2, 1  [emitted]  pages/index
               server.js   82.8 KiB       0  [emitted]  app
    server.manifest.json  307 bytes          [emitted]
     + 3 hidden assets
    Entrypoint app = server.js server.js.map
      Ready to run nuxt start                                                                            14:45:29
    [2021-08-30T14:45:31.519] [INFO ] [S-CLI] - End the pre-action
      devsapp!nuxt@0.0.12.zip file decompression completed
      devsapp_fc-default.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-30T14:45:47.918] [WARN ] [NUXT] - The startup file is not found, create a [start.sh] as the startup file.
      devsapp_web-framework.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.
      devsapp_domain.zip file decompression completed
    (node:9200) [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)
      End of request
      Deployed.
      End of request
      devsapp_fc-deploy.zip file decompression completed
      devsapp_stdout-formatter.zip file decompression completed
    [2021-08-30T14:46:24.367] [INFO ] [FC-DEPLOY] - Using region: cn-shenzhen
    [2021-08-30T14:46:24.368] [INFO ] [FC-DEPLOY] - Using access alias: default
    [2021-08-30T14:46:24.368] [INFO ] [FC-DEPLOY] - Using accessKeyID: 188077086902****
    [2021-08-30T14:46:24.369] [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.
      devsapp_fc-base-sdk.zip file decompression completed
      devsapp_fc-info.zip file decompression completed
    [2021-08-30T14:46:25.792] [INFO ] [FC-DEPLOY] - Checking Service serverless-devs-nuxt exists
    [2021-08-30T14:46:25.914] [INFO ] [FC-DEPLOY] - Setting role: AliyunFCDefaultRole
      devsapp_ram.zip file decompression completed
    [2021-08-30T14:46:26.674] [INFO ] [RAM] - Checking Role AliyunFCDefaultRole exists
    [2021-08-30T14:46:26.843] [INFO ] [RAM] - Updating role: AliyunFCDefaultRole
    [2021-08-30T14:46:26.928] [INFO ] [RAM] - Checking Plicy AliyunFCDefaultRolePolicy exists
    [2021-08-30T14:46:27.046] [INFO ] [FC-DEPLOY] - Using vpcConfig: auto: fc will try to generate related vpc resources automatically
      devsapp_vpc.zip file decompression completed
    [2021-08-30T14:46:27.962] [INFO ] [VPC] - Getting vpc: fc-deploy-component-generated-vpc-cn-shenzhen
    [2021-08-30T14:46:28.047] [INFO ] [VPC] - Getting vswitch: fc-deploy-component-generated-vswitch-cn-shenzhen
    [2021-08-30T14:46:28.187] [INFO ] [VPC] - Getting securityGroup: fc-deploy-component-generated-securityGroup-cn-shenzhen
    [2021-08-30T14:46:28.387] [INFO ] [FC-DEPLOY] - Generated vpcConfig:
    securityGroupId: sg-wz92ctigpi221smc****
    vSwitchId: vsw-wz9qnuult4q5g4f7n****
    vpcId: vpc-wz9x9bzs0wtvjgt6n****
    
    [2021-08-30T14:46:28.388] [INFO ] [FC-DEPLOY] - Using nasConfig: auto: fc will try to generate related nas file system automatically
      devsapp_nas.zip file decompression completed
    [2021-08-30T14:47:32.697] [INFO ] [FC-DEPLOY] - Generated nasConfig:
    groupId: 10003
    mountPoints:
      - fcDir: /mnt/auto
        nasDir: /serverless-devs-nuxt
        serverAddr: example.com
    userId: 10003
    
    [2021-08-30T14:47:32.721] [INFO ] [FC-DEPLOY] - Checking Function nuxt exists
    [2021-08-30T14:47:32.937] [WARN ] [FC-DEPLOY] - Image registry.cn-shenzhen.aliyuncs.com/web-framework/nodejs12:0.0.1 dose not exist locally.
    Maybe you need to run 's build' first if it dose not exist remotely.
    [2021-08-30T14:47:32.941] [INFO ] [FC-DEPLOY] - Checking Trigger serverless-devs-nuxt exists
    [2021-08-30T14:47:33.120] [INFO ] [FC-DEPLOY] - Checking Trigger serverless-devs-nuxt exists
    [2021-08-30T14:47:33.342] [INFO ] [FC-DEPLOY] - Creating service: serverless-devs-nuxt
    [2021-08-30T14:47:33.342] [INFO ] [FC-DEPLOY] - Creating function: nuxt
    [2021-08-30T14:47:33.342] [INFO ] [FC-DEPLOY] - Creating triggers: ["serverless-devs-nuxt"]
      Make service serverless-devs-nuxt success.
      Make function serverless-devs-nuxt/nuxt success.
      Make trigger serverless-devs-nuxt/nuxt/serverless-devs-nuxt success.
    [2021-08-30T14:47:35.982] [INFO ] [FC-DEPLOY] - Checking Service serverless-devs-nuxt exists
    [2021-08-30T14:47:36.093] [INFO ] [FC-DEPLOY] - Checking Function nuxt exists
    [2021-08-30T14:47:36.328] [INFO ] [FC-DEPLOY] - Checking Trigger serverless-devs-nuxt exists
    [2021-08-30T14:47:36.621] [INFO ] [FC-DEPLOY] - Creating custom domain: nuxt.serverless-devs-nuxt.188077086902****.cn-shenzhen.fc.devsapp.net
      devsapp_fc-domain.zip file decompression completed
    [2021-08-30T14:47:37.643] [INFO ] [FC-DOMAIN] - Creating custom domain: nuxt.serverless-devs-nuxt.188077086902****.cn-shenzhen.fc.devsapp.net
    
    There is auto config in the service: serverless-devs-nuxt
    [2021-08-30T14:47:38.295] [INFO ] [WEB-FRAMEWORK] - nas component get src is: .
    Packing ...
    file /test/start-nuxt/.s is ignored.
    Package complete.
       Start uploading file: /mnt/2bfb748534-tpm20-cn-shenzhen/serverless-devs-nuxt/nuxt/start-nuxt.zip
      File uploaded successfully: /mnt/2bfb748534-tpm20-cn-shenzhen/serverless-devs-nuxt/nuxt/start-nuxt.zip
      upload done
    [2021-08-30T14:50:47.636] [INFO ] [FC-NAS] - unzipping file
    [2021-08-30T14:51:40.520] [INFO ] [FC-NAS] - unzip done
      Try container acceleration
    framework-test:
      region: cn-shenzhen
      serviceName: serverless-devs-nuxt
      functionName: nuxt
      customDomains:
        - >-
          http://nuxt.serverless-devs-nuxt.188077086902****.cn-shenzhen.fc.devsapp.net

执行结果

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

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