Блог

Я пытался развернуть приложение 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.

Я не знаю, чего мне не хватает, и как я должен правильно управлять проектом nuxt с помощью git.

Я использую консоль Amplify и настроил ее так, чтобы она указывала на определенную ветку в репозитории Bitbucket git.

Я получал те же ошибки, что и выше.

Решение состояло в том, чтобы перейти в Настройки Amplify -> Настройки сборки в консоли Amplify и отредактировать «Спецификацию сборки приложения» amplify.yml, как показано ниже. Конкретные изменения были:

• Изменение команды сборки на «yarn generate», где «generate» определяется как «nuxt generate» в package.json.
• Изменение базового каталога на 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/**/*
  

Я смог выполнить развертывание с помощью 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/**/*