AWS Linux 와 Nginx 를 활용해 React 배포하기

이미지 출처) Google Image

이번 팀 프로젝트에서는 웹 프론트 분들과 협업을 하게 되서 Nginx 를 통해 React 를 배포하는 방법을 기록하려고 한다.

인스턴스 생성 등은 앞선 포스팅에 기록되어 있으니 생략 ~

---

1. 보안 그룹 편성

연습이니 편의상 모든 IP 에서 접속할 수 있도록 편집했다. 원래 3306 MySQL 포트나 22 SSH 등 중요한 포트는 다른 곳에서 접속하지

못하게 IP 를 제한해야 하지만 일단 이렇게 진행한다. (나중에 바꿀 수 있으니까) 

---

 

2. 배포에 필요한 툴 설치

 

가. Git 설치

Aws Linux 에 내장된 Yum 을 사용해서 간단하게 설치할 수 있다.

설치 후 git version 명령어로 잘 설치되었는지 꼭 확인하자.

1. yum 패키지 업데이트
sudo yum update -y

2. yum 패키지를 통해 git 설치
sudo yum install git -y

3. 설치 후 git 버전 확인
git version

 

나. JDK11 설치

이전 포스팅에서도 언급되어있지만, Aws Linux 에 내장되어있는 Yum 패키지에는 1.8 이 기본이기 때문에 11 버전을 다운받아보자.

스프링부트 빌드 파일을 실행시키려면 꼭 필요하다. (로컬의 자바 버전과 맞추는게 젤 좋음)

아마존에서 제공하는 OpenJDK 인 Amazon Coretto 를 다운받아서 설치하면 간단하게 설치할 수 있다.

역시 버전을 꼭 확인하고, 설치키트를 제거해주도록 하자.

 

# aws coreetto 다운로드
sudo curl -L https://corretto.aws/downloads/latest/amazon-corretto-11-x64-linux-jdk.rpm -o jdk11.rpm

# jdk11 설치
sudo yum localinstall jdk11.rpm

# jdk version 선택
sudo /usr/sbin/alternatives --config java

# java 버전 확인
java --version

# 다운받은 설치키트 제거
rm -rf jdk11.rpm

 

다.  MySQL 8.x 설치

나는 MySQL 을 사용하기 때문에 설치. MySQL 8.x 를 설치할 수 있는 Yum 레포지토리를 추가해야 한다.

역시 다른 포스팅에 있는 내용이기 때문에 간단하게 명령어로만 ~

(참고) MySQL 작동 명령어

1. 상태 : systemctl status mysqld

2. 시작 : sudo systemctl start mysqld

3. 중지 : sudo systemctl stop mysqld

4. 재부팅 : sudo systemctl restart mysqld 

1. MySQl 8.0 을 설치할 수 있는 yum 레포지토리를 추가
sudo yum install https://dev.mysql.com/get/mysql80-community-release-el7-5.noarch.rpm

2. yum 레포지토리 확인
sudo yum list | grep mysql

3. MySQl 설치
sudo yum -y install mysql-community-server

4. 설치가 끝났다면 MySQL 상태 확인
(사실 status 명령어는 sudo 없어도 된다)
sudo systemctl status mysqld 

5. MySQL 초기 비밀번호 확인 후 접속 -> 비밀번호 변경하기
(A temporary password is generated for root@localhost: ~ 여기서 초기 비밀번호를 확인)
sudo cat /var/log/mysqld.log

6. root 계정 비밀번호 변경
(비밀번호에 대문자, 소문자, 숫자, 특수문자 모두 포함되어야 한다. 아니면 에러 발생)
ALTER user 'root'@'localhost' IDENTIFIED WITH mysql_native_passwor BY '바꿀 비밀번호'

7. 서버 DB에 내 모든 IP를 허용하는 슈퍼 아이디 만들기
(% 자리에 원래 공인 IP 를 넣기는 한데 슈퍼 아이디니까 여기선 % 로 만든다)
(공인 IP는 네이버에 공인 IP 라고 검색하면 현재 내가 사용하고 있는 IP 가 나온다)
Create user '유저명'@'공인 IP 또는 %' IDENTIFIED BY '비밀번호';

8. 접근 권한 허용
grant all privileges on 데이터베이스명 또는 *.* to '유저명'@'공인 IP 또는 %';

9. 변경사항 적용
flush privileges;

 

라. Yum 으로 Node.js 설치

최신 버전을 설치받기보단 안정적인 이전 버전을 권장 (여기선 14.x 버전 설치)

Node.js 를 설치하면 Npm 패키지도 설치되는데 함께 버전을 확인해보자. (프론트 빌드할 때 Npm 으로 빌드해야해서 필요하다.)

1. 안정적인 버전 다운로드
sudo yum install -y gcc-c++ make 
curl -sL https://rpm.nodesource.com/setup_14.x | sudo -E bash - 

2. Node.js 설치
sudo yum install -y nodejs 

3. 설치 후 Node.js 버전 및 npm 버전 확인
node -v
npm -v

 

마. Nginx 설치

vi, vim 에디터로 내용 추가하고 꼭 다시 들어가서 저장하고 나왔는지 확인하자 ... (저장 안되어있을 수도 있음 .. 🥲)

(참고) Nginx 작동 명령어 (MySQL 과 동일)

1. 상태 : systemctl status nginx

2. 시작 : sudo systemctl start nginx

3. 중지 : sudo systemctl stop nginx

4. 재부팅 : sudo systemctl restart nginx 

1. repository를 등록
sudo vi /etc/yum.repos.d/nginx.repo

2. vi, vim 에디터로 내용 추가
[nginx] 
name=nginx repo 
baseurl=http://nginx.org/packages/centos/7/$basearch/ 
gpgcheck=0 
enabled=1

3. 저장한 repo 확인
yum info nginx

4. Nginx 설치
sudo yum install nginx

5. 설치 후 버전 확인
nginx -v

 

Nginx 를 설치하고 EC2 인스턴스 IP 로 접속해서 잘 동작하는지 확인해보자.

sudo systemctl start nginx 명령어로 Nginx 를 실행시킨 뒤 웰컴 페이지가 뜨면 성공 !

 

바. Nginx 설치 후 설정

Nginx 가 잘 작동하는지 확인했다면, 경로 등을 설정해줘야 한다.

원래 Nginx 를 설치하고 /etc/nginx 하위 경로에 sites-available 과 sites-enabled 디렉토리가 자동으로 생성되지만,

따로 생성되는게 없다면 만들어주자.

나는 자동으로 생성되지 않아서 새로 만들어줬다.. ㅋㅎ

아래에 나오겠지만, React 앱 빌드가 완료되고 그쪽 경로를 root 에 써주면 된다.

# 디렉토리가 따로 없다면 생성
# 현재 /etc/nginx 경로에 있음.
sudo mkdir sites-available
sudo mkdir sites-neabled

# nginx 설정파일 생성
# /etc/nginx/sites-available 내부에 생성해주자.
sudo vi [원하는 앱 이름].conf 

# [원하는 앱 이름].conf 내부 설정
server {
  # 포트 설정
  listen 80;
  
  # "/" 가 포함된 경로에 대한 설정을 의미
  location / {
  
    # React 의 build 파일이 위치한 경로를 기입
    root   /home/user/myapp/build; (현재 React 의 build 파일 경로를 절대경로로 써준다)
    
    # index 의 파일들을 지정하는 곳, 이 파일들 중 하나는 꼭 root 에 존재해야 한다.
    index  index.html index.htm;
    
    # 파일을 찾을 때 명시된 순서대로 찾으며, 가장 먼저 발견되는 파일을 사용한다.
    try_files $uri $uri/ /index.html;
  }
}

# 이후 설정
sudo ln -s /etc/nginx/sites-available/[app name].conf /etc/nginx/sites-enabled/[app name].conf

# 설정 후 nginx 재실행 (재실행 하지 않는다면 변경내용 적용이 안된다)
sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl status nginx (켜졌는지 다시 확인)

 

---

 

3. Git clone 명령어를 통해 React, SpringBoot 파일 빌드하기

 

가. 빌드 준비

GitHub 에 올라가있는 React 파일을 clone 하자.

/home 경로에 (~ 경로와 동일) 프로젝트를 clone 하면 빌드할 준비는 끝났다.

 

나. React 빌드

npm install 명령어는 꼭 package.json 파일이 있는 경로에서 실행해줘야 한다. 

# 프로젝트에 필요한 의존성 install - package.json에 있는 의존성 모듈을 받아온다.
sudo yum upgrade
sudo yum install npm
npm install 

# 프로젝트 확인
npm start

# 프로젝트 빌드
(빌드 파일이 있다면 덮어씌워지고, 완료되면 build 디렉토리가 생성되어 있다)
npm run build

 

npm start 명령어로 프로젝트가 잘 작동하는지 확인한다.

Warm 이 아닌 Compiled successfully! 문구가 뜨면 성공.

npm run build 명령어가 잘 작동하면 이렇게 build 디렉토리가 새로 생성되고, 내부에 index.html 파일이 있는걸 확인할 수 있다.

이렇게 실행된 상태에서 EC2 IP 주소:3000 으로 접속, 배포가 잘 됬다면 원하는 페이지가 뜰 것 🙂

 

80번 포트 접속을 3000번으로 Redirect 시켜주는 설정

80번 포트로 접속하면 Nginx 의 웰컴 페이지가 출력되고 IP 뒤에 3000 포트를 붙여줘야 React 의 웰컴페이지가 출력되는데,

이렇게 설정하면 80 번 포트로 요청되는 접속을 3000 번으로 Redirect 시켜서 바로 React 의 웰컴페이지가 출력된다.

iptables -t nat -I PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 3000

 

 

 

api 또한 80 번 포트로 호출하기 위해 [appName].conf 에 추가 설정하기

sites-available 디렉토리 내부의 [appName].conf 파일에 설정을 추가한다.

# 이전에 설정한 부분
server {
  listen 80;
  location / {
    root   /home/user/myapp/build;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
		
  }

# 추가한 부분
	location /api {
		proxy_pass http://localhost:8080;
		proxy_set_header X-Real-IP $remote_addr; # 실제 접속 IP
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header Host $http_host;
	}
}