deve.K

エンジニアが未来を切り開く。

English

VS Codeでfirebaseの静的WebサイトをHostingし公開


スポンサーリンク

firebase画像

今回はGoogleが提供しているクラウドサービスmBassであるfirebaseを使用して、既存のHTMLファイルをWeb上に公開するところまで解説します。

Reactのbuildではありません、それはまた記事にしたいと思っています。通常のWebサイトを静的なサイトとしてdeploy(公開)します。

事前にnpmとnode.jsのインストールを済ませといて下さい!!、OSに関して私はWindowsを使用していますがMacでも大丈夫です。

Macだとfirebase-toolsのインストール時にエラーになったりとかもあるのでそこは調べながらお願いします。

独自ドメインとサーバーの用意はいりませんfirebaseはバックエンドサービスとなります。

そして無料枠を使用していきます。
firebaseは従量課金制となっております、ですが安心してくださいストレージは1GB・転送量は10GBまであります。

ですがそれを超えた場合の保証は一切負い兼ねます詳しく知りたい方はこちらへ

https://firebase.google.com/pricing?hl=ja:title:title:w600:h250

この記事ではText EditorのVisual Studio Codeのターミナル上で操作していきますのでこちも用意をお願いします。

既存のHTMLを作成

HTML画像
HTML内は正直なんでも良いです、私は分かりやすくボタンタグでクリックしたらアラート表示にしときます。

firebaseプロジェクトの作成

まずはご自身でGoogleのアカウントを1つ用意して頂きます、なんでも大丈夫です捨て垢でも今回で新しく追加で作り直しても構いませんURL貼っときます。
Google アカウントの作成

準備が出来ましたら、次はfirebaseのプロジェクトを作成するのでfirebaseにアクセスしましょう!!

お使いのブラウザでfirebaseと検索しアクセスしても問題ありませんし、

もしくはこちらから→Firebaseから飛んでいただきます。

firebaseのページですfirebase画像

私はGoogle Chromeを使用します、今回使用するGoogleアカウントでログイン状態になっているのを確認しましたら右上にある『コンソールへ移動』をクリックします。
firebase画像
晒していますが、大丈夫ですこの記事用に用意したので後に削除します。

firebase画像
『プロジェクトを作成』をクリック。
firebase画像
するとこのようなプロジェクト作成ページに移動されてると思います

ここでプロジェクト名を決めます。

気をつけて欲しい点はここで決めたプロジェクト名はあなたのドメイン名となりますのでお気をつけて下さい。

規約にチェックを入れ『続行』

firebase画像

これはアナリティクスを有効にするかです、firebaseはGoogleのプラットフォームなので最初からアナリティクス機能が搭載されています。

アナリティクスは有効にして『続行』

firebase画像
こちらはアナリティクスの地域ですもちろん日本を選び、規約に同意にチェックを入れて『プロジェクトを作成』

作成中の読み込みには多少時間かかるので待ちましょう。

firebase画像

これでfirebaseのプロジェクトは完了です『続行』をクリックし終わりにしたいのですが、もう少しだけひと手間あります。

もう一息なので頑張りましょう!

firebase画像

続行をクリックしてページが切り替わると
『アプリにfirebaseを追加』があるはずです、これはあなたのプロジェクトで使用するアプリを選びます

あなたのプロジェクトはiosアプリ?Android?Web?どれですか?

今回はWeb版ですので右側のタグみたいな<のマークをクリックして下さい。

firebase画像

アプリ名のニックネームをここで決めて下さい。
お好きな任意で構いません、プロジェクト作成の時に決めた名前と同じにしとくと分かりやすいかもです。『アプリを登録』をクリック

firebase画像

firebase SDKの追加コードがあるかと思います画像ではnpmになっていますがnpmではなくScriptタグを使用するでコピーして、メモ帳やText Editorどこでも良いので保存しておいて下さい後々使います。

そしてどんどん次へと進んでいきましょう。
『コンソールに進む』で完了です。

一度ここでブラウザを更新するとあたなが作成したプロジェクト名がある事を確認してください、クリックしても今は何も入ってない状態です。

firebase画像
次にサイドバーにある歯車⚙アイコンの設定をクリックして『プロジェクト設定』を開きます

『プロジェクト名』
『プロジェクトID』

などの情報が記述されたページに移動されてるはずです。

その中にある、『リソース・ロケーション』こちらの設定をしとかなければいけません。

初期設定では未選択となっているかと思います。
asia-northeast1が東京でasia-northeast2が大阪となります。

一度決めたら変更はできませんので、間違って選ばないように焦らずに変更し『完了』して下さい。

歯車⚙の設定に使用量と請求額を確認できます
ご自身のプロジェクトがしっかりと無料枠かどうか確認しときましょう。

それではVS Codeに戻りましょう
コード内でターミナルを開いて下さい
まずは、firebaseをCLI操作するにはまずfirebase-toolsをインストールしなければいけません

npm install -g firebase-tools

これでfirebaseのコマンドが使用可能となります。

グローバルでのインストールしたくない場合は

『-g』をいれずにインストールして下さい。

次にVSCode上でfirebaseにログインする必要があります、紐付けです。

firebase login

ターミナル画像

firebaseがCLIの情報を収集できるようにしますか?と質問された場合はYESでyで進むと自動でブラウザが開きfirebaseCLIへのログイン認識画面へと移動されアカウントへのアクセスリクエストを許可してください。

VS Codeに戻るとターミナル上にSuccess!!とGoogleアドレスなどが表示されてれば大丈夫です。

次にfirebase initコマンドでプロジェクトの初期化をします。ちなみにinitは選択ミスをしないように、再initできなくはないですが少々めんどくさい事になります。

firebase init hosting

firebase initコマンドを叩くと選択肢が表示され会話形式でオプションを選びます。
ターミナル画像

Are you ready to proceed? yes
Please select an option:

Use an existing project

Create a new project

Add Firebase to an existing Google 
Cloud Platform project

Don't set up a default project

いきなり選択肢
今回は既存のHTMLファイルがあるので1番上の

Use an existing project

を選択して下さい次に、ご自身のプロジェクト名の確認がでますのでそのままenterで進みましょう。

もしオプション項目が違う場合でも基本的にhostingを選んでおけば問題ないです。

ここが重要となります!

What do you want to use as your 
public directory? (public)

これは一般公開用のディレクトリ名でつまりあなたのdeploy先である、ドキュメントルートとなります今回ではデフォルトのPublicでいきます。

Configure as a single-page app
(rewrite all urls to /index.html)? 

あなたのページはSPA(シングルページアプリケーション)ですか?と聞いているので答えはNo

通常のDOM描画なのでNoで大丈夫です。
ここからは、GitHubの連携などになりますご自身でお決め下さい。

テスト用でしたら基本的にNoでも大丈夫です、そのままenterすればNoになります。

初期化完了時のターミナルです。
ターミナル画像

完了するとあなたのディレクトリにPublicフォルダが自動で生成されてるかと思います

Public内には404.htmlとindex.htmlのみ生成されますので確認しといて下さいね。

Publicフォルダにある、生成されたindex.htmlと既存の作成したHTMLの中身を差し替えて下さい。

HTML画像
HTMLのbody内の下部に先程コピーしておいたSDKのScriptコードをペーストして保存で完了。

deploy(公開)する前にFirebase CLIでローカルテストで確認しとくのもいいかもです。

このコマンドを叩けばターミナル上に表示されたlocalhostURLをブラウザで開けばご自身のサイトをチェックする事が可能ですローカルサーバーを停止の際はCtr+Cを押して下さい。

firebase emulators:start 

or

firebase server

ではサイトをdeployして公開しましょう!

サイトをdeployする

ターミナルでpublicディレクトリに移動します
VScode画像

firebase deploy

もしくは

firebase deploy --only hosting

onlyオプションを付ける事によりサービスの対象を限定しますhostingのサービスだけをdeployします。

『Deploy complete』となっていれば公開完了です!!。

Hosting:URLが記載されているのでそのまま飛んで確認しましょう。

Welcomeページのままでしたら、そのままブラウザをcashし更新して下さい。

deploy DEMO
DEMO画像

この時点であなたのサイトはWeb上に公開されています!!お疲れ様でした!。

ご自身のドメインを見て分かる通り無料でSSL証明書付きです。

firebaseコンソールへ行ってプロジェクトを確認すると『デプロイしました』と表示されているのをクリックするとHostingのダッシュボードへ移動します。

そこではあなたのドメイン名や独自ドメインの追加
deployしたリリース履歴があります、

deployした日付けや時間・リリースしたファイルなど細かく確認できます。

firebase Hostingにはロールバック機能があり
リリースしたバージョンを過去のバージョンに戻せる事ができる機能となります。

リリース履歴の項目の右端のメニューをクリックすると『ロールバック』があるのでクリックすると過去に遡れます、ですがリリースは一度しかしてないので今は表示されてないはずです。

リリース履歴の管理

以前のリリース履歴を1つ1つ削除するのはめんどくさいですよね

そういう時はリリース履歴にある右上にあるメニューで『ストレージのリリースに関する設定』をクリック

ここではHostingのストレージ量を制御できます、つまり以前のリリースを残す数です。
個人開発であれば基本的に1の設定で良いかと思います。

公開したのを非公開

やり方は簡単でコマンド叩くだけです

サイトの非公開

firebase hosting:disable

エラーの場合はオプションで-yを付けて下さい。

firebase hosting:disable -y

これはdeployしたデータが削除されます、なのでまた公開したい場合はdeployを実行します。
hostingの設定など色々となくなるわけではありませんデータのみとなります。

VSCode上でfirebaseの操作が終わった後はターミナルでfirebaseのログアウトを忘れないように!!

firebase logout

ドメイン名は変えられない?

独自ドメイン以外で変えられるとしたらLinks設定をします、firebase管理トップのサイドメニューにある
Dynamic Linksから『始める』をクリックし作成ができます。

紐付けされ擬似的と言えば良いのか短縮されたURLであたかも独自ドメインを使っているかのような感じです、ですがこれは独自ドメインではないという事だけは覚えておいて下さい。

もちろん無料で使用可能です、ぜひやってみて下さい。

firebaseを使いこなしていこう!

firebaseにはこれ以外にも沢山の便利な機能がありますこの記事ではHostingでのdeployのみでしたが色々と機能を活用して見て下さい!。
それではまた〜

プライバシーポリシー