🚨 이 글은 오직 S3 배포 자동화 방법만 기술해두었습니다.
🚨 이 글은 S3 배포 경험이 있으신 분들이 읽으시면 더욱 이해하기 좋습니다 🙂
하지만! 경험이 없으신 분도 최대한 읽기 편하게 작성 해두었습니다 😁
1. AWS IAM 생성
사용자 추가에 들어가서 사용자 이름을 적어주고
(저는 사용자 이름을 Web-Deploy로 했답니다. 😊)
액세스 키-프로그래밍 방식 엑세스를 선택해주세요
권한 설정은
s3에만 권한을 주거나
관리자 접근으로 권한을 주어도 됩니다.
아무래도 실무 사용에서는 해당 작업에 맞는 권한을 주는것이 맞는 것 같아요.
여기까지 끝났으면 필요에 따라 태그 등을 추가해주고 사용자 생성을 해주면 됩니다.
짜잔! 등록이 완료 되었습니다.
(아직 AWS 창을 닫지 말아 주세요. ☺️)
2. Github에서 secretKey 등록
생성한 사용자에서
액세스 키를 발급해줍니다.
그리고 Github Setting -> Secrets -> Actions -> New repository secret
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY 를 등록해주세요.
등록을 완료하면 위처럼 확인하실 수 있습니다.
3. S3 버킷 생성
s3 버킷 생성 방법은 다른 블로그에도 많이 있으니까 그 글들을 참조해주세요..!
조만간 제가 작성하게 되면 링크 공유 해드리겠습니다.
아무튼 생성하시고 유의하실 부분은
ACL 제어목록 설정을 꼭 해주셔야합니다. 😊
4. package.json 설정
package.json 의 scrpit 에 deploy를 추가해줍니다.
"deploy": "serverless && next build && next export"next js 의 경우에는 next export 도 해주어야 합니다!
build 를 하면 .next 폴더가 생기는데.. 이게 리액트의 build와는 조금 다릅니다.
next export를 하면 react 의 build 한 것 처럼 정적 파일이 생성되고
우리는 이것을 s3 버킷에 업로드를 해주면 됩니다.
5. serverless setting
root 에 .github > workflows > serverless.yml 생성
name: My App Name
on:
push:
branches: main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout source code.
uses: actions/checkout@master
with:
ref: main
- name: Install Dependencies
run: |
npm install
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_REGION }}
- name: My App Name
run: |
npm run deploy
- name: Deploy to S3
run: aws s3 sync ./${{ secrets.BUILD_DIRECTORY }} ${{ secrets.AWS_S3_BUCKET_NAME }} --acl public-read --deletemain 브랜치에 push 했을 때만 배포되는 방식으로 설정.
여러분들이 원하시는 걸로 바꾸시면 됩니다!
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
를 설정했던 것 처럼 아래의 것들도 설정해주면된다.
AWS_REGION
BUILD_DIRECTORY
- next 의 경우에는 out 으로 설정해주면 됩니다.
(자세한 설명은 4번을 봐주세요)
react 의 경우는 build로 해주시면 될듯!
build 폴더명을 다르게 설정 하셨다면... 설정하신대로 작성하시면 됩니다!
AWS_S3_BUCKET_NAME
Steps는 배포의 순서를 의미합니다.
우리가 평소에 s3에 수동으로 올려줬던 순서를 생각하면서 작성해주면 됩니다.
npm run build -> aws 로그인 -> s3에 빌드 폴더 업로드(이 부분에서 조금 해멨던게.. 무지성으로 복사해서 하다가.. 그랬다.. 여러분은 그러지 마시길 바란다 😰)
6. root에 serverless.yml 설정
myNextApplication:
component: '@sls-next/serverless-component@MY_VERSION'
inputs:
bucketRegion: 'MY_REGION'
bucketName: 'MY_BUCKET_NAME'서버리스의 버전에 저는 latest 로 설정을 해줬습니다.
7. 끝 !
이제 모든 설정은 끝났다.
배포를 설정한 브랜치에서 push를 하면
git action 에서 확인할 수 있습니다.
성공하면서 초록색 체크
실패하면 빨간색 X 가 뜹니다!
참고로 실패하면 메일도 온답니다 😊
따라 와주시느라 고생 많으셨습니다 👏
다음에 더 유익한 글로 찾아뵙겠습니다 😊
