Amazon EC2에서 JS 풀스택(백엔드/프론트엔드) 데모 앱 배포하기 - 01

 

 

앱을 배포하는 방법은 다양하지만, 백엔드를 함께 운영하는 앱의 경우 배포 과정에서 생각할 것이 많기 때문에 앱의 특성을 고려하여 배포 방법이나 플랫폼을 선택해야 합니다.
본 포스트에서 예제로 사용할 앱의 특징은 다음과 같습니다.
 

• 백엔드와 프론트엔드 앱은 모두 JS 기반이다.
• 앱의 용량은 크지 않다.
• 데모 웹사이트 제작 목적이기 때문에, 높은 트래픽을 고려하지 않아도 된다.
• 약간의 과금은 허용할 수 있다.

 
이와 유사한 상황이라면, Amazon EC2를 이용한 배포가 좋은 선택이 될 수 있습니다. 처음에는 데모 웹사이트 제작이 목적이기 때문에 무료로 이용할 수 있는 Vercel을 사용하려 했습니다. 이전에 개인 웹사이트 배포 시 편리하게 이용했던 기억이 있었기 때문입니다.
 

Vercel은 Next.js 개발사로, 간단한 앱을 무료로 배포할 수 있습니다.

 
하지만, Vercel은 백엔드를 포함한 앱 배포에는 적합하지 않다는 것을 이번 프로젝트로 알게 되었습니다. 프로젝트 구성을 Vercel이 요구하는 레이아웃에 맞추어야한다는 점, API 요청 시간에 limit가 있는 점 등의 여러 불편함이 존재해 다른 서비스를 선택하기로 했습니다.
EC2 로컬의 개발 환경과 가장 유사한 환경에서 배포가 가능하기 때문에 EC2를 이용해보기로 했습니다. 에제로 사용할 앱의 구조 및 배포 구조는 다음과 같습니다. 
 

 
 
api 폴더는 백엔드, public 폴더는 프론트엔드에 해당합니다. 이 앱을 EC2에서 배포하려면, 다음과 같은 과정이 필요합니다.
 

1. EC2 인스턴스를 생성합니다.
2. 프로젝트 파일들을 Github에서 가져옵니다.
3. 앱 배포에 필요한 모듈을 설치하고 환경 변수(.env)를 설정합니다.
4. pm2로 백엔드의 server.js를 실행하여 백엔드 서버를 띄웁니다.
5. nginx로 프론트엔드의 index.html을 실행합니다. 
6. 백엔드와 프론트엔드 통신을 설정합니다.
7. EC2 배포 주소를 통해 앱에 정상적으로 접속되는지 확인합니다.

 
1-3 단계의 기본 설정을 본 포스트에서 다루고, 두번째 포스트에서 4-6 단계의 백엔드 및 프론트엔드 배포 방법을 설명하겠습니다.
 

1. EC2 인스턴스 생성

 
AWS에서 로그인하여 EC2 인스턴스를 시작합니다. 인스턴스 환경은 본인이 편한 환경에 맞추어도 괜찮습니다. 본 포스트에서 사용하는 세팅은 대략 다음과 같습니다.

• Ubuntu 이미지 사용 (프리티어 이미지)
• 프리티어로 가능한 인스턴스 유형 선택(t2.micro)
• SSH/HTTPS/HTTP 트래픽 허용: 이 부분은 앱 배포 환경에 따라 설정해주시면 됩니다. 여기서는 누구나 접근 가능한 데모 제작이 목적이기에 모두 허용을 선택합니다.

 
이 외에 인증에 필요한 키 페어(key pair) 정도만 별도의 공간에 잘 저장해 놓은 후 인스턴스를 시작합니다.
 

2. 프로젝트 파일 Github에서 가져오기

 
본 예제에서는 프로젝트 파일을 github에 올려놓았다고 가정하고, git clone 명령어를 이용하여 프로젝트 파일을 가져오겠습니다. Git은 보통 EC2 인스턴스에서는 기본으로 설치되어 있는 것 같습니다.
 

git clone {저장소 주소}

 
 
만약 저장소개 비공개(private) 저장소라면, 인증 토큰을 이용하여 가져와야 할 수 있습니다. 인증 토큰은 github 프로필의 Settings 에서 하단의 Developer Settings를 선택한 후, Token(classic)을 발급하면 됩니다. 그 후 다음과 같이 가져올 수 있습니다.
 

git clone https://{github 닉네임}:{인증 토큰}@{저장소 주소}

 
 

3. 의존성 모듈 설치 및 환경 변수(.env)를 설정

 
프로젝트를 가져왔으면, 프로젝트 폴더로 진입하여 의존성 모듈들을 설치해야 합니다. JS 프로젝트는 다음과 같이 간단히 모듈을 설치할 수 있습니다. node.js가 설치되어 있지 않다면, 다음 페이지를 참고하여 환경에 맞는 node.js와 패키지 매니저 npm을 설치해줍니다.

 

Node.js 다운로드 페이지 
 

npm install

 
 
이제 환경 변수를 설정합니다. 앱을 배포할때, 보안이 필요한 정보를 .env(dot env) 파일에 저장하고 이를 gitignore에 추가하여 github 업로드되지 않도록 합니다. 그 대신, 어느 환경 변수가 필요한 지 명시하기 위해 별도의 .env.sample 이나 .env.local 등의 변형된 이름으로 환경변수 파일을 생성한 후 필요한 환경 변수의 이름만 명시하여 업로드하곤 합니다. 예를 들면, 다음과 같습니다.
 

# .env.sample 

OPENAI_API_KEY=YOUR_API_KEY
PG_DATABASE_INFO=DB_INFO

 
 
사용자는 github에서 프로젝트 파일을 받아온 뒤 이 .env.sample 파일의 이름을 다시 .env로 바꾸고, 필요한 환경변수 값을 대체하여 입력해주면 됩니다. 이렇게 설정한 환경변수는 dotenv 모듈을 통해 앱 내에서 이용됩니다. 예를 들면, 다음과 같습니다.

 

import dotenv from 'dotenv';
dotenv.config();

const OPENAI_API_KEY = process.env.OPENAI_API_KEY;

 

 

그럼, 다음 포스트에서 pm2를 이용한 백엔드 배포 방법을 이어 설명하겠습니다.