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

 

시작하며

지난 6월부터 우테코 레벨3에 들어서면서 프론트-백이 협업하여 진행하는 온전한 프로젝트를 경험하고 있습니다. 레벨3 이전의 저는 기껏해야 GitHub Pages 배포 혹은 Vercel처럼 서버가 제공되는 서비스를 통한 배포만 가능한 상태였습니다.

 

현재 백엔드와의 협업을 통해 온전히 바닥부터 프로젝트를 만드는 소중한 경험을 하고 있는데요. 단순히 프론트엔드 코드를 작성하는 것에 그치지 않고, 배포와 기획 등 이전에는 몰랐던 것들에 대한 경험을 쌓고 있습니다. 이 소중한 경험들을 기록하기로 다짐했습니다.

 

언제나처럼 이 글은 정보를 전달하기보다 그저 제 경험을 기록하기 위함임을 밝히며, 사실과 다르거나 틀린 내용이 있으면 지적해주시면 감사하겠습니다.

 

스탬프 크러쉬 로고(by 깃짱)

스탬프크러쉬 팀 배포의 역사

우선, 저희 팀에 EC2가 제공된 뒤 프로젝트를 EC2 인스턴스에 clone하는 절차를 거쳤습니다. 이후 기술할 내용들은 pem키를 이용하여 EC2에 접근하여 이루어지는 작업들입니다.

 

1. serve

저희 스탬프크러쉬 팀이 처음으로 선택한 배포 방법은 npm serve였습니다.

일단 배포만 해보자!하는 마인드였던 저희 팀에게 serve만큼 쉽게 적용할 수 있는 방법이 없었다고 판단했기 때문입니다.

 

serve 설치 및 사용법

1. 리눅스 서버에 serve 설치합니다.

npm i -g serve

2. 환경변수를 사용해 BASE_URL을 사용하기 때문에 프로젝트 최상위 디렉터리에서 .env 파일도 생성해줍니다.

echo "REACT_APP_BASE_URL = '<PUBLIC_IP>'" >> .env

3. serve 실행

sudo npx serve -s <빌드된_폴더> -l <PORT>

-s: 정적 파일로 실행된다는 의미.

-l <PORT>: 사용할 포트번호를 지정함.

 

serve를 사용하여 간단하게 배포를 완료했습니다. 하지만, serve의 foreground process(활성화되면 쉘에서 다른 작업이 불가능한) 특성상 코드가 변경되어 새로이 배포를 하는 동안 배포를 중단할 수 밖에 없는 형태를 띌 수 밖에 없었습니다.

 

2. pm2 

2차 데모데이가 아주 가까이 다가왔기 때문에 일단 가볍게 무중단 배포를 해보고자 다음 배포 툴로 pm2를 선택하게 되었습니다.

 

pm2 설치 및 사용법

 

1. 리눅스 서버에 pm2 설치

sudo npm install -g pm2

 

2. pm2 실행

node.js를 통한 무중단 서비스이기 때문에 server.js코드를 작성하여 줍니다.

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

// 경로로 들어오는 모든 url에 대해 root file 제공
app.get('*', (_, res) => {
	res.sendFile(path.join(__dirname, '/dist/index.html'))
})

const PORT = 3000;

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`); // 정상동작 확인용 주석
});

 

쉘에 입력하여 pm2를 실행할 코드

pm2 start server.js

 

현재 실행되고 있는 node 프로세스 리스트 확인

pm2 list

 

pm2 중지

pm2 stop <ID>

 

serve와는 다르게 background process 특성을 가졌기 때문에 무중단 서비스를 가능하게 했습니다. 가볍고 빠르게 무중단 서비스를 경험해보고 싶은 상황에서 pm2를 유용하게 사용하였고, 이제는 다음 단계로 넘어가야겠다는 생각을 하게 되는데요.

 

그 이유와 새로운 배포 형태에 대한 글은 다음 포스팅에서 이어가도록 하겠습니다.👋