NextJS deployment on AWS amplify issue (frontend + incompatible module) - amazon-web-services

I deploy the nextjs project by connecting the github repo, the provision passes, the backend is built, but the frontend fails to build. Here is the log with the error:
# Starting phase: preBuild
# Executing command: yarn install
2021-12-13T06:55:51.568Z [INFO]: yarn install v1.22.0
2021-12-13T06:55:51.620Z [INFO]: [1/4] Resolving packages...
2021-12-13T06:55:51.815Z [INFO]: [2/4] Fetching packages...
2021-12-13T06:56:02.529Z [WARNING]: error next#12.0.7: The engine "node" is incompatible with this module. Expected version ">=12.22.0". Got "12.21.0"
2021-12-13T06:56:02.537Z [WARNING]: error Found incompatible module.
2021-12-13T06:56:02.538Z [INFO]: info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
2021-12-13T06:56:02.550Z [ERROR]: !!! Build failed
2021-12-13T06:56:02.552Z [ERROR]: !!! Non-Zero Exit Code detected
2021-12-13T06:56:02.552Z [INFO]: # Starting environment caching...
2021-12-13T06:56:02.552Z [INFO]: # Environment caching completed
Terminating logging...
The build settings:
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
I really do not know how to fix this, is it an AWS issue or my project has outdated packages? Any help would be appreciated 😄.

To fix this issue you have to tell Amplify which version of NodeJS to use.
Go To:
Build Settings
At the bottom is Edit Build image settings
Click Add Package Overide
Set your NodeJS version
This worked for me.

Related

Running Storybook on amplify in a nextjs project

Im trying to run storybook from amplify in a nextjs project.
It sets the framework as Nextjs SSR but i went ahead and changed it to React and the app platform was kept as it is to Web Compute
I updated the amplify.yaml file as:
version: 1
frontend:
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/**/*
But the build always fails with this error
2023-02-15T09:45:08.672Z [WARNING]: info
2023-02-15T09:45:08.672Z [WARNING]: => Output directory: /codebuild/output/src160065809/src/dc-extension-get-started/storybook-static
2023-02-15T09:45:08.737Z [INFO]: # Completed phase: build
2023-02-15T09:45:08.739Z [INFO]: ## Build completed successfully
2023-02-15T09:45:08.740Z [INFO]: # Starting caching...
2023-02-15T09:45:08.750Z [INFO]: # Creating cache artifact...
2023-02-15T09:45:21.174Z [INFO]: # Created cache artifact
2023-02-15T09:45:21.296Z [INFO]: # Uploading cache artifact...
2023-02-15T09:45:24.843Z [INFO]: # Uploaded cache artifact
2023-02-15T09:45:24.919Z [INFO]: # Caching completed
2023-02-15T09:45:24.922Z [INFO]: Setting NEXT_PRIVATE_STANDALONE=true to produce .next/standalone directory
2023-02-15T09:45:24.926Z [INFO]: # No custom headers found.
2023-02-15T09:45:24.930Z [ERROR]: !!! CustomerError: Standalone directory not found in /codebuild/output/src160065809/src/dc-extension-get-started/storybook-static/standalone. Please enable output standalone on your next.config.js file or set NEXT_PRIVATE_STANDALONE=true. https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files
2023-02-15T09:45:24.930Z [INFO]: # Starting environment caching...
2023-02-15T09:45:24.930Z [INFO]: # Uploading environment cache artifact...
2023-02-15T09:45:24.982Z [INFO]: # Uploaded environment cache artifact
2023-02-15T09:45:24.982Z [INFO]: # Environment caching completed
Terminating logging...
Looks like it still tries to find a nextjs app how to get the storybook running in a nextjs app on amplify ?

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

React-snap faild in postbulid when uploading to AWS Amplify

I`ve pushed my react project to AWS amplify with git. I installed the react-snap package for SEO reasons. When inspecting the Amplify Console, it shows that the provision step succeeded, but the building step failed. The error log shows this:
Some older post on github describe the same problem that I have:
https://github.com/thinkJin6/BokuNews/issues/64
I have tried out several things like adding and configuring amplify.yml file and configuring the package.json as described here:. https://github.com/puppeteer/puppeteer/issues/765
Finally I tried out some stuff from this link: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-on-aws-ec2-instance-running-amazon-linux I enable amazon-linux-extras like this, sudo amazon-linux-extras install epel -y, and installed install Chromium like this, sudo yum install -y chromium.I used AWS CloudShell, but the error log message keeps the same.
I had the same problem recently and with help of a colleague, the solution was found here: LINK
I added the following to my package.json
"reactSnap": {
"puppeteerArgs": [
"--no-sandbox",
"--disable-setuid-sandbox"
],
"puppeteerExecutablePath": "/opt/google/chrome/google-chrome"
}
Then I updated amplify.yml in was amplify build settings like so
version: 1
frontend:
phases:
preBuild:
commands:
- '# This installs Chrome on any RHEL/CentOS/Amazon Linux variant.'
- curl https://intoli.com/install-google-chrome.sh | bash
- npm i
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*

AWS Amplify throws ECONNREFUSED 127.0.0.1:3000 when running nuxt generate

I'm trying to deploy my nuxt app via AWS Amplify. Here is my build config:
version: 1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run generate
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Once it gets to the build part of the deploy, the console gives the following output in the build phase:
2021-07-05T18:13:35.839Z [INFO]: # Completed phase: preBuild
# Starting phase: build
2021-07-05T18:13:35.840Z [INFO]: # Executing command: npm run generate
2021-07-05T18:13:36.003Z [INFO]: > eagle-nuxt#1.0.0 generate /codebuild/output/src824807188/src/eagle-nuxt
> nuxt generate
2021-07-05T18:14:03.863Z [WARNING]: [error] /articles
connect ECONNREFUSED 127.0.0.1:3000
I've deployed a nuxt app via amplify before and this is my first time seeing this. Any help would be appreciated
Dependencies:
"dependencies": {
"#nuxtjs/axios": "^5.13.1",
"core-js": "^3.15.2",
"marked": "^2.0.7",
"moment": "^2.29.1",
"nuxt": "^2.15.7"
},
"devDependencies": {
"#nuxtjs/tailwindcss": "^4.0.3",
"autoprefixer": "^9.8.6",
"postcss": "^7.0.35",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.1.2"
}
Thanks in advance
I figured out my issue! While developing locally, I was using a .env file. I had to add the environment variable to my build via through amplify. Documentation: https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html#access-env-vars

AWS amplify don't deploy build infinit

I have a project to react to and I want to deploy it on AWS Amplify, locally I run the build perfectly, but when I do it on AWS it is compiling infinitely until I get a time out error. What am I doing wrong? I'm new to it and I couldn't find anything related
2020-12-30T21:20:07.282Z [WARNING]:
2020-12-30T21:20:07.288Z [INFO]: added 2085 packages from 1294 contributors and audited 2098 packages in 31.209s
2020-12-30T21:20:08.604Z [INFO]: 96 packages are looking for funding
run `npm fund` for details
2020-12-30T21:20:08.605Z [INFO]: found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
2020-12-30T21:20:08.633Z [INFO]: # Completed phase: preBuild
# Starting phase: build
# Executing command: npm run build
2020-12-30T21:20:08.801Z [INFO]: > monetiz-web#0.1.0 build /codebuild/output/src941862754/src/monetiz-app
> node scripts/build.js
2020-12-30T21:20:09.455Z [INFO]: Creating an optimized production build...
2020-12-30T21:21:08.746Z [INFO]: Compiled successfully.
```
Build Settings
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
- node ./node_modules/gulp/bin/gulp.js
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: /build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```