AWS Ubuntu EC2를 MobaXterm로 연결하여 NGINX를 설치한 후 React App build 배포하기

1. 인스턴스 생성

 

AWS EC2에서 Ubuntu AMI를 선택하여 인스턴스를 생성한다.

 

web을 배포하므로 보안 그룹 구성 시 유형에 HTTP를 추가해야만 한다.

그렇지 않을 경우, 브라우저에서 해당 인스턴스의 IP주소를 입력할 경우, 화면에서 해당 web이 보여질 수 없다.

 

 

2. MobaXterm 연결

 

인스턴스가 생성되면 퍼블릭 IPv4 주소를 복사한다.

 

 

인스턴스의 IPv4와 인스턴스를 생성 시 다운받았던 키 페어를 입력하여 SSH로 인스턴스와 MobaXterm과 연결을 한다.

Specify username의 checkbox에 체크를 하고, 위의 캡처에서 연결버튼을 누르면 아래와 같은 화면이 나오게 되는데 아래의 캡처본에서 사용자 이름을 Specify username에 입력하여주면 된다.

 

 

아래와 같이 입력하고 OK버튼을 눌러주면 연결이 된다.

 

연결이 되어진 MobaXterm의 화면이다.

 

 

3. NGINX 설치

 

sudo 명령어를 통해 update를 한다.

 

nginx를 설치한다. 계속 진행할 것인지의 물음에 y(yes)라고 답해준다.

 

설치가 완료되면 nginx -v를 통해 설치가 잘 되어졌는지를 확인한다. 현재 ubuntu에 설치된 nginx의 version이 나타나면 잘 설치가 되어진 것이다.

 

 

4. 내 컴퓨터와 Ubuntu 인스턴스와 연결

 

내 컴퓨터에 있는 build할 파일을 MobaXterm을 이용해 ubuntu에 설치된 NGINX에 전달해주기 위해 MobaXterm의 SFTP를 이용한다.

연결 방법은 SSH와 같이 인스턴스의 IPv4의 퍼블릭 주소와 키 페어가 필요하다.

Username은 위의 Specify username과 동일하다.

 

연결이 되어지면 아래와 같은 화면이 나오는데, 현재 화면은 내가 web폴더를 하나 생성한 상태이다.

나는 web폴더 안에 build할 파일을 넣어줄 것이다.

파일은 해당 파일을 찾아서 원하는 경로의 파일안에 드래그를 해주면 해당 파일이 알맞은 경로로 다운로드 되어진다.

 

우리가 넣은 파일이 ubuntu안의 파일로 잘 들어가졌음을 확인하였다.

 

 

5. NGINX의 디렉토리 검색 (root찾기)

 

우리가 설치한 nginx의 파일을 좀 살펴보도록 하겠다.

우선 /etc/nginx/conf.d 에는 아무런 파일이 존재하지 않고, /etc/nginx/sites-available 디렉토리에 default 파일이 존재함을 확인할 수 있다.

 

해당 파일을 cat명령어를 통해서 살펴보면 default 파일의 일부 중 root 의 경로를 확인할 수 있다.

 

root의 경로는 /var/www/html 이다.

 

root의 경로로 들어가면 index.nginx-debian.html 이라는 이름을 가진 html 파일이 하나 존재한다.

 

sudo 명령어를 통해서 nginx를 start 시키는 명령어를 작성한다.

 

새로운 브라우저를 열어 해당 인스턴스의 IPv4주소를 입력하면 현재 nginx의 /var/www/html의 root경로에 존재하는 html이 화면에 나오게 된다. 

아래의 화면이 index.nginx-debian.html 의 해당 파일의 화면이다.

현재 nginx가 ubuntu에서 잘 작동되어짐을 확인할 수 있다.

 

6. build 하여 배포하기

이제는 우리가 하려고 하는 목표인 build를 하기 위해 만든 web폴더안의 우리가 넣어준 build폴더 안으로 이동한다.

이동 후 ls 명령어를 통해 확인하면 우리가 bulid하기 위한 파일들이 존재한다.

 

cp 명령어를 통해서 현재 디렉토리의 모든 파일과 디렉토리를 nginx의 root의 위치인 /var/www/html 의 위치로 copy 한다.

ls 명령어를 이용해 root의 경로에 복사된 파일과 디렉토리를 확인한다.

모든 파일과 디렉토리가 잘 복사되어졌음을 확인할 수 있다.

 

nginx의 첫 html의 화면을 보여준 브라우저를 다시 새로고침하면(새 브라우저에 인스턴스의 퍼블릭 주소를 붙여넣어도 된다.) 우리가 지금까지 build하기 원했던 React App 이 잘 배포되어졌음을 확인할 수 있다.