웹 페이지 배포하기

웹 페이지 배포하기

ConnectBase 는 정적 사이트를 호스팅할 수 있는 웹 스토리지 기능을 제공합니다. 콘솔에서 웹 스토리지를 만들고, npx connectbase deploy 명령으로 빌드 결과물을 업로드하면 https://{storageId}.web.connectbase.world 로 즉시 게시됩니다. 1.8.0 부터 manifest 기반 증분 배포가 적용되어 변경된 파일만 업로드합니다.

이런 사이트를 배포할 수 있습니다

• React / Vue / Svelte 등 SPA (Single Page Application)
• Next.js / Nuxt 등의 정적 내보내기 (Static Export)
• 일반 HTML / CSS / JS 웹사이트
• 문서 사이트 (Docusaurus, VitePress 등)

1. 사전 준비

• ConnectBase 계정 + 앱 생성 (콘솔 퀵스타트)
• Node.js 18 이상
• 콘솔 → 스토리지 → 웹 스토리지 에서 새 웹 스토리지 생성 — storageId 확인
• 배포할 웹 프로젝트

2. 프로젝트 초기화

프로젝트 폴더에서 init 을 실행하면 Public Key 와 Storage ID 를 입력받아 .connectbaserc 가 생성됩니다.

cd my-web-project
npx connectbase init

대화형 프롬프트:

? Public Key (cb_pk_...): cb_pk_xxxxxxxxxxxx
? Web Storage ID: stg_xxxxxxxxxxxx
? Deploy directory (default: .): dist
✅ .connectbaserc 생성 완료

3. 빌드 후 배포하기

CLI는 직접 빌드를 실행하지 않습니다. 먼저 프로젝트의 빌드 스크립트로 결과물을 만든 뒤 deploy 에 디렉터리를 전달합니다.

npm run build
npx connectbase deploy dist

CLI 가 자동으로:

1. dist/ 의 파일 목록을 manifest 와 비교 (1.8.0 증분 배포)
2. 변경된 파일만 업로드
3. URL 을 출력

🚀 배포 완료!

URL: https://stg_xxxxxxxxxxxx.web.connectbase.world
업로드: 4 / 18 files (재배포 67% 절약)
소요: 0.9초

💡 .connectbaserc 에 deployDir 가 저장돼 있으면 npx connectbase deploy 처럼 인자를 생략할 수 있습니다.

4. 배포 URL 구조

배포가 끝나면 자동으로 URL이 생성됩니다:

5. 커스텀 도메인 연결

자신만의 도메인을 연결할 수 있습니다:

1. 콘솔 → 스토리지 → 해당 웹 스토리지 → 도메인 탭
2. 커스텀 도메인 추가 클릭, 도메인 입력 (예: www.mysite.com)
3. 표시되는 DNS 레코드 (CNAME) 를 도메인 관리자에서 추가
4. DNS 전파 완료 후 자동으로 Let's Encrypt SSL 인증서가 발급됩니다

6. dev 배포 (스테이징)

프로덕션 URL과 분리된 dev URL 로 미리보기 배포가 가능합니다.

npm run build:dev
npx connectbase deploy --dev dist

dev 배포는 별도 URL prefix를 사용하므로 프로덕션 트래픽에 영향을 주지 않습니다.

7. CI/CD 자동 배포

GitHub Actions 예시:

# .github/workflows/deploy.yml
name: Deploy to ConnectBase

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - run: npm ci
      - run: npm run build

      - name: Deploy
        run: npx connectbase deploy dist -k $PUBLIC_KEY -s $STORAGE_ID
        env:
          PUBLIC_KEY: ${{ secrets.CONNECTBASE_PUBLIC_KEY }}
          STORAGE_ID: ${{ secrets.CONNECTBASE_STORAGE_ID }}

📌 -k / -s 옵션으로 .connectbaserc 없이 키 / 스토리지 ID 를 직접 전달할 수 있어 CI 환경에서 편합니다.

8. 배포 관리

다음 단계

• React에서 ConnectBase 시작하기 — 배포한 앱에 데이터 연동
• 파일 업로드 시스템 만들기 — 이미지/파일 업로드 추가