AWS EC2 + NGINX + SPRING + REACT 배포

박정훈·2023년 3월 2일
NginxReactSpringawsec2
0

Springboot API를 사용하는 React 앱을 AWS EC2를 이용해 Ngnix에 태워 배포하는 방법에 대해 알아보았다.

Tomcat Server 구축

JDK&Javac 설치

openjdk 8 설치

sudo yum install -y java-1.8.0-openjdk
sudo yum install -y java-1.8.0-openjdk-devel.x86_64

openjdk 11 설치

sudo amazon-linux-extras install java-openjdk11 -y

버전 선택하려면 아래 명령어 실행후 나오는 안내를 따라서 진행하면 된다.

sudo alternatives --config java

Tomcat 설치

https://tomcat.apache.org/download-90.cgi 링크로 이동해서 아래와 같이 tar.gz에 마우스 우클릭을 하고 링크 주소 복사를 한다.

wget <<복사한 링크>>

위의 명령어를 입력한다.

ls 명령어를 통해 나오는 리스트 중 tar.gz 파일을 찾고 tar xvfz <<해당파일의 이름>> 을 입력한다.

tar xvfz <<해당파일의 이름>>

다시 ls 명령어를 치면 tar.gz 파일이 압축이 풀려있는데 아래와 같이 sudo mv <<대상 파일>> <<경로/바꿀 이름>> 형식으로 명령어를 친다.

sudo mv apache-tomcat-9.0.73 /usr/local/tomcat9

마지막으로 톰캣을 구동시킨다.

/usr/local/tomcat9/bin/startup.sh

AWS 인스턴스 상세 페이지의 (퍼블릭 IPv4 주소 + :8080)을 URL 창에다 쳤을 때 Apache Tomchat 홈페이지가 나오면 성공한 것이다.

Node.js 설치 && React App 구동

Node.js 설치 (Amazon 공식 문서 참조)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
. ~/.nvm/nvm.sh
nvm install 16

아래 명령어로 잘 설치되었는지 버전 확인

node --version

Git 설치

Git 설치 명령어

sudo yum install git -y

Git 설치 유무 및 버전 확인 (git version <<버전>> 이라 나오면 됨)

git version

React 프로젝트 생성

폴더 생성

mkdir <<폴더명>>

해당 폴더 들어감

cd <<폴더명>>

리액트 프로젝트 생성

npx -y craete-react-app <<프로젝트명>>

프로젝트 안으로 들어간다.

cd <<프로젝트명>>

프로젝트 실행

npm start

다음으로 ec2의 <<퍼블릭 IPv4 주소>>:3000을 URL 창에 쳐서 들어가면 리액트 앱이 실행될 것이다.

Github Repository의 React 프로젝트 가져오기

Github 저장소에서 가져올 프로젝트의 주소를 복사한다.

EC2 명령창에 프로젝트를 옮길 폴더에서 아래 명령어를 입력해 프로젝트를 가져온다.

sudo git clone << 복사한 주소 >>

ls 명령어를 입력하면 가져온 프로젝트명이 보일텐데 해당 프로젝트로 들어간 다음 node_modules을 생성해준다.

cd <<프로젝트명>>
npm install

Error: EACCES: permission denied 에러가 뜬다면 아래 명령어를 입력하고 다시 node_modules을 생성해준다.

sudo chmod 777 <<대상 폴더>>
npm intsall

package-lock.json에 대해 같은 에러가 뜨면 아래와 같이 명령어를 입력한다.

sudo chmod 777 <<package-lock.json 경로>>
npm intsall

다시 두 경로에 대해 권한을 되돌린다.

sudo chmod 755 <<대상 폴더 또는 파일>>

서버를 실행한다.

npm start

EC2 인스턴스의 <<퍼블릭 IPv4 주소>>:3000을 URL로 들어가서 작동하는지 확인한다.

Spring Gradle 프로젝트 구동

React 프로젝트를 Github 저장소에서 가져올 때처럼 프로젝트의 Git 주소를 복사하고 EC2 명령창에 프로젝트를 옮길 폴더에서 아래 명령어를 입력해 프로젝트를 가져온다.

sudo git clone << 복사한 프로젝트 주소 >>

프로젝트로 들어간다.

cd << 프로젝트명 >>

gradlew 파일에 권한을 부여한다.

sudo chmod 777 ./gradlew

빌드한다.

sudo ./gradlew build

빌드가 성공하면 프로젝트의 build/libs 경로에 jar 파일이 생성되고 아래 명령어를 입력하면 프로젝트가 구동한다.

java -jar 파일명.jar

무중단 배포하는 방법

nohup java -jar 파일명.jar &

무중단 배포한 서버 종료하는 방법

ps -ef
kill -9 {pid번호}

EC2 인스턴스의 <<퍼블릭 IPv4 주소>>:<<스프링 프로젝트 포트>> 을 URL로 들어가서 작동하는지 확인한다.

Nginx 설치 및 설정

Nginx 설치

Amazon Linux 에서의 nginx 설치 명령어

sudo amazon-linux-extras install nginx1

yarn 설치 및 리액트 빌드

yarn 설치 명령어

curl -o- -L https://yarnpkg.com/install.sh | bash
source ~/.bashrc

cd 명령어로 리액트 프로젝트로 이동 후 build 폴더를 생성한다.

yarn install
yarn run build --prod

위의 명령어로 생성된 build 폴더 안에는 index.html이 있는데 이 파일을 nginx에서 사용할 것이다.

Nginx React 관련 설정

nginx.conf을 연다.

sudo vi /etc/nginx/nginx.conf

아래와 같이 include를 추가하고 아래의 해당부분을 주석처리한다.

include /etc/nginx/sites-enabled/*.conf

sites-available과 sites-enabled 디렉토리를 생성하고 sites-available 안에 설정파일을 추가하고 연다.

sudo mkdir /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites-enabled
sudo vi /etc/nginx/sites-available/setting.conf

setting.conf 안에 아래와 같이 작성한다. (ㅁㅁㅁㅁㅁ 에는 리액트 경로에 해당하는 내용을 작성한다.)

server {
  listen 80;
  location / {
    root /home/ec2-user/ㅁㅁㅁㅁㅁ/ㅁㅁㅁㅁㅁ/build;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

:wq 명령어로 저장을 한 다음 아래의 명령어를 입력한다.

sudo ln -s /etc/nginx/sites-available/setting.conf /etc/nginx/sites-enabled/setting.conf

테스트한다. 성공하면 successful 이라 나온다.

sudo nginx -t

nginx를 실행한다.

sudo systemctl start nginx

브라우저의 URL 창에 <<퍼블릭 IPv4 주소>>를 쳐서 들어가면 배포된 리액트 앱이 열린다. 하지만 백엔드 API를 사용하는 부분은 동작하지 않을 것이다.

Nginx Spring 관련 설정

/api 경로에 대해 백엔드 프로젝트가 받을 수 있도록 setting.conf를 아래와 같이 수정한다.

server {
  listen 80;
  location / {
    root /home/ec2-user/ㅁㅁㅁㅁㅁ/ㅁㅁㅁㅁㅁ/build;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  location /api {
    proxy_pass http://{인스턴스 퍼블릭 IPv4 주소}:8080;
  }
}

스프링 프로젝트를 무중단 배포 하고 nginx를 실행하면 API를 호출하는 부분까지 작동을 할 것이다.

SSL 적용하기

위의 작업까지 하면 http이기에 쿠키가 저장되지 않는다. 따라서 SSL을 적용해야 하는데 SSL을 적용하기 위해 일단 도메인이 필요한데 무료로 발급받을 수 있는 사이트가 "Freenom", "내도메인.한국"이 있다. Freenom 같은 경우 잘 되지 않길래 "내도메인.한국"을 이용해서 무료로 도메인을 발급받을 수 있었다.

도메인 발급받기 - 내도메인.한국

내도메인.한국을 방문하여 회원가입을 한 후 HOME으로 가서 원하는 도메인을 검색해 도메인을 등록한다.

도메인 관리에서 해당 도메인에 대해 고급설정에서 IP연결에 체크하고 인스턴스의 퍼블릭 IPv4 주소를 적고 저장한다.

setting.conf 수정

setting.conf에 아래와 같이 server_name을 추가하고 저장한다.

server {
  listen 80;
  server_name  <<도메인 이름>>;
  location / {
    root /home/ec2-user/ㅁㅁㅁㅁㅁ/ㅁㅁㅁㅁㅁ/build;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  location /api {
    proxy_pass http://{인스턴스 퍼블릭 IPv4 주소}:8080;
  }
}

SSL 발급 위해 Let's Encrypt 설치

EPEL 다운로드

sudo wget -r --no-parent -A 'epel-release-*.rpm' https://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/

리포지토리 패키지 설치

sudo rpm -Uvh dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel-release-*.rpm

EPEL 활성화

sudo yum-config-manager --enable epel*

설치 확인

sudo yum repolist all

certbot 설치

sudo yum install -y certbot python2-certbot-apache

certbot-nginx 설치

sudo yum install certbot-nginx

SSL 인증서 발급 위해 아래 명령어를 실행하고 이후 안내에 따라 진행한다.

sudo certbot --nginx

인증서 발급이 완료되면 해당 도메인의 https 접속을 확인한다.

profile
박정훈
즐겁게 열심히 꾸준히 더 높이
이전 포스트

AWS EC2 - 인스턴스 연결

다음 포스트

AWS EC2 + NGINX + SPRING + REACT 배포

0개의 댓글