[우아한테크코스 FE 5기]프론트엔드 배포 과정 #2

지난 포스팅에 이어 저희 스탬프크러쉬 팀 프론트엔드 배포 과정을 이어나가보고자 합니다. 이 글은 팀 프로젝트 진행 중 경험하며 기록한 것을 다수 참고한 글입니다. Thanks to 윤생, 제나, 깃짱👍

 

2차 데모데이 전후로 저희 팀의 배포 형태는 이전과는 다른 형태를 띄게 되는데요. NGINX의 도입이 바로 그것입니다. 

 

3. NGINX

 

백엔드 크루들이  NGINX를 도입했는데요. 이전의 스탬프 크러쉬 팀에서는 하나의 개발 서버에서 프론트엔드와 백엔드 애플리케이션을 각자 다른 포트에서 함께 배포해야 했는데요. 하지만 최초에는 외부에서 접근할 수 있는 포트는 80으로 단 하나였기 때문에 포트 포워딩이 필요했습니다.

 

따라서 요청이 들어왔을 때, prefix로 /api가 붙어있는 요청이라면 백엔드(8080 포트)로 포워딩하고, prefix가 붙어있지 않다면 프론트엔드(3000 포트 -> NGINX가 정적 파일을 서빙)로 포워딩하였습니다.

 

이를 도식화하면 아래와 같습니다.

 

3차 데모데이 배포 형태

 

NGINX가 이미 설치되어있는 상태에서 NGINX를 접했기에 설치과정은 생략하겠습니다.🥲

 

/{설치된 경로}/nginx/sites-enabled로 진입하여 default 파일 접근하여 변경하였습니다.

 

default 파일

server {
	listen 80 default_server;
	listen [::]:80 default_server;

	server_name _;
	
  # 프론트 정적파일 서브 관련 설정입니다.
	location / {
	   # after build you should insert current file in this 'root' directory
     root /usr/share/nginx/dist;
	   index index.html index.htm;
	   try_files $uri $uri/ $uri /index.html;
	}

	location /api {
            proxy_pass http://localhost:8080;
        }
  # ...      
}

해당 스크립트를 보면 NGINX가 location이 '/'인 요청(페이지 라우팅)에 대해서는 NGINX 내부의 정적 파일에 접근하도록 하였고, '/api'인 요청에 대해서는 8080번 포트 즉, 백엔드 애플리케이션에 api 요청을 보내는 것을 알 수 있습니다.

 

NGINX는 간단한 명령어를 통해 실행시킬 수 있는데요.

sudo systemctl <COMMAND> nginx.service

start, restart, stop, status 등의 명령어를 COMMAND 자리에 넣어서 동작시킵니다.

 

하지만 배포할 때마다 빌드 + NGINX 명령어를 작성하는 것은 번거롭겠죠?

 

그래서 쉘스크립트를 사용하여 단 한 줄만으로 빌드 + NGINX restart가 되도록 해보겠습니다.

 

쉘스크립트 작성

vi <프론트엔드_배포_쉘스크립트>.sh

<프론트엔드_배포_쉘스크립트>.sh

#!/bin/bash

npm run build

sudo cp -r <빌드된_디렉터리> <이동할_디렉터리>

sudo systemctl restart nginx.service

실행

./<프론트엔드_배포_쉘스크립트>.sh

 

위의 쉘 스크립트를 사용하여 동작시키면 이제 빌드 + 배포를 한번에 할 수 있게 되었습니다!

 

하지만 우리에게는 또 하나의 과제가 남았습니다. 바로 "자동화"

 

자동화 과정에 대한 공유는 다음 포스팅에서 이어가도록 하겠습니다.