Zenn
🔥

Firebase Hosting の雛形

2024/08/29に公開
Google Cloud
Firebase Hosting
tech

これは？

Firebase Hostingにデプロイする際の雛形

手順

1. 環境変数の設定

プロジェクトIDを環境変数として設定

export PROJECT_ID="your-project-id"

2. Firebase CLIのインストール

npm install -g firebase-tools

3. Googleアカウントでの認証

firebase login

4. プロジェクトの作成

mkdir -p $PROJECT_ID/public
cd $PROJECT_ID

5. サンプルHTMLファイルの作成

cat << EOF > public/index.html
<!DOCTYPE html>
<html>
<head>
  <title>My Firebase Hosting Site</title>
</head>
<body>
  <h1>Welcome to my Firebase Hosted Site!</h1>
  <p>This is a simple example of Firebase Hosting.</p>
</body>
</html>
EOF

6. Firebase プロジェクトの初期化

firebase init hosting --project $PROJECT_ID
  • プロンプトに従って設定を行う。
    • パブリックディレクトリとして public を指定
    • 単一ページアプリケーションの設定は 'No' を選択

7. デプロイ

firebase deploy --only hosting --project $PROJECT_ID

8. デプロイしたサイトのURL確認

firebase hosting:channel:list --project $PROJECT_ID

Discussion