Firebaseとムームードメインで独自ドメインでhttps

最初に

Firebaseのホスティングを使用するとWebサイトを無料で始めることができ、ドメインを持っていれば独自ドメインをhttpsで運用することもできます。

具体的な価格設定は、次のサイトを参考にしてください。

Firebase Pricing
Get started with Firebase for free, and scale worldwide to millions of users, paying only for what you use.

今回は、Firebaseのホスティングで必要なNode.jsのインストールから、Webサイトの構築、ムームードメインで取得したドメインでhttpsの設定までを紹介します。

環境はWindows 10 64bitです。

Node.jsのインストール

FirebaseのHostingを使用するためには、Node.jsが必要になります。最初に、Windows 10でNode.jsのインストール方法を説明します。

まず、次のサイトにアクセスします。

Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

推奨版をダウンロードします。そして、ダウンロードしたファイルを実行します。最初の画面は「Next」ボタンを押しいます。

次の画面はライセンスの確認になります。問題なければ「I accept the terms in the License Agreement」にチェックして、「Next」ボタンを押します。

インストールする場所はそのままにして「Next」ボタンを押します。

カスタムセットアップも特にしないので、「Next」を押します。

最後に確認になりますので、問題なければ「Install」を押します。

次の画面になればインストール完了です。

インストールの確認はコマンドプロンプトを起動して次のコマンドを入力します。入力した結果、次のようにバージョン番号が表示されればインストール完了です。

>node -v
v8.11.1

Firebaseの設定

最初にFirebaseでホスティングの設定を行います。独自ドメインでなければ、この設定でWebサイトを作ることができます。

次のFirebaseのコンソールにアクセスし、ログインします。

ログイン - Google アカウント

次のような画面になるので、「プロジェクトを追加」をクリックします。

プロジェクトの作成画面が表示されますので、プロジェクト名を適当に(今回はsampleとしています)。国/地域は日本とし「プロジェクトを作成」をクリックします。

しばらくするとプロジェクトができあがります。

作成できると画面の左側にメニューが表示されますので、「Hosting」をクリックします。

メニューを選択するとダッシュボードが表示されるので、「使ってみる」をクリックします。

ホスティングの設定画面になりますので、画面に表示されている通りのコマンドを入力します。

Node.jsは先にインストールしているので、コマンドプロンプトを起動して次のように入力します。

npm install -g firebase-tools

インストールが完了したら、「次へ」ボタンを押します。

デプロイの設定になりますので、作業フォルダに移動して表示されているコマンドを入力します。今回は、C:\temp\sampleフォルダを作業フォルダにします。

そして、firebase loginコマンドを入力します。すると、Googleアカウントの認証のためにブラウザが起動しますので、認証します。

>firebase login

ログインすると次のようなメッセージが表示されます。

Waiting for authentication...

+  Success! Logged in as webarata3@gmail.com

認証後、initでプロジェクトの初期化をします。するといくつかの質問が表示され、それがFirebaseの初期設定になります。

重要なのはどの機能をセットアップするかで、ホスティングを選択します。その他はデフォルトの設定で特に問題ありません。

ここまでで、プロジェクトの準備は完了です。C:\temp\sample\publicフォルダにWebサイトに必要なファイルを置き、deployすることでサイトを公開することができます。

とりあえず、public/index.htmlの内容をHello worldとしデプロイしてみます。

デプロイは、firebase deployと書いてあるのですが、今回試しているとそれではうまくいかなかったためプロジェクトIDを指定することでデプロイすることができました。

>firebase deploy --project sample-ddc91

=== Deploying to 'sample-ddc91'...

i  deploying hosting
i  hosting: preparing public directory for upload...
+  hosting: 2 files uploaded successfully

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/sample-ddc91/overview
Hosting URL: https://sample-ddc91.firebaseapp.com

デプロイが完了すると次のような画面になります。

ドメインのところに表示されているURLをクリックすると別ウィンドウでデプロイしたサイトが表示されます。

これでFirebaseによるホスティングは完了です。基本的にはpublicの中に公開したいファイルを置き、デプロイするという作業の繰り返しになります。

独自ドメインにする

独自ドメインにするには、「ドメインを接続」ボタンを押します。

ドメインを接続を押すと、ドメインの追加画面になるので、自分のドメインを入力します。今回は、sample.webarata3.linkとしています。

次に進むとそのドメインが本当に本人のものか確認のためのDNSの設定を追加するよう指示されます。

ここで、ムームードメインにログインし、「ドメイン操作」→「ムームーDNS」を選び、DNSの設定を変更したいドメインを選びます。

表示された画面で、種別をTXTにし、内容をFirebaseの画面に表示されていた値をコピーして、「セットアップ情報変更」ボタンを押します。

しばらく待ってから、Firebaseの画面の「確認」ボタンを押します。

そうすると次のような画面になります。この画面になればドメインの確認は終了なので、DNSに追加したTXT項目は削除して構いません。

表示されている情報をムームードメイン画面で登録します。

これで独自ドメインの設定は完了なります。

しばらく待つと「https://設定したドメイン」にアクセスできるようになるはずです。

コメント