🙋♀️ 긴글 주의
CodeBuild 전에 Cloud9에서 설정해야 할것들
CodeBuild전에 Cloud9에서 설정해야하는 것들이 몇가지 있다.
- AWS Cloud9 을 검색해서 아직 Cloud9을 생성하지 않았다면 생성 해주고 open 해준다.
- 이전 포스트에서 생성해준 AWS CLI 설정을 해줘야한다. Cloud9에서 aws configure 명령어를 입력해 설정해줘야한다.(AWS CodeCommit 실행을 위한 계정 생성 / Git HTTP 접속을 위한 자격 증명 생성 포스트 참고)
- AWS 자격증명 프로필로 Git 자격 증명 헬퍼 사용을 지정하고 Git 자격증명헬퍼가 경로를 리포지토리로 전송할 수 있도록 설정 해줘야한다.(Cloud9과 CodeCommit 을 활용한 Code 버전 관리 방법 포스트 참고)
- 나는 기존에 있던 프로젝트를 가져와서 CodeBuild해줄것이기 때문에 깃허브 리포지토리를 미리 클론 해놨다.(Cloud9과 CodeCommit 을 활용한 Code 버전 관리 방법 포스트 참고)
- 깃허브 코드를 클론한뒤 CodeCommit에 리포지토리를 생성하고 push하면 CodeCommit 리포지토리에 파일들이올라가 있는것을 확인할 수 있다. 그럼 Cloud9에서 build 해 줄 레포로 이동 !.
이렇게 Cloud9에서 설정해준뒤 이제 S3 정적 호스팅 구성을 먼저 해주자 !
1. S3 정적 호스팅 구성 설정
-
AWS 콘솔에 로그인한뒤 S3을 검색해 들어간다.
-
버킷 만들기 클릭
-
AWS 리전은 서울을 선택하고 밑에서 모든 퍼블릭 엑세스 차단을 해제한다.
-
생성 된 버킷을 클릭해 준뒤 속성 탭에 들어가면 정적 웹사이트 호스팅 관련 부분이 있다. 이 탭에 맨 오른쪽 편집을 눌러주고 활성화로 변경한다. 인덱스 문서는 index.html로 적어주었다. 그다음 변경사항 저장
- 권한 탭을 들어가면 버킷 정책 에서 편집을 클릭한다.
정책을 생성해 줘야하는 데, 정책을 설정하는 이유는 외부로 부터 사이트에 접속하여 볼 수 있도록 하기 위해서다.
정책 생성기를 눌러서 생성해줄 수도 있다.
Resource에는 내가 만든 s3 이름을 넣어주어야 한다. 위에 복사하고 붙여 넣어주면 된다.
다 적용했으면 변경사항 저장 !
2. CodeBuild
이제 S3 정적 호스팅 구성 설정이 끝났으면 CodeBuild해보자 !
1.AWS 콘솔에 CodeBuild로 이동한뒤 프로젝트 빌드 탭에서 프로젝트생성을 클릭한다.
- Code Commit 리포지토에서 build 할것 이기 때문에 밑으로 내려가면 소스 1 에서 소스 공급자를 AWS CodeCommit 으로 설정해주고 올린 리포지토리를 선택해준다.
브랜치도 설정할수 있는데 지금 브랜치는 하나여서 나는 main을 선택해주었다.
-
환경구성은 기본으로 되어있는 상태로 해주면 된다.
-
buildspec은 직접 만들어서 올릴거기 때문에 buildspec.yml 로 이름을 적용한다.
-
아티팩트는
build 작업 수행후에 Buildspec 항목에서 S3로 자동 동기화 명령을 별도로 실행할 것이므로 아티팩트 없음을 선택해 주면 된다.
-
로그는 기본 설정으로 변경사항 없이 냅두고 빌드 프로젝트 생성을 누른다.
-
그럼 빌드 프로젝트가 정상적으로 생성되었음을 확인할 수 있다.
-
빌드 시작 전 Code Build 프로젝트 생성 시 생성된 역할에 권한을 추가 해줘야한다.
AWS 에서 IAM 을 입력후 역할 탭에 들어간다.
-
역할을 클릭해주고 권한탭에서 권한정책 맨 오른쪽에 셀렉트박스를 누르면 정책연결 클릭
-
S3fullAccess을 검색후 나오면 항목에 체크하고 권한을 추가해준다.
-
이제 CodeBuild 진행을 위해서 buildspec.yml 을 작성해줘야한다. Cloud9으로 이동해서 build 해주려는 레포로 이동한다음 buildspec.yml 라는 새 파일을 만들고 내용을 작성해줘야한다.
그전에 나는 nextjs를 사용하였기 때문에 정적으로 내보낼수 있도록 설정해줘야했다.
Cloud9 해당 파일에서 next.config.js 에서 output: 'export' 를 추가해줘야한다. 그리고 나서 package.json에 들어가 "build": "next build && next export" 로 수정해준다.
나머지는 next 요구에 맞게 적어주면된다. 밑에는 내가 작성한 buildspec.yml이다.
-
Cloud9 에서 buildspec.yml 추가, package.json 수정,nextConfig 수정사항들을 push 해줘야한다. add -> commit -> push 해주면 된다. 성공적으로 push가 되었다면 CodeCommit 에 잘 올라가 있는걸 확인해볼수 있다.
-
CodeBuild 콘솔로 돌아가서 만들어둔 빌드 프로젝트를 클릭한 후 이제 빌드 시작을 눌러준다.
단계 세부 정보 탭에서 성공 실패 에 대한 결과를 볼 수있는데 역시나 첫번째 에러 발생 ㅎ
위 에러 로그를 확인해봤을때 artifacts 부분에서 들여쓰기 부분이 잘못되서 에러가 발생한것 같았다. 다시 수정후 push.
그다음 build시 두번째 에러 node 버전을 20으로 수정 해결
세번째에러 “The "next export" command has been removed in favor of "output: export" in next.config.js”
계속 output: export 부분이 잘못되었다고 나와있엇는데 next에서 복사 해서 붙여놓은거라 잘못된게 없는데.. 하고 계속 살펴보다가 직접 Cloud9 에서도 npm run build 실행 했을때 밑에와 같은 에러가 발생했다.
세번째 에러 해결 -> output 으로 설정한 부분은 문제가 없는거 같고 위와 같이 설정해주면서 package.json 파일에서도 "build": "next build && next export", 로 수정해주었는데 이부분이 잘못된거였다..!!
이부분은 수정없이 그대로 "build": "next build" 이여야 한다.
드디어 성공 !!!!!
S3 버킷에 들어가면 자동적으로 올라가 있는것을 확인할 수 있다!!!!! 오예😆
S3 버킷 속성 탭에들어가면 맨 밑 부분에 엔드포인트로 내가 build한 파일을 url로 확인이 가능하다.확인을 해보니 이미지 들이 다 나오지 않앗다... 음 Next 이미지 최적화 부분을 따로 설정해줘야할거같은데 아직 자세히 알아보진 못했다.
다음 포스팅에는 Nextjs 이미지최적화와 AWS CodeDeploy를 통한 배포 자동화 , CodePipeline 포스트를 작성해보려고 한다!! 👊🏻
