Next JS 13 应用无法部署到 Azure 静态 Web 应用。

huangapple go评论70阅读模式
英文:

Next JS 13 app cannot deploy to Azure Static Web Apps

问题

我正在尝试将我的下一个13个应用目录应用部署到Azure静态Web应用程序,但当我访问URL时返回500错误。我无法在Azure上看到任何日志,在诊断选项卡下找不到它们。我的工作流文件如下:

name: Azure Static Web Apps CI/CD

on:
    push:
        branches:
            - master
    pull_request:
        types: [opened, synchronize, reopened, closed]
        branches:
            - master

jobs:
    build_and_deploy_job:
        if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
        runs-on: ubuntu-latest
        name: Build and Deploy Job
        steps:
            - uses: actions/checkout@v3
              with:
                  submodules: true
            - name: Build And Deploy
              id: builddeploy
              uses: Azure/static-web-apps-deploy@v1
              with:
                  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_0B46C9510 }}
                  repo_token: ${{ secrets.GITHUB_TOKEN }} # 用于GitHub集成(例如PR评论)
                  action: "upload"
                  ###### 仓库/构建配置 - 这些值可以配置以匹配您的应用程序要求。 ######
                  # 有关静态Web应用程序工作流配置的更多信息,请访问:https://aka.ms/swaworkflowconfig
                  app_location: "/" # 应用源代码路径
                  api_location: "" # Api源代码路径 - 可选
                  output_location: "" # 构建后的应用程序内容目录 - 可选
                  app_build_command: "npm run build"
                  api_build_command: "rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache"
                  ###### 仓库/构建配置的结尾 ######

    close_pull_request_job:
        if: github.event_name == 'pull_request' && github.event.action == 'closed'
        runs-on: ubuntu-latest
        name: Close Pull Request Job
        steps:
            - name: Close Pull Request
              id: closepullrequest
              uses: Azure/static-web-apps-deploy@v1
              with:
                  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_0B46C9510 }}
                  action: "close"

npm run build 命令是 next build,npm run start 是 next start。我没有使用 next export,因为它无法与i18一起使用。为了成功部署到URL,我应该做什么?

英文:

I am trying to deploy my next 13 app directory application to Azure Static Web Apps, but it returns a 500 error when I go to the url. I can't see any logs on Azure, I couldn't find them under the Diagnose tab. My workflow file looks like this:

name: Azure Static Web Apps CI/CD

on:
    push:
        branches:
            - master
    pull_request:
        types: [opened, synchronize, reopened, closed]
        branches:
            - master

jobs:
    build_and_deploy_job:
        if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
        runs-on: ubuntu-latest
        name: Build and Deploy Job
        steps:
            - uses: actions/checkout@v3
              with:
                  submodules: true
            - name: Build And Deploy
              id: builddeploy
              uses: Azure/static-web-apps-deploy@v1
              with:
                  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_0B46C9510 }}
                  repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
                  action: "upload"
                  ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
                  # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
                  app_location: "/" # App source code path
                  api_location: "" # Api source code path - optional
                  output_location: "" # Built app content directory - optional
                  app_build_command: "npm run build"
                  api_build_command: "rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache"
                  ###### End of Repository/Build Configurations ######

    close_pull_request_job:
        if: github.event_name == 'pull_request' && github.event.action == 'closed'
        runs-on: ubuntu-latest
        name: Close Pull Request Job
        steps:
            - name: Close Pull Request
              id: closepullrequest
              uses: Azure/static-web-apps-deploy@v1
              with:
                  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_0B46C9510 }}
                  action: "close"

The npm run build command is next build and npm run start is next start. I am not using next export cause it cannot be used with i18. What can I in order to successfully deploy to the url?

答案1

得分: 0

以下是已翻译的内容:

  • 首先,在我的环境中创建了一个 Next.js 应用程序 @13v。

  • 在 GitHub 上创建了一个新的存储库来托管 Next.js 应用程序的源代码,并将应用程序推送到远程仓库。

  • 然后,在门户中创建了一个静态网站应用程序,并将其与我的 GitHub 存储库链接。

这是我的 Yaml 代码,请查看以下部分:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - name: Build And Deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "public"
          api_location: ""
          output_location: ""
          app_build_command: "npm run start"
          api_build_command: ""
          skip_deploy_on_missing_secrets: true

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"
          app_location: "public"
          api_location: ""
          output_location: ""
          app_build_command: "npm run start"
          api_build_command: ""
  • 我能够构建和部署我的应用程序。

结果:

英文:
  • Firstly, I have created a Next-js-app @13v in my environment.

Next JS 13 应用无法部署到 Azure 静态 Web 应用。

  • Created a new repository on GitHub to host the Next.js app's source code and pushed the Application to the remote origin.

Next JS 13 应用无法部署到 Azure 静态 Web 应用。

  • Then Created a Static web application in portal and linked it with my GitHub repository.

Next JS 13 应用无法部署到 Azure 静态 Web 应用。

Here is my Yaml code, Check below.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - name: Build And Deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "public"
          api_location: ""
          output_location: ""
          app_build_command: "npm run start"
          api_build_command: ""
          skip_deploy_on_missing_secrets: true

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"
          app_location: "public"
          api_location: ""
          output_location: ""
          app_build_command: "npm run start"
          api_build_command: ""
  • Iam able to build and deploy my applications.

Next JS 13 应用无法部署到 Azure 静态 Web 应用。

Result :
Next JS 13 应用无法部署到 Azure 静态 Web 应用。

huangapple
  • 本文由 发表于 2023年6月19日 02:39:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/76502045.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定