AWS EC2에서 React 배포하기
과정
AWS EC2에서 인스턴스를 생성하고,
PuTTY를 통해 리눅스와 연결합니다.
그 후 nvm, node, yarn, npm , nginx 등 필요한 모듈을 설치
인스턴스 내부에 create-react-app을 생성하고 nginx로 구동합니다.
1. AWS 계정생성
1-1 Amazon Machine Image (AMI) 선택
첫 번째에 보이는 프리티어용 AMI (두 번째와의 차이는 Kernel Version)을 선택했다.
1-2 인스턴스 유형 선택
AMI의 스펙을 설정하는 단계다. 프리티어로 사용이 가능한 스펙을 선택하였다.
보안 그룹 설정을 위해 다음:인스턴스 세부 정보 구성을 클릭한다.
1-3 인스턴스 세부 정보 구성
인스턴스의 개수와 네트워크 등의 옵션을 설정하는 단계다.
따로 변경하는 것 없이 다음:스토리지 추가로 넘어간다.
1-4 스토리지 추가
인스턴스의 크기와 볼륨 유형, 암호화를 설정하는 단계다.
아래에 파란 알림 창을 보면 프리티어는 최대 30GB까지 사용 가능하다니 30으로 설정해주고
다음:태그 추가로 넘어간다.
1-5 태그 추가
다수의 인스턴스를 관리하기 용이하게 하는 태그를 설정할 수 있는 단계다.
나는 하나만 할 것이기에 우선 넘어갔다. 다음:보안 그룹 구성 클릭
1-6 보안 그룹 구성
인스턴스에 대한 트래픽을 제어하는 방화벽 규칙을 설정하는 단계다.
보안 그룹은 생성하고 나면 다른 인스턴스에도 재사용할 수 있다.
추후 node express를 이용할 것이라면 서버로 사용할 포트도 추가 설정해줘야 한다.
현재 작성글에서는 우리가 HTTPS 준비가 안 됐기 때문에 HTTP으로 진행한다.
규칙 추가를 누르면 규칙을 선택할 수 있다.
이 글을 따라간다면 꼭 아래의 규칙을 만들어주자. (HTTP를 선택하면 포트는 80으로 고정되어있을 것이다.)
유형 SSH / 포트 범위 22 / 소스 내 IP
유형 HTTP / 포트범위 80 / 소스 Anywhere-IPv4
유형 HTTP / 포트범위 80 / 소스 Anywhere-IPv6
1-7 인스턴스 시작 검토
인스턴스 세부 정보를 검토한다. 검토 후 시작하기로 넘어간다.
1-8 Key Pair 생성
첫 번째 항목에서 새 키 페어 생성을 선택하고, 임의의 키 페어 이름을 정해주자.
그 후 키 페어 다운로드를 누르면 키 페어 이름. pem 파일이 받아진다.
2. PuTTY(ssh)로 인스턴스 접속
2-1 PuTTY 설치
특이사항이 없으면 그냥 Next만 눌러서 설치 완료.
https://putty.softonic.kr/download
PuTTY
완전하고 안정적인 텔넷 및 SSH 클라이언트
putty.softonic.kr
2-2 PuTTYGen으로 ppk 생성
앱 검색으로 PuTTY가 설치된 걸 보면 PuTTY와 PuTTYGEN이 있다.
PuTTYGEN을 실행해준다.
상단에 Conversion을 누르면 나오는 항목 중에 import key를 클릭
이전에 키 페어 생성 시 다운로드한. pem 파일을 선택하면
중간에 Save private key가 활성화된다. 클릭해준다.
. ppk의 파일을 생성하는 창이 뜨는데. pem 파일의 이름과 동일하게 생성한다.
2-3 PuTTY 실행
PuTTY를 실행시킨다.
Host Name에 "인스턴스 유저네임@인스턴스 퍼블릭 ip4v dns"를 입력한다.
인스턴스 유저네임은 쓰는 AMI에 따라 다르다.
1. Amazon Linux 2, Amazon Linux AMI : ec2-user
2. Centos AMI : centos
3. Debian AMI : admin || root
4. Fedora AMI : ec2-user || fedora
5. RHEL AMI : ec2-user || root
6. SUSE AMI : ec2-user || root
7. Ubuntu AMI : ubuntu
인스턴스 퍼블릭 IP4v DNS 확인하는 곳
인스턴스 홈 -> 좌측 메뉴에 인스턴스 -> 해당 인스턴스 선택
-> 하단에 인스턴스 세부 정보 -> 인스턴스 요약에 퍼블릭 IPv4 DNS
2-4 PuTTY ppk파일 설정
좌측 메뉴에 Connection - SSH - Auth로 이동하여
Private key file for authentication 부분에 Browse... 을 눌러 아까 생성한 ppk 파일을 선택해준다.
지금까지 설정한 PuTTY의 설정값을 저장하고 싶으면 Session 화면으로 돌아와서
Saved Sessions 아래 input에 저장할 이름을 작성하고, Save 하면 저장된다.
나중에 불러오고 싶을 때는 이름을 선택하고 Load 해준다.
그다음 Open을 눌러준다.
2-5 EC2 인스턴스 접속
위에서 open을 클릭했으면
처음 접속 시 이런 창이 뜬다. Accept를 눌러준다.
우리의 퍼블릭 IP는 인스턴스 부팅 때마다 바뀌기 때문에 고정 IP로 바꿔주기 전까진 매번 뜰 것이다..
3. 프로그램 설치 하기
이제 필요한 프로그램들을 설치하면 된다.
명령어를 입력해준다. 복사 붙여 넣기 하고 싶다면 Ctrl + C 후 입력창에 Ctrl + Insert를 눌러주자.
$ sudo yum update
yum은 현재 연결 가능한 리포지토리(Repository : CentOS의 업데이트 패키지를 갖고 있는 인터넷 상의 저장소)에 연결해 업데이트할 수 있는 패키지들의 목록과 용량을 가져온다.
$ sudo yum install git
git을 설치한다. (다만 작성글에선 쓰지 않는다)
$ source ~/. bashrc
환경변수 재설정
$ chmod 711 /home/ec2-user
ec2-user의 실행 권한을 부여
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm(node version manager) 설치
nvm을 설치하는 최신 명령어는 https://github.com/nvm-sh/nvm/blob/master/README.md에서 확인 가능하다.
$. ~/. nvm/nvm.sh
nvm을 활성화시키는 명령어다.
$ nvm install node
nvm을 통해 최신 버전의 node를 설치한다.
$ node -e "console.log('Running Node.js ' + process.version)"
node가 잘 실행되고 있는지 확인해보자
3-1 Nginx 설치하기
서버를 구동시켜줄 웹서버 소프트웨어이다.
git repo를 받아와서 install 할 것이다. 천천히 따라 하자
$ sudo vi /etc/yum.repos.d/nginx.repo
vi는 vim 편집기로 뒤에 나오는 경로의 파일을 편집하겠다는 것이다.
재밌게도 만든 적 없는 경로라도 저장 시에 폴더와 파일까지 생성한다.
그러니 오타가 없는지 잘 확인하자. 명령어를 치면
아래와 같은 화면이 나온다. 파일을 편집하기 위해 보고 있는 것이고
이 파일엔 아직 아무 내용도 없기 때문에 이렇게 나온다.
내용을 작성하기 위해서는 i를 눌러준다
i를 눌러주고 나면 하단에 INSERT라는 글씨가 보이면서
이제 키보드 입력이 가능하다.
아래 코드 블록대로 내용을 입력해준다.
최신 코드 참고 http://nginx.org/en/linux_packages.html#Amazon-Linux
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/amzn2/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
다 입력하고 나면 저장할 차례다.
ESC를 한번 눌러주고, 그대로 :wq(저장 후 종료)을 기입 후 ENTER를 쳐서 나온다.
$ sudo yum install nginx
그 후 nginx를 install 해준다.
nginx 설치는 완료되었고 이제 설정을 할 차례다.
미리 설명하자면 이 시점에서 몇 줄만 간단하게 고치면 리액트로 바로 연동시킬 수 있지만
확장성을 위해 다르게 진행된다.
$sudo vi / etc/nginx/nginx.conf
nginx 설정 파일에 들어가서 편집한다. 아까처럼 i를 누른 다음에 보이는 server 블록을 #으로 주석 처리해준다. 우린 다른 파일에 server 설정을 기입해놓고, 그 파일을 참조하도록 하게 할것이다.
include /etc/nginx/sites-enabled/*. conf;
이어서 만들 디렉터리를 참조할 수 있도록 위에 코드 한 줄을 삽입해준다. 그 후 ESC, :wq로 저장하여 나온다.
$ sudo mkdir /etc/nginx/sites-available
$ sudo mkdir /etc/nginx/sites-enabled
명령어를 통해 위 두 폴더를 생성해준다.
$ sudo vi /etc/nginx/sites-available/####. conf
sites-available 폴더에 새로운 conf파일을 생성한다.
###은 원하는 이름으로 넣어주자. i를 눌러 내용을 작성해준 후 ESC :wq로 저장하고 나오자.
server {
listen 80;
location / {
root /home/ec2-user/test/build;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}listen 80은 포트 80에 대한 설정을 의미.
location /는 URL이 '/'가 포함된 경로에 대한 설정을 의미.
root는 실행할 파일들의 루트 위치를 의미. 리액트를 빌드한 파일 경로를 입력하면 됨.
(나는 text라는 폴더에 cra를 설치하고 build 할 것이다. 각자 이름과 경로에 맞게 작성해야 한다.)
index는 인덱스의 파일들을 지정하는 곳이고, 이 파일들 중 꼭 하나는 root 경로 안에 존재해야 함.
try_files는 어떤 파일을 찾을 때 명시된 순서로 찾으며, 가장 먼저 발견되는 파일을 사용한다는 의미.
$ sudo ln -s /etc/nginx/sites-available/####. conf /etc/nginx/sites-enabled/####. conf
위 명령어는 우리가 방금 만든 ####. conf 파일을 sites-enabled도 참조할 수 있게 해 주는 것이다.
윈도의 바로가기 같은 개념이라 생각하면 된다. 더 자세하게 알아보고 싶으면 심볼릭 링크를 검색해보자.
3-2 CRA 생성 및 nginx 구동
본인이 현재 어느 경로에 있는지 확인하고 cra를 설치해주자.
$ pwd
현재 경로를 확인해준다. 나는 아래 경로에서 시작하였고
혹시 본인이 이상한 경로에 와있어서 불안하다면
$ cd를 입력해주면 아래처럼 /home/ec2-user로 돌아올 것이다.
$ npx create-react-app test
test 디렉터리에 cra를 설치하였다.
$ npm run build
파일을 편집하고 싶은 사람은 해도 된다.
우선 순정파일 그대로 build를 생성시킨다.
build까지의 경로가 아까 nginx에서 ####. conf에 작성한 경로와 일치한 지 체크해주자.
경로가 다르다면 ####. conf를 수정해주자.
$ sudo nginx -t
우리가 설정해놓은 nginx의 문법에 문제가 없는지 검사해준다. 잘 따라왔다면 아래와 같이 ok 해줄 것이다.
$ sudo systemctl start nginx
nginx를 실행시켜준다.
$ sudo systemctl status nginx
nginx의 상태를 확인한다.
아래와 같이 active로 초록불이 들어와 있으면 실행 중이라는 것이다.
$ sudo netstat -ntlp
현재 열려있는 포트를 확인해주자.
80 포트가 열려있어야 우리가 설정했던것과 어우러져 실행된다.
만약 80포트가 없다면 인스턴스의 보안규칙에 HTTP 80을 다시 한번 체크해보거나
nginx를 재설치해보도록 하자.
4. 확인
이제 브라우저 주소창에 본인의 인스턴스 퍼블릭 ip를 치고 들어가면 리액트가 반겨준다.
