(2021/1/1追記 Visual Studio CodeでApp Service Extensionのアイコンが表示されていないときの対処方法を追記しました)
はてなブログでアドセンスを使っていると、ルートドメインにads.txtを入れてくださいという警告が出ることがあります。
「はてなブログ アドセンス ads.txt」などで調べると色々情報が出ており、はてなブログ単体では対応できないことが知られています。
対応する方法は別サーバを作ってads.txtを格納することです。今回それをAzureで対応したので、その方法を紹介します。
この記事では、以下に対応していることが前提です。
・はてなブログを使っている
・はてなブログのURLを独自ドメインにしている
なお、この記事ではads.txtについては既知として取り扱います。例えば、こちらのサイトに分かりやすく解説されているのでご参考ください。
- 1. Visual Studio Codeを使ってAzureのWebサイトを構築する
- 2. DNSを設定して、別のURLでアクセスできるようにする
- 3. 証明書を設定して、httpsアクセスで警告が出ないようにする
- 4. 補足
- 5. おわりに
1. Visual Studio Codeを使ってAzureのWebサイトを構築する
Azureのアカウント登録済が前提です。今回は、Visual Studio CodeとNode.jsを使用してサイト構成を作成し、自分のAzureにデプロイしました。
Visual Studio Code : 1.43.1
Node.js : 12.13.1
このサイトを参考にしました。
1.1 Azure App ServiceのExtensionをインストールする
この画像のように、Azure App Service のExtensionをインストールします。
2021/1/1 追記
久しぶりにVisual Studio CodeからAzure App Serviceを使おうとしたら、アイコンが表示されていない、というときは、Extensionのアイコンがあるエリアを右クリックして、Azure App Serviceにチェックを入れるとアイコンが出てきます。
1.2 Azure App Service Extensionから、Azureにログインする
自分の持っているアカウントでログインします。
自分が作ったApp Serviceが表示されます。
1.3 Webサイトのプログラムを作る
次に、自分のPCの任意のディレクトリに空のフォルダ (下記の例では"azuresite") を作ります。以下のコマンドを実行します。
$ mkdir azuresite $ cd azuresite $ npx express-generator myExpressApp --view pug --git $ cd myExpressApp $ npm install
これでmyExpressAppというフォルダと、Express (サーバを作るためのモジュール) を使ったサーバプログラムの一式が生成されます。
次に、アドセンスのads.txtをpublicフォルダに置きます。
サーバを起動させます。
$ npm start
http://localhost:3000/ads.txt にアクセスして、ブラウザにads.txtが表示されればOKです。
1.4 作ったWebサイトのプログラムをAzureにアップロード (デプロイ) する
Azure App ServiceのExtensionを表示させた状態で、”+”アイコンを選択して、アプリ名称を入力します。
(ここで入力した名称がAzure PortalでApp Serviceの名称になります)
次に、アップロードアイコン (隠れていますが、画像の①) を選択します。すると、どのフォルダを対象とするかが表示されるので、先ほど作ったmyExpressAppフォルダ (画像の②) を選択します。
途中、このような確認画面が出ますが、OKを選択します。
"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は国内でも様々な会社でサービスが公開されています。個人向けだと以下の２つが検索上位に出てきました。
私はムームードメインを使いましたが、AWSやAzureでもDNSサービスがあるので、どれでもよいです。
はてなブログで独自ドメイン対応済みの方は、そのサービスをそのまま使うことで問題ありません。
手順としては、Azureポータルで設定作業をして、出力された２つの情報をDNSに追加登録します。
・DNSへの追加情報１：グローバルIPアドレス
・DNSへの追加情報２：元のサイトのドメイン名称
2021/1/1 追記
Azure App Serviceを使っている場合、カスタムドメインを使うには、B1プラン (約1500円/月) に変更する必要があります
まずAzure App Serviceで「カスタムドメインの追加」をクリックして、(1) 自分が使いたいドメイン名を入力し、(2) 検証をクリックします。（このブログの場合、crossroad-tech.com）
続いて、(3)「ホスト名レコードタイプ」をA recordにします。
この画面を下にスクロールすると、このような画面になります。
ここに表示される表のTXTとAの２行をムームードメインの管理画面に入力します。
ムームードメインにログインしたら、ドメイン管理 / ムームーDNS を選択します。（赤枠です）
その後、スクロールして「設定２」の画面に２つの情報を登録します。 １行目のwww CNAME hatenablog.com は、独自ドメインにしたときに登録済みの内容です。２行目が新規です。
| サブドメイン | 種別 | 内容 | 優先度 |
|---|---|---|---|
| www | CNAME | hatenablog.com | |
| A | IPアドレス | ||
| TXT | "App Serviceの名称".azurewebsites.net |
補足説明 (1)：Aレコード
App ServiceでWebサイトを作ると、グローバルIPアドレスが付与されます。このIPアドレスをDNSに登録することで、自分の持っているドメイン"crossroad-tech.com"と作ったWebサイトが紐づきます。
このようにIPアドレスとドメイン名を紐づけるとき、Aレコードという仕組みを使います。
補足説明 (2) : TXTレコード
DNSにテキストを登録するときに使います。今回はAzureポータルの指示に沿って、App Serviceで生成されたサイトのドメインを登録しました。
再度Azureポータルのカスタムドメインの画面に戻ります。
先ほどまで赤い警告マークがついていたドメイン所有権のアイコンが緑マークになります。ここに表示されている「カスタムドメインの追加」ボタンをクリックします。
(クリックしないと、カスタムドメインが有効になりません)
ここまで実行してから、ブラウザで https://crossroad-tech.com/ads.txt にアクセスするとこうなります。
いちおうこれで目的は達成したのですが、SSL対応していないと警告が出るので、次は証明書を設定します。
3. 証明書を設定して、httpsアクセスで警告が出ないようにする
3.1 証明書を作成する
Azureポータルの内部で購入して登録しました。Azureポータルから設定すると簡単ですがお金もかかるので、Let's Encryptなどを使用して、無償で証明書を発行して登録することも可能です。
Let's Encryptについては、例えば以下を参照ください。 （私は未検証です）
Azureポータルの全てのサービスから「App Service 証明書」を選択するか、App Serviceの「TLS/SSLの設定」画面から「証明書の購入」を選択する場合のどちらでもよいです。
App Service証明書を選択した後は、以下の記事の「作業３」と同様に実行します。
(「作業１」、「作業２」は、ムームードメインではなく、Azure DNSを使った場合の手順です)
実行できたら、App Service証明書の「手順２：確認」をクリックして、表示されるドメイン確認トークンという20文字程度の文字列をコピーします。
3.2 DNSに証明書作成画面で生成された文字列をTXTレコードで登録する
もう一度ムームードメインの管理画面に戻り、3.で示した「設定２」にTXTレコードを追加します。追加すると、全部でこのような表になります。
| サブドメイン | 種別 | 内容 | 優先度 |
|---|---|---|---|
| www | CNAME | hatenablog.com | |
| A | IPアドレス | ||
| TXT | |
||
| TXT | ドメイン確認トークンに表示された文字列 |
Azureポータルに戻ります。このような画面になっていればOKです。
次に、App Serviceに証明書をインポートします。 TLS/SSLの設定をクリックし、下の画像の(1)、(2)の順番に進めます。
先ほど作成した証明書の名称が選択できます。App Service 証明書が検証されましたという表示が出たらOKをクリックします。
3.3 Azureポータルで証明書を登録する
App Serviceの「TLS/SSLの設定」画面を表示するとこのようになっています。
右下の「バインディングの追加」を選択します。次に出てくる画面にて、プライベート証明書の拇印の箇所で先ほど作った証明書の名称を選択して、「バインディングの追加」を選択します。
これで登録が完了します。ブラウザで https://crossroad-tech.com/ads.txt にアクセスするとこうなります。
これでようやく、目的の表示になりました。
4. 補足
4.1 Visual Studio Code のAzure App Service Extensionは、App Serviceの設定が固定化されている
このExtensionのバージョンがv0.16.4の時点では、App Serviceの場所が米国中部、料金プランがF1として作成されました。
料金プランは、作成後にAzureポータルサイトから「スケールアップ」を実行することで変更できますが、場所は変更できませんでした。
4.2 ads.xtxの配信が可能になった時、構文チェックができる仕組みがある（非公式）
ここのサイトでは、構文チェックができます。
私の場合、このようにOKが出ました。
5. おわりに
この対応後1日経ってからアドセンス管理画面を見ると、ads.txtの警告が消えていました。
Azureポータル、ムームードメインを行き来する必要があって少し手間ですが、何かの参考になれば幸いです。
