如何使用 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“应用程序构建规范”，如下所示。 具体变化是：

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

请注意，我使用的是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/**/*

Answer 3

对于 SSR，您需要使用

build

命令而不是

generate

（用于 SPA/静态内容），并且出于某些 AWS 原因还使用

.amplify-hosting

文件夹...

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn build
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

PS：然后你会遇到其他问题，例如

Redirects and Rewrites

，就像我的情况一样（使用SSR放大NUXT的重定向和重写），但希望这个答案能帮助某人