Azure 上的下一个 JS 部署 - 虚拟路径

Question

我对 NextJS 非常陌生，正在将我的第一个应用程序部署到 Azure 上。虽然部署成功，但我无法加载网站。我收到大量 JS、CSS 和图像文件的 404 错误。

静态文件的路径似乎是指“_next/static”，但“_next”目录尚未部署。我正在复制我的 yml 和 nextJS.config 文件。

另外，Azure 配置设置中的虚拟路径的“物理路径”应该是什么？

非常感谢任何帮助

网址是：https://friendsofthecommunity-gna8amh6cdfvcwd0.centralindia-01.azurewebsites.net/

name: Build and deploy Next.js app to Azure Web App

on: push: branches: - mainworkflow_dispatch:

env: APPLICATION_PUBLISH_PROFILE: ${{ secrets.xxxxxxxxxxxxxx }} WEBAPP_NAME: "xxxxxxxx"

jobs: build: runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v4

  - name: Set up Node.js version
    uses: actions/setup-node@v4
    with:
      node-version: "20.x"

  - name: npm install, build, and test
    run: |
      npm install
      npm run build
      mv ./build/static ./build/standalone/build
      mv ./app ./build/standalone
      mv ./next ./build/standalone

  - name: "Deploy to Azure Web App"
    id: deploy-to-webapp
    uses: azure/webapps-deploy@v3
    with:
      app-name: ${{ env.WEBAPP_NAME }}
      slot-name: "Production"
      publish-profile: ${{ env.APPLICATION_PUBLISH_PROFILE }}
      package: ./build/standalone

/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, distDir: 'build', output: 'standalone', };

module.exports = nextConfig;

Answer 1

我尝试了你的

next.config.mjs

配置，如下所示，但我得到了同样的错误：

const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',       
  output: 'standalone',  
};

export default nextConfig;

要重新安装它，请从 YAML 文件中删除以下行：

mv ./app ./build/standalone
mv ./next ./build/standalone

然后，更新您的 YAML 文件，如下所示。

我参考了此链接，以使用 GitHub Actions 将 Next.js 14 应用程序部署到 Azure 应用服务。

name: Build and deploy Node.js app to Azure Web App - ravi89sam89

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

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

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
          mv ./public ./build/standalone/public

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-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@v3
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'ravi89sam89'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_4 }}
          package: './build/standalone'

另外，将启动命令添加到

配置

中的node server.js。无需在虚拟路径中添加/更改物理路径。

部署状态：

输出：

对于 Windows，请使用如下所示的 YAML 配置。请参阅此 git 以获取完整的 YAML 文件。

run: |
          npm install
          npm run build --if-present
          npm run test --if-present
          mv ./public ./build/standalone/public
          
package: './build/standalone'