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

【问题标题】：How to deploy nuxt SSR app to AWS Amplify with git如何使用 git 将 nuxt SSR 应用程序部署到 AWS Amplify
【发布时间】：2021-02-17 20:34:52
【问题描述】：

我一直在尝试将 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 的方法，并且似乎没有人在完整的演练中真正描述过。

到目前为止我做了什么：

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

我试过放大.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 项目。

【问题讨论】：

我认为这篇文章描述了如何部署静态 nuxt spa 应用来放大。不是ssr？
Amplify 上的 SSR 似乎很新。我还没有弄清楚如何让它也能正常工作，但我正在与 AWS 支持部门合作，希望能得到关于如何做到这一点的答案

标签： amazon-web-services vue.js nuxt.js aws-amplify

【解决方案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/**/*

【讨论】：

自 2020 年 9 月起，我正在寻找一些帮助/指导来设置 Amplify + Nuxt SSR(!)。还没有运气。
@Tebe 同样的事情！我发现 Amplify 团队说他们添加了 SSR (next/nuxt) 支持的文章，但没有提供明确的说明来做到这一点
同样期待，我计划将我的项目发布为 SPA，然后将其转换为 SSR。希望有人在不久的将来发布一种方法。

【解决方案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/**/*

【讨论】：

你应该使用 npm ci 而不是 npm install :)