今回は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内は正直なんでも良いです、私は分かりやすくボタンタグでクリックしたらアラート表示にしときます。
firebaseプロジェクトの作成
まずはご自身でGoogleのアカウントを１つ用意して頂きます、なんでも大丈夫です捨て垢でも今回で新しく追加で作り直しても構いませんURL貼っときます。
→Google アカウントの作成
準備が出来ましたら、次はfirebaseのプロジェクトを作成するのでfirebaseにアクセスしましょう!!
お使いのブラウザでfirebaseと検索しアクセスしても問題ありませんし、
もしくはこちらから→Firebaseから飛んでいただきます。
firebaseのページです
私はGoogle Chromeを使用します、今回使用するGoogleアカウントでログイン状態になっているのを確認しましたら右上にある『コンソールへ移動』をクリックします。
晒していますが、大丈夫ですこの記事用に用意したので後に削除します。
『プロジェクトを作成』をクリック。
するとこのようなプロジェクト作成ページに移動されてると思います
ここでプロジェクト名を決めます。
気をつけて欲しい点はここで決めたプロジェクト名はあなたのドメイン名となりますのでお気をつけて下さい。
規約にチェックを入れ『続行』
これはアナリティクスを有効にするかです、firebaseはGoogleのプラットフォームなので最初からアナリティクス機能が搭載されています。
アナリティクスは有効にして『続行』
こちらはアナリティクスの地域ですもちろん日本を選び、規約に同意にチェックを入れて『プロジェクトを作成』
作成中の読み込みには多少時間かかるので待ちましょう。
これでfirebaseのプロジェクトは完了です『続行』をクリックし終わりにしたいのですが、もう少しだけひと手間あります。
もう一息なので頑張りましょう！
続行をクリックしてページが切り替わると
『アプリにfirebaseを追加』があるはずです、これはあなたのプロジェクトで使用するアプリを選びます
あなたのプロジェクトはiosアプリ？Android？Web？どれですか？
今回はWeb版ですので右側のタグみたいな<のマークをクリックして下さい。
アプリ名のニックネームをここで決めて下さい。
お好きな任意で構いません、プロジェクト作成の時に決めた名前と同じにしとくと分かりやすいかもです。『アプリを登録』をクリック
firebase SDKの追加コードがあるかと思います画像ではnpmになっていますがnpmではなくScriptタグを使用するでコピーして、メモ帳やText Editorどこでも良いので保存しておいて下さい後々使います。
そしてどんどん次へと進んでいきましょう。
『コンソールに進む』で完了です。
一度ここでブラウザを更新するとあたなが作成したプロジェクト名がある事を確認してください、クリックしても今は何も入ってない状態です。
次にサイドバーにある歯車⚙アイコンの設定をクリックして『プロジェクト設定』を開きます
『プロジェクト名』
『プロジェクト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のbody内の下部に先程コピーしておいたSDKのScriptコードをペーストして保存で完了。
deploy(公開)する前にFirebase CLIでローカルテストで確認しとくのもいいかもです。
このコマンドを叩けばターミナル上に表示されたlocalhostURLをブラウザで開けばご自身のサイトをチェックする事が可能ですローカルサーバーを停止の際はCtr+Cを押して下さい。
firebase emulators:start or firebase server
ではサイトをdeployして公開しましょう！
サイトをdeployする
ターミナルでpublicディレクトリに移動します
firebase deploy
もしくは
firebase deploy --only hosting
onlyオプションを付ける事によりサービスの対象を限定しますhostingのサービスだけをdeployします。
『Deploy complete』となっていれば公開完了です!!。
Hosting:URLが記載されているのでそのまま飛んで確認しましょう。
Welcomeページのままでしたら、そのままブラウザをcashし更新して下さい。
deploy DEMO
この時点であなたのサイトはWeb上に公開されています!!お疲れ様でした！。
ご自身のドメインを見て分かる通り無料でSSL証明書付きです。
firebaseコンソールへ行ってプロジェクトを確認すると『デプロイしました』と表示されているのをクリックするとHostingのダッシュボードへ移動します。
そこではあなたのドメイン名や独自ドメインの追加
deployしたリリース履歴があります、
deployした日付けや時間・リリースしたファイルなど細かく確認できます。
firebase Hostingにはロールバック機能があり
リリースしたバージョンを過去のバージョンに戻せる事ができる機能となります。
リリース履歴の項目の右端のメニューをクリックすると『ロールバック』があるのでクリックすると過去に遡れます、ですがリリースは一度しかしてないので今は表示されてないはずです。
リリース履歴の管理
以前のリリース履歴を１つ１つ削除するのはめんどくさいですよね
そういう時はリリース履歴にある右上にあるメニューで『ストレージのリリースに関する設定』をクリック
ここでは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のみでしたが色々と機能を活用して見て下さい!。
それではまた〜
