AWS에 웹 프론트 배포하기

아 배고프다,, 오늘은 뭐먹지 .. 

육사시미가 또 먹고싶네.. 육사시미 이번 주말에 꼭 먹어야지 룰루..

벌써 금요일이라니 시간이 너무 빠르다

 

 

목표

1. 정적 파일 및 자산 업로드 AWS S3에 업로드하기
2. AWS S3 버킷에 정적 웹사이트 호스팅 
3. GitHub Actions로 CI/CD 자동화 -> 는 시간보고 결정

 

정적 파일 S3에 업로드하기

 

버킷의 이름은 서비스의 도메인과 유사하게 작성하면 된다. 해당 이름은 URL로 사용 가능해야 한다. 그리고 가장 특이한건 세계의 모든 AWS S3 버킷들을 통틀어 유일해야 한다. 호스팅을 할 때 들어갈 것이라 그런가 .. ? 

 

버킷을 생성해보자

테스트 용으로 하나 만들었다.

 

다음은 작성한 코드를 프로덕션 모드로 빌드할 것이다!

나는 리액트를 사용한 프로젝트를 배포할 예정이다. 라이브러리를 썼다면 package.json에 빌드 스크립트가 존재하니 걱정 노노

 

그러니 내 프로젝트의 내용물들을 빌드 한 후 빌드 파일을 S3 버킷에 업로드 하면 된다!

npm run build

위 명령어로 빌드를 하면 build 폴더가 생기는데 해당 폴더를 S3에 업로드 해주면 된다.

짜잔

 

히히 성공

버킷의 속성 탭을 들어가게 되면 정적 웹사이트 호스팅 탭이 있다.

 

이런 식으로 호스팅을 활성화 시켜준다.

인덱스 문서와 오류 문서 둘다 Index.html 로 설정해 두었다. 아직 건든 부분이 없으므로 ㅎ

 

엔드포인트가 최종 내 사이트의 호스팅 주소닷

이렇게 변경사항 저장 까지 해주면 끝난 줄 알았지만..!

며용 ㅋ

공개접근이 아직 허가 되지 않은 상태이기 때문이라 한다.. ㅋㅋ

access 설정을 바꿔서 허가해줘야겠다.

 

버킷의 권한 탭에 가서 퍼블릭 액세스 차단 을 편집해준다.

 

원래 상태

차단 체크를 해제한다!

이렇게 변하면 된다. ㅎㅎ

그리고 GetObject 작업에 대해서도 공개 접근을 허가하는 정책을 추가해야한다.

허허 참 귀찮네

 

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
    }
  ]
}

YOUR-BUCKET-NAME 만 버킷 이름으로 바꿔서 버킷 정책 항목에 추가해준다.

 

그러면 ...!!

 

히히 제대로 배포가 된 것을 확인할 수 있다 끼욧ㅋ

 

다음에 해볼 실습은

github action에서 ci/cd 자동화와 도메인 이름 설정하기 정도 되겠다.

히히 딱히 걸림돌 없이 잘 해결 돼서 기분이 좋다 ㅎ

 

참고한 블로그 주소를 남기겠다 .. 이분은 정말 천사야..

 

https://blog.appleseed.dev/post/frontend-deploy-on-aws-1/