DevOps/AWS

EC2로 24시간 서버 운영 - Nginx (3/3)

Code Maestro 2023. 2. 6. 16:01
728x90

1. Nginx란?

EC2 서버에서 빌드된 vue 파일들과 빌드된 jar 파일을 연동시켜야 합니다. 이를 위해 Nginx의 reverse proxy를 이용할 겁니다. 

 

출처: Nginx 홈페이지

 

Nginx는 웹서버로 HTTP 요청을 읽어서 응답을 해주는 프로그램입니다. 웹 서버뿐만 아니라 리버스 프록시, 캐싱, 로드 밸런싱, 미디어 스트리밍 등의 다양한 역할을 해주는 오픈소스 소프트웨어입니다. 고성능 웹서버이기 때문에 대부분 서비스들이 현재 Nginx를 사용하고 있습니다. 

 

proxy 서버는 클라이언트가 자신을 통해 네트워크 서비스에 접속하게 해줄 수 있는 서버를 뜻합니다. Reverse Proxy란 클라이언트가 Reverse Proxy에 요청하면 관련 요청에 따라 적절한 내부 서버에 접속. 결과를 받은 후 클라이언트에 전달해 줍니다. 

 

저희는 Reverse Proxy를 이용하여 서버의 포트를 지정된 EC2 IP주소/api url로 이동시키게 해줄겁니다. 

ex) http://3.37.47.173/api

 

2. Nginx설치

ssh에 접속해줍니다.

 

sudo apt-get install nginx 명령어를 통해 Nginx를 설치해 줍시다.

sudo service nginx status 명령어로 위의 사진처럼 뜬다면 ec2에 정상 설치가 된 것입니다. 

 

EC2의 IP 주소에 들어가 보면 위의 그림처럼 뜬다면 성공입니다.

 

3. Nginx에 빌드된 vue 적용

vue를 빌드하기 앞서 

기존 URL
배포 URL

반드시 기존의 http://localhost:9000/api/ 주소를 배포된 주소로 변경해주어야 합니다. 안 그러면 서로 연동이 안 됩니다.

 

저는 .env.production 환경 변수로 손쉽게 변경했습니다. (자세한 건 구글링 참고)

 

 

cmd 창에서 vue 폴더 위치까지 이동합니다.

npm run build 명령어를 통해 빌드를 하면

 

dist 폴더 안에 html, css, js 파일들로 추출됩니다.

 

ssh에서 접속합니다. nginx에서 html 파일들이 저장되는 경로는 /var/www/html입니다. 이 디렉토리에 vue 프로젝트의 빌드된 폴더(dist 폴더)를 이동시키게 합니다. 

 

만약 권한 문제 때문에 옮겨지지 않았다면은 sudo chown -R ubuntu /var/www 명령어로 www 폴더 하위의 서브 폴더부터 모든 파일까지 한 번에 소유자를 변경시킵니다. 

sudo vim /etc/nginx/sites-available/default 명령어를 통해 nginX의 설정을 바꿔서 '/'에서 빌드된 vue 파일의 경로로 설정합니다.

 

dist 폴더를 이동시켰고, Nginx의 설정을 변경했으면 

 

위의 사진처럼 빌드된 vue 파일이 적용된 걸 확인할 수 있습니다. 

 

 

4. 프론트 엔드와 백엔드 연동

 

sudo vim /etc/nginx/sites-available/default 명령어로 Nginx 설정을 편집해 줍니다.

위의 사진처럼 백엔드의 location을 /api로 설정하고, proxy_pass를 9000번 포트로 설정해 줍니다. 

9000번 포트가 아니더라도 자신이 설정한 서버의 포트로 지정해 주면 됩니다. 

 

편집이 완료되면 esc 버튼을 눌러 wq를 입력합니다.  

 

 

설정이 적용되게끔 sudo systemctl restart nginx 명령어로 Nginx를 재실행해줍니다. 

 

sudo nginx -t 명령어로 설정이 정상적으로 반영됐는지 확인해 줍니다. 위의 사진처럼 ok표시가 됐다면 정상적으로 설정이 적용된 것입니다. 

 

 

 

nohup java -jar (프로젝트명)-0.0.1-SNAPSHOT.jar & 명령어를 실행하여서 

 

기존의 명령어와 달리 nohup 명령어를 통해 터미널이 종료가 돼도 실행되게끔 하고, 뒤의 & 명령어로 백그라운드에서도 실행이 되게끔 해줍니다. 

 

만약 실행이 안 된다면 

 

 

netstat -tulpn | grep (포트명) 명령어를 통해 실행 중인 프로세스를 확인하고(25902)

 

kill -9 (pid) 명령어로 기존 서버 포트를 꺼줍니다. 

 

그리고 다시 nohup java -jar (프로젝트명)-0.0.1-SNAPSHOT.jar & 명령어를 통해 실행해 줍니다. 

 

 

 

EC2의 ip주소로 들어가 보면 Nginx의 reverse proxy를 통해 정상적으로 연동된 것을 확인할 수 있습니다.

 

만약 오류가 발생한다면 nohup 명령어를 사용하지 않고, java -jar (프로젝트)-SNAPSHOT.jar 명령어를 통해 그냥 실행해 봅시다. 만약 오류가 발생한다면 오류 메시지가 나올 텐데 '오류 메시지' 검색을 통해 디버깅할 수 있습니다.

 

5. CI / CD

만약 서비스를 변경할 일이 있다고 가정해 봅시다. 실시간으로 코드를 변경하고 일일이 빌드를 하고, 이동시키는 걸 반복해야 할까요?

 

여러 개발자의 코드가 실시간으로 병합하거나 테스트를 수행, master 브랜치로 푸시되면 배포가 자동으로 이루어지는 환경을 구축할 수 없을까요?

 

다음 편에는 CI/CD에 대해 소개하겠습니다. 

728x90