Next js on AWS amplify, how to set Environment variables - amazon-web-services

During development, everything works, the application has .env.local file. After installing to amazon amplify, the application does not see variables, I added my keys and values in Environment variables, and I also tried to add them to the console, but then the application breaks
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- EMAIL=${EMAIL}
- EMAIL_PASS=${EMAIL_PASS}
- NEXT_PUBLIC_GOOGLE_ANALYTICS=${NEXT_PUBLIC_GOOGLE_ANALYTICS}
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*

Related

Multiple Aws Amplify preview build on single repo?

I got a nextjs app that servers the main app and the story book which i want to deployed on AWS amplify.
When i try to deploy the app having two specs in amplify.yaml it doesn't work.
amplify.yaml
version: 1
frontend:
phases:
preBuild:
commands:
- nvm install
- nvm use
- yarn install --immutable
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- "**/*"
cache:
paths:
- node_modules/**/*
storybook:
phases:
preBuild:
commands:
- nvm install
- nvm use
- yarn install --immutable
build:
commands:
- npm run build-storybook
artifacts:
baseDirectory: storybook-static/
files:
- "**/*"
cache:
paths:
- node_modules/**/*

How I can deploy a subfolder into my bucket's root path?

For my react App I use the following buildspec.yml to deploy a reast Single Page Application:
version: 0.2
phases:
pre_build:
commands:
- npm install
build:
commands:
- npm run build
cache:
paths:
- /root/.npm/**/*
artifacts:
files:
- ./build/**
I also created an s3 bucket as static website and I deploy it directly via codeploy. But the folder that is deployed is into the ./build istead of the bucket's root. Is there a way to translate the paths of the codebuild's output artifacts into the deployed paths?
The codebuild path is used as a step in a codepipeline.
In order to do that you must specify a base-directory then tell the codebuild to set everything as artifact. This would be your final buildspec.yml:
version: 0.2
phases:
pre_build:
commands:
- npm install
build:
commands:
- npm run build
cache:
paths:
- /root/.npm/**/*
artifacts:
files:
- '**/*'
base-directory: './build'
And you also can safely delete the rogue ./build folder into your s3 bucket.

AWS amplify deployment fails - You need to enable JavaScript to run this app

I have a react app that I'm trying to deploy automtically using AWS amplify. I connected the repo and the build and deployment seems to be successfull:
But opening the url shows You need to enable JavaScript to run this app. in the console
Building and serving the app locally using
$ npm run build
$ serve -s build
works fine.
I saw in the issue here that this might be about setting the "proxy" in the package.json, but I'm not sure which port does AWS amplify uses and adding the line of the answer there (using localhost:5000) doesn't work either.
any ideas?
EDIT:
amplify.yml:
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*

NextJS with Aws Amplify deployment error

Does anyone has tried AWS-Amplify for next.js deployment? I am getting this error always that "yarn build" successful but didn't deployed and failed.
Git repo is configured with auto-deployment and YML file for aws-amplify is below.
version: 1
frontend:
phases:
preBuild:
commands:
- rm -rf node_modules
- yarn install
build:
commands:
- yarn run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Use this yaml file in your build
version: 1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
artifacts:
baseDirectory: public
files:
- '**/*'
cache:
paths:
- node_modules/**/*

Deploy nuxt on AWS amplify console

I have an aws amplify project built on top of nuxt. I'm trying to setup CI using amplify console. My build keeps failing in deploy stage, for some reason the artifacts aren't being created or can't be found:
Here's my amplify.yml file:
version: 0.1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run generate
artifacts:
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
If I run npm run generate locally then my app is built and can be found in the dist folder without any problems.
did anyone manage to successfully deploy an amplify/nuxt app using the amplify console?
Thanks
Update 1
change the buildspec:
version: 0.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/**/*