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

Posted 2023-03-28

技术标签:

【中文标题】Azure Web 应用 Node.js 部署后返回 404【英文标题】：Azure web app Node.js returns 404 after deployment 【发布时间】：2021-09-11 02:17:04 【问题描述】：

过去几天我一直被这个问题困扰。我正在尝试将具有服务器端渲染的 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="publicREQUEST_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/

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

【问题讨论】：

你看过这个吗？ nuxtjs.org/docs/2.x/deployment/deployment-azure-portal 是的，先生，我添加了主机和环境应用程序设置，但没有成功@kissu 在构建或运行时某处没有任何日志？ 【参考方案1】：

我认为下面是错误的。