Share
Sign In

Next Amplify SSR hosing Error & 세팅 가이드

🔥
아래의 문서는 2023.12.18 기준으로 작성되었습니다.
누비랩에서 Amplify를 사용할 때, 겪었던 문제입니다.
next.js를 배포 할 때, (git 레포 파일로) amplify에서 자동으로 nextjs임을 감지합니다.
하지만 amplify에서 정확하게 next임을 인지하지 못한 경우 aws cli로 설정해야합니다.
AWS cli 설치
mac 이외의 환경에서는 여기를 확인합니다.
curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg" sudo installer -pkg AWSCLIV2.pkg -target /
shell이 aws cli 스크립트를 실행할 수 있는지 확인하는 방법
which aws # /usr/local/bin/aws aws --version # aws-cli/2.10.0 Python/3.11.2 Darwin/18.7.0 botocore/2.4.5
그럼에도 에러가 발생한 경우 아래의 옵션중에 해당사항이 있는지 확인합니다.
권한 부족
sudo chmod -R 755 /usr/local/aws-cli/
운영 체제 PATH가 업데이트되지 않음
~ 에 있는 .bash_profile에 아래의 path를 수정합니다. 사용자의 따라 ~/.zshrc 일 수 있습니다.
export PATH=/usr/local/bin:$PATH
그후 터미널 재실행 or 현재 세션에 bash 프로파일을 업데이트 합니다.
source ~/.bash_profile
AWS cli 실행
aws cli 인증
아래의 명령어를 통해 aws cli에 credential 를 업데이트 합니다.
aws configure
순서대로 발급한 aws_access_key_id, aws_secret_access_key를 입력합니다.
(발급 방법은 @Anonymous 님께 물어보기)
region은 ap-southeast-2이고 default 포맷은 입력을 생략합니다.
설정을 성공하였다면 ~/.aws/credentials 파일에서 아래와 같이 볼 수 있습니다.
vim ~/.aws/credentials # 1 [default] # 2 region = ap-southeast-2 # 3 aws_access_key_id = A************* # 4 aws_secret_access_key = /q*************
Amplify 플랫폼 변경
자세한 세팅 방법은 여기서 확인할 수 있습니다.
next 11 버전에서 SSR 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB_DYNAMIC --region ap-northeast-2
next 12 이상의 버전에서 SSR 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB_COMPUTE --region ap-northeast-2
next SSG 에서 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB --region ap-northeast-2
또한 SSG 세팅은 추가로 package.json 에서 build 후 export 해야합니다.
"scripts": { "dev": "next dev", "build": "next build && next export", "start": "next start" },
또한 build yml을 수정합니다.
version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: out # 빌드 파일 확인 files: - '**/*' cache: paths: - node_modules/**/*
빌드 설정
Next & Node version
next 14 버전에서는 node 18.17 버전 이상에서 실행하는 것을 요구합니다. 따라서 amplify 의 도커 이미지와 node 버전을 업데이트 해야합니다.
빌드설정 > Build image settings > 수정 버튼 클릭
빌드 이미지 : linux 2023
Node version : 18.17 이상
Next version : 프로젝트의 Next version
모노레포
모노레포의 경우 필요한 설정이 복잡합니다. 정확한 가이드는 여기서 확인 가능합니다.
App Root 세팅
아래의 structure 의 경우
ExampleMonorepo apps nextApp1 app2 app3
1.
amplify 환경변수로 AMPLIFY_MONOREPO_APP_ROOT = apps/nextApp1 을 세팅합니다.
2.
build yml을 수정합니다
version: 1 applications: - appRoot: apps/nextApp1 backend: phases: preBuild: commands: - *enter command* build: commands: - *enter command* postBuild: commands: - *enter command* frontend: buildPath: apps/nextApp1 # Run install and build from the monorepo project root phases: preBuild: commands: - yarn install build: commands: - yarn build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* - .next/cache/**/*
3.
예제
예제 코드
다음은 모노레포에서 환경변수를 설정하는 방법입니다. 공식문서
🔥
아래의 문서는 2023.12.18 기준으로 작성되었습니다.
누비랩에서 Amplify를 사용할 때, 겪었던 문제입니다.
next.js를 배포 할 때, (git 레포 파일로) amplify에서 자동으로 nextjs임을 감지합니다.
하지만 amplify에서 정확하게 next임을 인지하지 못한 경우 aws cli로 설정해야합니다.
AWS cli 설치
mac 이외의 환경에서는 여기를 확인합니다.
curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg" sudo installer -pkg AWSCLIV2.pkg -target /
shell이 aws cli 스크립트를 실행할 수 있는지 확인하는 방법
which aws # /usr/local/bin/aws aws --version # aws-cli/2.10.0 Python/3.11.2 Darwin/18.7.0 botocore/2.4.5
그럼에도 에러가 발생한 경우 아래의 옵션중에 해당사항이 있는지 확인합니다.
권한 부족
sudo chmod -R 755 /usr/local/aws-cli/
운영 체제 PATH가 업데이트되지 않음
~ 에 있는 .bash_profile에 아래의 path를 수정합니다. 사용자의 따라 ~/.zshrc 일 수 있습니다.
export PATH=/usr/local/bin:$PATH
그후 터미널 재실행 or 현재 세션에 bash 프로파일을 업데이트 합니다.
source ~/.bash_profile
AWS cli 실행
aws cli 인증
아래의 명령어를 통해 aws cli에 credential 를 업데이트 합니다.
aws configure
순서대로 발급한 aws_access_key_id, aws_secret_access_key를 입력합니다.
(발급 방법은 @Anonymous 님께 물어보기)
region은 ap-southeast-2이고 default 포맷은 입력을 생략합니다.
설정을 성공하였다면 ~/.aws/credentials 파일에서 아래와 같이 볼 수 있습니다.
vim ~/.aws/credentials # 1 [default] # 2 region = ap-southeast-2 # 3 aws_access_key_id = A************* # 4 aws_secret_access_key = /q*************
Amplify 플랫폼 변경
자세한 세팅 방법은 여기서 확인할 수 있습니다.
next 11 버전에서 SSR 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB_DYNAMIC --region ap-northeast-2
next 12 이상의 버전에서 SSR 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB_COMPUTE --region ap-northeast-2
next SSG 에서 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB --region ap-northeast-2
또한 SSG 세팅은 추가로 package.json 에서 build 후 export 해야합니다.
"scripts": { "dev": "next dev", "build": "next build && next export", "start": "next start" },
또한 build yml을 수정합니다.
version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: out # 빌드 파일 확인 files: - '**/*' cache: paths: - node_modules/**/*
빌드 설정
Next & Node version
next 14 버전에서는 node 18.17 버전 이상에서 실행하는 것을 요구합니다. 따라서 amplify 의 도커 이미지와 node 버전을 업데이트 해야합니다.
빌드설정 > Build image settings > 수정 버튼 클릭
빌드 이미지 : linux 2023
Node version : 18.17 이상
Next version : 프로젝트의 Next version
모노레포
모노레포의 경우 필요한 설정이 복잡합니다. 정확한 가이드는 여기서 확인 가능합니다.
App Root 세팅
아래의 structure 의 경우
ExampleMonorepo apps nextApp1 app2 app3
1.
amplify 환경변수로 AMPLIFY_MONOREPO_APP_ROOT = apps/nextApp1 을 세팅합니다.
2.
build yml을 수정합니다
version: 1 applications: - appRoot: apps/nextApp1 backend: phases: preBuild: commands: - *enter command* build: commands: - *enter command* postBuild: commands: - *enter command* frontend: buildPath: apps/nextApp1 # Run install and build from the monorepo project root phases: preBuild: commands: - yarn install build: commands: - yarn build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* - .next/cache/**/*
3.
예제
예제 코드
다음은 모노레포에서 환경변수를 설정하는 방법입니다. 공식문서
🔥
아래의 문서는 2023.12.18 기준으로 작성되었습니다.
누비랩에서 Amplify를 사용할 때, 겪었던 문제입니다.
next.js를 배포 할 때, (git 레포 파일로) amplify에서 자동으로 nextjs임을 감지합니다.
하지만 amplify에서 정확하게 next임을 인지하지 못한 경우 aws cli로 설정해야합니다.
AWS cli 설치
mac 이외의 환경에서는 여기를 확인합니다.
curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg" sudo installer -pkg AWSCLIV2.pkg -target /
shell이 aws cli 스크립트를 실행할 수 있는지 확인하는 방법
which aws # /usr/local/bin/aws aws --version # aws-cli/2.10.0 Python/3.11.2 Darwin/18.7.0 botocore/2.4.5
그럼에도 에러가 발생한 경우 아래의 옵션중에 해당사항이 있는지 확인합니다.
권한 부족
sudo chmod -R 755 /usr/local/aws-cli/
운영 체제 PATH가 업데이트되지 않음
~ 에 있는 .bash_profile에 아래의 path를 수정합니다. 사용자의 따라 ~/.zshrc 일 수 있습니다.
export PATH=/usr/local/bin:$PATH
그후 터미널 재실행 or 현재 세션에 bash 프로파일을 업데이트 합니다.
source ~/.bash_profile
AWS cli 실행
aws cli 인증
아래의 명령어를 통해 aws cli에 credential 를 업데이트 합니다.
aws configure
순서대로 발급한 aws_access_key_id, aws_secret_access_key를 입력합니다.
(발급 방법은 @Anonymous 님께 물어보기)
region은 ap-southeast-2이고 default 포맷은 입력을 생략합니다.
설정을 성공하였다면 ~/.aws/credentials 파일에서 아래와 같이 볼 수 있습니다.
vim ~/.aws/credentials # 1 [default] # 2 region = ap-southeast-2 # 3 aws_access_key_id = A************* # 4 aws_secret_access_key = /q*************
Amplify 플랫폼 변경
자세한 세팅 방법은 여기서 확인할 수 있습니다.
next 11 버전에서 SSR 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB_DYNAMIC --region ap-northeast-2
next 12 이상의 버전에서 SSR 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB_COMPUTE --region ap-northeast-2
next SSG 에서 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB --region ap-northeast-2
또한 SSG 세팅은 추가로 package.json 에서 build 후 export 해야합니다.
"scripts": { "dev": "next dev", "build": "next build && next export", "start": "next start" },
또한 build yml을 수정합니다.
version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: out # 빌드 파일 확인 files: - '**/*' cache: paths: - node_modules/**/*
빌드 설정
Next & Node version
next 14 버전에서는 node 18.17 버전 이상에서 실행하는 것을 요구합니다. 따라서 amplify 의 도커 이미지와 node 버전을 업데이트 해야합니다.
빌드설정 > Build image settings > 수정 버튼 클릭
빌드 이미지 : linux 2023
Node version : 18.17 이상
Next version : 프로젝트의 Next version
모노레포
모노레포의 경우 필요한 설정이 복잡합니다. 정확한 가이드는 여기서 확인 가능합니다.
App Root 세팅
아래의 structure 의 경우
ExampleMonorepo apps nextApp1 app2 app3
1.
amplify 환경변수로 AMPLIFY_MONOREPO_APP_ROOT = apps/nextApp1 을 세팅합니다.
2.
build yml을 수정합니다
version: 1 applications: - appRoot: apps/nextApp1 backend: phases: preBuild: commands: - *enter command* build: commands: - *enter command* postBuild: commands: - *enter command* frontend: buildPath: apps/nextApp1 # Run install and build from the monorepo project root phases: preBuild: commands: - yarn install build: commands: - yarn build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* - .next/cache/**/*
3.
예제
예제 코드
다음은 모노레포에서 환경변수를 설정하는 방법입니다. 공식문서
🔥
아래의 문서는 2023.12.18 기준으로 작성되었습니다.
누비랩에서 Amplify를 사용할 때, 겪었던 문제입니다.
next.js를 배포 할 때, (git 레포 파일로) amplify에서 자동으로 nextjs임을 감지합니다.
하지만 amplify에서 정확하게 next임을 인지하지 못한 경우 aws cli로 설정해야합니다.
AWS cli 설치
mac 이외의 환경에서는 여기를 확인합니다.
curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg" sudo installer -pkg AWSCLIV2.pkg -target /
shell이 aws cli 스크립트를 실행할 수 있는지 확인하는 방법
which aws # /usr/local/bin/aws aws --version # aws-cli/2.10.0 Python/3.11.2 Darwin/18.7.0 botocore/2.4.5
그럼에도 에러가 발생한 경우 아래의 옵션중에 해당사항이 있는지 확인합니다.
권한 부족
sudo chmod -R 755 /usr/local/aws-cli/
운영 체제 PATH가 업데이트되지 않음
~ 에 있는 .bash_profile에 아래의 path를 수정합니다. 사용자의 따라 ~/.zshrc 일 수 있습니다.
export PATH=/usr/local/bin:$PATH
그후 터미널 재실행 or 현재 세션에 bash 프로파일을 업데이트 합니다.
source ~/.bash_profile
AWS cli 실행
aws cli 인증
아래의 명령어를 통해 aws cli에 credential 를 업데이트 합니다.
aws configure
순서대로 발급한 aws_access_key_id, aws_secret_access_key를 입력합니다.
(발급 방법은 @Anonymous 님께 물어보기)
region은 ap-southeast-2이고 default 포맷은 입력을 생략합니다.
설정을 성공하였다면 ~/.aws/credentials 파일에서 아래와 같이 볼 수 있습니다.
vim ~/.aws/credentials # 1 [default] # 2 region = ap-southeast-2 # 3 aws_access_key_id = A************* # 4 aws_secret_access_key = /q*************
Amplify 플랫폼 변경
자세한 세팅 방법은 여기서 확인할 수 있습니다.
next 11 버전에서 SSR 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB_DYNAMIC --region ap-northeast-2
next 12 이상의 버전에서 SSR 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB_COMPUTE --region ap-northeast-2
next SSG 에서 플랫폼 세팅
aws amplify update-app --app-id <appId> --platform WEB --region ap-northeast-2
또한 SSG 세팅은 추가로 package.json 에서 build 후 export 해야합니다.
"scripts": { "dev": "next dev", "build": "next build && next export", "start": "next start" },
또한 build yml을 수정합니다.
version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: out # 빌드 파일 확인 files: - '**/*' cache: paths: - node_modules/**/*
빌드 설정
Next & Node version
next 14 버전에서는 node 18.17 버전 이상에서 실행하는 것을 요구합니다. 따라서 amplify 의 도커 이미지와 node 버전을 업데이트 해야합니다.
빌드설정 > Build image settings > 수정 버튼 클릭
빌드 이미지 : linux 2023
Node version : 18.17 이상
Next version : 프로젝트의 Next version
모노레포
모노레포의 경우 필요한 설정이 복잡합니다. 정확한 가이드는 여기서 확인 가능합니다.
App Root 세팅
아래의 structure 의 경우
ExampleMonorepo apps nextApp1 app2 app3
1.
amplify 환경변수로 AMPLIFY_MONOREPO_APP_ROOT = apps/nextApp1 을 세팅합니다.
2.
build yml을 수정합니다
version: 1 applications: - appRoot: apps/nextApp1 backend: phases: preBuild: commands: - *enter command* build: commands: - *enter command* postBuild: commands: - *enter command* frontend: buildPath: apps/nextApp1 # Run install and build from the monorepo project root phases: preBuild: commands: - yarn install build: commands: - yarn build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* - .next/cache/**/*
3.
예제
예제 코드
다음은 모노레포에서 환경변수를 설정하는 방법입니다. 공식문서
🔥
아래의 문서는 2023.12.18 기준으로 작성되었습니다.
누비랩에서 Amplify를 사용할 때, 겪었던 문제입니다.
next.js를 배포 할 때, (git 레포 파일로) amplify에서 자동으로 nextjs임을 감지합니다.
하지만 amplify에서 정확하게 next임을 인지하지 못한 경우 aws cli로 설정해야합니다.
AWS cli 설치
mac 이외의 환경에서는 여기를 확인합니다.
curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg" sudo installer -pkg AWSCLIV2.pkg -target /
shell이 aws cli 스크립트를 실행할 수 있는지 확인하는 방법
which aws # /usr/local/bin/aws aws --version # aws-cli/2.10.0 Python/3.11.2 Darwin/18.7.0 botocore/2.4.5
그럼에도 에러가 발생한 경우 아래의 옵션중에 해당사항이 있는지 확인합니다.
권한 부족
sudo chmod -R 755 /usr/local/aws-cli/
운영 체제 PATH가 업데이트되지 않음
~ 에 있는 .bash_profile에 아래의 path를 수정합니다. 사용자의 따라 ~/.zshrc 일 수 있습니다.
export PATH=/usr/local/bin:$PATH
그후 터미널 재실행 or 현재 세션에 bash 프로파일을 업데이트 합니다.
source ~/.bash_profile
AWS cli 실행
aws cli 인증
아래의 명령어를 통해 aws cli에 credential 를 업데이트 합니다.
aws configure
순서대로 발급한 aws_access_key_id, aws_secret_access_key를 입력합니다.
(발급 방법은 @Anonymous 님께 물어보기)
region은 ap-southeast-2이고 default 포맷은 입력을 생략합니다.
설정을 성공하였다면 ~/.aws/credentials 파일에서 아래와 같이 볼 수 있습니다.
vim ~/.aws/credentials # 1 [default] # 2 region = ap-southeast-2 # 3 aws_access_key_id = A************* # 4 aws_secret_access_key = /q*************
Amplify 플랫폼 변경
자세한 세팅 방법은 여기서 확인할 수 있습니다.
Made with SlashPage