如何使用 git 将 nuxt SSR 应用程序部署到 AWS Amplify

Question

我一直在尝试将 nuxt SSR 应用程序部署到 AWS Amplify。我的目录结构是这样的

my-nuxt-app
|-.nuxt(contains view, dist etc.)
|-assets
|-components
|-layouts
|-pages
|-plugins
|-static
|-store
|-.gitignore
|-nuxt.config.js
|-package.json
|-package-lock.json
|-secrets.json(has my env configs)

我想做的是将 my-nuxt-app 文件夹作为 git 存储库进行管理，并通过 AWS Amplify 部署该存储库。我一直在寻找将应用程序部署到 AWS 的方法，但似乎没有人在完整演练中实际描述过。

到目前为止我做了什么：

我试过了amplify.yml 到 baseDirectory: dist 就像大多数说明所说的那样。得到 'dist' not found

我试过了amplify.yml 到 baseDirectory: .nuxt/dist 得到 2020-11-05T06:00:05.617Z [ERROR]: !!! Build failed 2020-11-05T06:00:05.617Z [ERROR]: !!! Non-Zero Exit Code detected

我尝试更改 buildDir 并将其设为单独的 git 存储库。（手动复制package.json到文件夹中）它构建良好并得到确认，但 URL 会显示 502 错误页面

The Lambda function result failed validation: The function tried to add, delete, or change a read-only header. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner. If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

我不知道我错过了什么，以及我应该如何使用 git 正确管理 nuxt 项目。

Answer 1

我正在使用 Amplify 控制台并将其配置为指向 Bitbucket git 存储库中的特定分支。

我遇到了与上述相同的错误。

解决方案是转到 Amplify 控制台中的 Amplify 设置 -> 构建设置并编辑 amplify.yml“应用程序构建规范”，如下所示。具体变化是：

将构建命令更改为“yarn generate”，其中“generate”在 package.json 中定义为“nuxt generate”。
将 baseDirectory 更改为 dist/，这是 yarn generate 的目标输出目录。

请注意，我使用的是 yarn（不是 npm）并且我的目标是 SPA（但它也应该适用于 SSR）。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist/
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Answer 2

我能够使用 npm 进行部署：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

如何使用 git 将 nuxt SSR 应用程序部署到 AWS Amplify

How to deploy nuxt SSR app to AWS Amplify with git

amazon-web-services

vue.js

nuxt.js

aws-amplify