Nginx 를 이용한 Front deploy 방법

 

Windows 환경에서 Nginx 설치 방법 소개

 

 

Nginx 설치

http://nginx.org/en/download.html

nginx: download

다음과 같은 사이트에 접속 후, stable version 에 있는 nginx/windws 파일을 눌러 설치한다.

nginx 홈페이지

 

Nginx 실행

설치한 nginx 파일을 압축 풀고 nginx.exe 을 실행한다.

압축 푼 모습

localhost/ 로 접속하면 다음과 같은 페이지가 뜬다. nginx 실행 성공!

localhost 에 접속 하여 nginx 설치가 성공적으로 끝난 것을 확인 가능하다.

기본 port 는 80 이며, nginx.conf 파일을 이용하여 port 수정 및 다른 것과 연동이 가능하다.

설치한 nginx.exe 를 눌러 쉽게 실행이 가능하지만 종료 후에 작업관리자 및 PID를 확인하여 nginx 가 확실히 종료 되어 있는 지 확인하는 것이 중요하다.

 

명령어

다음은, nginx 윈도우에서 사용하는 명령어이다.

nginx 윈도우 명령어
        - 시작 : nginx.exe
        - 종료 : nginx.exe -s stop
        - 재시작 : nginx -s reload

 

 

Front Build

Angular 프레임워크를 사용 중이었으며, Build 된 프로젝트를 살펴보자.

depoly 폴더가 생성되면서 그 안에 public 파일이 생기고, 분류 폴더와 함께 다음과 같이 build 된 파일이 생성된다.

해당 파일들은 정적 리소스이다. (static)

build 된 파일들

index.html 이 실행되는 파일이라고 생각하면 된다.

 

Nginx conf 수정

설치한 nginx 폴더 안에는 conf 라는 폴더가 존재한다. 해당 폴더에서 nginx.conf 파일을 찾아 설정을 수정할 수 있다.

nginx 내부

nginx.conf 파일

conf 설정

server 에는 기본 80 port 가 지정되어 있다.

location 안에는 build가 되어 있는 경로를 root 에 써주면 된다 (중간은 프로젝트 명이라 가렸다)

deploy가 되고 그 안에 public 파일이 존재하는데 나는 A, B 라는 front 를 둘 다 띄워야 하기 때문에 index.html 을 실행해야 한다. 그래서 root 경로 안에 있는 index.html index.htm; 로 시작하는 것들을 실행한다는 의미로 작성했다.

(* index.htm 은 오타가 아니다.)

또한 front가 back api 를 호출해서 값을 호출하고 보내기 때문에 proxy_pass 에 작성한다. 처음 나는 로컬로 띄웠기 때문에 모자이크 된 부분은 http://localhost:portNm; 이다.

conf 를 수정하면 항상 nginx 를 재실행해야 한다는 사실을 잊으면 안 된다.

 

Nginx 재실행

back이 실행이 되고 있는 상태이고, nginx 가 제대로 종료가 된 시점이라면 해당 conf 를 수정 후 실행을 해보자. 이때 telnet 을 이용하여 Nginx 가 확실히 종료된 상태인지 파악할 수 있는데,

Windows 기능

Windows 기능에서 ' 텔넷 클라이언트 ' 부분을 체크되어 있는 상태여야 telnet 명령어를 cmd 에서 사용이 가능하다.

telnet 사용으로 Nginx가 종료됐는지 확인

완전한 종료가 되어있는지 확인을 하고 다시 nginx.exe 를 이용하여 실행을 하자.

그리고 난 후, localhost 로 들어가서 /test 처럼 이동하고자 하는 주소를 입력하자. 제대로 과정을 밟아 실행이 됐다면 아마 프론트 화면이 등장할 것이다.