我对 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;
我尝试了你的
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'