[리액트 React] 빌드하기 / react 명령어 복습 / 배포하기 / 커스텀 도메인 등록

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 React로 개발하시는 프론트엔드에게 좋을 것 같은데요.

react 빌드, react 명령어, 배포, 커스텀 도메인에 대해 알아보겠습니다.

 

설명을 더 간략하게 하고자

지금부터 문어체를 사용하겠습니다.

 

 

• 배포 : 다른 사람이 내 코드를 사용할 수 있게 하는 것을 말함 => 웹서버에 배포한다.
• 빌드 : 브라우저가 해석할 수 있고 웹 서버가 사용하기 좋도록 만드는 것.
• JSX 코드는 웹브라우저가 그대로 해석하지 못해서 순수한 JS코드로 변환해야 한다.

 

 

 

  빌드하는 법 (배포 아님)

1. 터미널을 열어서 'npm run build' 명령어 입력.
2. 'build'라는 폴더가 생긴다. => 'build' 폴더 안에 있는 파일들을 웹서버로 제공하면 프로젝트가 배포되는 것.
3. 터미널에서 'npx serve build' 명령어 입력 =>프로젝트가 잘 동작하는지 로컬에서 확인시켜주는 명령어.
4. 처음 위 명령어를 실행하면 설치를 할거냐고 문구가 뜬다. 'y' 입력 후 엔터.
5. 그 다음 로컬 주소가 보이며, 해당 주소로 프로젝트가 잘 만들어져 있는지 확인해보면 된다.
   같은 공유기를 사용하는 다른 컴퓨터에서도 확인하려면 'On Your Network'에 써져 있는 주소로 접속해서 확인하면 된다.

 

 

 

 

  명령어 복습

• 프로젝트 생성하기 : npm init react-app .      => . 주의!!!!!
• 개발모드 서버 실행하기 : npm start (npm run start)
• 실행 중인 서버 종료하기 : ctrl + c
• 개발된 프로젝트 빌드하기 : npm run build
• 빌드한 것 로컬에서 실행하기 : npx serve build

 

 

 

 

  배포하기

1. aws.amazon.com으로 접속 (아마존 웹 서비스)
2. 계정 생성 (결제가 되었다가 취소되므로 참고하기)
3. 로그인 후 'AWS 관리 콘솔'페이지에서 '모든 서비스'를 열어서 '스토리지' 부분에서 'S3'를 사용한다.
   S3 : 구글 드라이브 같은 저장소.
   계정을 새로 만들었다면 S3는 12개월 동안 무료로 사용 가능. 그 이후로는 요금 결제 되므로 참고.
4. S3 눌러서 '버킷 만들기'를 눌러 '버킷'을 만든다.
   버킷 : S3에서 파일을 모아두는 큰 단위 (예: c드라이브)
5. 버킷 이름은 도메인 이름과 동일하게 작성해주기.
6. 이 버킷의 퍼블릭 액세스 차단 설정 => 해제 후 '현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다.'에 체크하기.
7. 맨 하단의 '버킷 만들기'를 클릭.
8. 버킷 목록에 버킷이 생성되며, 생성된 버킷 이름을 클릭.
9. '속성' 메뉴 클릭.
10. 스크롤 내려서 '정적 웹 사이트 호스팅'에서 '편집' 버튼을 클릭.
11. '활성화' 체크.
12. '인덱스 문서'에 'index.html' 입력.
13. '오류 문서'에 'index.html' 입력. (오류 문서는 파일이 없는 경로로 접속했을 때 보여줄 html 파일.)
14. 하단의 '변경 사항 저장' 버튼 클릭.
15. '권한' 메뉴 클릭.
16. '버킷 정책'에서 '정책 생성기 클릭' => 웹브라우저에서 버킷에서 할 수 있는 권한을 설정해주는 곳.
17. 새 탭으로 AWS Policy Generator 창이 뜬다.
18. Step1에서 'Select Type of Policy'에서 'S3 Bucket Policy' 선택.
19. Step2에서 'Principal'에 별표(*)를 입력. (정책을 모든 사용자에게 적용할 것이란 의미.)
20. Actions에서 'GetObject' 선택.
21. Amazon Resource Name (ARN) 입력란에, '버킷 정책' 아래에 있는 '버킷 ARN'을 복사하여 붙여넣기 한 후 '/*'을 입력.
22. 노란색 'Add Statement' 버튼 클릭.
23. 맨 하단의 'Generate Policy' 버튼 클릭하면 JSON 문자열로 정책이 생성된 것을 복사.
24. '버킷 정책' 아래에 '정책'에 복사한 내용을 붙여넣기.
25. 맨 하단 오른쪽 주황색 '변경 사항 저장'을 클릭하면, 버킷 생성과 배포에 필요한 모든 설정 완료.
26. '객체' 메뉴 클릭.
27. '업로드' 버튼 누르고 작성한 프로젝트에서 'build' 폴더 안에 있는 모든 파일을 드래그해서 끌어다 놓기.
28. 맨 하단의 '업로드'버튼 클릭.
29. 업로드 완료되면 '닫기'버튼을 누르고 '속성' 메뉴에 들어간다.
30. 하단의 '정적 웹 사이트 호스팅'에 '버킷 웹 사이트 엔드포인트'에 주소가 생긴 것을 확인.
31. 해당 주소가 프로젝트 주소이므로 링크를 클릭해서 확인한다.

 

 

 

 

  커스텀 도메인 연결하기

• 도메인은 AWS를 통해서 구입할 수도 있고, 다른 도메인 등록 업체에서 살 수도 있다.
• 구글에서 '도메인 구매'로 검색해서 마음에 드는 업체를 골라 구입하면 된다.
• 아직 도메인이 없는데 AWS를 통해 등록 하려면 1-a 단계와 2 단계를 따라하면 되고, 만약 도메인을 이미 구입했다면, 1-b 단계와 2 단계를 따라하면 된다.
• 도메인 등록 비용과, AWS 서비스 이용료가 발생할 수 있으니 주의.

 

1-a. AWS에서 도메인 구입하기

1. 우선 AWS로 접속해서 'Route 53'을 검색해 들어가기. (Route 53을 사용하면 AWS로 도메인을 관리할 수 있다.)
2. 도메인 > '등록된 도메인' 메뉴로 들어가기.
3. '도메인 등록'버튼 클릭.
4. '도메인 이름 선택' 화면이 보이며, 원하는 도메인 이름을 입력하고 '확인'을 누른다.
5. 연락처 세부 정보에 연락처 입력 후 안내에 따라 구매를 완료한다.
6. 도메인을 구입하고 나서 Route 53에 위치한 '호스팅 영역' 메뉴로 들어간다.
7. 방금 구입한 도메인이 호스팅 영역이란 것으로 생성되어 있으머, 클릭하여 확인 한다.

 

 

1-b. 다른 사이트에서 도메인을 구입한 경우

1. 우선 AWS로 접속해서 'Route 53'을 검색해 들어가기. (Route 53을 사용하면 AWS로 도메인을 관리할 수 있다.)
2. '호스팅 영역' 메뉴로 들어간다.
3. '호스팅 영역 생성' 버튼을 클릭.
4. 도메인 이름에 다른 사이트에서 구입한 도메인명을 적고, 하단의 '호스팅 영역 생성' 버튼 클릭.
5. 호스팅 영역이 만들어지고 기본 값을이 성절된 것이 보인다.
   여기서 '레코드'는 도메인을 서비스할 때 참고할 정보들이다.
   유형이 'NS'인 네임서버 레코드에 주목하기.
6. 도메임을 구입한 사이트에 접속해서, '네임서버 설정'을 해준다.
7. AWS 호스팅 영역에서 기본 값으로 생성된 레코드 중에서 'NS'유형에 해당하는 '값/트래픽 라우팅 대상'의 값을 복사해서 커스텀 네임서버로 등록해준다.
8. 네임 서버서 설정은 서비스마다 다르지만 길면 하루 이틀 정도 걸릴 수 있으니 참고할 것.

 

 

2. A 레코드 등록하기

1. Route 53의 호스팅 영역에 A 레코드를 등록한다.
2. A 레코드는 웹 브라우저가 어떠한 도메인 주소로 들어왔을 때, 어떤 주소의 서버가 응답해 줄지 지정해주는 용도로 쓴다.
3. 우리의 경우에는 도메인 주소로 들어오면, AWS S3 버킷의 웹 사이트 엔드포인트가 응답해주면 된다.
4. 호스팅 영역에서 '레코드 생성'버튼 클릭.
5. 도메인 앞에 말이 더 붙은 서브 도메인으로 만들어도 좋고, 레코드 이름을 그냥 비워두면 최상위 주소로 A 레코드를 생성할 수 있다.
6. 레코드 유형은 A로 선택.
7. 트래픽 라우팅 대상에서 별칭을 켜준다. (별칭은 AWS에서 제공하는 기능이며, 우리가 만들어 놓은 S3 버킷의 엔드포인트(주소)를 직접 입력하지 않아도 되고, AWS 안에서 별명처럼 사용할 수 있게 해준다.)
8. '레코드 생성'버튼 클릭.
9. 호스팅 영역에 A 레코드가 생긴 것을 확인 후 지정한 링크 주소에 접속하여 확인한다.