[3-Tier 프로젝트 배포] 2. Front-end Server 의 Nginx 설치 및 구동 + 환경 설정

[개요]

이번 게시글은 Frontend Server에 Nginx 설치와 구동 그리고 환경 설정에 대한 내용이다.

 

https://notorious.tistory.com/432

[3-Tier 프로젝트 배포] 0. 프로젝트 구성 설명 및 배포 과정 설명

이전 게시글의 프로젝트 구성 절차를 수행한다.

 

 

[프런트엔드 서버 구성 특징]

 

[서버 구성도]

이전 게시글에서 설명한 서버 구성도를 살펴보도록 하자.

 

서버 구성도에서 프런트엔드 서버의 특징은 다음과 같다.

 

①. 브라우저는 80포트를 통해 프런트엔드 서버로 접속한다.

②. 'shorten-url-main.html' 은 Nginx에 띄워져 있다.

③. Nginx는 리버스 프록시 기능을 수행하여 Nginx가 '백엔드'로 요청을 보낸다.

 

여기서 ' ① ' 특징의 의미는 다음과 같다.

"브라우저는 오직 '프런트엔드 서버의 80포트' 와만 통신을 한다."

즉, 브라우저의 CORS 정책 위반이 일어날 수 없다.

 

이와 같은 특징을 충족하는 프런트엔드 서버를 구성해보도록 하자.

 

 

[프런트엔드 서버 구성하기]

 

Vultr를 통해 구성한 프런트엔드 서버인 'nginx-instance'.

 

 

'PuTTY'를 통해 서버에 접속한다.

 

서버에 명시된 'root' 와 '{password}' 를 통해 접속한다.

 

 

1. Nginx 설치 및 설정

Nginx를 설치한다.

"yum install nginx"

 

① 특징 - 브라우저는 80포트를 통해 프런트엔드 서버로 접속한다.

 

현재 80 포트 점유 여부 확인 -> 점유중이지 않음!

 

Nginx 실행하기

 

현재 Nginx가 실행되고 있다. 

그러나 "http://{Frontend Server IP}:80" 으로 접속하게되면, 접속이 허용되지 않는다.

그 이유는 80포트가 방화벽이 걸려있기 때문이다.

이제 방화벽을 해제해야 한다.

 

 

2. 80포트 방화벽 해제하기

현재 방화벽이 열려있는 포트를 확인 -> 아무런 포트도 열려있지 않음!

 

80포트에 대해 방화벽을 해제한다.

## 80포트 방화벽 열기 ##
firewall-cmd --permanent --zone=public --add-port=80/tcp

## 방화벽 해제된 포트 목록 ##
firewall-cmd --list-ports

## 방화벽 리로드(새로고침) ##
firewall-cmd --reload

 

 

"http://{Frontend Server IP}:80" 로 접속하면, 아래와 같이 Nginx 메인 페이지가 나온다.

 

모바일로 접속하더라도 같은 페이지가 나온다.

 

이제 어느 기기 / IP 주소에 상관 없이 인터넷만 되면 접속 가능한 페이지를 배포하게 되었다!

이곳에 원하는 페이지를 올리기만 하면 된다.

 

 

3. 프런트엔드 파일 올리기

1. Nginx "정적 콘텐츠 배포 경로" 확인하기

Nginx 설정 파일(nginx.conf)에서 "정적 콘텐츠 배포 경로"를 확인한다.

vi 에디터를 이용해 "/etc/nginx/nginx.conf" 경로에 위치한 설정 파일을 연다.

 

"/usr/share/nginx/html" 경로가 "Nginx의 정적 콘텐츠 배포 경로"이다.

 

정적 콘텐츠 배포 경로에 위치한 파일들을 살펴보도록 하자.

여기에 나온 index.html 파일이 현재 Nginx의 메인 페이지 화면이다.

 

2. 프런트엔드 파일 ZIP 다운로드 하기

프런트엔드 파일은 "shortened-url-main.html" 과 "config.js"로 구성되어 있다.

"config.js" 파일은 백엔드 API 요청을 위한 URL 변수(baseUrl)가 저장되어 있다.

baseUrl = "http://{backend-server-ip address}:8080

 

https://github.com/yashin20/deploy-test/tree/main/frontend-server

deploy-test/frontend-server at main · yashin20/deploy-test

 

GitHub를 통해 프런트엔트 파일 ZIP을 다운로드 한다.

Download ZIP 의 링크를 복사한다.

 

## 프런트엔드 배포 ZIP 파일 다운로드 ##
wget https://github.com/yashin20/deploy-test/archive/refs/heads/main.zip

## 다운로드된 main.zip 파일 압축풀기 ##
unzip main.zip

"shortened-url-main.html"과 "config.js" 을 Nginx 정적 콘텐츠 경로에 옮겨야 한다.

 

 

3.. Nginx "정적 콘텐츠 배포 경로" 에 프런트엔드 파일 올리기

## 현재 위치 모든 파일 "목적지"로 복사 ##
cp * /usr/share/nginx/html

올바르게 위치된 것을 확인할 수 있다.

 

위 URL로 접속해보면 html 파일이 화면으로서 올바르게 띄워져 있는 것을 볼 수 있다.

 

 

4. Reverse Proxy 설정하기!

Frontend 와 Backend를 분리하기 위해 가장 중요한 작업이다.

Frontend 에서 받은 Backend API 요청을 Nginx가 Backend 서버로 요청을 전달(proxy)한다.

 

Nginx에서 리버스 프록시를 설정하기 위해서 "proxy_pass" 설정을 사용한다.

Nginx 설정 파일에서 Backend API 요청 URL을 등록하고, 해당 URL 요청을 Backend 서버 주소로 매핑한다.

 

"http://{Frontend Server IP}/api:80/**" 형식으로 오는 요청은

"http://{Backend Server IP}:8080/api/**" 으로 프록시 한다.

 

라는 의미를 가지고 있다.

 

수정된 설정 파일을 저장 후 닫기를 한다.

설정 파일이 오타 없이 올바른지 확인 후 Nginx를 리로드 한다.

 

---

 

마침내 프런트엔드 서버 구성 및 설정 절차가 마무리되었다.

다음 게시글은 DB 서버 구성 및 설정 절차를 진행하겠다.  

 

 

+ 추가) 리눅스 보안 정책으로 애플리케이션이 정상 작동 되지 않는 경우가 있음.

이 경우 SELinux 라는 리눅스의 보안 정책은 강화하는 기능인데, 이것이 활성화 되어 있는 경우일 수 있음.

"setenforce 0"을 입력하여 일시적으로 비활성화를 시키도록하자.