Firebaseで爆速でWebサイト・アプリを公開する
はじめに
こんにちは、Staff Roiです。
FirebaseというGoogleのWebアプリ開発プラットフォームのホスティング機能を使ったらWebサイトが爆速で公開できたので軽く紹介したいと思います。
Firebaseってなに？
FirebaseはGoogleのWebアプリ開発プラットフォームです。ホスティングやストレージ、APIなど色々使えます。
無料枠でも結構使えると思います。
Firebase CLIのインストール
Nodejsからインストールするのが一番よいです。
npm install -g firebase-tools
Mac,Linuxの人はNodejsではなくてもインストーラーからインストールできます。
curl -sL https://firebase.tools | bash
インストールが終了したら、ターミナルでログインします。
fireebase loging
自動でブラウザが開かれ、ログイン画面に持ってかれます。
ちなみにログアウトする場合はfirebase logoutと打ちます。
サイトを公開していく
プロジェクトの作成
まず最初に、firebaseのプロジェクトを作成します。
「プロジェクトの作成」をクリック
プロジェクトの名前を設定します。
その他もろとも設定します。
最終的にはこのような画面になり
コンソールに移動します。
「構築」をクリックし、「Hosting」を選びます。
はじめます。
親切にもチュートリアルが載っています。
全て進むと、コンソールに飛びます。
ここに載っている二つのURLが、WebアプリへののURLとなります。
プロジェクトの初期化
WebサイトまたはWebアプリを用意して、一つのフォルダの中に入れておきます。
今回は過去に自分が作ったWebアプリを適当にクローンして用意しました。
git clone https://github.com/roistaff/command-editor.git
webサイト・アプリがあるフォルダへ移動します。
cd command-editor
firebaseのプロジェクトの初期化をします。
firebase init
こんな感じで質問されます。
最初の質問「Which Firebase features do you want to set up for this directry?」では「Hosting:Configure files for Firebase Hosting and (optionally) set up Github Action deploys」をスペースで選択してエンター。
次の質問「Project Setup」では「Use an existing project」を選択してエンター。
「Select a default Firebase project for this directory:」では先ほど作ったプロジェクトを選択します。
「What do you want to use as your public directory?」→こちらはそのままエンター。
「Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 」→Noです。
「Set up automatic builds and deploys with GitHub?」→Noです。
全てうまくいったらこんな感じに表示されます。
デプロイ
「public」フォルダが作業フォルダの中に作成されるので、この中にHTMLやCSS,JSなどを入れます。ちなみにデフォルトでindex.htmlが入っているので取り除きます。
ディレクトリ構成はこのようにします。
.
├── firebase.json
└── public ←「public」フォルダの中に公開するファイルを入れる。
├── 404.html
├── editor.js
├── index.html
└── style.css
このままデプロイしてもいいのですが、一回ローカルでテストしてみます。
publicフォルダに移動し、firebase serveと打ちます。
しばらくするとlocalhost:5000が立ち上がり、アクセスを確認できます。
全てOKなら、firebase deployと打ちます。
コンソールで表示されていたリンクを開くと、公開されているのが確認できます。
これでWebサイト・アプリを公開できました！
実際に公開したものがこちら
まとめ
結構簡単にWebサイト・アプリを公開することができました。公開URLはランダムのプロジェクトidですが、カスタムドメインを設定することもできます。
Github Pagesの方が簡単と言えば簡単ですが、デプロイが簡単なのでホスティングする時は選択肢の一つとして知っておいた方が良いと思います。
Googleアカウントで手軽にできますので是非とも試してみください。
Discussion