[備忘録]Cloudflareサブドメイン作成

Lemongrass
その他
Page content

状況

Xdomainでドメインfrailleaves.comを取得している。 Cloudflareを経由してGCPのVMインスタンス内に作成したWordpressを稼働させている。 →サブドメインどこで作ったら良いか分からない…作ってもどこからファイルアップロードするんだ…

これからすること

firebaseのHostingサービスを利用して、frailleavesのサブドメインを使った静的サイトを作る（言い回しがおかしい）

内容

firebaseのアカウントを作成

https://firebase.google.com/

Googleのサービスです。Googleアカウントを所有していれば登録することが出来ます。

1.新規プロジェクトの作成

プロジェクト名：分かりやすい名前 プロジェクトID：自動的に生成される。 地域/ロケーション：日本、us-central（基本的にマルチリージョンのもので良いと思います）

2.firebaseのインストール

コマンドプロンプト/PowerShellを使用します。公式サイトに詳しく書かれてあります。

  • firebaseのインストール
    npm install -g firebase-tools

  • firebaseへログイン
    firebase login

匿名の情報を収集する旨の質問がされると思うので、好みで答える(Y/N)。

→ブラウザでGoogleのログイン画面が表示されるので、内容を見つつログイン等を行う。

・サイトの初期化 サイトデータを保管するフォルダを作成し、コマンドプロンプト内でそのディレクトリまで移動しておく。 （ディレクトリ移動のコマンドはcd [フォルダパス]。ex: cd C:\firebase）

firebase init

サイトの初期化にあたって色々なことを聞かれます。

You’re about to initialize a Firebase project in this directory: （以下のディレクトリ内で初期化処理を行いますよ）→Y

Which Firebase CLI features do you want to setup for this folder? （Firebaseのどの機能を使う？）→Hosting

Select a default Firebase project for this directory: （このディレクトリで使うプロジェクト教えて）→先ほど作成したプロジェクトを選択

What do you want to use as your public directory? （パブリックディレクトリに何を使う？）→public

Configure as a single-page app (rewrite all urls to /index.html)? （シングルページアプリケーションにする？）→N（Yesでも良さそうですが）

以上で初期化終了。この時点で[projectid].firebaseapp.comというfirebaseのドメインを取得出来ています。 また、指定したディレクトリ下に、publicフォルダやjsonファイルが生成されていると思います。publicフォルダに普通の静的サイトのようにhtmlファイルを入れていけばWebページが出来ます。

3.独自ドメイン（のサブドメイン）を登録

ブラウザでFirebaseのコンソールを開き、左カラムから「開発」→Hostingを選択するとHostingのダッシュボードが表示されます。

「ドメインを接続」を押すとウィンドウが表示され、ドメイン入力欄が表示されるので、サブドメイン（***.xxx.com等、***は適当）を入力。

→所有権の確認画面が出ます（再度画面を出したら内容が変わっていたので画像なし）。タイプをTXTにするとホスト名と値が表示されるので、コピー。

4. CloudflareのDNS設定を行う。

CloudflareのDNS設定画面を開きます。

タイプをTXT、Name/Click to configueに、先程コピーしたホスト名/値を入力し、Add Recordを押す。

しばらく（数時間～）経つと所有権の認証が終わり、今度はAレコードの設定を求められるので（firebaseコンソール内）、再びホスト名と値をコピー、CloudfireのDNS画面から登録を行います。

しばらく経てば認証が終わります。

5.ファイルをアップロードしてみる

2.で作成したディレクトリ下にpublicフォルダが、その中にindex.htmlと404.htmlが作成されているはずです。デフォルトではFirebaseにようこそみたいな画面が表示されますが、適当に書き換えてWebページに反映させてみましょう。以下はサンプルです。

<html>
<head>
<meta charset="utf-8">
<title>TITLE</title>
</head>
<body>
hello.
</body>
</html>

書き換えて上書き保存したら、コマンドプロンプトから

firebase deploy

で、public以下のファイルを適用できます。

[projectID].firebaseapp.com　もしくは登録したドメインのURLで開いて確認してみましょう。FTPソフトなど使わなくても更新できて便利…？

…firebaseの画面でステータスに「認定が必要です」と表示されるけど、何もアクションを求められず…何をしたら良いのだろう。ﾊﾃｰ