How to deploy nuxt SSR app to AWS Amplify with git

user_3671868 0
Viewed 1853

I have been trying to deploy nuxt SSR app to AWS Amplify. My directory structure looks like this

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)

What I am trying to do is to manage my-nuxt-app folder as a git repository and deploy the repository through AWS Amplify. I've been searching ways to deploy the app to AWS and seemed like no one actually described on full walkthrough.

What I've done so far:

I tried amplify.yml to baseDirectory: dist like most instructions said. got 'dist' not found

I tried amplify.yml to baseDirectory: .nuxt/dist got 2020-11-05T06:00:05.617Z [ERROR]: !!! Build failed 2020-11-05T06:00:05.617Z [ERROR]: !!! Non-Zero Exit Code detected

I tried changing buildDir and making it a separate git repo. (copied package.json manually into the folder) It built fine and confirmed but the URL would show 502 error page

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.

I don't know what I am missing, and how I should manage nuxt project with a git properly.

aws-amplify nuxt.js vue.js amazon-web-services
2 Answers

I am using the Amplify Console and have configured it to point to a specific branch in a Bitbucket git repository.

I was getting the same errors as above.

The solution was to go to Amplify Settings -> Build Settings in the Amplify Console and edit the amplify.yml "App build specification" as shown below. The specific changes were:

  • Changing the build command to "yarn generate" where "generate" is defines as "nuxt generate" in package.json.
  • Changing the baseDirectory to dist/ which is the target output directory for yarn generate.

Note that I am using yarn (not npm) and I am targeting a SPA (but it should work for SSR too).

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/**/*
user_51183600

I was able to deploy using 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/**/*
user_94568010
Related