[ Cafe24 서버 호스팅 ] #4: Angular 빌드 후 Node.js로 실서버 배포 (PM2 + FileZilla)

✨ 목표

Angular로 만든 프론트엔드 프로젝트를 빌드하고, Node.js(Express) 서버와 함께 Cafe24 리눅스 서버에 PM2를 이용해 배포하는 과정을 다룹니다.

 

📦 주요 작업 요약

1. Angular 빌드 (ng build)
2. Node.js 서버 설정 (Express + 정적 파일 서빙)
3. FileZilla로 Cafe24에 업로드
4. MobaXterm으로 접속하여 PM2 또는 Node 실행
5. 실서버 접속 확인

---

✔️ 1. Angular 프로젝트 빌드

클라이언트 프로젝트를 배포용으로 빌드합니다.

cd C:\myPrj\client
ng build

결과: dist폴더가 생성되며, client/dist/client/browser 폴더 안에 index.html, js/css 파일들이 생성됩니다.

 

📌 주의 사항

• Angular 17 이상 기준으로는 기본 경로가 dist/client 입니다.
• 프로젝트 구조나 Angular 버전에 따라 빌드 위치가 다를 수 있습니다. angular.json의 "outputPath" 항목을 확인해 보세요.

 

---

✔️ 2. Node.js 서버 구성 (server.js)

서버에서 Angular로 빌드된 정적 파일을 Express로 서빙할 수 있도록 server.js를 다음과 같이 설정합니다:

const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 3000;

// Angular 빌드 결과물 경로
const distPath = path.join(__dirname, '_dist');

// 정적 파일 제공 설정
app.use(express.static(distPath));

app.get('/', (req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

app.use((req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

➡ _dist/browser 폴더 내에 index.html 및 Angular의 빌드된 정적 리소스들을 배치합니다.
➡ / 및 그 외의 라우팅을 모두 Angular 쪽에서 처리하도록 구성합니다.

 

---

✔️ 3. 파일 업로드 (FileZilla)

이제 Cafe24 서버에 파일을 업로드할 준비를 합니다.

1. FileZilla를 열고, #2에서 설정한 FTP로 Cafe24 서버에 접속합니다.
2. 접속 후 처음 위치가 root일 경우, 상단 ..을 클릭하여 상위 경로로 이동합니다.
3. /home 디렉터리로 진입합니다
4. home 폴더 안에서 마우스 우클릭 → “디렉터리 만들기” 선택 → 원하는 프로젝트 이름으로 폴더 생성 (예: Edu 또는 myPrj)
5. home/Edu/_dist 폴더를 새로 생성합니다. (server.js 및 서버 관련 파일 보관용)
6. 다음과 같이 파일을 업로드합니다:

A. server.js, package.json, node_modules 등 Node.js 서버 관련 파일 ➡ /home/Edu
B. client/dist/client/browser 폴더 안에 파일들 ➡ /home/Edu/_dist

 

📁 최종 디렉터리 구조 예시:

home/
└── Edu/
    ├── _dist/
    │     ├── index.html
    │     ├── main.js
    │     └── ...
    ├── server.js
    ├── package.json
    └── node_modules/

 

home/Edu 

 

home/Edu/_dist

 

---

✔️ 4. Cafe24 서버에서 실행 ( Mobaxterm )

Mobaxterm에서 관리자 정보로 Cafe24 서버에 SSH 접속 후, 

cd /home/Edu    # 서버 프로젝트 경로로 이동
npm install         # 처음 실행 시, npm install로 express 등의 의존성 설치가 필요할 수 있습니다:

 

이제 서버를 실행할 수 있는 방법은 아래와 같이 3가지가 있습니다:

 

💡 서버 실행 방법 비교

실행	명령어설명
node server.js	가장 기본적인 Node.js 실행 방법입니다. 터미널 종료 시 서버도 종료됨.
nodemon server.js	파일이 수정될 때 자동으로 서버를 재시작합니다. 개발용. (npm install -g nodemon)
pm2 start server.js	운영용으로 가장 추천. 서버 지속 유지, 자동 재시작, 로그 확인 기능 등 제공. (npm install -g pm2)

 

 

📦 실행 도구 설치 명령어

 

도구가 설치되어 있지 않다면 아래 명령어로 설치하세요:

npm install -g nodemon    # nodemon 전역 설치
npm install -g pm2            # pm2 전역 설치

 

설치 후 nodemon -v, pm2 -v 명령어로 정상 설치 여부를 확인할 수 있습니다.

 

❗ pm2 실행

pm2 start server.js # Express 서버 실행

 

✅ pm2 명령어 및 실행 확인:

pm2 start server.js       # 서버 실행
pm2 list                          # 실행 중인 앱 목록 확인
pm2 logs                       # 실시간 로그 보기
pm2 restart server.js   # 재시작
pm2 stop server.js       # 중지
pm2 delete server.js   # 앱 삭제

pm2 save                      # 현재 실행 중인 앱 목록을 저장 (재부팅 후 자동 복구를 위해 필수)
pm2 startup                 # 시스템 부팅 시 PM2 자동 실행 설정

pm2 monit                   # PM2 모니터링 대시보드 실행

## 서버가 어떤 포트를 열고 외부 요청을 기다리고 있는지 확인하는 명령어
netstat -nap | grep LISTEN
> 특정 포트가 열려 있지 않거나 프로세스가 제대로 실행되지 않았을 때 문제를 진단하는 데 유용함

pm2 save를 하지 않으면 서버 재부팅 시 실행 목록이 날아감
pm2 startup 명령 실행 후, 출력되는 명령어를 복사해서 한 번 더 실행해야 설정이 적용됨

---

✔️ 5. 접속 확인

브라우저에서 다음과 같이 입력하여 Angular 앱이 뜨는지 확인합니다:

http://<카페24_IP주소>:3000
예) http://ID.cafe24.com:3000

 

정상적으로 Angular 앱이 열리면 배포 완료입니다 🎉