こんにちは！
川口のWEB屋さんTEDASKのSeitoです。
先日FirebaseでWEBサービスを作られているお客様から、お名前.comで取得したドメインとお名前.comのメールサービスを使った状態で、Firebaseに接続したいというご要望があり、やり方が検索では見つからなかったので今回記事にすることにしました。
FirebaseはGoogleが提供しているサーバーレスサービスです。VPSやクラウドサーバーのようにサーバー構築が不要でサービスが公開できる便利なサービスです。
ただ、Firebaseにはメールボックスの機能はありませんので、メールを送受信するためにメール用のサーバーのレンタルが必要になります。
今回はFirebaseの設定からお名前メールの契約、名前.comのドメインの接続設定について説明したいと思います。
Firebaseとは
FirebaseはGoogleが提供しているサーバーレスサービスでで、VPSやクラウドサーバーのようにサーバー構築が不要でサービスが公開できる便利なサービスです。
アクセスがそこまでない簡易的なページやアプリケーションであれば無料で利用することが出来ます。
有料への切り換えは、アクセス数（ダウンロード量）や認証の回数、利用したい機能がある場合に必要となります。
詳しい料金体系については公式サイトをご覧下さい。
冒頭でも書いたとおり、メールボックス機能はありませんので、別途メール用のレンタルサーバーやSaaSなどを利用する必要があります。
Firebaseにサイトを公開するまでの流れ
Firebaseにサイトを公開するまでのざっくりとした流れですが、Firebaseを使えるようにしてメールサーバーの設定、Firebaseに接続、本番アップロードといった流れになります。
もしお名前メールをまだ契約していない場合は、使えるまで少し時間が掛かるので、先にお名前メールの契約をしておくことをおすすめします。（記事でもやり方は書いています。）
- node.jsのインストール
- Firebase CLIのインストール
- Firebaseの利用登録
- Firebaseでアプリの新規作成
- ホスティングサービスの有効化
- カスタムドメインの追加
- お名前メールの契約
- お名前メールのDNSの設定
- CLIから作成したプロジェクトと接続
- CLIで初期化
- Publicにソースコードを配置
- CLIでデプロイ
という流れになります。
もし独自ドメインを使わない場合でも、Firebaseが自動でサブドメインを生成してくれますので、試験用のサイトであればカスタムドメインの設定などは不要となります。
お名前メールの申込み
まずは、利用出来るまでに30分ほどかかるので、先にメールを送受信をするためのメールボックスを契約してしまいます。
すでに契約済みの場合は読み飛ばしてください。
ヘッダーメニューの「お名前メール」→「お申し込み」をクリックします。
今回は「エコノミープラン」を申し込みますが、適宜選択してください。
対象のドメインが間違っていないことを確認して「次へ」をクリックします。
必要事項を書いて「申込む」をクリックします。
申し込みが完了しました。
契約後大体30分程度で、メールボックスが使えるようになりますので、その間にFirebaseなどの作業を進めましょう。
Firebase CLIのインストールからFirebaseの接続まで
まず始めにFirebase CLIをインストールしますが、PCはWindows11でnode.jsはすでにインストールされている前提で進めます。
Windowsコマンドプロンプトを開いて、作業ディレクトリに移動します。node.jsを使ってWEB制作をしているディレクトリがあればそちらに移動しても良いです。
npm install -g firebase-tools
npmでfirebase-toolsをインストールします。
もし脆弱性があればaudit fixで対処しておきましょう。
firebase --version
無事インストールされているか確認します。
13.0.2と表示されましたので問題なくインストールができました。
firebase login
最後にFirebaseに接続します。
「Y」を入力して「エンター」で確定します。
するとGoogleのアカウントの承認画面が表示されますので「許可」をクリックします。
ログインが成功しました。
アカウントとの接続まではこれで完了です。
Firebaseでプロジェクトの作成
次にFirebaseの管理画面に入ってプロジェクトを作成します。
以下のURLからFirebaseにアクセスしましょう。
トップページに来たら「使ってみる」をクリックします。
「プロジェクトを追加」をクリックします。
「プロジェクト名」に適宜、半角英数字で名前を入力して、「続行」をクリックします。
Googleアナリティクスを利用するか聞かれるので、必要であればONの状態で「プロジェクトを作成」をクリックします。今回は不要のためOFFにしています。
「続行」をクリックして、プロジェクトの作成を完了します。
Hostingの設定
次にサイトを公開するためのドメイン関連の設定をしていきます。
左メニューの「構築」→「Hosting」をクリックします。
画面が移動したら「始める」をクリックします。
Firebase CLIのインストールという画面が出てきますが、この後の作業は先程完了していますので、全て「次へ」をクリックしてください。
「コンソールに進む」をクリックします。
そうすると、自動でドメインが生成されるのでクリックしてアクセスしてみます。
「Site Not Found」と表示されればOKです。
まだデータがデプロイされていないため、この初期の画面になります。
独自ドメインのネームサーバーの設定とFirebaseとの接続
次に独自ドメインを接続するためのカスタムドメインの設定をしていきたいと思います。
「カスタムドメイン追加」をクリックします。
用意した独自ドメインを入力して「続行」をクリックします。今回は例として「tedask.click」というドメインを設定してみます。
DNSの設定で必要なレコードが表示されますので、一旦この画面はそのままにしておきます。ここからはお名前.comのネームサーバーの設定に進みます。
お名前メールへ接続するためのネームサーバーの設定
お名前メールの契約が終わっている状態で、次にお名前メールにネームサーバーを向ける設定をしていきます。
ヘッダーメニューの「ネームサーバーの設定」→「ネームサーバーの設定」をクリックします。
設定するドメインにチェックが入っていることを確認して、「RSプラン、お名前メール（プラン：エコノミー/ベーシック）のネームサーバーを使う」の「設定する」をクリックします。
ネームサーバーの設定はこれでOKです。
お名前メールでDNSの設定を行いFirebaseに接続する
では、お名前メールに戻って、ステータスを確認します。
ステータスが「稼働中」になっているのを確認して、「ログイン」をクリックします。
レンタルサーバーコントロールパネルに入ったら該当のドメインの「DNS」をクリックします。
「DNSレコードを追加」をクリックします。
入力欄が表示されたら、DNSレコードを入力していきますが、この内容は先程FirebaseのHostingで表示されていた値を入力します。
この内容を設定していきます。
「タイプ」にAレコード、「TTL」は300としていますが、他の設定に合わせて600以上がおすすめです。「値は」IPアドレスを入力して、「確認する」をクリックして、完了します。
次にTXTレコードを入れていきます。
先程と同様に指定された値を入れていきます。「確認する」をクリックして、完了します。
最終的にはこのように、標準で入っているレコードに追加する形になります。
最後の2行分が今回追加したものです。
最後にFirebaseの方で、接続を確認します。
Firebaseの画面のホスティングページに戻り「確認」ボタンをクリックします。
接続が確認出来ると設定しましたの画面になります。
もしこのとき、「接続が確認出来ませんでした」のように上手く行かない場合は、ネームサーバーがまだ反映されていないためですので、2時間程度、長くて半日待ってみましょう。
ネームサーバーが反映されれば勝手に接続確認していますので、このときうまく行かなくても閉じてしまって大丈夫です。
これで、お名前.comで取得した独自ドメインが、メールボックスを経由する形で、Firebaseに接続されるようになりましたのでメールの送受信はお名前メールで、WEBはFirebaseとなりました。
Firebaseにデプロイ
メールのネームサーバーの設定と、FirebaseのDNS設定が終わったので、最後にFirebaseにHTMLファイルをアップロードしてみます。
コマンドプロンプトに戻り、プロジェクトフォルダに移動して、初期化をします。
firebase init
「Y」を入力でエンターをします。
カーソルを「Hosting」 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploysに合わせて「Space」キーを押下します。
アスタリスクが付いたら、エンターをします。
すでにプロジェクトを作成しているものを使うので「Use an existing project」を選択して、エンターをします。
先程作成した「test project」を選択して、エンターをします。
あとは「Public」→「N」→「N」としますが、必要に応じて変更してください。
初期化が完了しました。
初期化を設定したフォルダをみてみると、いくつかのファイルが生成されているのが分かります。
この中の「public」が公開ディレクトリとなります。
Publicの中を見ると「index.html」と「404.html」が入っていますので、index.htmlを今回用意したindex.htmlと置き換えます。
ファイルの置き換えが完了したらコマンドプロンプトで「public」ディレクトリに移動します。
firebase deploy
deployコマンドを実行します。
「 Deploy complete!」となれば、無事公開されました。
先程設定した独自ドメインにアクセスしてみましょう。
もし、独自ドメインで表示エラーが出る場合は、まだ反映されていないかもしれないので、Firebaseで自動生成されたドメインでアクセスしてみてください。
問題なく表示されれば無事完了です。
まとめ
今回はFirebase＋お名前メール＋お名前.comのドメインの組み合わせでFirebaseを動かしてみました。
今回のポイントはお名前.comのネームサーバーではなく、お名前メール（お名前のレンタルサーバー）にネームサーバーを設定して、レンタルサーバーのDNSでFirebaseを接続するところです。
もし、お名前メール出ない場合はお名前.comのネームサーバーのままで、DNSをメールとFirebaseのそれぞれ設定すれば良いと思います。
あまり今回のような設定はないかも知れませんが、もしドメインで上手く行かないようなことがあれば、お気軽にご相談ください。
以上、「お名前.com＋お名前メールの組み合わせでFirebaseに接続する方法」でした。
WordPressやWEB技術、集客、ChatGPTなど最新技術に関する情報を毎週お届けする
メールマガジンを発行しています。
不定期でWordPressの脆弱性情報も配信していますので、
WEB担当者やWEBを学んでいる方などにオススメの無料メールマガジンです！
コメント