How to deploy nuxt(nuxt.js) in azure(web app)? (not found module)

删除回忆录丶 提交于 2021-02-08 04:12:32

问题


Hello? Leave a question.

I am currently trying to deploy nuxt using a resource called web app in azure.

I configured HOST 0.0.0.0 in the created web app resource.

The result of the git action was successful. If you connect with the URL and check the log stream, an error is displayed.


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

Check that error, in the npm start script I added npm install && nuxt start but it still failed.

I haven't been able to fix it for several days. I seek help.

azure is currently learning with a free trial period.

{
  "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 action workflow
# 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: .

回答1:


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

Why you add cross-env command in package.json files?

First of all, we need to clarify what problem cross-env solves and was born. Mainly to solve the problem of environment variables under windows. And your webapp is deployed under linux, the current problems, after my attempts, I initially think that we do not have sudo permissions, can not install cross-env globally.

Then in azure, only ports 80 and 443 are supported, cross-env PORT=8080 nuxt start, even if the dependencies of cross-env exist in the linux environment, an error will be reported. Because the specified port 8080 is not supported.

So just remove cross-env PORT=8080 .

In package.json.

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

In nuxt.config.js.

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

Then you can deploy it.

For more details about cross-env, please refer to this link.

The use of cross env in Vue



来源:https://stackoverflow.com/questions/65019965/how-to-deploy-nuxtnuxt-js-in-azureweb-app-not-found-module

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!