[AWS] React project(express)를 AWS EC2에서 배포하기(with. git, putty, nginx)

create-react-app 으로 생성한 react 프로젝트를 AWS EC2를 이용하여 배포하기.
react 프로젝트는 이미 생성되어 있다는 전재하에 시작한다.

1. AWS EC2 인스턴스 생성

AWS EC2 로 이동한다.
계정이 없다면 먼저 AWS 가입 후 로그인한다. 로그인 후, 좌측 상단에 '서비스 > EC2' 로 이동한다.

이동 후 먼저 우측 상단에 리전이 보통 미국지역에 설정되어 있을텐데 '아시아 태평양(서울)' 로 변경한다. AWS 서버가 가까울수록 속도에서 유리하다고 한다.

좌측 메뉴에서 인스턴스를 누른 후, 다음 화면에서 우측 상단에 '인스턴스 시작' 을 누르면 인스턴스를 생성하는 마법사 프로세스가 시작된다.

1.1 Amazon Machine Image(AMI) 선택

인스턴스를 시작하는 데 필요한 소프트웨어 구성(운영 체제, 애플리케이션 서버, 애플리케이션)이 포함된 템플릿을 설정하는 단계다. 보통 Amazon Linux 2 AMI 로 설정한다. (Amazon EC2에 성능 최적화) Amazon Linux 2 AMI를 선택한다.

1.2 인스턴스 유형 선택

인스턴스에는 CPU, 메모리, 스토리지 및 네트워킹 용량 등을 설정하는 단계다. 무료로 써야 한다면 t2 그룹의 t2.micro 또는 t2.nano 를 선택한다.

이 화면에서 '검토 및 시작' 을 눌러 기본적으로 제공하는 설정들을 사용하여 인스턴스를 시작할 수 있지만, '다음: 인스턴스 세부 정보 구성' 을 눌러 뒤에 나올 '보안 그룹'을 설정할 수 있기 때문에 다음을 누른다.

1.3 인스턴스 세부 정보 구성

인스턴스 개수, 네트워크, 서브넷 등을 설정할 수 있는 단계다. 설정을 변경하지 않고 '다음: 스토리지 추가' 로 넘어간다.

1.4 스토리지 추가

인스턴스의 크기와 볼륨 유형, 암호화 를 설정할 수 있는 단계다. AWS를 무료로 사용할 수 있는 프리티어의 경우 최대 30GB의 EBS 범용(SSD) 또는 마그네틱 스토리지를 사용할 수 있다고 하니, 크기를 30으로 설정한다.

1.5 태그 추가

여러개의 인스턴스를 관리하기 편하도록 만들어 주는 태그를 설정할 수 있는 단계다. 넘어가도 되고, 관리하고 싶다면 '태그 추가'를 눌러 추가한다.

1.6 보안 그룹 구성

인스턴스에 대한 트래픽을 제어하는 방화벽 규칙을 설정할 수 있는 단계다. 설정을 잘 못 해놓으면 나중에 서버를 켰는데도 api를 호출하지 못 할 수도 있다. 여기서 생성한 보안 그룹은 후에 인스턴스를 생성할 때 재사용 할 수 있다.

위 이미지에서 중요한 부분은 (설정 중 가장 마지막에 설정한) 서버로 사용할 포트를 꼭 설정해야 한다는 부분이다.
(예시에서는 3001번 포트)

1.7 인스턴스 시작 검토

인스턴스 시작 세부 정보를 검토하는 단계다. 확인하고 우측 하단에 '시작하기' 를 누른다.

1.8 Key Pair

시작하기 버튼을 누르면 Key Pair 관련하여 창이 하나 뜬다. ssh 등을 접속하기 위해 꼭 필요한 것으로 새로 생성한다면 .pem 파일을 다운받게 되고, 다운받은 .pem 파일을 puttyGen 을 통해 private key (.ppk) 로 만들어 사용하게 된다. 기존에 생성되어 있던 key를 사용할 수도 있다. private key 를 분실하게 되면 다시 다운받을 수 없기 때문에 유의해야 한다.

Elastic IP

EC2로 만든 인스턴스의 ip는 유동ip이기 때문에 만약 EC2를 중지해야 할 일이 생긴다면 ip가 변경될 수 있다. 이 부분을 해결하려면 Elastic IP를 생성한 후 EC2와 연결하여 사용한다.

2. Putty(ssh)로 인스턴스 접속

2.1 putty 다운로드 & 설치

putty 다운로드 사이트로 이동하여 다운로드 & 설치를 한다.

2.2 puttyGen

puttyGen을 실행시켜 상단 메뉴에 'Conversions > Import Key' 를 선택하고, 이전에 AWS에서 다운받았던 .pem파일을 선택한다. 그리고 'Save private key' 를 누르면 .ppk파일의 이름을 지정할 수 있는데 .pem파일의 이름과 같은 이름의 .ppk파일을 생성해야 한다.

2.3 putty

putty를 실행시키고 Host Name (or IP Address) 에

ec2-user@{AWS의 Elastic IP 또는 IPv4 DNS}

를 입력한다.

앞의 'ec2-user' 는 AWS의 인스턴스 AMI가 Amazon Linux 이기 때문이고, Ubuntu 라면 ubuntu가 될 것이다. AMI가 변경되면 맞게 변경해서 작성해야 한다.

좌측 메뉴에 'Connection - SSH - Auth' 로 이동하여 'Private key file for authentication' 부분에 'browse' 를 눌러 아까 저장한 .ppk파일을 지정한다.

지금까지 해놓은 설정들을 저장하고 싶다면, 'Session' 화면으로 돌아와서 'Saved Sessions' 아래 input에 저장할 설정의 이름을 작성한 후, Save 버튼을 누르면 저장된다. 다시 불러올 때는 불러오고자 하는 설정의 이름을 선택한 뒤, Load 버튼을 누른다.

2.4 기본적인 프로그램, node, nginx 설치하기

EC2

EC2 소프트웨어 업데이트

$ sudo yum update

git

git 설치

$ sudo yum install git

nginx

nginx 설치

$ sudo amazon-linux-extras install nginx1.12

yarn

yarn 설치

$ curl -o- -L https://yarnpkg.com/install.sh | bash

환경변수

환경변수 재설정

$ source ~/.bashrc

NVM

NVM(Node Version Manager) 설치

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

nvm 활성화

$ . ~/.nvm/nvm.sh

node

node 설치

$ nvm install node

기본적인 설치는 끝났고, github 에서 배포하려는 React 프로젝트를 clone 한다.
clone 할때는 branch를 잘 확인한다.

git

git clone

$ git clone {remote repository address}

그리고 cd {프로젝트 폴더} 명령어로 clone 한 디렉토리로 이동한다.
이동한 후, package.json 에 작성된 npm을 설치한다.

npm

npm 설치

$ yarn install

대망의 빌드

build

React project build

$ yarn run build

build 가 정상적으로 완료되면 프로젝트 폴더 안에 build 폴더를 확인할 수 있다.

nginx

nginx는 '웹 서버, 프록시 기능을 가진 비동기 이벤트 기반 경량형 소프트웨어' 이다. (Event-Driven 구조)

nginx를 사용할 때 /etc/nginx/nginx.conf 파일의 내용을 수정하여 build 파일과 연결하여 사용할 수도 있다. 하지만 추후에 확장성이 있게 만들어 놓으려면 다른 방법으로 세팅을 하는데,
보통 nginx를 사용하는 방법은

/etc/nginx/sites-enabled 디렉토리를 생성하고,
symbolic Link 를 생성할 /etc/nginx/sites-available 디렉토리를 생성하고,
/etc/nginx/sites-available 디렉토리 안에 임의의이름.conf 파일을 생성하고,
임의의이름.conf 파일을 /etc/nginx/sites-enabled 디렉토리에 추가한다.

vi 로 nginx.config 수정

$ sudo vi /etc/nginx/nginx.conf

'server {' 로 시작되는 라인부터 끝나는 라인까지 라인의 맨 앞마다 # 을 작성하여 주석처리하고,
방금 주석처리한 server 블록 위에 "include /etc/nginx/sites-enabled/임의의 이름.conf;" 를 작성하고 :wq 로 저장/종료한다.

sites-enabled 디렉토리 생성

$ sudo mkdir /etc/nginx/sites-enabled

sites-available 디렉토리 생성

$ sudo mkdir /etc/nginx/sites-available

sites-available/임의의이름.conf 파일 작성

$ sudo vi /etc/nginx/sites-available/###.conf

그리고 아래의 내용을 작성한다.

server {
    listen 80;
    location / {
        root {build 디렉토리의 절대 경로.
        	예를 들어 /home/ec2-user/프로젝트폴더명/build};
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

listen 에 포트번호가 80 으로 적힌것은 도메인이나 https 에 대한 준비가 되어있다면 수정이 필요하겠지만, 그게 아니기 때문에 기본적인 http 에 해당하는 포트인 80 을 작성했다.

location 뒤의 /는 directive라고 하는 부분인데, IP 주소나 도메인의 뒷 부분인 URI에 대응된다. example.com/pathname 이라고 가정한다면 /pathname 이 url에 해당된다. 지금은 directive를 /로 작성했기 때문에 이 instance의 IP 주소로 port 80을 통해 들어오는 모든 URL가 연결된다.

sites-enabled에 symbolic link를 생성

sudo ln -s /etc/nginx/sites-available/임의의이름.conf /etc/nginx/sites-enabled/임의의이름.conf

nginx 테스트

$ sudo nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

위와 같은 내용이 명령창에 나타난다면 성공이다.

$ sudo systemctl start nginx

위의 명령어로 nginx 를 동작시키고, 브라우저에서 AWS 인스턴스의 ip 주소(Elastic IP)를 입력하면 연결된다.

만약 연결시에 500 Internal Server Error 가 발생할수도 있는데, 외부에서 접속시 아까 .conf 파일에 설정한 build 디렉토리 경로까지 접근하는데에 실행 권한이 없어서이다.
아래의 명령어로 권한을 변경한다.

$ chmod 711 /home/ec2-user

이렇게 하고 다시 브라우저에서 확인하면 정상적으로 프로젝트 화면이 보이는 것을 볼 수 있다.

지금까지 한 작업을 최대한 잘 돌아가는 확인하면서 진행하려면
로컬에서 로컬 서버(express or 그 외)와 통신하는 것을 확인하고,
proxy를 설정해 준 상태에서 .env 파일을 생성/사용하여 production&development 모드에서 url을 변경할 수 있게끔 만들어야 한다.

참고한 사이트

yarn 사용시
https://medium.com/@bdv111/aws-ec2%EC%97%90%EC%84%9C-nginx%EB%A1%9C-react-%EC%95%B1-%EC%A7%81%EC%A0%91-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-c1e09639171e
npm 사용시
https://it-eldorado.tistory.com/105