웹 애플리케이션 배포 방법

이 튜토리얼에서는 웹 애플리케이션을 인터넷에 배포하여 다른 사람들이 접속할 수 있도록 하는 방법을 소개합니다. 텐센트 클라우드 CloudBase, Vercel, Zeabur 세 가지 자주 사용하는 배포 플랫폼을 소개하여, "코드 작성 완료"에서 "다른 사람이 인터넷에서 웹사이트에 접속할 수 있게 되기"까지의 전체 과정을 빠르게 완료할 수 있도록 도와드리겠습니다.

"배포"란 무엇인가요?

시작하기 전에 "배포(Deployment)"가 정확히 무슨 의미인지 먼저 알아보겠습니다. 웹사이트가 외부 사용자의 접속을 받으려면 공개적으로 접근 가능한 네트워크 주소가 있어야 합니다(이 주소는 IP 주소(예: 123.45.67.89)일 수도 있고, 도메인(예: google.com)일 수도 있습니다). 하지만 주소만으로는 부족합니다. 작성한 웹페이지 코드(예: HTML, CSS, JavaScript 파일, 또는 React, Vue 등 프레임워크로 작성한 프로젝트)와 관련 이미지/비디오 리소스는 모두 24시간 온라인 상태인 서버에 "올려져" 있어야 하며, 이 서버가 네트워크 요청에 응답해야만 누구의 브라우저에서든 접속하여 이 리소스들을 다운로드할 수 있습니다.

이미지 출처: https://www.hostinger.com/tutorials/what-is-cloud-hosting

리소스를 업로드하고, 환경을 설정하며, 서비스를 "실행"시키는 전체 과정을 배포(Deployment)라고 합니다.

간단히 말해: 내 컴퓨터에서 작성한 웹페이지는 로컬에서 프로그램을 시작해야만 내 브라우저에서 로컬 주소로 접속할 수 있습니다. 왜냐하면 이 코드는 내 하드디스크에만 존재하기 때문입니다. "배포"란 코드와 리소스를 공용 네트워크에 연결된 전문 서버로 옮기고, 설정을 완료하여 이 서버가 "다른 사람이 접속할 때 어떻게 응답할지"를 알도록 만드는 것입니다. 예를 들어, 누군가 브라우저에서 도메인을 입력하면 서버는 즉시 해당 웹페이지 파일을 찾아 내용을 상대방의 기기로 전송하여 사용자가 페이지를 볼 수 있게 합니다.

수동으로 배포하려면 프로젝트 하나에 여러 단계가 필요하며, 각 단계마다 문제가 발생할 수 있습니다. 일반적인 핵심 단계는 다음과 같습니다.

서버 준비: 먼저 클라우드 서버를 구매해야 합니다(예: 알리클라우드, 텐센트클라우드, AWS EC2). 서버 위치(예: 상하이, 싱가포르), 사양(CPU, 메모리, 디스크 크기 등)을 선택하고, 원격으로 서버에 접속하는 방법도 배워야 합니다(예: SSH 도구로 로그인).
환경 설정: 웹 애플리케이션은 특정 "환경"에서만 실행될 수 있습니다. 예를 들어 Node.js 프로젝트를 실행하려면 먼저 Node.js를 설치해야 하고, Python 프로젝트를 실행하려면 Python과 해당 서드파티 라이브러리를 설치해야 합니다. 환경 버전이 일치하지 않으면 프로그램이 오류를 일으키거나 시작되지 않을 수 있습니다.
리소스 업로드: 로컬 코드와 리소스를 서버에 업로드해야 합니다. 일반적인 방법으로는 FTP나 Git이 있습니다. 프로젝트 크기가 큰 경우(예: 비디오 파일 포함), 중간에 연결이 끊기면 다시 업로드해야 할 수도 있습니다.

서비스 시작 및 테스트: 업로드가 완료되면 서버에서 명령어를 실행하여 애플리케이션을 시작하고, "할당된 네트워크 주소로 접속 가능한지" 테스트해야 합니다. 접속이 안 된다면 서버 방화벽에서 해당 포트를 열어주지 않았을 수 있습니다(예: 애플리케이션이 3000번 포트를 사용하지만 방화벽에 의해 차단된 경우). 또는 프로그램 자체에 버그가 있을 수도 있으며, 이때는 서버 로그를 확인하여 문제를 파악해야 합니다.
💡 포트는 같은 기기에서 서로 다른 애플리케이션을 구분하는 "방 번호"로 이해할 수 있고, IP는 이 기기의 "건물 번호"입니다. IP와 포트를 합치면(IP:port) 특정 네트워크 서비스를 정확하게 찾을 수 있습니다.
유지보수 및 업데이트: 이후 코드를 수정할 때마다 다시 업로드하고 서비스를 재시작해야 합니다. 서버가 다운되면(예: 정전, 네트워크 장애) 애플리케이션을 수동으로 다시 시작해야 하며, 때로는 프로세스 관리 도구를 추가로 설정하여 프로그램이 비정상 종료 시 자동으로 재시작되도록 해야 합니다.

CloudBase, Vercel, Zeabur 같은 "로우코드 배포 플랫폼"은 바로 이러한 복잡한 문제를 해결하기 위해 탄생했습니다. "서버 구매, 환경 설정, 코드 업로드, 서비스 시작, 실행 모니터링" 등의 단계를 자동으로 처리해 줍니다. 코드 저장소(예: GitHub나 GitLab)를 플랫폼에 연결하거나 코드를 직접 업로드하기만 하면, 자동으로 코드를 가져와 애플리케이션 유형을 인식하고, 해당 실행 환경을 설정한 후 누구나 접속할 수 있는 공용 주소를 제공합니다. 심지어 원클릭으로 자신의 도메인을 연결할 수도 있습니다.

앞으로 이 세 가지 플랫폼의 특징과 사용 방법을 각각 소개하여, 가장 적합한 배포 방안을 선택할 수 있도록 도와드리겠습니다.

배포 플랫폼 비교

플랫폼	특징	적용 시나리오	무료 할당량
텐센트 클라우드 CloudBase	중국 내 접속 속도가 빠르고 위챗 생태계와 긴밀하게 통합	중국 사용자 위주, 위챗 미니프로그램 지원이 필요한 프로젝트	무료 할당량 있음
Vercel	프론트엔드 프레임워크 지원이 우수하고 GitHub와 긴밀하게 통합	React/Vue/Next.js 등 최신 프론트엔드 프로젝트	무료 할당량 있음
Netlify	기능이 포괄적이며 폼 처리와 인증을 지원하고 Git과 잘 통합됨	폼 처리, 인증 등 고급 기능이 필요한 정적 웹사이트	무료 할당량 있음
Zeabur	다양한 언어와 서비스 템플릿을 지원하고 설정이 유연함	다양한 서비스(예: Dify, n8n)를 배포해야 하는 복잡한 프로젝트	월 약 5달러 무료 할당량

1. 텐센트 클라우드 CloudBase

텐센트 클라우드 CloudBase(클라우드 개발)는 텐센트 클라우드가 제공하는 올인원 백엔드 클라우드 서비스로, 특히 중국 개발자에게 적합합니다. 장점은 다음과 같습니다.

중국 내 접속 속도 빠름: 서버가 중국에 위치하여 접속 지연이 낮음
위챗 생태계 통합: 위챗 미니프로그램, 공식 계정과 쉽게 연동 가능
올인원 솔루션: 정적 웹사이트 호스팅, 클라우드 함수, 데이터베이스, 스토리지 등 전체 서비스 제공
풍부한 무료 할당량: 개인 개발자에게 충분한 무료 리소스 할당량 제공

CloudBase로 웹 애플리케이션 배포하기

1단계: 가입 및 로그인

텐센트 클라우드 CloudBase 콘솔에 접속하여 위챗 또는 QQ로 로그인합니다.

2단계: 환경 생성

"새 환경 만들기"를 클릭하고 환경 이름(예: my-web-app)을 선택합니다.

⚠️ 주의: CloudBase의 무료 체험판은 교환 코드가 있어야 개설할 수 있습니다. 텐센트 클라우드 CloudBase 공식 계정을 팔로우하고, 공식 계정에서 "교환 코드 받기"를 입력하여 무료 체험판 교환 코드를 받은 후, 환경 생성 시 교환 코드를 입력하면 무료 환경을 개설할 수 있습니다(무료 체험 기간은 6개월).

3단계: 정적 웹사이트 호스팅 활성화

환경 관리 페이지에서 "정적 웹사이트 호스팅" 기능을 찾아 활성화합니다. 활성화 후 기본 접속 도메인을 받게 됩니다.

CloudBase의 정적 웹사이트 호스팅은 Zeabur과 유사하게 다양한 배포 방식을 제공합니다.

로컬 프로젝트 업로드: 빌드된 정적 파일(HTML, CSS, JS 등)을 로컬에서 직접 업로드
템플릿 배포: 사전 설정된 템플릿으로 프로젝트를 빠르게 생성 (예: React 웹 애플리케이션 템플릿, Vue 웹 애플리케이션 템플릿)
Git 저장소 배포: GitHub 등 코드 저장소에서 자동으로 코드를 가져와 배포 지원

4단계: 코드 배포

정적 웹사이트 호스팅 페이지에서 CloudBase는 세 가지 배포 방식을 제공합니다.

방식 1: 로컬 프로젝트 배포(로컬 프로젝트 업로드)

콘솔에서 "로컬 프로젝트 배포" 선택
빌드된 정적 파일(HTML, CSS, JS 등)을 직접 업로드
로컬에서 빌드한 프로젝트 폴더(예: dist 또는 build 디렉토리) 선택
업로드 완료 후 접속 가능

방식 2: 템플릿 배포

사전 설정된 템플릿으로 프로젝트를 빠르게 생성
React 웹 애플리케이션 템플릿, Vue 웹 애플리케이션 템플릿 등 지원
템플릿을 기반으로 자동 빌드 및 배포

방식 3: Git 저장소 배포

Git 개인 저장소 배포: GitHub 등 개인 코드 저장소 연결
공개 저장소 배포: 공개 Git 저장소에서 코드를 가져오기 지원
자동 빌드 명령어 설정(예: npm run build)
코드를 푸시할 때마다 자동으로 재배포

💡 팁: CLI 도구를 사용하여 배포할 수도 있습니다.
bash
# CloudBase CLI 설치
npm install -g @cloudbase/cli
# 로그인
tcb login
# 배포
tcb hosting deploy ./dist -e your-env-id

5단계: 커스텀 도메인 설정(선택사항)

정적 웹사이트 호스팅 설정에서 자신의 도메인을 연결하고, 무료 HTTPS 인증서를 신청할 수 있습니다.

2. Vercel

Vercel은 세계에서 가장 인기 있는 프론트엔드 배포 플랫폼 중 하나로, 특히 React, Vue, Next.js 등 최신 프론트엔드 프레임워크 프로젝트 배포에 적합합니다. 특징은 다음과 같습니다.

GitHub와의 심층 통합: 코드를 푸시하면 자동 배포
자동 미리보기: 각 Pull Request마다 독립적인 미리보기 링크 생성
글로벌 CDN: 웹사이트가 자동으로 전 세계 노드에 분산되어 접속 속도가 빠름
서버리스 함수: 프로젝트 내에서 백엔드 API 작성 지원

⚠️ 주의: Vercel은 일부 네트워크 환경에서 접속이 불안정할 수 있으며, 중국 내 사용자는 CloudBase를 우선적으로 고려하는 것을 권장합니다.

Vercel로 웹 애플리케이션 배포하기

1단계: 계정 가입

Vercel 공식 웹사이트에 접속하여 GitHub 계정으로 로그인합니다.

2단계: 프로젝트 가져오기

"Add New Project" 클릭
배포할 GitHub 저장소 선택
원하는 저장소가 보이지 않으면 "Adjust GitHub App Permissions"를 클릭하여 접근 권한 부여

3단계: 빌드 설정 구성

Vercel은 프로젝트 유형을 자동으로 인식하고 빌드 명령어를 설정합니다.

프레임워크	빌드 명령어	출력 디렉토리
React	`npm run build`	`build`
Vue	`npm run build`	`dist`
Next.js	`next build`	-
순수 HTML	-	프로젝트 루트 디렉토리

자동 인식이 올바르지 않으면 수동으로 수정할 수 있습니다.

Build Command: 빌드 명령어, 예: npm run build
Output Directory: 빌드 출력 디렉토리, 예: dist 또는 build
Install Command: 의존성 설치 명령어, 보통 npm install

4단계: 배포

"Deploy" 버튼을 클릭하고 빌드가 완료될 때까지 기다립니다. 빌드가 성공하면 xxx.vercel.app 형태의 도메인을 받게 됩니다.

5단계: 커스텀 도메인(선택사항)

프로젝트 설정의 "Domains" 페이지에서 자신의 도메인을 추가할 수 있습니다. Vercel이 자동으로 HTTPS를 설정합니다.

3. Netlify

Netlify는 Vercel과 유사하게 매우 인기 있는 프론트엔드 배포 플랫폼으로, 특히 정적 웹사이트와 단일 페이지 애플리케이션(SPA) 배포에 적합합니다. 특징은 다음과 같습니다.

포괄적인 기능: 정적 웹사이트 호스팅 외에도 폼 처리, 인증, 엣지 함수 등 고급 기능 지원
Git과의 심층 통합: GitHub, GitLab, Bitbucket 지원, 코드 푸시 시 자동 배포
브랜치 미리보기: 각 브랜치마다 독립적인 미리보기 링크를 자동으로 생성
글로벌 CDN: 웹사이트가 자동으로 전 세계 노드에 분산되어 접속 속도가 빠름
폼 처리: 백엔드 코드 없이 웹사이트 폼 제출 처리 가능
인증: 내장된 사용자 인증 기능으로 빠르게 로그인/회원가입 구현 가능

⚠️ 주의: Netlify는 중국 내 접속 속도가 CloudBase만큼 빠르지 않을 수 있으며, 주로 해외 사용자를 대상으로 하는 프로젝트에 사용하는 것을 권장합니다.

Netlify로 웹 애플리케이션 배포하기

1단계: 계정 가입

Netlify 공식 웹사이트에 접속하여 "Sign up"을 클릭하고 가입합니다. GitHub, GitLab, Bitbucket 또는 이메일로 가입할 수 있습니다.

2단계: 프로젝트 가져오기

로그인 후 "Add new site" → "Import an existing project" 클릭
코드 호스팅 플랫폼(예: GitHub) 선택
Netlify에 저장소 접근 권한 부여
목록에서 배포할 저장소 선택

3단계: 빌드 설정 구성

Netlify는 일반적인 프론트엔드 프레임워크를 자동으로 인식하고 빌드 설정을 구성합니다.

프레임워크	빌드 명령어	퍼블리시 디렉토리
React	`npm run build`	`build`
Vue	`npm run build`	`dist`
Angular	`ng build`	`dist/<project-name>`
Next.js	`next build`	`out`
순수 HTML	-	`.`(프로젝트 루트 디렉토리)

자동 인식이 올바르지 않으면 수동으로 설정할 수 있습니다.

Build command: 빌드 명령어, 예: npm run build
Publish directory: 빌드 출력 디렉토리, 예: dist 또는 build

4단계: 배포

"Deploy site" 버튼을 클릭하고 빌드가 완료될 때까지 기다립니다. 빌드가 성공하면 xxx.netlify.app 형태의 도메인을 받게 되며, 누구나 이 주소로 웹사이트에 접속할 수 있습니다.

5단계: 커스텀 도메인 설정(선택사항)

사이트 설정에서 "Domain management" 클릭
"Add custom domain" 클릭
도메인을 입력하고 안내에 따라 DNS 레코드 설정
Netlify가 자동으로 HTTPS 인증서를 신청하고 설정

특별 기능

1. 폼 처리

Netlify는 매우 편리한 기능을 제공합니다: 백엔드 코드 없이 폼 제출을 처리할 수 있습니다.

HTML 폼에 netlify 속성만 추가하면 됩니다.

html

<form name="contact" netlify>
  <p>
    <label>이름: <input type="text" name="name" /></label>
  </p>
  <p>
    <label>이메일: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>메시지: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">보내기</button>
  </p>
</form>

배포 후 폼 제출 데이터는 자동으로 Netlify 백엔드로 전송되며, "Forms" 페이지에서 모든 제출 기록을 확인할 수 있습니다. 이메일 알림을 설정하거나 데이터를 다른 서비스로 전달할 수도 있습니다.

2. Netlify Functions(엣지 함수)

Netlify는 서버리스 함수(Serverless Functions) 배포를 지원하여, 완전한 백엔드 서버를 구축하지 않고도 간단한 API 인터페이스를 구현할 수 있습니다. JavaScript나 TypeScript로 함수를 작성하면 배포 후 자동으로 접속 가능한 URL을 받게 됩니다.

예를 들어, hello.js 파일을 생성합니다.

javascript

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello from Netlify!" })
  };
};

배포 후 https://your-domain/.netlify/functions/hello를 통해 이 함수에 접속할 수 있습니다.

3. 로컬 개발 지원

Netlify는 CLI 도구를 제공하여 로컬에서 개발하고 테스트하기 편리합니다.

bash

# Netlify CLI 설치
npm install -g netlify-cli

# 계정 로그인
netlify login

# 로컬 개발 서버 시작
netlify dev

# 로컬에서 함수 테스트
netlify functions:serve

CLI 도구를 사용하면 로컬에서 Netlify 환경을 시뮬레이션할 수 있으며, 폼 제출, 함수 호출 등의 기능을 배포 전에 테스트할 수 있습니다.

4. Zeabur

Zeabur은 새롭게 떠오르는 배포 플랫폼으로, 특히 다양한 서비스를 배포해야 하는 복잡한 프로젝트에 적합합니다. 장점은 다음과 같습니다.

풍부한 서비스 템플릿: Dify, n8n, 데이터베이스 등 다양한 서비스 템플릿 내장
다양한 배포 방식 지원: GitHub, 템플릿, Docker 이미지, 로컬 프로젝트 등
유연한 서비스 조합: 하나의 프로젝트에서 여러 개의 상호 연관된 서비스를 배포 가능
종량제 과금: 사용한 만큼 지불하여 실험적 프로젝트에 적합

Zeabur으로 Dify 배포하기

이전 강의에서 Dify를 간단히 다룬 적이 있습니다. 이제 Zeabur을 통해 자신만의 Dify 서비스를 매우 쉽게 시작할 수 있습니다. 먼저 콘솔 페이지를 열고 각 영역을 살펴보겠습니다.

이 페이지에서 먼저 볼 수 있는 것은 여러 개의 사각형으로, 이것들이 이미 시작된 서비스들입니다. 상단 메뉴에는 Agent, Servers, Docs, Templates 등의 옵션이 있으며, 각각 다음을 나타냅니다.

Agent: Zeabur에 내장된 스마트 어시스턴트(Agent)를 열어 조작 방법을 문의하거나 현재 서버 상태를 조회할 수 있습니다.
Servers: 자신이 구매한 클라우드 서버를 추가하거나 Zeabur을 통해 직접 서버를 구매할 수 있습니다.
Docs: Zeabur의 전체 문서를 확인할 수 있습니다.
Templates: 모든 내장 템플릿 이미지가 나열되어 있습니다.

여기서 언급한 "이미지(Image)"는 "코드와 실행 환경을 포함한 압축 패키지"로 이해할 수 있습니다. 어떤 서비스가 서버에서 성공적으로 실행된 후, 이 "실행 환경 + 코드"를 이미지로 패키징할 수 있습니다. 이후 새로운 서버에서 이 압축 패키지를 압축 해제하여 실행하기만 하면, 환경과 코드를 다시 설정할 필요 없이 서비스를 바로 실행할 수 있습니다.

페이지 우측 상단에서는 자신의 잔액을 확인할 수 있습니다. 기본적으로 매월 약 5달러의 무료 할당량이 제공됩니다. 세부적인 과금 규칙은 당장 신경 쓰지 않아도 되며, 서버가 실행 중이면 할당량이 소모된다는 것만 알면 됩니다.

잔액을 클릭하면 일일 사용 내역을 확인할 수 있습니다.

이제 자신만의 Dify 서비스를 생성해 보겠습니다. 먼저 콘솔 홈에서 "New Project"를 클릭합니다.

다음은 각 생성 방식에 대한 설명입니다.

GitHub GitHub 계정과 연결할 수 있습니다. 연결 후 GitHub 저장소에서 직접 프로젝트를 선택하여 배포할 수 있습니다(GitHub은 현재 세계 최대의 코드 호스팅 플랫폼입니다).
Template(템플릿) 템플릿을 기반으로 서비스를 배포할 수 있습니다. Zeabur에는 Dify, n8n 등 다양한 사전 설정 프로젝트 템플릿이 내장되어 있어, 이 템플릿을 기반으로 애플리케이션을 빠르게 생성하고 배포할 수 있습니다.
Databases(데이터베이스) 데이터베이스 서비스를 배포하는 데 사용합니다. MySQL, MongoDB 등 일반적인 데이터베이스를 지원합니다.
Functions(함수) 함수 서비스를 배포할 수 있습니다. JavaScript나 Python 코드를 작성하여 함수 형태로 호출할 수 있습니다.
Local Project(로컬 프로젝트) 로컬 폴더를 업로드하면 Zeabur이 시작 스크립트를 자동으로 인식합니다. 이미 로컬에서 개발한 프로젝트를 Zeabur에 빠르게 배포하는 데 적합합니다.
Docker Image 이미 패키징된 Docker 이미지를 배포합니다. 프로젝트가 이미 Docker 이미지로 만들어진 경우(예: Docker Hub나 다른 이미지 저장소에 보관된 경우) 여기서 직접 배포할 수 있습니다.
Cursor Cursor(예: Cursor IDE)를 설치한 경우, 이 입구를 통해 Cursor의 프로젝트를 Zeabur에 직접 배포할 수 있습니다.

자신의 Dify 서비스를 배포하려면 Template 방식을 선택한 후 검색창에 "dify"를 입력하는 것을 권장합니다. 다양한 작성자가 관리하는 버전을 볼 수 있으며, 그 중 하나를 선택하면 됩니다(예: v1.6.0 버전).

그 다음 임의의 이름을 입력하면, Zeabur이 이 이름을 기반으로 임시 커스텀 도메인을 생성합니다. 이후 모든 사람이 이 주소를 통해 서비스에 접속할 수 있습니다.

생성이 완료되면 여러 프로그램(서비스)이 순차적으로 시작되는 것을 볼 수 있습니다. 모든 서비스가 "시작됨" 상태가 될 때까지 인내심을 가지고 기다려 주세요(Dify 서비스는 여러 프로그램으로 구성되며, 각 프로그램이 서로 다른 기능을 담당하고 상호 협력합니다).

일반적으로 좌측의 Dify 애플리케이션을 클릭하면 기본 접속 주소를 볼 수 있습니다. 하지만 이 예시에서는 앞에 nginx 레이어가 추가되어 있으므로, nginx 서비스를 클릭하여 최종 접속 주소를 가져와야 합니다. nginx는 외부 요청을 통합하여 "수신/발신"하는 메인 프로그램으로 이해하면 되며, 외부 접속 주소를 내부 각 서비스에 분배합니다. 좌측의 Nginx를 클릭하면 세부 정보 페이지에서 현재 서비스 주소를 확인할 수 있으며, 브라우저에서 이 주소를 열고 서비스가 완전히 시작될 때까지 기다립니다.

잠시 기다리면 Dify의 로그인 화면이 나타납니다. 이메일 주소와 등록 비밀번호를 입력하면 자신만의 Dify 서비스를 사용할 수 있습니다.

관심이 있다면 n8n 서비스도 함께 시작해 볼 수 있습니다. n8n 역시 해외에서 매우 인기 있는 AI 워크플로우 플랫폼입니다.

Zeabur과 Trae를 사용하여 스네이크 게임 배포하기

이 튜토리얼의 다음 부분에서는 Zeabur의 몇 가지 심화 사용법을 체험해 보겠습니다. 먼저 Trae로 스네이크 미니 게임을 생성한 후, Zeabur 서버에 배포하고 공개 접속 가능한 링크를 설정하여 누구나 게임을 열 수 있도록 만들겠습니다.

첫 번째 단계는 로컬에서 Trae를 사용하여 스네이크 프로젝트를 만드는 것입니다.

HTML 프레임워크로 구현

Trae에게 HTML 기반의 스네이크 웹 게임을 생성하는 것은 매우 간단합니다. 게임 생성이 완료되면 앞서 소개한 Zeabur 로컬 배포 방식에 따라 모든 파일이 포함된 폴더를 업로드하기만 하면 됩니다.

완료되면 해당 서비스의 세부 정보 화면으로 이동합니다.

좌측의 "Network" 옵션을 클릭하고 페이지에서 "Public Address" 영역을 찾습니다. "Generate Domain"을 클릭하면 외부 접속 주소를 생성할 수 있으며, 원하는 이름을 입력할 수 있습니다.

생성이 완료되면 브라우저에서 이 주소를 열어 자신만의 스네이크 게임을 실행할 수 있습니다. 다른 HTML 유형의 웹 애플리케이션도 동일한 방식으로 배포할 수 있습니다.

React 프레임워크로 구현

앞서 HTML 기반 웹 애플리케이션을 배포하는 방법을 배웠습니다. 이제 현재 더 널리 사용되는 프론트엔드 프레임워크인 React 애플리케이션을 배포해 보겠습니다. 순수 HTML에 비해 React는 더 성숙하고 현대적인 프론트엔드 개발 프레임워크로 간주됩니다. 컴포넌트 기반 방식으로 페이지 구조를 구성하여 복잡한 페이지 개발을 크게 가속화할 수 있으며, 기업급 프로젝트에서 매우 주류적인 선택입니다.

React 아키텍처로 리팩토링

Trae에서 Agent에게 "이 코드를 React 아키텍처로 리팩토링해 주세요"라고 말하면, 원래 HTML 기반 구조를 React 프로젝트로 비교적 쉽게 리팩토링할 수 있습니다.

하지만 단순한 HTML 파일에 비해 React 애플리케이션은 더 복잡한 빌드 도구와 프로젝트 구조에 의존하므로 배포 과정도 조금 더 복잡합니다. 전형적인 문제는 포트 설정에 있습니다: 기본적으로 React 애플리케이션은 일반적으로 3000번 포트를 사용합니다(설정 파일이나 시작 로그에서도 확인할 수 있습니다).

하지만 Zeabur에서는 이렇게 배포하면 실패합니다. Zeabur은 8080번 포트를 사용하는 애플리케이션만 지원하기 때문입니다. 즉, React 애플리케이션이 Zeabur에서 정상적으로 실행되려면 기본 수신 포트를 3000에서 8080으로 변경해야 합니다.

이 설정을 올바르게 진행하려면 먼저 두 가지 개념을 이해해야 합니다: "포트(Port)"란 무엇이며, "수신 포트(Listening Port)"는 무슨 의미인가요?

포트란 무엇인가요?

컴퓨터 네트워크에서 포트는 하나의 "논리적 통신 끝점"으로, 같은 기기에서 실행되는 서로 다른 네트워크 서비스를 구분하는 데 사용됩니다. 간단히 비유하자면, IP 주소가 하나의 "건물 번호"(예: 162.128.1.1)라면, 포트 번호는 이 건물의 서로 다른 방의 "방 번호"와 같습니다. 각 방은 하나의 서비스(예: 웹 서버, 이메일 서비스, 또는 React 애플리케이션)에 해당합니다.
포트 번호는 16비트 정수로 표현되며, 범위는 0부터 65535까지입니다.

이 세부 사항을 기억하고 싶지 않다면, 포트는 "네트워크 접속 주소"를 구성하는 필수 요소라고 간단히 이해하면 됩니다.

웹사이트나 IP 주소에 접속할 때 일반적으로 포트 번호를 수동으로 추가하지 않는데, 이는 웹의 기본 포트가 80 또는 443(HTTPS)이기 때문입니다. 대부분의 브라우저가 이 표준 포트를 자동으로 사용합니다. 반면 특정 포트, 예를 들어 React의 기본 3000번이나 Zeabur이 요구하는 8080번의 경우, 주소 뒤에 :3000 또는 :8080을 추가해야 해당 콘텐츠에 접속할 수 있습니다.

"수신 포트 번호"란 무엇인가요?

"수신 포트 번호"는 어떤 프로그램이 기기에서 능동적으로 "열고 모니터링"하는 포트를 의미합니다. 애플리케이션이 수신 포트를 설정한다는 것은 운영 체제에 "이 포트에서 계속 네트워크 요청을 기다리겠다. 요청이 들어오면 나에게 전달해 달라"고 알리는 것입니다.

조금 더 비유적으로 이해해 보겠습니다. 컴퓨터가 하나의 오피스 빌딩이라고 가정하면, IP 주소는 이 건물의 주소입니다. 건물에는 많은 회사나 부서가 있으며 각각 다른 방을 차지하고, 방 번호가 바로 포트 번호입니다.

기본 React 개발 서버가 시작되면, 특정 방의 문을 "열고" 문 앞에 "안내원"을 배치합니다. 이 방 번호가 바로 수신 포트인 3000번입니다.

동시에 React 프로그램은 건물의 "관리사무소"(운영 체제)에 "저는 3000번 방에 있습니다. 3000번으로 오는 모든 우편물(네트워크 요청)을 저에게 전달해 주세요"라고 알립니다.

따라서 React 웹사이트에 접속할 때, 요청은 먼저 건물에 도착하고, 관리사무소는 요청이 3000번 방으로 보내져야 한다는 것을 보고 즉시 요청을 React의 "안내원"에게 전달하며, 안내원이 이를 처리하고 결과를 반환합니다. 이것이 React 애플리케이션에 접속하는 과정입니다.

로컬에서 npm start(React 개발 서버를 로컬에서 시작하는 기본 명령어이며, Vibe Coding의 Agent 사이드바에서도 실행 가능)를 실행하면, React 개발 서버가 자동으로 수신 포트를 3000번으로 설정합니다. 반면 Zeabur의 플랫폼 설계상 8080번 포트를 수신하는 애플리케이션만 "인식"합니다. React 애플리케이션이 여전히 기본 3000번 포트를 사용 중이라면, Zeabur은 요청을 애플리케이션에 올바르게 전달할 수 없어 배포가 실패하게 됩니다.

기본 수신 포트 변경

React의 기본 수신 포트(3000)를 Zeabur이 요구하는 8080으로 변경하는 방법에는 여러 가지가 있습니다. 가장 간단한 방법은 Trae에서 Agent에게 "이 React 프로젝트의 기본 포트를 8080으로 변경해 주세요"라고 지시하는 것입니다. 그러면 Trae가 프로젝트의 해당 설정 파일을 수정해 줍니다. 수정이 완료되면 다시 빌드한 후 앞의 방식대로 Zeabur에 업로드하면 됩니다.

네트워크 설정에서 접속 URL을 지정하는 방식은 HTML 프로젝트를 배포할 때와 거의 동일하며, 이렇게 하면 React 버전의 서비스를 시작할 수 있습니다.

포트 번호를 수정해야 하는 다른 프로그램에 대해서도 동일한 접근 방식을 사용할 수 있습니다: 먼저 기본 포트를 변경한 후 Zeabur에 업로드하여 배포합니다. 이것으로 일반적인 웹 애플리케이션을 서버에 배포하는 기본 기술을 습득했습니다.

Trae가 다양한 유형의 애플리케이션을 구성하도록 하여 Zeabur의 기본 서버에 배포해 볼 수 있습니다. 후속 강의에서는 애플리케이션을 직접 구매한 클라우드 서버에 배포하는 방법도 배우겠습니다.

⚠️ 프로젝트 중지 및 삭제 방법(Zeabur)

서버 관련 리소스를 활성화하면 비용이 발생하므로, 사용하지 않는 서비스는 즉시 종료하는 습관을 들여 매월 무료 할당량을 소진하지 않도록 주의해야 합니다.

프로젝트의 관리 입구를 찾으려면 먼저 프로젝트의 "Settings" 옵션을 클릭합니다.

설정 페이지에 들어간 후 페이지를 가장 아래로 스크롤하면 다음과 같은 인터페이스가 보입니다.

"Suspend All Services"를 클릭하여 모든 서비스를 일시 중지하고 비용을 절감할 수 있습니다. 서비스에 문제가 발생하면 "Restart All Services"를 클릭하여 모든 서비스를 재시작할 수 있습니다. 이 프로젝트가 더 이상 필요 없다고 확신한다면 "Delete Project"를 클릭하여 전체 프로젝트를 완전히 삭제할 수 있습니다.

요약

이 튜토리얼에서는 네 가지 자주 사용하는 웹 애플리케이션 배포 플랫폼을 소개했습니다.

텐센트 클라우드 CloudBase: 중국 내 사용자에게 적합, 접속 속도가 빠르고 위챗 생태계와 잘 통합됨
Vercel: 최신 프론트엔드 프레임워크 프로젝트에 적합, GitHub와 긴밀하게 통합되고 글로벌 CDN 가속 제공
Netlify: 기능이 포괄적이며 폼 처리와 인증을 지원, 고급 기능이 필요한 정적 웹사이트에 적합
Zeabur: 복잡한 프로젝트에 적합, 서비스 템플릿이 풍부하고 다양한 배포 방식 지원

어떤 플랫폼을 선택할지는 구체적인 요구사항에 따라 다릅니다.

주로 중국 내 사용자를 대상으로 하는 경우 CloudBase 권장
React/Next.js 등 프레임워크를 사용하는 경우 Vercel 또는 Netlify 권장
폼 처리, 인증 등 고급 기능이 필요한 경우 Netlify 권장
Dify, n8n 등의 서비스를 배포해야 하는 경우 Zeabur 권장

어떤 플랫폼을 선택하든 배포의 핵심 프로세스는 유사합니다: 코드 준비 → 플랫폼 선택 → 빌드 설정 구성 → 배포 및 공개. 이 기술을 습득하면 직접 개발한 애플리케이션을 전 세계에 공유할 수 있습니다!

웹 애플리케이션 배포 방법 ​

"배포"란 무엇인가요? ​

배포 플랫폼 비교 ​

1. 텐센트 클라우드 CloudBase ​

CloudBase로 웹 애플리케이션 배포하기 ​

1단계: 가입 및 로그인 ​

2단계: 환경 생성 ​

3단계: 정적 웹사이트 호스팅 활성화 ​

4단계: 코드 배포 ​

5단계: 커스텀 도메인 설정(선택사항) ​

2. Vercel ​

Vercel로 웹 애플리케이션 배포하기 ​

1단계: 계정 가입 ​

2단계: 프로젝트 가져오기 ​

3단계: 빌드 설정 구성 ​

4단계: 배포 ​

5단계: 커스텀 도메인(선택사항) ​

3. Netlify ​

Netlify로 웹 애플리케이션 배포하기 ​

1단계: 계정 가입 ​

2단계: 프로젝트 가져오기 ​

3단계: 빌드 설정 구성 ​

4단계: 배포 ​

5단계: 커스텀 도메인 설정(선택사항) ​

특별 기능 ​

1. 폼 처리 ​

2. Netlify Functions(엣지 함수) ​

3. 로컬 개발 지원 ​

4. Zeabur ​

Zeabur으로 Dify 배포하기 ​

Zeabur과 Trae를 사용하여 스네이크 게임 배포하기 ​

HTML 프레임워크로 구현 ​

React 프레임워크로 구현 ​

React 아키텍처로 리팩토링 ​

포트란 무엇인가요? ​

"수신 포트 번호"란 무엇인가요? ​

기본 수신 포트 변경 ​

⚠️ 프로젝트 중지 및 삭제 방법(Zeabur) ​

요약 ​

웹 애플리케이션 배포 방법

"배포"란 무엇인가요?

배포 플랫폼 비교

1. 텐센트 클라우드 CloudBase

CloudBase로 웹 애플리케이션 배포하기

1단계: 가입 및 로그인

2단계: 환경 생성

3단계: 정적 웹사이트 호스팅 활성화

4단계: 코드 배포

5단계: 커스텀 도메인 설정(선택사항)

2. Vercel

Vercel로 웹 애플리케이션 배포하기

1단계: 계정 가입

2단계: 프로젝트 가져오기

3단계: 빌드 설정 구성

4단계: 배포

5단계: 커스텀 도메인(선택사항)

3. Netlify

Netlify로 웹 애플리케이션 배포하기

1단계: 계정 가입

2단계: 프로젝트 가져오기

3단계: 빌드 설정 구성

4단계: 배포

5단계: 커스텀 도메인 설정(선택사항)

특별 기능

1. 폼 처리

2. Netlify Functions(엣지 함수)

3. 로컬 개발 지원

4. Zeabur

Zeabur으로 Dify 배포하기

Zeabur과 Trae를 사용하여 스네이크 게임 배포하기

HTML 프레임워크로 구현

React 프레임워크로 구현

React 아키텍처로 리팩토링

포트란 무엇인가요?

"수신 포트 번호"란 무엇인가요?

기본 수신 포트 변경

⚠️ 프로젝트 중지 및 삭제 방법(Zeabur)

요약