Azure 上使用 Bitbucket Pipeline 的 Nuxt 3 应用程序

Question

我对许多似乎从未真正有帮助的教程感到有点迷失。我正在尝试使用 Bitbucket 将 Nuxt 3 应用程序部署到 Azure Static Web Apps。

Bitbucket 中的管道如下所示：

pipelines:
    branches:
        main:
            - step:
                  name: Deploy to test
                  deployment: test
                  script:
                      # https://github.com/Azure/static-web-apps/issues/1325#issuecomment-1833538182
                      - chown -R 165536:165536 $BITBUCKET_CLONE_DIR
                      - pipe: microsoft/azure-static-web-apps-deploy:main
                        variables:
                            APP_LOCATION: "$BITBUCKET_CLONE_DIR/"
                            API_LOCATION: "$BITBUCKET_CLONE_DIR/.output/server"
                            OUTPUT_LOCATION: "$BITBUCKET_CLONE_DIR/.output/public"
                            API_TOKEN: $deployment_token

但是一旦我推入分支，它就会挂在

Running 'npm install'...

处，然后（大约 58 分钟后）失败并出现

docker memory limit exceeded

。该应用程序不是特别大，本地构建运行良好。我添加了

nitro: {
        preset: "azure"
    },

到

nuxtConfig

并使用

staticwebapp.config.json

生成了

nuxi build

但这一切似乎都像是抓住救命稻草，因为它甚至不会根据 Bitbucket 管道日志开始构建。 如果它没有因内存限制而失败，我会收到以下消息：
有谁有使用 Bitbucket 将 Nuxt 3 部署到 Azure 的经验并且可以在这里帮助我吗？
谢谢

Answer 1

我按照此文档使用 Bitbucket 将 Nuxt 3 应用程序部署到 Azure 静态 Web 应用程序。

我创建了一个简单的 Nuxt 3 应用程序，使用 Bitbucket 将其部署到 Azure Static Web App，并且该过程成功。

我将以下几行添加到我的 package.json 文件中以指定节点版本：

 "engines": {
    "node": ">=18.0.0"
  },

下面是我完整的package.json。

package.json:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
   "engines": {
    "node": ">=18.0.0"
  },
  "dependencies": {
    "nuxt": "^3.11.2",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  }
}

nuxt.config.ts：

export default defineNuxtConfig({
  devtools: { enabled: true },
  nitro: {
    preset: "azure"
},
})

出于部署目的，我运行了以下命令：

nuxi build

staticwebapp.config.json:

{
  "routes": [
    {
      "route": "/index.html",
      "redirect": "/"
    },
    {
      "route": "/",
      "rewrite": "/api/server"
    }
  ],
  "platform": {
    "apiRuntime": "node:18"
  },
  "navigationFallback": {
    "rewrite": "/api/server"
  }
}

我使用了您的 YML 文件并将其部署到 Azure 静态 Web 应用程序。

bitbucket-pipelines.yml：

pipelines:
    branches:
        main:
            - step:
                  name: Deploy to test
                  deployment: test
                  script:
                      - chown -R 165536:165536 $BITBUCKET_CLONE_DIR
                      - pipe: microsoft/azure-static-web-apps-deploy:main
                        variables:
                            APP_LOCATION: "$BITBUCKET_CLONE_DIR/"
                            API_LOCATION: "$BITBUCKET_CLONE_DIR/.output/server"
                            OUTPUT_LOCATION: "$BITBUCKET_CLONE_DIR/.output/public"
                            API_TOKEN: $deployment_token

部署成功，如下。

Azure 静态 Web 输出: