CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

はてなブログでads.txtに対応するために、Azureでhttps対応のWebサイトを作る方法

はてなブログでアドセンスを使っていると、ルートドメインにads.txtを入れてくださいという警告が出ることがあります。

「はてなブログ アドセンス ads.txt」などで調べると色々情報が出ており、はてなブログ単体では対応できないことが知られています。

対応する方法は別サーバを作ってads.txtを格納することです。今回それをAzureで対応したので、その方法を紹介します。

この記事では、以下に対応していることが前提です。

・はてなブログを使っている

・はてなブログのURLを独自ドメインにしている

なお、この記事ではads.txtについては既知として取り扱います。例えば、こちらのサイトに分かりやすく解説されているのでご参考ください。

webtan.impress.co.jp

1. Visual Studio Codeを使ってAzureのWebサイトを構築する

Azureのアカウント登録済が前提です。今回は、Visual Studio CodeとNode.jsを使用してサイト構成を作成し、自分のAzureにデプロイしました。

Visual Studio Code : 1.43.1

Node.js : 12.13.1

このサイトを参考にしました。

docs.microsoft.com

1.1 Azure App ServiceのExtensionをインストールする

この画像のように、Azure App Service のExtensionをインストールします。

Select Azure App Service on VSCode

1.2 Azure App Service Extensionから、Azureにログインする

自分の持っているアカウントでログインします。

Login to Azure on VSCode

自分が作ったApp Serviceが表示されます。

My App Service on VSCode

1.3 Webサイトのプログラムを作る

次に、自分のPCの任意のディレクトリに空のフォルダ (下記の例では"azuresite") を作ります。以下のコマンドを実行します。

$ mkdir azuresite  
$ cd azuresite
$ npx express-generator myExpressApp --view pug --git  
$ cd myExpressApp
$ npm install

これでmyExpressAppというフォルダと、Express (サーバを作るためのモジュール) を使ったサーバプログラムの一式が生成されます。

Generated Express program

次に、アドセンスのads.txtをpublicフォルダに置きます。

folder path of ads.txt

サーバを起動させます。

$ npm start

http://localhost:3000/ads.txt にアクセスして、ブラウザにads.txtが表示されればOKです。

1.4 作ったWebサイトのプログラムをAzureにアップロード (デプロイ) する

Azure App ServiceのExtensionを表示させた状態で、”+”アイコンを選択して、アプリ名称を入力します。
(ここで入力した名称がAzure PortalでApp Serviceの名称になります)

次に、アップロードアイコン (隠れていますが、画像の①) を選択します。すると、どのフォルダを対象とするかが表示されるので、先ほど作ったmyExpressAppフォルダ (画像の②) を選択します。

Upload my App Service folder on VSCode

途中、このような確認画面が出ますが、OKを選択します。

Two messages while deploying myExpressApp to Azure

"Deployment to "アプリ名称" completed" というメッセージが画面右下に表示されたら完了です。

ブラウザで、 https://<アプリ名称>.azurewebsites.net/ads.txt にアクセスして、ads.txtが表示されればOKです。

もし、ads.txtが表示されなかったり、https://<アプリ名称>.azurewebsites.net でMicrosoft Azureのような画面が表示された場合、デプロイするフォルダの指定が間違っています。アップロードアイコンを押した後、myExpressAppを指定して再度アップロードしてみてください。

2. DNSを設定して、別のURLでアクセスできるようにする

ここまで、(1) https://<アプリ名称>.azurewebsites.net/ads.txt によってads.txtをインターネット公開することができました。

今回やりたいのは、このサイトのURLが(2) https://<wwwを除いた独自ドメインのブログURL>/ads.txt でアクセスできるようにすることです。

(2)でアクセスされたとき、(1)の内容を表示するためにはDNSを使います。

DNSは国内でも様々な会社でサービスが公開されています。個人向けだと以下の2つが検索上位に出てきました。

muumuu-domain.com

www.onamae.com

私はムームードメインを使いましたが、AWSやAzureでもDNSサービスがあるので、どれでもよいです。
はてなブログで独自ドメイン対応済みの方は、そのサービスをそのまま使うことで問題ありません。

手順としては、Azureポータルで設定作業をして、出力された2つの情報をDNSに追加登録します。

・DNSへの追加情報1:グローバルIPアドレス

・DNSへの追加情報2:元のサイトのドメイン名称

まずAzure App Serviceで「カスタムドメインの追加」をクリックして、(1) 自分が使いたいドメイン名を入力し、(2) 検証をクリックします。(このブログの場合、crossroad-tech.com

続いて、(3)「ホスト名レコードタイプ」をA recordにします。

How to set custom domain on Azure App Service

この画面を下にスクロールすると、このような画面になります。

Setting information of custom domain

ここに表示される表のTXTとAの2行をムームードメインの管理画面に入力します。

ムームードメインにログインしたら、ドメイン管理 / ムームーDNS を選択します。(赤枠です)

mu-mu-domain configuration

その後、スクロールして「設定2」の画面に2つの情報を登録します。 1行目のwww CNAME hatenablog.com は、独自ドメインにしたときに登録済みの内容です。2行目が新規です。

サブドメイン 種別 内容 優先度
www CNAME hatenablog.com
A IPアドレス
TXT .azurewebsites.net

補足説明 (1):Aレコード

App ServiceでWebサイトを作ると、グローバルIPアドレスが付与されます。このIPアドレスをDNSに登録することで、自分の持っているドメイン"crossroad-tech.com"と作ったWebサイトが紐づきます。

このようにIPアドレスとドメイン名を紐づけるとき、Aレコードという仕組みを使います。

補足説明 (2) : TXTレコード

DNSにテキストを登録するときに使います。今回はAzureポータルの指示に沿って、App Serviceで生成されたサイトのドメインを登録しました。

再度Azureポータルのカスタムドメインの画面に戻ります。

Custom domain setting on Azure App Service

先ほどまで赤い警告マークがついていたドメイン所有権のアイコンが緑マークになります。ここに表示されている「カスタムドメインの追加」ボタンをクリックします。

(クリックしないと、カスタムドメインが有効になりません)

ここまで実行してから、ブラウザで https://crossroad-tech.com/ads.txt にアクセスするとこうなります。

No SSL site for ads.txt

いちおうこれで目的は達成したのですが、SSL対応していないと警告が出るので、次は証明書を設定します。

3. 証明書を設定して、httpsアクセスで警告が出ないようにする

3.1 証明書を作成する

Azureポータルの内部で購入して登録しました。Azureポータルから設定すると簡単ですがお金もかかるので、Let's Encryptなどを使用して、無償で証明書を発行して登録することも可能です。

Let's Encryptについては、例えば以下を参照ください。 (私は未検証です)

ssl.sakura.ad.jp

k-miyake.github.io

Azureポータルの全てのサービスから「App Service 証明書」を選択するか、App Serviceの「TLS/SSLの設定」画面から「証明書の購入」を選択する場合のどちらでもよいです。

How to access Azure App Service certificate on all service list

How to access Azure App Service certificate on TLS/SSL settings

App Service証明書を選択した後は、以下の記事の「作業3」と同様に実行します。
(「作業1」、「作業2」は、ムームードメインではなく、Azure DNSを使った場合の手順です)

qiita.com

実行できたら、App Service証明書の「手順2:確認」をクリックして、表示されるドメイン確認トークンという20文字程度の文字列をコピーします。

3.2 DNSに証明書作成画面で生成された文字列をTXTレコードで登録する

もう一度ムームードメインの管理画面に戻り、3.で示した「設定2」にTXTレコードを追加します。追加すると、全部でこのような表になります。

サブドメイン 種別 内容 優先度
www CNAME hatenablog.com
A IPアドレス
TXT .azurewebsites.net
TXT ドメイン確認トークンに表示された文字列

Azureポータルに戻ります。このような画面になっていればOKです。

Domain confirmation success

次に、App Serviceに証明書をインポートします。 TLS/SSLの設定をクリックし、下の画像の(1)、(2)の順番に進めます。

import certificate on App Service

先ほど作成した証明書の名称が選択できます。App Service 証明書が検証されましたという表示が出たらOKをクリックします。

3.3 Azureポータルで証明書を登録する

App Serviceの「TLS/SSLの設定」画面を表示するとこのようになっています。

No SSL setting on App Service

右下の「バインディングの追加」を選択します。次に出てくる画面にて、プライベート証明書の拇印の箇所で先ほど作った証明書の名称を選択して、「バインディングの追加」を選択します。

Register SSL certificate on App Service

これで登録が完了します。ブラウザで https://crossroad-tech.com/ads.txt にアクセスするとこうなります。

a web site for ads.txt with SSL certificate

これでようやく、目的の表示になりました。

4. 補足

4.1 Visual Studio Code のAzure App Service Extensionは、App Serviceの設定が固定化されている

このExtensionのバージョンがv0.16.4の時点では、App Serviceの場所が米国中部、料金プランがF1として作成されました。

料金プランは、作成後にAzureポータルサイトから「スケールアップ」を実行することで変更できますが、場所は変更できませんでした。

4.2 ads.xtxの配信が可能になった時、構文チェックができる仕組みがある(非公式)

ここのサイトでは、構文チェックができます。

Ads.txt Manager | DataSign FE

grammer check of ads.txt

私の場合、このようにOKが出ました。

5. おわりに

この対応後1日経ってからアドセンス管理画面を見ると、ads.txtの警告が消えていました。

Azureポータル、ムームードメインを行き来する必要があって少し手間ですが、何かの参考になれば幸いです。