FirebaseによるWebホスティング
FirebaseによるWebホスティング
2020年9月27日
FirebaseによるWebホスティング
10月からFirebaseの本格配信！
4月からWebサービスをテーマに6カ月間お届けしてきました。この6カ月間でカバーした項目は：
- お問合せフォーム（シンプル版、VUE版）
- REST API （外部サービスの取り込み）
- SendGridによるメッセージ送信（外部サービスの取り込み例）
- 趣味から作るWebサービス（登山に心拍数を活用！）
- オンライン決済（Strip・PayPalによるオンライン決済）
- オンラインコンテンツのダウンロード実装
この全てのテーマで「Firebase」を利用してきました。
そうした中、Firebaseに関するご質問を多数頂きました。そこで、10月からはFirebaseを大きなテーマとして取り上げてもう少し詳しい内容でお届けする事にしました。
今日はその紹介です
FirebaseはWebで公開するのに都合が良い！
Webサイトのデータがあれば即公開可能！
Webサービスの実装を紹介する際に、実際に作って紹介しています！
そうすると、何らかの形でインターネットに公開するのが手っ取り早い方法です。Firebaseはその目的にピッタリです。実際にサンプルの実装してそのままインターネットで手軽に公開できます。
実際に本格運用する場合でも全く問題ありません。
シリコンバレースーパーウエアでも元々は別のホスティングサービスを使って運用していましたが、現在はFirebaseのホスティングで運用されています。
残念ながらそれほど大きなアクセス数がないため、今のところ無料で運営できています。
シンプルなWebサイトの公開は簡単！
必要な物は、まずは「Node.js」のパッケージをご使用中のPCにインストールする事です。既にご存じ、ご利用中の方も多いと思いますが、このパッケージの中に「npm」が含まれています。これは、「Node.js」で書かれたパッケージの管理ツールです。
これを利用すると、世界中の人が開発して公開しているモジュールをあなたのサービスに組み込んで使うことができます。多くの人が共通して必要としている機能の多くが既に開発されて公開されています。これを使わない手はありません！
Firebaseのその一つで、FirebaseのSDKはこのパッケージとして公開されています。
Webサイトのホスティングを始めるにはまず、Webサイトのプロジェクトのフォルダを作成してそのフォルダーに移動した後に、以下のコマンドを実行します。
$ npm install -g firebase-tools
そのあとで、Firebaseホスティングの為の初期設定を行います。
$ firebase login
$ firebase init
まずは、Firebaseサービスへのログインです。Firebaseを利用する為にはGoogleのアカウントが必要です。まだお持ちでない方は最初にGoogleのアカウントを作ってください！
Firebaseのサービスへのログインは、Googleのユーザー名とパスワードを使ってログインします。そのあとで、「firebase init」を実行して初期設定を行います。まずは「Hosting」のみを選択すればOKです。
Firebaseコンソールでプロジェクトを予め作成しておく方が簡単ですが、firebase init でもプロジェクトの作成は可能です。
質問が英語で分かりづらいところもあると思いますが簡単に「Hosting」を選択した時の質問をまとめておきましたので参考にされてください。
| 設定の質問 | 説明 | 入力内容 |
|---|---|---|
| Are you ready to proceed? (Y/n) | Firebaseの初期設定を実行するか | Y(そのままリターンキーを押す) |
| Which Firebase CLI feature do you want to setup for this folder? .... | Firebaseのどの機能を設定するか？ | 矢印キーで「Hosting:Configure and deploy Firebase Hosting sites」に移動してスペースキーで選択してリターンキーを押す |
| Please select an option: (Use arrow keys) | Firebaseのプロジェクトを指定します | Firebaseコンソールでプロジェクトを既に作成している場合にはそのプロジェクトを選びます。ここで新規に作成する事もできます。 |
| What do you want to use as your public directory? (public) | Webサイトに置くファイルを保存するフォルダーを指定します | 標準設定の「public」で問題ありませんのでそのままリターンキーを押します。 |
| Configure as a single-page app (rewrite all urls to /index.html)? (y/N) | シングルページアプリとして設定するか？ | 今回はシングルページアプリではないので「N」(そのままリターンキーを押します) |
あとは、作成された「public」というフォルダーの下に、Webサイトに置くHTMLファイルなどを置けば準備は完了です。
実際に公開する前にまずはPCでテストします。
以下のコマンドを実行して、PCでテスト用のサーバーを起動します。
$ firebase serve
標準設定ではブラウザーで「http://localhost:5000」を指定するとWebサイトにアクセスできるはずです。特に問題なければインターネットに公開します。
公開は以下のコマンドでできます。
$ firebase deploy
これで、インターネットに公開できました。簡単ですよね！
このままだと、Firebaseが割り当てたドメインを使用する事になりますが、ドメインをお持ちの方は独自ドメインを割り当てる事もできます。
詳細は別途説明する予定ですので今日はここまでです！
Firebaseのホスティングの制限事項は？
大きな制限事項はありません！
Firebaseのホスティング利用で大きな制限事項はありません。
広告も入りませんし、ほぼ自由にサイトを構成できます。一般的なWebホスティングと同様、JavaScriptを使うこともできます。もちろん、ご自分で広告を入れて広告収入を得る事も可能です。
大きな問題ではないと思いますが、Firebaseでホスティングする場合、広く利用されているWordPressは使えません！普通にHTMLとCSSでサイトを記述する必要があるのが、唯一制限事項と言えます。
しかし、プログラミングをしない一般の方には大きな問題ですが、Webプログラミングを学習されている方には大きな問題ではない場合が多いと思います。むしろ、気軽に無料から利用できるのは大きな魅力です
Firebaseホスティングの将来への拡張
Firebaseの他の機能と連携して高付加価値のサイトが構築できる！
Firebaseでホスティングする最大の魅力は、Firebaseの他の機能と連携してより高付加価値なWebサイトとして構築できる事です。
Firebaseにはユーザーのログイン機能に利用できるユーザー認証機能や、高速なレスポンスが売りのデータベース、オンラインのストレージも活用できます。さらに、バックエンド（サーバー側で処理）が必要な場合も対応が可能です。
そう考えると、殆ど全ての複雑なWebサービスやWebアプリを実現する事が可能というわけです。
勿論、ReactやVueで作ったフロントエンドの実装や、Next/Nuxtで作ったサーバーサイドのレンダリングの実装もFirebaseでホスティングする事ができます。
会社などで組織的に開発を行う場合はFirebaseの魅力は少ないのかもしれませんが、フリーランスの方などの様に、個人でWebシステムやWebアプリを開発する場合には、バックエンドやデータベース周りに専属の人を使うことが難しいので、Firebaseはとても魅力的なオプションです。時間を節約して高品質のWebアプリやWebサービスを開発する事がフリーランスの方でも可能になります。
10月より、Firebaseの実際の使用例を基に皆様に情報を届けてまいります。よろしくお願いします。
コメント
コメントを投稿