[캡스톤] 가상피팅 서비스 프런트엔드, 백엔드 배포하기

안녕하세요! 가상피팅 서비스 프로젝트의 백엔드와 프런트엔드를 성공적으로 배포한 과정을 공유해 드리고자 합니다. 저희는 프런트엔드는 Netlify를, 백엔드는 Ngrok을 활용하여 배포를 진행했습니다. 각각의 배포 과정과 장점을 함께 살펴보시죠!

---

1. 프런트엔드 배포: Netlify로 빠르고 간편하게!

Netlify는 정적 웹사이트 호스팅 및 배포를 위한 강력한 플랫폼입니다. 특히 React와 같은 SPA(Single Page Application) 배포에 매우 최적화되어 있습니다.

Netlify 배포 과정:

1. 프로젝트 준비: React 앱을 빌드합니다. npm run build 또는 yarn build 명령어를 실행하면 build 폴더에 배포 가능한 정적 파일들이 생성됩니다.
2. Netlify 가입 및 로그인: Netlify 웹사이트에 접속하여 GitHub, GitLab, Bitbucket 계정으로 간편하게 가입 및 로그인합니다.
3. 새 사이트 생성: 대시보드에서 'Add new site' 또는 'New site from Git' 버튼을 클릭합니다.
4. Git 연동: 프런트엔드 프로젝트가 저장된 GitHub, GitLab, Bitbucket 저장소를 연동합니다. 저장소를 선택하고 배포할 브랜치(예: main 또는 master)를 지정합니다.
5. 빌드 설정:
   • 빌드 명령어 (Build command): npm run build 또는 yarn build (프로젝트에 따라 다름)를 입력합니다.
   • 배포할 디렉토리 (Publish directory): build를 입력합니다.
6. 배포 시작: 'Deploy site' 버튼을 클릭하면 Netlify가 자동으로 프로젝트를 빌드하고 배포를 진행합니다.
7. 도메인 설정: 배포가 완료되면 Netlify에서 제공하는 기본 도메인으로 접속하여 웹사이트를 확인할 수 있습니다. 필요하다면 사용자 정의 도메인도 연결할 수 있습니다.

 

Netlify의 장점:

• 자동화된 CI/CD: Git 저장소에 코드를 푸시할 때마다 자동으로 빌드 및 배포가 이루어져 개발 워크플로우를 간소화합니다.
• 빠른 CDN: 전 세계에 분산된 CDN(콘텐츠 전송 네트워크)을 통해 사용자에게 빠르게 콘텐츠를 제공합니다.
• 간편한 설정: 직관적인 UI와 간단한 설정으로 웹사이트를 쉽게 배포할 수 있습니다.
• HTTPS 자동 적용: 무료 SSL 인증서를 자동으로 발급하고 적용하여 보안을 강화합니다.

---

2. 백엔드 배포: Ngrok으로 로컬 서버를 외부에 노출!

Ngrok은 로컬에서 실행 중인 웹 서버를 외부 인터넷에 노출시킬 수 있는 터널링 도구입니다. 개발 단계에서 프런트엔드와 백엔드를 연동하거나, 테스트 목적으로 외부에서 접근해야 할 때 매우 유용합니다.

Ngrok 배포 과정:

1. Ngrok 설치: Ngrok 공식 웹사이트에서 운영체제에 맞는 버전을 다운로드하고 압축을 해제합니다.
2. Ngrok 인증: 다운로드 후, Ngrok 대시보드에서 제공하는 인증 토큰을 사용하여 Ngrok을 인증합니다.
3. Bash

   ./ngrok authtoken <YOUR_AUTH_TOKEN>
   

4. 백엔드 서버 실행: 로컬 환경에서 FastAPI 백엔드 서버를 실행합니다. 저희 프로젝트의 경우 main.py 파일 하단에 Uvicorn을 통해 서버를 실행하는 코드가 있습니다.이 코드를 통해 서버가 8000번 포트에서 실행됩니다. 터미널에서 다음과 같이 실행할 수 있습니다.
5. Bash

   uvicorn api.main:app --host 0.0.0.0 --port 8000
   

6. Python

   if __name__ == "__main__":
       import uvicorn
       port = int(os.getenv("PORT", 8000))
       uvicorn.run("api.main:app", host="0.0.0.0", port=port, reload=False)
   

7. Ngrok 터널링 시작: 새로운 터미널을 열고, 백엔드 서버가 실행 중인 포트(예: 8000번)로 HTTP 터널을 엽니다.
8. Bash

   ./ngrok http 8000
   

9. 외부 URL 확인: Ngrok이 실행되면 콘솔에 Forwarding 주소가 표시됩니다. 이 주소(예: https://<random-subdomain>.ngrok-free.app)가 외부에서 백엔드 서버에 접근할 수 있는 URL이 됩니다.

Ngrok의 장점:

• 간편한 외부 노출: 복잡한 네트워크 설정 없이 로컬 서버를 인터넷에 쉽게 노출할 수 있습니다.
• 개발 및 테스트 용이: 프런트엔드와 백엔드를 분리하여 개발할 때 API 연동 테스트를 편리하게 진행할 수 있습니다.
• 일시적 접근: 특정 기간 동안만 서버를 외부에 노출해야 할 때 유용합니다.

---

3. 프런트엔드와 백엔드 연동

Netlify로 배포된 프런트엔드와 Ngrok으로 노출된 백엔드를 연동하는 것이 마지막 단계입니다.

RecommendationForm.js 파일에서 백엔드 API를 호출하는 부분의 URL을 Ngrok이 제공하는 외부 URL로 변경해야 합니다.

JavaScript

 

// RecommendationForm.js 파일 내 axios.post 요청 URL 수정
// 기존:
// const response = await axios.post("http://localhost:8000/api/analyze-image", ...);
// const response = await axios.post("http://localhost:8000/api/recommend", { ... });
// const response = await axios.post("http://localhost:8000/api/try-on", { ... });

// 변경:
const BASE_API_URL = "https://<YOUR_NGROK_SUBDOMAIN>.ngrok-free.app"; // Ngrok이 제공하는 URL로 변경

// 예시
const response = await axios.post(`${BASE_API_URL}/api/analyze-image`, ...);
const response = await axios.post(`${BASE_API_URL}/api/recommend`, { ... });
const response = await axios.post(`${BASE_API_URL}/api/try-on`, { ... });

이렇게 URL을 변경한 후, 프런트엔드 코드를 다시 빌드하고 Netlify에 재배포하면, 배포된 프런트엔드 웹사이트가 Ngrok을 통해 노출된 백엔드 서버와 통신하게 됩니다.

 

 

가상 피팅 서비스의 성공적인 배포는 Netlify와 Ngrok의 강력한 기능을 통해 가능했습니다. 이 두 도구를 활용하면 복잡한 배포 과정을 간소화하고, 효율적인 개발 및 테스트 환경을 구축할 수 있습니다. 여러분의 프로젝트에도 이 방법들을 적용해보세요!