프론트엔드 AWS 배포하는 법

돌하룻밤 프로젝트를 무사히 마치고, AWS에 배포까지 진행해 보았다. 최종 배포한 링크는 아래에! 👇✨
돌하룻밤 프로젝트

배포하는 법을 까먹기 전에 다시 한 번 블로그에 기록해 두고자 한다.

전체적인 플로우

1. VSC : 프로젝트의 최종 버전을 build한다.
2. AWS : 버킷을 만들고 build한 파일을 업로드한다.
3. KAKAO API : 권한설정 - 도메인(플랫폼 등록) 및 URI 설정

🐾 STEP 1. VSC

터미널 창에 npm run build를 입력하여 build 폴더를 만들어준다.

npm run build
// 유저들은 우리가 빌드한 결과물을 사용하는 것이다.

터미널 창에 입력하고 나면, build라는 폴더가 생성된 것을 볼 수 있다. 더불어, index.html파일은 한 줄로 쭈르르륵 작성되어 있으며, js파일들은 아래 처럼 글씨가 다 합쳐져서 나오는 것을 볼 수 있다!

// js파일을 열어보면 아래와 같이 되어있다.🧐

🐾 STEP 2. AWS -S3

회원가입

🍊 1. AWS에 버킷을 만들기 전, 먼저 회원가입부터 진행해준다.

카드등록하고 지역 설정해주고 등등 일반 회원가입과 동일하며, '무료'버전으로 가입해주면 된다.

이제부터 build한 파일을 올리기 전, 먼저 버킷부터 생성해 줄 것이다. 이 버킷은 프로젝트 배포용도로 사용하는 것으로, 만약에 수정해야 할 일이 있다면 버킷에 업로드 했던 파일들을 수정해주면 된다.

버킷만들기

🍊 1. 검색창에 S3를 입력 후 버킷 만들기를 클릭!

🍊 2. 버킷이름, AWS리전, 퍼블릭 엑세스 차단 설정을 해준다.

👆 2-1 . 버킷 이름

• 아래 주의사항에 적혀있는 것처럼, 모두 소문자로 작성해준다.

👆 2-2. AWS 리전

• 서울에 있으므로 서울로 지정
  

👆 2-3. 퍼블릭 엑세스 차단 설정 풀어주기
다른 사람들이 접속할 수 있도록 엑세스 차단을 풀어주는 과정이다.
아래 사진의 상단 처럼 모든 퍼블릭 엑세스 차단에 있는 체크박스를 풀어준 후, 제일 하단의 주의 마크 아래에 있는 체크박스에 체크를 해준다.

여기까지 하면 이 페이지는 끝! 다른 설정들은 그대로 두어도 된다.
마지막으로 버킷 만들기를 클릭하면 버킷이 새로 생성된다! 🥳👇새로 생성된 버킷 예시! 아직 엑세스는 퍼블릭으로 설정되어 있지 않다.

🍊 3. VSC로 build 해두었던 파일을 업로드한다.

3-1. 버킷 이름을 클릭한다.

3-2. 업로드 버튼을 눌러 빌드 폴더의 파일과 폴더를 모두 업로드 해준다.
이 때, 파일은 여러 개가 한꺼번에 올라가지 않으므로, 하나씩 선택하여 업로드해 주고, 폴더도 하나씩 클릭하여 업로드 해 준다.
👇 아래 사진 기준으로, 빨간색 박스 안에 들어있는 폴더or파일을 한번씩 클릭하여 총 5번 업로드를 진행한다.

🍊 4. '속성' 탭 제일 하단의 '정적 웹 사이트 호스팅' 을 편집해준다.

4-1. '편집'을 클릭하면 아래와 같은 창이 뜨는데, 체크박스의 설정을 아래와 동일하게 해 주면된다.
- 정적 웹 사이트 호스팅 ➡️ 활성화
- 호스팅 유형 ➡️ 정적 웹 사이트 호스팅
- 인덱스 문서 ➡️ index.html이라고 작성
- 오류 문서 ➡️ index.html이라고 작성
- 리디렉션 규칙 - 비워두어도 된다.
- 위와 같이 설정해 준 후, '변경사항 저장'을 클릭

4-2. 여기까지 하면, 엔드포인트가 생성되었을 것이다!

4-3. 그러나 클릭해 보면 아래와 같이 403 에러가 떠있을 것이다.

🍊 5. '권한'탭의 '버킷 정책'에 기존에 작성되어 있는 코드를 모두 삭제한 후, 아래 코드를 복사한 후 그대로 붙여넣는다.

⛔️ 아래 코드 붙여넣기 할 때 주의점!! 코드 가장 아래 줄의 'Bucket-Name'에 본인의 버킷 이름을 넣어줘야 한다.

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

내 버킷 이름을 넣은 예시)

이제 다시 속성 탭으로 가서 생성해놓았던 엔드포인트를 클릭하면 내 프로젝트가 화면에 정상적으로 나오는 것을 볼 수 있다.🥳❤️🙋‍♀️

⛔️ 그런데 만약 내 화면이 나오지 않는다면? 불러온 API의 권한 설정이 되어있는지 확인해야 한다.

우리 프로젝트의 경우, 카카오 로그인과 카카오 지도 API를 사용하였는데, 도메인 및 URI 설정 등록을 해 주지 않아 처음에 화면이 정상적으로 뜨지 않아 놀랐었다! Router.js로 지정해놓은 페이지들을 다 입력하여 화면에 띄워보니, 카카오 API를 사용한 페이지만 나오지 않았기에 문제가 있음을 알 수 있었고, 카카오 API 홈페이지에서 아래와 같은 설정을 해주었다.

🐾 STEP 3. 카카오 API 설정

🗝 카카오 로그인 API를 사용했다면?

1. kakao developers ➡️ 내 애플리케이션 ➡️ 플랫폼 ➡️ Web위 수정 버튼을 눌러 사이트 도메인에 위에서 만들어 놓은 내 엔드포인트를 등록해준다.
   

2. 그 후, 하단의 URI 등록하기 버튼을 눌러 URI를 등록해준다. 사용하고 있는 Route까지 붙여서 작성해줘야 한다. (아래의 경우 route에서 지정해두었던 /kakao/token을 붙여서 작성해주었다.)
   

3. URI를 작성해 놓았던 코드를 내 버킷 엔드포인트로 수정해준다. (여기도 kakao/token을 붙여서 작성
   

🗝 카카오 지도 API를 사용했다면?

위의 1번 과정만 진행해도 된다. 즉, 아래의 과정만 해 주면 된다!

kakao developers ➡️ 내 애플리케이션 ➡️ 플랫폼 ➡️ Web위 수정 버튼을 눌러 사이트 도메인에 위에서 만들어 놓은 내 엔드포인트를 등록해준다.

이제 다시 처음부터 빌드 한 후, 기존에 버킷에 있던 파일을 모두 삭제한 후 새로 빌드한 파일을 다시 업로드 해주면된다 ^^ㅎㅎㅎ(이 글을 읽으신 분들께 죄송) 애초에 이걸 알았더라면 처음부터 설정해주었겠지만, 이렇게 단계별로 하면서 무엇이 문제인지 알아가는 것이 참 도움이 되었다.

혹시나 여기까지 하는 과정 중 문제가 있었거나, 잘못된 정보가 있다면 언제든 아래 댓글로 부탁드립니다!