firebase-hosting-basics

어떤 스킬인가요?

>- 관련 작업을 지원합니다.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

# Hosting Configuration (`firebase.json`)

The `hosting` section of `firebase.json` configures how your site is deployed
and served.

## Key Attributes

### `public` (Required)

Specifies the directory to deploy to Firebase Hosting.

```json
"hosting": {
  "public": "public"
}
```

### `ignore` (Optional)

Files to ignore on deploy. Uses glob patterns (like `.gitignore`). **Default
ignores:** `firebase.json`, `**/.*`, `**/node_modules/**`

### `redirects` (Optional)

URL redirects to prevent broken links or shorten URLs.

```json
"redirects": [
  {
    "source": "/foo",
    "destination": "/bar",
    "type": 301
  }
]
```

### `rewrites` (Optional)

Serve the same content for multiple URLs, useful for SPAs or Dynamic Content.

```json
"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  },
  {
    "source": "/api/**",
    "function": "apiFunction"
  },
  {
    "source": "/container/**",
    "run": {
      "serviceId": "helloworld",
      "region": "us-central1"
    }
  }
]
```

### `headers` (Optional)

Custom response headers.

```json
"headers": [
  {
    "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers": [
      {
        "key": "Access-Control-Allow-Origin",
        "value": "*"
      }
    ]
  }
]
```

### `cleanUrls` (Optional)

If `true`, drops `.html` extension from URLs.

```json
"cleanUrls": true
```

### `trailingSlash` (Optional)

Controls trailing slashes in static content URLs.

- `true`: Adds trailing slash.
- `false`: Removes trailing slash.

## Full Example

```json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "cleanUrls": true,
    "trailingSlash": false
  }
}
```

# Deploying to Firebase Hosting

## Standard Deployment

To deploy your Hosting content and configuration to your live site:

```bash
npx -y firebase-tools@latest deploy --only hosting
```

This deploys to your default sites (`PROJECT_ID.web.app` and
`PROJECT_ID.firebaseapp.com`).

## Preview Channels

Preview channels allow you to test changes on a temporary URL before going live.

### Deploy to a Preview Channel

```bash
npx -y firebase-tools@latest hosting:channel:deploy CHANNEL_ID
```

Replace `CHANNEL_ID` with a name (e.g., `feature-beta`). This returns a preview
URL like `PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app`.

### Expiration

Channels expire after 7 days by default. To set a different expiration:

```bash
npx -y firebase-tools@latest hosting:channel:deploy CHANNEL_ID --expires 1d
```

## Cloning to Live

You can promote a version from a preview channel to your live channel without
rebuilding.

```bash
npx -y firebase-tools@latest hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live
```

**Example:** Clone the `feature-beta` channel on your default site to live:

```bash
npx -y firebase-tools@latest hosting:clone my-project:feature-beta my-project:live
```

---
name: firebase-hosting-basics
description: >-
  Deploys and configures classic Firebase Hosting for static websites, single-page apps (SPAs), and microservices. Use when deploying static sites/SPAs, setting up custom domains, configuring firebase.json hosting settings (redirects, rewrites, headers, multi-site), or managing preview channels. Don't use for Firebase App Hosting (Next.js/SSR), Auth, Firestore queries/rules, Data Connect, or Crashlytics.
metadata:
  category: Serverless
---

# hosting-basics

This skill provides instructions and references for working with Firebase
Hosting, a fast and secure hosting service for your web app, static and dynamic
content, and microservices.

## Overview

Firebase Hosting provides production-grade web content hosting for developers.
With a single command, you can deploy web apps and serve both static and dynamic
content to a global CDN (content delivery network).

**Key Features:**

- **Fast Content Delivery:** Files are cached on SSDs at CDN edges around the
  world.
- **Secure by Default:** Zero-configuration SSL is built-in.
- **Preview Channels:** View and test changes on temporary preview URLs before
  deploying live.
- **GitHub Integration:** Automate previews and deploys with GitHub Actions.
- **Dynamic Content:** Serve dynamic content and microservices using Cloud
  Functions or Cloud Run.

## Hosting vs App Hosting

**Choose Firebase Hosting if:**

- You are deploying a static site (HTML/CSS/JS).
- You are deploying a simple SPA (React, Vue, etc. without SSR).
- You want full control over the build and deploy process via CLI.

**Choose Firebase App Hosting if:**

- You are using a supported full-stack framework like Next.js or Angular.
- You need Server-Side Rendering (SSR) or ISR.
- You want an automated "git push to deploy" workflow with zero configuration.

## Instructions

### 1. Configuration (`firebase.json`)

For details on configuring Hosting behavior, including public directories,
redirects, rewrites, and headers, see
[configuration.md](references/configuration.md).

### 2. Deploying

For instructions on deploying your site, using preview channels, and managing
releases, see [deploying.md](references/deploying.md).

### 3. Emulation

To test your app locally:

```bash
npx -y firebase-tools@latest emulators:start --only hosting
```

This serves your app at `http://localhost:5000` by default.