S3 스토리지

버킷 생성

먼저 S3에 들어가서 버킷을 만들어줍니다.

버킷 이름, 리전 선택

원하는 버킷명을 지어주고 AWS 리전은 아시아 태평양 서울을 선택해줍니다. 객체 소유권은 ACL 비활성화를 서택해줍니다.

퍼블릭 엑세스 차단 설정

퍼블릭 엑세스 차단을 활성화 한 상태로 넘어갑니다.(public으로 접근하는걸 막고 CloudFront로 접근하는것만 허용)

기타 사항

밑에 있는 사항들은 그대로 두고 버킷을 생성해줍니다.

빌드한 파일, 폴더 업로드

생성한 버킷에 들어가서 빌드한 파일과 폴더를 업로드 해줘야합니다. vite로 생성한 리액트 프로젝트를 빌드하면 결과물이 dist폴더안에 담겨있습니다. 여기서 _주의해야할 사항_이 있는데 업로드할때 dist폴더를 통째로 업로드하는게 아니라 dist폴더안에 있는 파일과 폴더를 따로 올려줘야합니다!!

S3 스토리지 설정은 끝났고 이제 CloudFront 설정을 하면됩니다.

CloudFront

배포 생성

CloudFront에 들어가서 배포 생성을 해줍니다. 원본 도메인에 S3에서 생성한 버킷을 선택해서 클릭합니다.

원본 엑세스 설정

원본 엑세스 제어 설정을 선택한 후 제어 설정 생성을 눌러줍니다. 제어 설정 생성창이 나올텐데 확인하고 생성버튼을 누르면 됩니다. S3 버킷 정책 업데이트는 배포후 설정하는것이라 지금은 넘어가면됩니다.

Origin Shield 활성화

Origin shield 활성화를 해주고 리전은 아시아 태평양(서울)로 선택해줍니다.

기본 캐시 동작 설정

기본 캐시 동작에서 뷰어 프로토콜 정책을 Redirect HTTP to HTTPS를 선택해줍니다.

나머지 사항들은 그대로 두고 함수 연결도 그대로 두고 넘어갑니다. 웹 어플리케이션 방화벽은 비활성화를 선택하고 넘어갑니다.

기본값 루트 객체 설정

설정칸에서 나머지는 그대로 두고 루트 객체에 index.html을 넣어줍니다. /index.html이 아니고 index.html만 넣어주면됩니다. 마쳤으면 배포해주면 됩니다.

버킷 정책 업데이트

생성하고 나면 화면 위에 노란색 창이 나오는데 버킷 정책을 업데이트를 하라고 나옵니다. 이때 오른쪽에 있는 정책 복사를 클릭하고 생성한 s3 버킷에 들어가 권한탭에서 버킷정책에다가 붙여넣기하고 저장하면 됩니다.

사용자 정의 오류 응답 생성

CloudFront로 돌아와서 배포페이지에 들어가서 오류페이지 탭에 들어가서 사용자 정의 오류 응답 생성을 해줍니다. 두개를 만들어줘야하는데 403, 404 에러 설정을 해줘야합니다. HTTP 오류 코드만 403, 404 따로 설정하고 응답페이지 경로, HTTP 응답코드는 같은 값을 넣어주면됩니다.

이걸 설정해주는 이유는 CSR 방식의 프로젝트를 CloudFront로 배포를 하게 되면 403/404에러가 발생하는데 이는 React는 react-router-dom을 사용해서 새로고침 대신 서비스 내에서 redirect를 발생시키는데 _CloudFront는 redirect를 에러로 처리_하기 때문이라고 합니다.

추가사항

만약 이렇게 설정하고도 안된다면 배포한 CloudFront에 들어가서 무효화 탭에서 객체 경로 추가에 /* 넣고 무효화 생성을 하고 좀 있다가 들어가면 해결됩니다.

배포 끝!!!

설정을 완료했고 해당 배포 도메인 주소를 복사해서 url창에 넣으면 여러분들이 올려놓은 프로젝트가 화면에 나옵니다~~!

도움이 됐다면 댓글, ❤️

에디터(vscode)로 작성하는팁

1. 먼저 폴더 하나 생성
2. 코드를 작성할 js파일을 하나 생성
3. 예제를 입력할 txt파일을 하나 생성

   const input = require("fs")
   .readFileSync("example.txt", "utf8")
   .trim()
   .split("\n");
   

const solution = (input) => {};

solution(input);

4. 위 자바스크립트 코드를 js파일에다가 넣어줍니다
5. txt 파일에다가 예제를 그대로 복붙해주면 input인자에 **배열형태**로 한줄씩 **문자열**로 예제값들이 담겨져있는걸 확인할 수 있습니다.

### 예제 입출력
```txt
example.txt

백준
1 2 3 4 5

// index.js
const input = require("fs")
  .readFileSync("example.txt", "utf8")
  .trim()
  .split("\n");

const solution = (input) => {
  console.log(input);
};

solution(input);

이렇게 작성하고 터미널에 node index.js 입력 후 출력

백준사이트에 작성하는팁

위에서 작성한 코드는 txt파일에 있는 예제값을 받아서 처리하는거기때문에 백준 사이트에서 작성할때는 input을 다르게 받아줘야합니다

const input = require("fs").readFileSync("/dev/stdin", "utf8").trim().split("\n");


const solution = (input) => {};

solution(input);

solution에 있는 코드는 그대로 두고 input 변수에 들어간 코드만 저렇게 바꿔주면 그대로 백준 사이트에서 정답을 확인할 수 있습니다.

도움이 됐다면 ❤️