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

목차

• 개요
• 서버 환경
• 설치 환경설정
• 설정한 버전 선택
• 설치하기
• 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