中部署

中部署

关注
发信
关注(28)粉丝(399)

如何在 azure(web app) 中部署 nuxt(nuxt.js)?(未找到模块)

本文介绍了如何在 azure(web app) 中部署 nuxt(nuxt.js)?(未找到模块)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

喂?留下一个问题.

我目前正在尝试使用 azure 中名为 web app 的资源部署 nuxt.

我在创建的 Web 应用程序资源中配置了 HOST 0.0.0.0.

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

2020-11-26T10:10:58.211257088Z: [信息] _____2020-11-26T10:10:58.211294589Z: [信息]/_ \ __________ ______________ ____2020-11-26T10:10:58.211335890Z: [信息]//_\ \___/|\_ __ \_/__ \2020-11-26T10:10:58.211339990Z: [信息]/|\//||/||\/\___/2020-11-26T10:10:58.211344790Z: [信息] \____|__/_____ \____/|__|\___ >2020-11-26T10:10:58.211348490Z: [信息] \/\/\/2020-11-26T10:10:58.211351790Z:[信息] A P S E R V I C E O N L I N U X2020-11-26T10:10:58.211354890Z:[信息]2020-11-26T10:10:58.211357890Z:[信息] 文档:http://aka.ms/webapp-linux2020-11-26T10:10:58.211360990Z:[信息] NodeJS 快速入门:https://aka.ms/node-qs2020-11-26T10:10:58.211364090Z:[信息] NodeJS 版本:v12.18.32020-11-26T10:10:58.211367190Z: [INFO] 注意:'/home' 之外的任何数据都不会持久化2020-11-26T10:10:58.211370390Z:[信息]2020-11-26T10:10:58.400862445Z: [INFO] 在/home/site/wwwroot/oryx-manifest.toml"中找不到构建清单文件2020-11-26T10:10:58.401292554Z: [INFO] 在清单中找不到操作 ID.正在生成操作 ID...2020-11-26T10:10:58.401303054Z:[信息] 构建操作 ID:47563387-a96d-4c70-8ba6-b5e6469440a92020-11-26T10:11:00.795887144Z: [INFO] 将输出脚本写入/opt/startup/startup.sh"2020-11-26T10:11:01.393471672Z: [信息] 运行 #!/bin/sh2020-11-26T10:11:01.398639871Z:[信息]2020-11-26T10:11:01.398667172Z: [INFO] # 进入源目录以确保脚本在用户期望的位置运行2020-11-26T10:11:01.398684372Z: [INFO] cd "/home/site/wwwroot"2020-11-26T10:11:01.403063957Z:[信息]2020-11-26T10:11:01.403124458Z: [INFO] 导出 NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH2020-11-26T10:11:01.403130958Z: [INFO] 如果 [ -z "$PORT";];然后2020-11-26T10:11:01.404638687Z: [INFO] 出口端口=80802020-11-26T10:11:01.404651687Z:[信息] fi2020-11-26T10:11:01.404656187Z:[信息]2020-11-26T10:11:01.414097569Z: [INFO] npm start2020-11-26T10:11:03.467639683Z:[错误] npm 信息，如果它以 ok 结尾就有效2020-11-26T10:11:03.468712604Z: [ERROR] npm info using [email protected]:11:03.476919062Z: [ERROR] npm info using [email protected]:11:04.226149815Z: [错误] npm info 生命周期 nuxt-template@~prestart: nuxt-template@2020-11-26T10:11:04.283394119Z:[错误] npm info生命周期nuxt-template@~start:nuxt-template@2020-11-26T10:11:04.284175634Z:[信息]2020-11-26T10:11:04.284189535Z: [信息] >nuxt-template@ start/home/site/wwwroot2020-11-26T10:11:04.284194735Z: [信息] >跨环境端口=8080 nuxt 开始2020-11-26T10:11:04.284198435Z:[信息]2020-11-26T10:11:04.424650044Z: [错误]/home/site/wwwroot/node_modules/.bin/cross-env: 1:/home/site/wwwroot/node_modules/.bin/cross-env: ../cross-env/src/bin/cross-env.js:未找到

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

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

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

{名称":nuxt-模板"，私人":真的，脚本":{开发":nuxt"，构建":nuxt 构建"，开始":cross-env PORT=8080 nuxt start"，开始:成功":节点./server/index.js"，生成":nuxt 生成"，lint:js":eslint --ext .js,.vue --ignore-path .gitignore.",lint":npm run lint:js"},依赖关系":{@nuxtjs/axios":^5.12.2"，consola":^2.15.0"，core-js":^3.6.5"，快递":^4.17.1"，nuxt":^2.14.6"，跨环境":^7.0.2"；},开发依赖":{@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"，更漂亮":^2.1.2"}}

  • git 操作工作流程

# Azure Web Apps Deploy 操作的文档:https://github.com/Azure/webapps-deploy# 更多适用于 Azure 的 GitHub 操作:https://github.com/Azure/actions名称:构建 Node.js 应用并将其部署到 Azure Web 应用 - vue-nuxt-test2上:推:分支机构:- 掌握环境:NODE_VERSION: '12.x'职位:构建和部署:运行:ubuntu-18.04脚步:- 用途:actions/checkout@master- 名称:设置 Node.js 版本用途:动作/设置节点@v1和:节点版本:${{ env.NODE_VERSION }}- 名称:npm 安装依赖项运行: npm install- 名称:构建运行: npm run build- 名称:部署到 Azure Web 应用程序"用途:azure/webapps-deploy@v2和:应用名称:'vue-nuxt-test2'插槽名称:'生产'发布配置文件:${{ secrets.AzureAppService_PublishProfile_195c716255634fe2b1f37a81b2014072 }}包裹: .
解决方案

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

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

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

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

在 package.json 中.

脚本":{开发":nuxt"，构建":nuxt 构建"，开始":新开始"，生成":nuxt 生成"},

在nuxt.config.js中.

服务器:{端口:process.env.PORT,//默认值:3000主机:'0.0.0.0'//默认值:本地主机},

然后你就可以部署它了.

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

Vue中cross env的使用

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 scriptI 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: .
解决方案

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

这篇关于如何在 azure(web app) 中部署 nuxt(nuxt.js)?(未找到模块)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 14:26
Powered by LMLPHP ©2024 中部署 0.036374