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

Question

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 [email protected]
2020-11-26T10:11:03.476919062Z: [ERROR]  npm info using [email protected]
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: .

Can you show your sever.js?

Mr Khan
– Mr Khan

2022-04-28 08:24:37 +00:00
Commented Apr 28, 2022 at 8:24 — Mr Khan
– Mr Khan, Commented Apr 28, 2022 at 8:24

buymeacoffee · Accepted Answer · 2020-12-02 02:57:54Z

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

answered Dec 2, 2020 at 2:57

buymeacoffee

22.6k2 gold badges23 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zero86 Over a year ago

Thank you for your kind answer. Modify the nuxt.config.js setting and the executable script in package.json and try again. Thank you.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related