This topic describes how to deploy a Nuxt.js application to Function Compute. Function Compute provides a method different from traditional deployment methods. You can deploy a traditional Nuxt.js application to Function Compute and use the application for production without performing operations such as purchasing a server. The deployed Nuxt.js application can use the auto scaling, pay-as-you-go, and O&M-free features of Function Compute.

Prerequisites

The following operations are complete:

Background information

Nuxt.js is a general application framework based on Vue.js. Nuxt.js abstracts away the client-server architecture and focuses on user interface rendering for applications. Nuxt.js has preset all the configurations required to develop server-side rendered (SSR) Vue.js applications. It provides a large number of useful features for the client-server application architecture, such as asynchronous data loading, middleware support, and layout support.

Procedure

  1. Run the following command to initialize a project:
    s init devsapp/start-nuxt -d start-nuxt
    The -d parameter specifies the project name. In this example, the project name is start-nuxt.
    Note Skip this step if the item exists.
    Sample command output:
     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. Run the following command to go to the project directory:
    cd start-nuxt
  3. Run the following command to deploy the project:
    s deploy
    Sample command output:
    [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

Result

After the project is deployed, you can view the temporary domain name generated by Function Compute in the execution output. The temporary domain name can be used to access the newly deployed application. For example, run the following command to access the application:

curl http://nuxt.serverless-devs-nuxt.188077086902****.cn-shenzhen.fc.devsapp.net
Note The temporary domain name is used only for demonstration and development purposes. It is valid for a limited period of time. You must use a domain name that has obtained an Internet Content Provider (ICP) filing from Alibaba Cloud for production. For more information, see Configure a custom domain name.