S3 배포를 통해 알아보는 React 배포 과정
우리가 작성한 소스코드를 다른 사람이 알아볼 수 있는 형태로 만드는 걸 '배포'한다고 한다.
보통 웹 프로젝트는 웹 서버에 배포한다. 예를 들어 구글에 접속하면 브라우저가 웹페이지를 띄우기 위해 필요한 데이터들을 다운받게 되는데, 이때 데이터를 보내주는 역할을 하는 것이 웹 서버이다. 웹 서버가 보내주는 데이터들은 html, js, css 같은 코드들도 있고 video, img 같은 파일들도 존재한다. 이런 데이터들을 다운받고, 브라우저가 잘 해석하기 때문에 웹페이지가 잘 나타나는 것.
jsx(ES6)로 작성한 코드들은 웹브라우저가 바로 해석할 수 없는 형태이기 때문에, 순수한 js(ES5) 코드로 변환한 뒤 웹 서버를 통해 제공되어야 한다.
이렇게 웹 서버가 사용하기 좋은 형태로 변환하는 과정을 프론트에서는 '빌드'라고 한다.
개발한 프로젝트 빌드하기
npm run build빌드를 하면 프로젝트 안에 build 폴더가 생성되고, build 폴더는 프로젝트 파일들을 웹 서버가 이해하기 좋은 형태로 변환한 파일들을 담고있다. 쉽게 말해 이 build 폴더 안의 파일들을 웹 서버에 제공하면 프로젝트가 배포되는 것.
빌드한 것 로컬에서 실행하기
npx serve buildserve라는 프로그램을 통해 빌드한 파일들이 제대로 동작하는지 확인할 수 있다. 해당 명령어는 serve라는 프로그램을 다운받고, build 폴더 내에서 서버를 실행하는 명렁어이다. 명령어를 실행하면 로컬호스트나 IP주소(같은 공유기 내의 무선 인터넷을 사용하는 다른 컴퓨터 대상) 로 빌드한 파일들의 동작을 확인할 수 있다.
AWS S3 배포하기
클라우드 컴퓨팅 서비스업체인 aws에서 제공하는 웹 서버를 사용해서 배포를 해보자. 평소에 구글 포토에 사진을 저장하는 것처럼 개발에 필요한 기능들을 클라우드로 사용하는 서비스이다.
1. aws 계정에 로그인한다.
2. aws 관리 콘솔 > 모든 서비스 > 스토리지의 S3 선택 (구글 드라이브 같은 저장소)
*S3는 계정을 만든 이후 12개월동안은 무료로 쓸 수 있는 사용량을 제공해준다. 이후에는 사용한만큼 비용 결제
3. 버킷 만들기 (버킷은 C드라이브,D드라이브처럼 파일들을 모아두는 큰 단위라고 생각하면 된다)
4. 버킷이름 작성하기 (커스텀 도메인을 적용할거라면 도메인 이름과 버킷이름을 동일하게 작성하기)
5. '모든퍼블릭 엑세스 차단' 체크 박스 해제, 아래에 경고문구에 ✅ 알고있습니다 체크(모든 사람들이 접근 가능하도록 하기 위함)
6. 가장 아래에 버킷 만들기 버튼 클릭
7. 버킷 생성을 완료했으면 버킷 목록에서 이름을 클릭하여 추가로 필요한 설정을 해준다
8. 속성 > 정적 웹 사이트 호스팅(S3에 올린 파일을 웹 사이트로 만드는 것) > 편집 > ✅ 활성화 체크
9. 인덱스 문서에 index.html 작성, 오류 문서에도 index.html 작성 (파일이 없는 경로로 접속하면 보여줄 html 파일)
10. 아래에 변경사항 저장
11. 권한 > 버킷 정책(웹브라우저가 버킷에서 할 수 있는 권한 설정) > 편집 - 이때, 버킷 ARN을 복사해둔다.
12. 정책 생성기 버튼 클릭 > (모든 사람들이 S3 파일을 읽을 수 있도록 권한 설정) step1 : S3 Bucket Policy 선택
13. step 2 : principal에 '*' 입력 (정책을 모든 사용자에게 적용), Actions에 GetObject 선택
14. step 2 : ARN 란에 버킷 정책 편집 탭에서 복사해둔 버킷 ARN 붙여넣은 후 /* 를 붙여준다 (모든 파일에 이 정책 적용)
15. add statement 버튼 클릭 후 generate policy 버튼 클릭 -> json 문자열로 정책이 만들어진 것 복사
16. 복사한 정책을 붙여넣기한 후 변경 사항 저장
17. 객체 > 업로드 > 빌드 폴더 내의 모든 파일 끌어다놓기 > 업로드 > 완료되면 닫기
18. 속성 > 스크롤 쭉 내려 정적 웹 사이트 호스팅 부분에 엔드포인트 생겨남 (프로젝트의 주소!)
커스텀 도메인 달기 (AWS Route53)
도메인은 AWS를 통해서 구입할 수도 있고, 다른 도메인 등록 업체에서 살 수도 있다.
구글에서 '도메인 구매'를 검색한 뒤 마음에 드는 업체를 골라 구입하면 된다.
AWS에서 도메인 구입하기
AWS에서 'Route 53'을 검색해 들어간다.
도메인 > 등록된 도메인 메뉴로 들어가면 아래와 같은 화면이 나오는데, 여기서 도메인 등록 버튼 클릭
yeji라는 도메인을 검색해보았다
사용할 수 없다고해서 leeeyez로 검색해봤더니 가능하다고 한다
마음에 든다면 선택해서 결제를 진행하면 된다. 도매인을 구입 후 Route 53d에 있는 호스팅 영역 메뉴로 들어가보면, 구입한 도메인이 호스팅 영역이란 이름으로 생성되었을 것이다.
다른 사이트에서 도메인을 구입한 경우
1️⃣ 호스팅 영역 > 호스팅 영역 생성 버튼 클릭 (도메인을 위한 호스팅 영역 만들기)
2️⃣ 도메인 이름에 다른 사이트에서 구입한 도메인명을 적고, 아래의 호스팅 영역 생성 버튼을 클릭하여 생성
3️⃣ 그럼 호스팅 영역이 만들어지고, 기본 값들이 설정된다.
4️⃣ 기본 값들 중 레코드는 도메인을 서비스할 때 참고할 정보들인데, 여기서 유형이 NS인 네임서버 레코드에 주목해야한다.
5️⃣ 도메인을 구입한 사이트에 가서 '네임서버 설정'을 해주어야 한다.
6️⃣ AWS 호스팅 영역에서 기본 값으로 생성된 레코드 중에 NS 유형에 해당하는 값/트래픽 라우팅 대상의 값을 복사해서 커스텀 네임서버로 등록해줘야 한다(도메인을 구입한 사이트에 가서!!)
네임서버 설정이 잘 되었는지 확인하는 방법
https://dnschecker.org 사이트에 접속해서 레코드 유형 NS를 선택하고 설정한 도메인 이름 검색하기
초록색 체크 표시와 함께 설정한 NS 레코드 값들이 잘 보이면 성공!
네임 서버 설정은 서비스마다 다르지만 길면 하루 이틀 정도 걸릴 수 있다고 한다
A 레코드 등록하기
A 레코드는 웹 브라우저가 설정한 도메인 주소로 들어왔을 때, 어떤 주소의 서버가 응답해 줄지 지정해주는 용도로 쓰인다. 도메인 주소로 들어오면, AWS S3 버킷의 웹 사이트 엔드포인트가 응답해주면 되는 것.
1️⃣ 앞에서 만든 호스팅 영역에서 레코드 생성 버튼 클릭
2️⃣ 레코드 이름을 설정해주면 도메인 이름 앞에 붙는 서브 도메인처럼 쓰인다. (예를 들어 앞서 설정한 도메인 이름이 leeeyez이고 지금 설정한 레코드 이름이 front라면 front.leeeyez가 최종 도메인 이름이 되는 것)
3️⃣ 레코드 이름을 비워두면 그냥 최상위 주소로 A 레코드를 생성할 수 있다.
4️⃣ 레코드 유형은 A로 설정
5️⃣ 트래픽 라우팅 대상에서 별칭을 켜준다 (별칭 : 만들어놓은 S3 버킷의 엔드포인트(주소)를 직접 입력하지 않아도 되고, AWS 안에서 별명처럼 쓸 수 있게 해준다)
6️⃣ 레코드 생성
잘 적용되었는지 확인하는 방법
https://dnschecker.org 에 접속해서 A레코드 선택 후 만든 주소 검색했을 때, 초록색 체크 표시와 IP 주소가 잘 보인다면 잘 적용된 것!
브라우저는 어떻게 리액트를 알아들을까?
리액트 프로젝트의 컴포넌트 함수를 복사해서 크롬 개발자도구 콘솔창에 붙여넣으면 syntax 에러가 발생하고 실행되지 않는다.
이렇듯 웹브라우저에서는 jsx 문법을 사용할 수 없다. 따라서 jsx는 순수한 js로 번역되어 사용되어야 한다.
https://babeljs.io/ 사이트에서 babel이라는 프로그램을 통해 jsx가 어떻게 순수 js로 번역되는지 확인할 수 있다.
Try It out 탭에서 직접 jsx를 순수 js로 바꿔볼 수 있다.
다시 말해, Babel은 대표적인 자바스크립트 트랜스파일러인 것이다. 개발모드나 빌드를 했을 때 알아서 트랜스파일링을 해주고 있었기 때문에 브라우저에서 자연스럽게 실행된 화면을 볼 수 있었던 것이다.
트랜스파일링(Transpiling)
트랜스파일러는 소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환해주는 도구이다. 주로 최신 버전의 언어를 구형 버전의 언어로 변환하거나, 다른 언어로 변환하는 데 사용한다. babel 같은 경우는 ES6의 js를 ES5의 구형 버전으로 트랜스파일링해주는 트랜스파일러인 것이다.
번들링(Bundling)
빌드한 폴더 구조를 보면 기존의 프로젝트 폴더 구조와 다른 것을 확인할 수 있다.
빌드 폴더 내의 static > js 폴더에 가보면 기존에 작성했던 js 파일들과 다른 형태의 js 파일들을 볼 수 있다. 이 파일들은 기존의 js 파일들을 모아서 압축한 것인데, 이렇게 하면 브라우저가 더 빠르고 쉽게 해석할 수 있다. 이런 묶음파일들을 '번들'이라고 부른다.
요약하자면, 우리가 개발한 jsx 파일들은 트랜스파일링을 통해 순수 js로 변환되고, 번들링을 통해 브라우저가 다운받아 해석하기 쉬운 묶음 형태로 변환되는 것이다.