빌드
개발에서 빌드는 일반적으로 소스 코드 및 구성 요소들을 모아서 실행할 수 있는 파일로 만들고 최종적으로 배포할 수 있는 형태로 변환하는 과정을 의미한다.
- 터미널을 열어서
npm run build하면 빌드 파일이 생성된다. - 로컬 환경에서 웹 서버를 실행하여 코드가 잘 동작하는지 확인해야 한다.
터미널에npx serve build를 입력하면 로컬호스트 주소가 뜨는데 접속해서 확인해보면 리액트 페이지가 나타나는 것을 확인할 수 있다. - 종료 방법 : Ctrl + C
AWS를 사용하여 배포하기(S3)
버킷 생성, 설정
-
aws에 회원가입을 한다.
-
S3 클릭 후 버킷만들기를 클릭한다.
-
프로젝트에 커스텀 도메인을 적용할 거라면 버킷 이름을 도메인과 같게 작성한다.
-
모든 사람들이 접근 가능하게 사이트를 배포하는 것이기 때문에 모든 퍼블릭 엑세스 차단 체크 박스를 해제한다.
-
버킷 만들기 클릭 후 버킷 생성
-
버킷이 생성됐으면 버킷 이름 클릭, 속성의 정적 웹 사이트 호스팅을 활성화한다.
-
인덱스 문서와 오류 문서에 html 파일을 지정해준다.
-
권한 -> 버킷 정책 -> 편집 -> 정책을 코드로 작성할 수도 있고 정책 생성기로 만들수도 있다.
-
모든 사용자들이 S3 파일을 읽을 수 있도록 권한 설정을 해주고 싶다면
1) Policy Type : S3 Bucket
2) Principal : (별표 표시)
3) Actions : Get Object 선택
4) ARN : 정책 편집 페이지의 버킷 ARN을 복사하고 붙여넣고 (슬래시, * 별표 추가)버킷의 모든 파일에 정책을 적용한다는 의미
5) Add Statement -> Generate Policy 클릭하면 나오는 JSON 문자열을 복사해서 정책 편집 페이지에 붙여넣고 저장해준다.
빌드 파일 업로드
- 객체 메뉴의 업로드 버튼 클릭
- 빌드 폴더의 모든 파일들을 업로드해준다.
프로젝트에 접속하기
- 속성 메뉴의 정적 웹 사이트 호스팅 부분에 버킷 웹사이트 엔드 포인트가 생성되었을 것이다.
- 거기에 있는 주소가 프로젝트의 웹사이트 주소이다.
커스텀 도메인 달기
도메인은 AWS를 통해서 구입할 수도 있고, 다른 도메인 등록 업체에서 살 수도 있다.
AWS에서 도메인 구입하기
Route 53에 들어간다.
도메인 > 등록된 도메인 메뉴의 도메인 등록 버튼을 클릭한다.
도메인을 구입하고 Route 53의 호스팅 영역 메뉴로 들어가보면 구입한 도메인이 생성됐을 것이다.
다른 사이트에서 도메인을 구입한 경우
-
Route 53에 들어간다.
-
호스팅 영역 생성 버튼을 클릭해 도메인을 위한 호스팅 영역을 만든다.
-
호스팅 영역이 만들어지면 기본 값들이 설정된다.
-
도메인을 구입한 사이트에 들어가서 네임 서버 설정을 해준다.
-
커스텀 네임서버를 AWS에서 생성된 레코드 중에서 NS 유형에 해당하는 값/트래픽 라우팅 대상의 값을 복사해서 커스텀 네임서버로 등록해준다.
A 레코드 등록하기
-
앞에서 만든 호스팅 영역에서 레코드 생성 버튼을 클릭한다.
-
레코드 유형은 A로 선택
-
레코드 이름을 비워두면 최상위 주소로 A레코드를 생성할 수 있고, 레코드 이름을 추가하면 도메인 앞에 뭐가 더 붙은 서브 도메인이 된다.
-
그리고 트래픽 라우팅 대상에서 별칭을 켜준다. (우리가 만들어 놓은 S3 버킷의 엔드포인트(주소)를 직접 입력하지 않아도 되고, AWS 안에서 별명처럼 쓸 수 있게 해주는 기능)
-
만약에 react.pizza 라는 주소로 만들고 싶다면 버킷 이름도 반드시 react.pizza 로 해줘야 한다
-
모두 설정하고 레코드 생성 버튼을 클릭하면, 호스팅 영역에 A 레코드가 생긴다.
