Xserver+Firebase メールサーバーとDNSをエックスサーバーで使ってWEBをFirebaseで使う方法

2019年8月14日

nuxt netlify ssr vuetify github というものを使い、サイトを構築するときにメールサーバーはG-suiteはお値段が高いから使いたくない。とりあえず安いXserverを別用途でレンタルしているし、そっちでメールサーバーはつかいたいという人向けの超マイナーなニッチな人のためのお話。

Firebaseには既にデプロイ済みを想定しています。

実際にこんなことをやろうとする人は、それぐらいもう既にやってるよね?
という独断と偏見により飛ばさせていただきまーす。

0、頭がいい人への要約

DNSの設定はこうなります。
MXレコードはXserverの契約のホスト名(サーバーホスト名.xserver.jp)
AレコードはFirebaseのIPに当てればいいということです。

1、FirebaseのHosting画面に移動

FirebaseのHosting画面にいったら右上の、ドメインを接続ボタンを押していきます。

2、ドメインを入力します。

ドメインを実際に入力していきます。この際に、https://等は入力する必要はありません。

3、クイックセットアップが出てきますが選択しません。

次にクイックセットアップが出てきますが、今回はクイックセットアップではなく、詳細設定を選んでいきます。

4、詳細設定で項目は「既存のサイトにファイルをアップロード」にします。

DNS TXT レコードでも問題はないのですが、自分の場合これがうまくできなかったので、「既存のサイトにファイルをアップロード」を選択してファイルをアップロードしました。

5、ファイルをダウンロード

次の URL でアクセスできるよう、ウェブサイトにこのファイルをアップロードします。という文字の「このファイル」を右クリックして保存しましょう。
また、この際にファイルの名前は、上記画像の赤い丸の枠で囲っている長い謎の暗号文字のようなものをファイルの名前に指定します。

6、FTPで接続し、ドメイン名直下にフォルダを作成

ドメイン名の直下に.well-knownのフォルダを作成します。Xserverの場合ドメイン名→public_htmlの下にフォルダを作成します。(既にある場合はそのままでOKです。)

7、.well-knownの下に更にフォルダを作成

今度は。acme-challengeというフォルダを.well-knownの下に作成します。

8、acme-challangeのフォルダの下に先程のファイルをアップロード

先程、Firebaseからダウンロードしてきた長い暗号のような名前のファイルをアップロードします。

9、ファイルが正しくアップロードされてるか確認

ファイルが正しくアップロードされてるかFirebaseのリンクから確認しましょう。クリックしてダウンロード画面や、ファイルが開けたらそれでOKです。
ただし、ファイルがありませんや404画面になったら失敗です。正しい名前か確認して再度アップロードをしましょう。

10、証明書をプロビジョニングし終わるまでまちます。(数時間)

とりあえず、Firebase側がファイルの確認中が終るまで数時間まちます。
1時間以内に自分の場合は終わりました。

11、プロビジョニング終了するとこんな感じ

終るとこんな感じの画面に推移するので、次へを押して移動します。

12、次に、DNSレコードのIPが出るのでIPを確認します。

こちらのIPアドレスを実際にXserverに入れていきます。

13、XserverのドメインのDNSレコード一覧に行きます。

最初はこんな感じで設定されているでしょう。
ここを消したり増やしたり、変更したりしていく必要があります。

14、ドメインの元のAレコードのを削除します。

この時、とりあえず他のはとっといて大丈夫です。

15、MXレコードの内容を、サーバーホスト名に変更

ちなみに、このときのサーバーホスト名はXserverサーバーパネル右上に記載されています。サーバーホスト名.xserver.jpになります。
おそらくみんながsv数字.xserver.jpとかになります。

16、Aレコード2つを追加する。

先程の、Aレコードを追加してくださいとFirebaseで言われていたもの2つを追加します。
種別はAと設定し、内容のところにIPアドレスを1つずつ入力して保存をする必要があります。

17、新規追加分も反映してこのような形になります。

18、反映が終わるまで数時間待つ!場合によっては24時間以上

いつまで反映が終わるかわかりませんが、これで設定は終わりになります。
www.側も反映させる場合はFirebase上で同じ様に追加を行い、XserverのAレコードを1つ削除して、Firebaseに記載されているAレコードを2つ追加するということになります。

19、ね?簡単でしょ?

とか言いたいのですが、Xserverの親切なサポートのおかげで対応ができました。
本当にありがとうございました。Xserverは普段からつかってますが、懇切丁寧にアホにも教えてくれるスタイルがいいと思います。

IT系

Posted by Shun