如何在 azure（Web 应用程序）中部署 nuxt（nuxt.js）？ （未找到模块）

Question

喂？留下一个问题。

我目前正在尝试使用 Azure 中称为 Web 应用的资源部署 nuxt。

我在创建的网络应用资源中配置了 HOST 0.0.0.0。

git 操作的结果是成功的。 如果通过 URL 连接并检查日志流，则会显示错误。

2020-11-26T10:10:58.211257088Z: [INFO]    _____
2020-11-26T10:10:58.211294589Z: [INFO]    /  _  \ __________ _________   ____
2020-11-26T10:10:58.211335890Z: [INFO]   /  /_\  \___   /  |  \_  __ \_/ __ \
2020-11-26T10:10:58.211339990Z: [INFO]  /    |    \/    /|  |  /|  | \/\  ___/
2020-11-26T10:10:58.211344790Z: [INFO]  \____|__  /_____ \____/ |__|    \___  >
2020-11-26T10:10:58.211348490Z: [INFO]          \/      \/                  \/
2020-11-26T10:10:58.211351790Z: [INFO]  A P P   S E R V I C E   O N   L I N U X
2020-11-26T10:10:58.211354890Z: [INFO]
2020-11-26T10:10:58.211357890Z: [INFO]  Documentation: http://aka.ms/webapp-linux
2020-11-26T10:10:58.211360990Z: [INFO]  NodeJS quickstart: https://aka.ms/node-qs
2020-11-26T10:10:58.211364090Z: [INFO]  NodeJS Version : v12.18.3
2020-11-26T10:10:58.211367190Z: [INFO]  Note: Any data outside '/home' is not persisted
2020-11-26T10:10:58.211370390Z: [INFO]
2020-11-26T10:10:58.400862445Z: [INFO]  Cound not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'
2020-11-26T10:10:58.401292554Z: [INFO]  Could not find operation ID in manifest. Generating an operation id...
2020-11-26T10:10:58.401303054Z: [INFO]  Build Operation ID: 47563387-a96d-4c70-8ba6-b5e6469440a9
2020-11-26T10:11:00.795887144Z: [INFO]  Writing output script to '/opt/startup/startup.sh'
2020-11-26T10:11:01.393471672Z: [INFO]  Running #!/bin/sh
2020-11-26T10:11:01.398639871Z: [INFO]
2020-11-26T10:11:01.398667172Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
2020-11-26T10:11:01.398684372Z: [INFO]  cd "/home/site/wwwroot"
2020-11-26T10:11:01.403063957Z: [INFO]
2020-11-26T10:11:01.403124458Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
2020-11-26T10:11:01.403130958Z: [INFO]  if [ -z "$PORT" ]; then
2020-11-26T10:11:01.404638687Z: [INFO]          export PORT=8080
2020-11-26T10:11:01.404651687Z: [INFO]  fi
2020-11-26T10:11:01.404656187Z: [INFO]
2020-11-26T10:11:01.414097569Z: [INFO]  npm start
2020-11-26T10:11:03.467639683Z: [ERROR]  npm info it worked if it ends with ok
2020-11-26T10:11:03.468712604Z: [ERROR]  npm info using npm@6.14.8
2020-11-26T10:11:03.476919062Z: [ERROR]  npm info using node@v12.18.3
2020-11-26T10:11:04.226149815Z: [ERROR]  npm info lifecycle nuxt-template@~prestart: nuxt-template@
2020-11-26T10:11:04.283394119Z: [ERROR]  npm info lifecycle nuxt-template@~start: nuxt-template@
2020-11-26T10:11:04.284175634Z: [INFO]
2020-11-26T10:11:04.284189535Z: [INFO]  > nuxt-template@ start /home/site/wwwroot
2020-11-26T10:11:04.284194735Z: [INFO]  > cross-env PORT=8080 nuxt start
2020-11-26T10:11:04.284198435Z: [INFO]
2020-11-26T10:11:04.424650044Z: [ERROR]  /home/site/wwwroot/node_modules/.bin/cross-env: 1: /home/site/wwwroot/node_modules/.bin/cross-env: ../cross-env/src/bin/cross-env.js: not found

检查那个错误， 在 npm 启动脚本中 我添加了 npm install && nuxt start 但仍然失败。

我已经好几天没能修复它了。我寻求帮助。

azure 目前正在免费试用期学习。

{
  "name": "nuxt-template",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "cross-env PORT=8080 nuxt start",
    "start:success": "node ./server/index.js",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.12.2",
    "consola": "^2.15.0",
    "core-js": "^3.6.5",
    "express": "^4.17.1",
    "nuxt": "^2.14.6",
    "cross-env": "^7.0.2"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^3.1.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.1.2"
  }
}

• git 操作工作流

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy Node.js app to Azure Web App - vue-nuxt-test2

on:
  push:
    branches:
      - master

env:
  NODE_VERSION: '12.x'

jobs:
  build-and-deploy:
    runs-on: ubuntu-18.04

    steps:
    - uses: actions/checkout@master

    - name: Set up Node.js version
      uses: actions/setup-node@v1
      with:
        node-version: ${{ env.NODE_VERSION }}

    - name : npm install dependencies
      run: npm install
      
    - name: build
      run: npm run build

    - name: 'Deploy to Azure Web App'
      uses: azure/webapps-deploy@v2
      with:
        app-name: 'vue-nuxt-test2'
        slot-name: 'production'
        publish-profile: ${{ secrets.AzureAppService_PublishProfile_195c716255634fe2b1f37a81b2014072 }}
        package: .

Answer 1

"start": "cross-env PORT=8080 nuxt start",

为什么要在package.json 文件中添加cross-env 命令？

首先要明确cross-env解决了什么问题，诞生了。主要解决windows下的环境变量问题。而你的webapp部署在linux下，目前的问题，经过我的尝试，我初步认为我们没有sudo权限，无法全局安装cross-env。

那么在azure中，只支持80和443这两个端口，cross-env PORT=8080 nuxt start，即使linux环境下存在cross-env的依赖，也会报错。因为不支持指定的端口8080。

所以只需删除cross-env PORT=8080 。

在package.json。

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
},

在nuxt.config.js。

server: {
    port:  process.env.PORT, // default: 3000
    host: '0.0.0.0' // default: localhost
},

然后你就可以部署它了。

有关cross-env的更多详细信息，请参阅此链接。

The use of cross env in Vue