Tany
백문이불어일Tany
Tany
전체 방문자
오늘
어제
  • 분류 전체보기 (197)
    • JAVA TPC (1)
    • JAVA (10)
    • CS (3)
    • SPRING (5)
    • DFS BFS (12)
    • SQL (7)
    • 알고리즘 정리 (76)
    • Git, Github (3)
    • 학습 계획 (36)
    • 코드스쿼드 학습일지 (19)
    • Servlet (5)
    • VPC (2)
    • AWS (4)
    • JPA (5)
    • 취미생활 (2)
    • 프로젝트 기록 (7)
      • Issue Tracker 삽질 기록 (5)
      • 당근마켓 API 서버 기록 (2)
      • 나만의 블로그 제작 기록 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • AWS
  • 백준
  • 자료구조
  • 정렬
  • 인프런
  • 주간 학습 계획
  • 면접을 위한 CS 전공지식 노트
  • 완전탐색
  • 파이썬
  • github
  • JSP
  • JPA
  • 문자열
  • 재귀
  • 이분탐색
  • BFS
  • dfs
  • 알고리즘
  • MVC
  • sql
  • 프로그래머스
  • hash
  • Stack
  • 이코테
  • java
  • MySQL
  • GIT
  • EC2
  • 자바
  • 해시

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Tany

백문이불어일Tany

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

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

2022. 4. 27. 20:55

이미지 출처) 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;
	}
}

 

'AWS' 카테고리의 다른 글

[AWS] M1 Mac EC2 인스턴스에 Spring Boot 프로젝트 배포하기  (0) 2022.04.17
[AWS] M1 Mac EC2 인스턴스에 MySQL 설치 및 원격 접속하기  (0) 2022.04.10
[AWS] M1 Mac EC2 인스턴스 생성 및 실행까지  (0) 2022.04.08
    'AWS' 카테고리의 다른 글
    • [AWS] M1 Mac EC2 인스턴스에 Spring Boot 프로젝트 배포하기
    • [AWS] M1 Mac EC2 인스턴스에 MySQL 설치 및 원격 접속하기
    • [AWS] M1 Mac EC2 인스턴스 생성 및 실행까지
    Tany
    Tany
    내가 보려고 만드는 백엔드 기록장 Github https://github.com/juni8453

    티스토리툴바