Azure Web 应用 Node.js 部署后返回 404

Question

过去几天我一直被这个问题困扰。我正在尝试将具有服务器端渲染的 nuxt 应用程序部署到 azure Web 应用程序，但是当部署完成时，应用程序返回 404。

这是我的 github 操作脚本：

name: Build and deploy Node.js app to Azure Web App - mercado-digital-staging

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: windows-latest

    steps:
    - uses: actions/checkout@v2

    - name: Set up Node.js version
      uses: actions/setup-node@v1
      with:
        node-version: '14.x'

    - name: npm install, build, and test
      run: |
        npm install
        npm run build --if-present
        npm run test --if-present

    - name: copy files
      run: |
        mkdir server
        mkdir server\.nuxt
        mkdir server\static
        Copy-Item -Path .\.nuxt\* -Destination .\server\.nuxt -Recurse -Force
        Copy-Item -Path .\static\* -Destination .\server\static -Recurse -Force
        Copy-Item -Path .\nuxt.config.js -Destination .\server -Force
        Copy-Item -Path .\package.json -Destination .\server -Force
        Copy-Item -Path .\package-lock.json -Destination .\server -Force
        Move-Item -Path .\static\web.config -Destination .\server\ -Force

    - name: Upload artifact for deployment job
      uses: actions/upload-artifact@v2
      with:
        name: node-app
        path: .\server

  deploy:
    runs-on: windows-latest
    needs: build
    environment:
      name: 'production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
    - name: Download artifact from build job
      uses: actions/download-artifact@v2
      with:
        name: node-app

    - name: npm install
      run: |
        npm uninstall nuxt
        npm install nuxt-start
        npm i --production

    - name: 'Deploy to Azure Web App'
      id: deploy-to-webapp
      uses: azure/webapps-deploy@v2
      with:
        app-name: 'mercado-digital-staging'
        slot-name: 'production'
        publish-profile: ${{ secrets.AzureAppService_PublishProfile_eb3443a52796493d9744aa0c55879c5b }}
        package: .\

我在网络应用程序中的 wwwroot：

web.confg

<configuration>
  <system.webServer>
    <!-- Visit https://azure.microsoft.com/en-us/blog/introduction-to-websockets-on-windows-azure-web-sites/ for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a Node.js site to be handled by the iisnode module -->
      <add name="iisnode" path=".nuxt/server" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^server\/debug[\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>

        <!-- All other URLs are mapped to the Node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="server"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in Node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />
    <iisnode nodeProcessCommandLine="npm start" watchedFiles="web.config;*.js" debuggingEnabled="false" />
    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled

      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
    -->
    <!--<iisnode watchedFiles="web.config;*.js"/>-->
    <staticContent><mimeMap fileExtension=".json" mimeType="application/json" /></staticContent>
  </system.webServer>
</configuration>

package.json

{
  "name": "mercado-digital",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt-start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "engines": {
    "node": ">=8.17",
    "npm": ">=6.13.4"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/vuetify": "^1.11.3",
    "core-js": "^3.9.1",
    "nuxt-start": "^2.15.7",
    "oidc-client": "^1.11.5"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/device": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.22.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.7.0"
  }
}

应用设置： WEBSITE_NODE_DEFAULT_VERSION：~14

应用的网址： https://mercado-digital-staging.azurewebsites.net/

有没有办法调试或获取启动日志？如果您还需要什么，请告诉我。提前感谢您的帮助！

Answer 1

我认为下面是错误的。

"start": "nuxt-start",

应该是

"start": "nuxt start",

另外，你的web.config文件，我看着有点奇怪，不知道能不能正常运行。如果可以，那就最好了。如果还是不行，可以参考之前正常工作的web.config文件格式进行调整。

You can download my web.config from github.