일단 뭐라도 할려면 펠리컨적 사고가 필요한거 같다.
일단 맨땅에 헤딩부터.
내가 이때까지 해오던 배포 방식은 98% vercel을 이용한 배포 방식이었다.
서버? 그냥 백엔드에서 api만들어주면 서버에 올려서 내가 갔다 쓰는 줄만 알았지.
그런데 뭐 EC2, amplify, lambda 이런 것들이 있었다.
그중에 이번엔 기존에 vercel에서 배포했던 프로젝트들을 amplify에서 배포해보기로 했다.
AWS Amplify란 무엇인가요?
AWS Amplify는 안전하고 확장 가능한 모바일 및 웹 애플리케이션을 구축하기 위한 포괄적인 개발 플랫폼입니다. 백엔드 구성, 호스팅 및 배포를 포함하여 애플리케이션 개발의 여러 측면을 간소화합니다.
주요 특징들
1. 간소화된 배포 : 몇 번의 클릭만으로 정적 웹사이트와 단일 페이지 애플리케이션(SPA)을 배포할 수 있습니다.
2. CI/CD 내장 : 모든 코드 커밋에 대한 빌드 및 배포 프로세스가 자동화됩니다.
3. 서비스형 백엔드(BaaS) : 인증, 데이터베이스, 저장소 등을 쉽게 추가할 수 있습니다.
4. 다른 AWS 서비스와의 통합 : AWS AppSync, AWS Lambda, Amazon S3와 같은 서비스와의 원활한 통합이 가능합니다.
장점
1. 사용 편의성 : 프런트엔드 개발자와 DevOps에 대한 지식이 부족한 팀에 이상적입니다
2. .속도 : 자동화된 워크플로를 통해 빠른 배포 및 반복이 가능합니다.
3. 비용 효율성 : 트래픽이 적은 애플리케이션에는 무료 계층을 제공하고 사용량에 따라 요금을 지불합니다.
4. 확장성 : 웹 트래픽에 대한 확장을 자동으로 처리합니다.
고려 사항
1. 통제력 낮음 : 자체 인프라를 관리하는 것에 비해 사용자 정의가 제한적입니다.
2. 특정 사용 사례에 가장 적합 : 정적 사이트와 서버리스 애플리케이션에 더 적합합니다.
먼저 새 앱 생성을 클릭을 한다.
나는 깃헙 레포지토리를 연결할거기 때문에 깃헙을 선택하였다.
깃헙을 선택하고 다음을 누르면 레포지토리 연결 권한이 나온다.
내 레포지토리 전체를 연결할 것인지, 내가 원하는 일부 레포만 연결할 것인지 택일 해주면 된다.
일부 레포지토리에만 권한 업데이트를 했다.
배포하고 싶은 레포지토리를 클릭 한 후에 다음으로 넘어가면 된다.
꽤나 vercel 스럽다고 해야할까?
기본적으로 사용되고 있는 프레임워크나 패키지 매니저를 자동으로 감지해준다.
서비스 역할 같은 경우 기본적으로 새 서비스 역할 생성 및 사용으로만 진행했다.
기본 서비스 역할 사용의 경우
https://docs.aws.amazon.com/ko_kr/amplify/latest/userguide/how-to-service-role-amplify-console.html
서비스 역할 추가 - AWS Amplify 호스팅
이 페이지에 작업이 필요하다는 점을 알려 주셔서 감사합니다. 실망시켜 드려 죄송합니다. 잠깐 시간을 내어 설명서를 향상시킬 수 있는 방법에 대해 말씀해 주십시오.
docs.aws.amazon.com
aws에서 제공하는 docs를 보고 설정해보는게 좋을거 같다.
빌드 이미지의 경우 디폴트 값으로 사용하고, 환경 변수가 있을 경우 입력하고 다음 버튼을 누른다.
이 페이지에서 리소스를 배포하도록 리전이 구성되어 있는지 확인이 되면 저장 및 배포 버튼이 활성화 된다.
배포 버튼을 누르면 빌드가 진행되는 로그를 확인할 수 있다. 이러고 최종적으로 오류없으면 배포가 완료된다.
aws라고 해서 약간 긴장하면서 해봤는데, 조금? 복잡한 vercel 같은 느낌?
간혹 이러한 amplify.yml이라는 빌드 설정 스크립트를 설정해야할 때도 있지만 왠만하면 기본으로 설정해도 오류 없이 잘 배포가 진행되는 느낌이다.
하지만 사실 프로젝트 하나가 꼬박 2일 동안 이런저런 에러가 발생하여 애를 먹었다..
왜인지 모르겠으나 기존 pnpm yarn berry 조합을 사용한 프로젝트는 무난하게 빌드가 되었는데,
다른 하나가 output 폴더 권한이 없다느니, packgae에서 next dependency를 찾을 수 없다느니..
그래서 sudo 명령어를 써서 폴더 권한을 강제로 부여하고, 온갖 방법을 다 사용해봤지만 안되길래
npm 패키지 매니저로 변경해서 배포하니깐 잘 되었다...
뭐가 문제였던걸까...2일 동안 여러 에러와 맞서 싸우다가 장렬하게 전사하고 다른 방법을 강구해서 해결됐지만
왠지 모를 이 찝찝함은 가시지 않을거 같다.
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install --immutable
- yarn cache clean
build:
commands:
- sudo mkdir -p /codebuild/output/root && sudo chown -R $USER:$GROUP /codebuild/output/root << sudo로 강제로 권한을 줌.
- yarn run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
- .next/cache/**/*
<에러 로그>
2024-07-30T13:24:19.981Z [WARNING]: mkdir: cannot create directory '/codebuild/output/root': Permission deniedsudo를 사용하는거보다 더 나은 방법이 있을거 같은데..
위와 같이 amplify.yml을 설정한 이후에는 당연히 잘되겠지? 생각하고 다시 배포를 진행했다.
## Completed Frontend Build
2024-07-31T15:58:15.569Z [INFO]: ## Build completed successfully
2024-07-31T15:58:15.570Z [INFO]: # Starting caching...
2024-07-31T15:58:15.580Z [INFO]: # Creating cache artifact...
2024-07-31T15:58:16.293Z [INFO]: # Created cache artifact
2024-07-31T15:58:16.293Z [INFO]: # Uploading cache artifact...
2024-07-31T15:58:17.995Z [INFO]: # Uploaded cache artifact
2024-07-31T15:58:17.995Z [INFO]: # Caching completed
문제의 에러 로그 >>
2024-07-31T15:58:18.005Z [ERROR]: !!! CustomerError: Cannot find package: next. Please ensure the dependency is installed correctly
2024-07-31T15:58:18.006Z [INFO]: # Starting environment caching...
2024-07-31T15:58:18.006Z [INFO]: # Environment caching completed분명 위의 로그를 보면 프론트엔드 빌드는 성공적으로 완료되었다. 라고 했는데 아니였다.
CustommerError..amplify github issue를 뒤져봤지만 CustommerError 중 Cannot find package 에러를 겪은 사람은 한 분이었고, 그 분도 issue 댓글을 보니 아무 해결방안 없이 묻힌거 같다.
2일동안 30시간 정도 붙잡고 있으니 머리가 터질거 같고 부족한 지식으로는 해결을 못 할거 같아서 npm 패키지 매니저로 변경해서 배포를 해버렸다.
npm 패키지매니저는 되는거보니 yarn berry나 pnpm의 문제가 아닐까...싶다가도 다른 프로젝트는 잘 배포된다...
댓글