[NginX] 설치 방법 및 webpack cli dist파일 실행

목차

 

개요

항상 프론트와 백엔드가 하나의 프로젝트에서 관리하는 방식으로 사용했다. 하지만 성능이나 확장성에서 MSA(Micro Achitecture)가 중시되면서 프론트와 백엔드를 분리하여 관리하는 추세이다. 백엔드는 jar파일로 실행하였지만 프론트는 찾아보니 dist파일을 NginX에서 실행할 수 있다는 것을 알게 되어 방법을 공유한다.

 

서버 환경

OS: CentOS Linux 7
NginX: 1.25.2

 

설치 환경설정

NginX를 설치하기 전 설정파일을 생성해야 한다.

]# vim /etc/yum.repos.d/nginx.repo

dist 파일 실행 환경설정

]# vim /etc/nginx/conf.d/default.conf

server {
    listen       8080;
    server_name  frontend_dev;
 
    access_log /home/frontend/logs/access.log main;
    error_log /home/frontend/logs/error.log warn;
 
    root   /home/frontend/dist;
    index  index.html;
 
    location / {
        try_files $uri $uri/ /index.html;
    }
 
    error_page  404              /404.html;
 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /home/frontend/dist;
    }
 
    location ~ /\.ht {
        deny  all;
    }
}
 

line 2, 'listen        8080;' : 실행할 포트 설정

line 5,6, 'access_log와 error_log' 변경할 로그 파일 위치 설정

line 8, 'root    /home/frontend/dist;' : 자신의 프로젝트를 빌드해서 생성한 dist파일의 위치로 설정

line 9, 'index    index.html' : 처음 실행할 파일

line 11, 13 : 되도록 똑같이 작성. 다르게 할 시 SPA 새로고침 404에러 이슈 발생할 수 있음

line 15, 20 : 에러 페이지 설정

line 22, 24 : htaccess 파일 접근 금지 설정

실행하기

]# systemctl start nginx

]# semanage permissive -a httpd_t