[React,Nginx,AWS] AWS EC2에 React 프로젝트 배포하는 방법

- 이 글은 보안이라던가 설계 등을 전혀 고려하지 않은 아주 기본적인 배포 방법 가이드라는점 참고바랍니다. -

 

언제나 그랫듯 바쁜 여러분(사실은 필자 본인)을 위한 선결론 요약본

1. 배포하려는 React 프로젝트 폴더 경로에서 npm build 명령어를 통해 빌드 한다(최초 빌드라면 build 폴더가 생성됨)

2. AWS EC2 인스턴스(이하 서버)를 만들고 이 포스팅을 따라 접속할수 있게 만든다.

3. nginx를 설치 -> 파일질라든 깃이든 이용해서 위에서 생성한 build 폴더를 통으로 서버에 업로드.

4. nginx 설정파일에서(현재 버전 기준 sudo vi /etc/nginx/sites-available/default 명령어를 통해 수정 가능) 아래 이미지와 같이 빨간 밑줄친 root [경로] 에서 경로부분을 3번에서 업로드한 build 폴더의 경로로 변경

5. url로 접속해서 되는지 안되는지 확인

 

본론(이라고 쓰고 TMI와 중간 그 어딘가) 시작

React를 이용해 개발하는거야 뭐..다들 알아서 잘 했으리라 믿고. 

간단한거든 복잡한거든 개발이 어느정도 완료되면, 테스트가 아닌 어디서든 접속 가능한 배포를 할 단계를 맞이한다.

 

그 타이밍에 필요한 내용들을 정리해두려 한다.

주의할점은 요약본을 보신분들이라면 눈치챘을지 모르겠지만, 이 글은 단순 사용법의 나열이기 때문에 응용이나 퍼포먼스를 위한 다양한 세팅 등은 전부 생략됐다.

 

1. Build

일단 개발이 얼추 완료됐으면 빌드를 해야한다. 위 요약본처럼 리액트 프로젝트가 있는 경로에서 npm build를 하면 경로내에 build 폴더와 함께 빌드가 완료되고, 이 폴더를 기준으로 개발한 프로젝트가 웹에 보여지게 된다. 

이부분은 특별히 어려울것도 없고, 빌드 단계에서 발생하는 에러는 개발적으로 해결 가능하거나 packge.json 파일에 scripts 부분을 수정하는것으로 해결할 수 있으므로 쿨하게 넘어가도록 하자

 

2. AWS EC2 인스턴스 생성 및 접속

이부분도 사실 내가 작성할만큼 특별한 사항은 없다. AWS에 계정이 필요하면 가입하도록 하고내가 참고했던 블로그를 보고 인스턴스를 만들면 된다. 그리고 위에서 링크걸어둔 이 포스팅을 참고해서 접속가능한 상태까지 만든다. 

추가로 파일질라나 putty로 접속할때는 기본적으로 22포트가 잡혀있어서 크게 상관없는데 막상 다 하고나서 접속이 안될수가 있는데 그럴땐 보안그룹에서 아래 이미지처럼 모든 포트를 열어주면 된다. 

(이 부분은 보안에 관련된 부분이기에 난 간단한 프로젝트 위주로해서 다 열었지만, 실무에서 이렇게 하면 보안이슈가 발생할 수 있으니 보안관련된 판단 하에 포트를 열어줘야한다.)

 

3. Nginx 설치 및 기본세팅

이것 역시도 특별하게 어려울건 없다. 위에서 AWS EC2(서버) 세팅이 끝나면 putty를 통해 서버에 접속할 수 있는 상태일것이다. 명령어를 통해 설치해주자. 

 

3-1. Nginx 설치

sudo apt-get install nginx -y

설치를 하고나면 제대로 설치됏는지 확인하기 위해 nginx -v 라는 명령어를 써보면 아래와 같은 내용이 출력될것이다.

nginx version: nginx/1.14.0 (Ubuntu)

그럼 성공임ㅋ

 

3-2. Nginx 환경설정

설치에 성공했으면 설정파일에서 기본 root 경로를 수정해주기 위해 아래 명령어를 통해 편집기에 설정파일을 띄워주자

sudo vi /etc/nginx/sites-available/default

위에 요약 4번에 첨부한 이미지처럼 빨간 경로에 [build 폴더경로] 로 되어있는부분을 실제 build폴더를 저장해둘 경로로 변경해주자. (참고로 vi를 써보지 않은사람은 이게 뭐지 싶을수 있는데 리눅스 vi 사용법 같은거 검색하면 나온다. 일단 자세한건 알아서들 공부하기로하고 여기선 방향키로 원하는곳으로 이동해서 i나 a를 눌러 편집모드로 들어간뒤 경로를 입력하고 esc로 편집모드를 종료한 뒤 :를 입력 후 wq 입력 엔터로 저장 후 종료를 해주자)

 

그 외에도 포트변경이라던가 뭐 이것저것 설정하고싶으면 nginx 환경설정법을 따로 공부해서 하시고 여기선 자세한 내용은 생략하고 넘어간다.

 

아래는 기본적인 Nginx 명령어다. 4번에서 알려줄 build폴더 업로드까지 마치고 나면 시작을 해주자.

Nginx 시작

sudo service nginx start

Nginx 중지

sudo service nginx stop

Nginx 재시작

sudo service nginx restart

 

 

4. build 폴더 업로드

요약본에선 이게 3번에 포함되어있었지만 자잘한건 신경쓰지말자. Nginx 설치와 환경설정으로 우린 이제 Nginx 시작 명령어만 입력하면 우리가 만든 웹페이지를 서버에 띄울 수 있게 되었다. 1번에서 빌드한 폴더를 3-2에서 지정한 경로에 업로드해주고 위에 Nginx 시작 명령어를 입력해주자. 아래는 내가 쓰는방법 두가지를 적어두겠다.

 

서버에 파일 업로드 방법 

 

1. 파일질라(FileZilla)

기본적인 사용법은 따로 알아서들 공부해서 익히고 여기선 필요한 부분만 가이드하겠다. 

파일질라를 처음 키면 볼 수 있는 화면

위 이미지에서 빨간 동그라미를 클릭해서 연결정보를 추가해준다. 아래 이미지를 보자

위에서 표시한 버튼을 클릭하면 뜨는 팝업창

왼쪽에 써있는것처럼 원하는 이름을 왠만하면 영어로 입력해주고 오른쪽에 프로토콜을 보이는것처럼 변경해준다.

그리고 호스트를 위에 2번에서 서버(EC2) 인스턴스를 만들고 연결한 탄력적IP 를 입력해준다. (탄력적IP가 뭔소린가 싶다면 이 포스팅의 1번 내용을 참고하자) 그 후 연결을 클릭하면 서버로 연결이 될것이다. 그다음부터는 뭐 그냥 폴더든 파일이든 업로드 하면 된다. 끝!

 

2. Git을 이용한 방법......은 그냥 깃 설치하고 pull로 땡겨오면 그만이다. 이 내용은 직접 쓰자니 너무 길어지니(사실은 퇴근시간이 가까워서..ㅋㅋㅋ)개발하던걸 원격저장소에 올려둿다가 필자가 올려둔 깃 포스팅을 참고하거나 따로 검색해서  putty로 서버에 접속해서 3-2에서 세팅해둔 root폴더에서 pull로 땡겨오자. 

 

 

이렇게 하면 기본적인 배포를 위한 준비가 모두 끝났다. build 폴더 업로드가 끝났으면 아래 명령어를 putty를 통해 서버에 입력해주자. 그리고 지정해둔 URL로 접속하면 개발한 웹페이지가 뜨는것을 볼 수 있을것이다.

sudo service nginx start

URL은 위에 파일질라에서 연결할때 사용한 호스트이고 그 뒤로는 리액트로 개발하면서 지정한 path니까 이 이후는 알아서들 할거라고 믿음 ㅋ! 

 

끘!