aws ec2 linux server - nginx로 react 배포-1

임은상·2023년 8월 24일
0
post-custom-banner

aws ec2 리눅스 서버에 react + spring 프로젝트를 배포하기 위해 우선 nginx를 설치하고 react 프로젝트를 배포했습니다. 그 과정을 작성하기 전에 nginx가 무엇이고, 왜 사용하는지 알아보겠습니다.

nginx란 무엇인가요? 왜 사용하나요?

간단하게, nginx는 높은 성능과 안정성을 보유한 경량 웹 서버입니다.

좀 더 자세한 이해를 위해서는 웹 서버(web server)was(web application server)를 알아둘 필요가 있습니다. 웹 서버는 클라이언트의 요청에 따라 html, css, js, 이미지 파일과 같은 정적 파일을 응답하여 제공하는 소프트웨어입니다. was는 클라이언트 요청에 대해 동적인 처리를 담당하는 영역입니다. nginx는 웹 서버에 해당합니다.

보통 웹 서비스는 client → 웹 서버 → was → db 순으로 요청되고, 반대 순서로 응답합니다.
기본 아키텍처
위 사진은 react + spring 프로젝트를 nginx를 사용하여 배포할 때 기본 아키텍처입니다. nginx가 웹 서버, spring boot에 사용된 서버가 was 입니다. 여기서, 빌드된 react 앱을 nginx를 통해서 실행되도록 하면 됩니다.

그러면 웹 서버는 왜 사용하는 걸까요? 그 이유는 첫째, was 부담을 줄여주기 위해 사용합니다. was는 동적 작업을 처리하기에도 바쁩니다. 정적인 파일 전달 역할을 웹 서버에게 위임하면 그 만큼 부담을 줄일 수 있습니다. 둘째, 보안 기능을 제공합니다. 셋째, (대부분의 웹 서버가) 비동기 처리 방식을 사용하여 높은 성능을 제공합니다. 멀티 프로세싱, 스레드 풀 등의 여러 기술을 사용하여 많은 클라이언트 요청을 동시에 처리 가능합니다.

그렇다면, 다시 넘어와서, 여러 웹 서버 중에 왜 nginx 일까요? 이것까지 다루면 내용이 길어지기 때문에 대충 '많이 좋아서' 정도로 하고 넘어가겠습니다.

cf. nohup 명령어를 사용한 백그라운드 실행 또는 pm2를 사용한 무중단 배포는 웹 서버를 사용하지 않습니다. 단순히 node.js를 was로 사용하는 구조입니다. 아마도요.

,, 여기까지 nginx가 뭐고, 왜 사용해야 하는지 알아보았습니다. 이제 본격적으로 nginx를 설치하고 배포하는 과정에 대해 알아보겠습니다.

aws ec2 리눅스 서버에 nginx 설치하기

nginx가 있는지 찾아보기

yum info nginx

리눅스 환경의 ec2를 시작하면, nginx에 대한 repo 경로가 없기 때문에 설정해주어야 합니다.

nginx repo 추가

sudo vi /etc/yum.repos.d/nginx.repo

vi 편집기가 열리면 아래 내용을 입력합니다.

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch
gpgcheck=0
enabled=1

내용 입력을 완료했으면 :wq 입력하여 저장, 종료합니다.

nginx repo 추가 확인

yum info nginx

결과 화면

nginx 설치하기

sudo yum install nginx

잘 설치됐는지 확인해봅시다.

nginx -v

nginx 시작, 종료, 재시작

sudo systemctl start nginx
sudo systemctl stop nginx
sudo systemctl restart nginx

보안그룹의 인바운드 규칙 추가

인스턴스 → 보안 → 보안 그룹 → 인바운드 규칙 편집 → SSH 규칙 추가
인바운드 규칙 추가

설치 확인

퍼블릭 DNS 주소에 접속해봅시다.
결과 화면

다음 글에서 이어집니다.


참고

https://blog.naver.com/gi_balja/223028077537
https://okky.kr/questions/1357368
https://control-time.com/entry/AWS-EC2-%EC%84%9C%EB%B2%84%EC%97%90-nginx-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0
https://lsjsj92.tistory.com/550

profile
임은상
post-custom-banner

0개의 댓글