[ Cafe24 서버 호스팅 ] #6: Express API 서버 Cafe24에 배포 및 연동 테스트

✨ 목표

로컬에서 개발한 Node.js(Express) API 서버를 Cafe24 리눅스 서버에 배포하고,
Angular 프론트엔드 또는 Postman으로 연동 테스트를 수행합니다.
PM2를 이용하여 서버를 안정적으로 운영하고, 접속 테스트까지 확인합니다.

 

📦 주요 작업 요약

1. Express API 서버 Cafe24에 업로드
2. MobaXterm을 통한 SSH 접속
3. PM2를 이용한 서버 실행
4. Postman 또는 Angular를 통한 API 테스트
5. 로그 및 접속 확인

---

✔️ 1. API 서버 구성 및 업로드

📤 업로드 경로 예시

• FileZilla로 Cafe24 서버에 접속 후 /home/Edu 이동
• 다음 경로에 파일 업로드:

업로드 항목	업로드 위치
server.js, package.json  등 Node.js 서버 관련 파일	/home/Edu
client/dist/client/browser 폴더 안에 파일들	/home/Edu/_dist

 

💡 자세한 업로드 방법은 아래 링크 게시글 참고
"[ Cafe24 서버 호스팅 ] #4: Node.js로 실서버 배포" ➡ "✔️ 3. 파일 업로드 (FileZilla)"

---

✔️ 2. Cafe24 서버 접속 및 PM2 실행

🖥️ MobaXterm SSH 접속 후

## 프로젝트 경로 이동
cd /home/Edu

## 필요 시 의존성 설치
npm install
npm install express cors body-parser

## 서버 실행
node server.js           // pm2하기 전, node로 테스트
pm2 start server.js

---

✔️ 3. API 연동 테스트 (Browser or Postman)

Express 서버가 제대로 실행되고 있는지, 그리고 Angular와의 API 연동이 정상적인지 테스트하는 과정입니다.

 

1️⃣ 브라우저 또는 Postman으로 API 테스트

 

- Postman이라는 툴을 사용하면 다양한 HTTP 요청(GET, POST, PUT, DELETE 등)을 쉽게 테스트할 수 있습니다.

 

- 브라우저로도 간단한 GET 요청은 테스트 가능

 

✅ 브라우저 주소창에 아래와 같이 입력:

http://ID.cafe24.com:3000/api/users

• 결과로 JSON 데이터가 화면에 표시되면 성공!

💡 자세한 Postman 사용법 및 요청 방식 기초 방법은 아래 링크 게시글 참고
"Postman 설치 및 기본 사용법 (API 테스트 도구)"

 

2️⃣ Angular 프론트에서 연동 확인

 

• Angular 앱을 실행한 뒤 (ng serve 또는 배포된 버전 접속)
• 브라우저 개발자 도구 열기 (F12 또는 Ctrl+Shift+I)
• "Console" 탭에서 응답 데이터 확인
• "Network" 탭 → 요청 항목 클릭 → 응답(Response) 탭에서 JSON 확인 가능

---

✔️ 4. 문제 발생 시 확인 포인트

✅ 포트가 제대로 열려 있는지 확인:

netstat -nap | grep LISTEN

 

✅ PM2에서 로그 확인:

pm2 logs

 

✅ 브라우저 접속이 안 될 경우:

• server.js 내 포트 번호 확인
• 보안 그룹에서 해당 포트 허용 여부 확인

---

✔️ 5. 최종 접속 확인

브라우저에서 아래 주소로 접속 시 API 또는 Angular 앱이 정상 응답하는지 확인:

http://ID.cafe24.com:3000

 

정상적으로 응답 또는 JSON 결과가 보이면 배포 및 연동 완료 🎉