初めに
今回はFirebase Hostingを使ってWebサイトをデプロイしたいと思います。1. Firebase Hostingの設定
FirebaseコンソールからHostingを選択し、「始める」ボタンをクリック。
1. Firebase CLIのインストール
npm install -g firebase-tools
Firebaseコンソール画面で「次へ」ボタンをクリックしてください。
2. Firebase Hostingの設定
1. 任意のディレクトリを用意します。
mkdire 任意のディレクトリ
cd 任意のディレクトリ
2. Googleへのログイン
firebase login
上記コマンド入力後、以下の内容が表示されるのでYを入力してEnterをクリック。
? Allow Firebase to collect CLI and Emulator Suite usage and error reporting inf
ormation?
Enterをクリック後Googleのログイン画面に遷移するので、アカウントを選択する。
ログインに成功すると以下の内容が表示されます。
Success! Logged in as xxxxxx@gmail.com
既にログイン済みのユーザーは以下の内容が表示されます。
Already logged in as xxxxxx@gmail.com
3. プロジェクトの初期化
firebase init
コマンド入力後以下の内容が表示されます。十字キーとスペースキーを使って、Hostingを選択してください。
? Which Firebase features do you want to set up for this directory? Press Space
to select features, then Enter to confirm your choices.(Press <space> to select
, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
選択する項目だけ表示させています。
◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub
Action deploys
対象とするプロジェクトは[Use an existing project] を選択してください。
その後以下の手順で入力していってください。
? What do you want to use as your public directory? Enter
? Configure as a single-page app (rewrite all urls to /index.html)? N
? Set up automatic builds and deploys with GitHub? N
全ての項目入力後以下の内容が表示されていたら初期化完了です。
✔ Firebase initialization complete!
Firebaseコンソール画面で「次へ」ボタンをクリックしてください。
firebase init入力後エラーが表示される場合は
一度firebase logoutを実行後、再度firebase loginを実行してください。
firebase loginで既にログインされていた方はエラーが発生しやすいです。
3. デプロイする
初期化完了後、任意のディレクトリにpublicフォルダが生成されています。publicフォルダの中にはindex.htmlが自動生成されているので、
公開したいWebサイト(index.html)に置き換えを行ってください。
その後、以下のコマンドを実行
cd public
firebase deploy
以下のメッセージが表示されたらデプロイ完了です。
Firebaseコンソール画面で「コンソールへ進む」ボタンをクリックしてください
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/.....
Hosting URL: https://xxxxxx.web.app
Hosting URLがWebサイト公開URLになります。
index.html置き換え後デプロイしても表示画面が変更されない時は、一度キャッシュを削除してみてください。
非常に簡単にWebサイトを公開することができるので、ぜひ利用してみてください