ポンコツエンジニアのごじゃっぺ開発日記。

いろいろポンコツだけど、気にするな。プログラム&ロボット大好きなポンコツが日々の記録を残していきます。 自動で収入を得られるサービスやシステムを作ることが目標!!

このブログのサブドメインをblogからwwwに移行した話。

今回の記事では、このブログ(はてなブログ)のURLでサブドメインをblog→wwwに変更したときに行った対応を書きたいと思います。 - 変更前:blog.pnkts.net (以降、blogと表現する) - 変更後:www.pnkts.net (以降、wwwと表現する)

そこで、古いドメインにアクセスしてきた人を新しいドメインにリダイレクトしてあげるように設定する必要があります。 対応としてはそのような結果になれば良いのですが、手順としてはたくさんあるので、まとめてみようと思います。

理想な最終ゴール

最終的なゴールの形としては、以下のようになる

f:id:ponkotsu0605:20190721234019j:plain

  • 古いドメインであるblogにリクエストを送るとステータスコードで301が返ってきて、wwwにリダイレクトされる
  • 新しいドメインであるwwwにリクエストを送るとはてなブログにアクセスできる

このようにすることで、古いドメインは引っ越しましたということでリダイレクトさせる。

ステータスコードについて

また、ステータスコードについてですが、301302では、同じリダイレクトのように見えますが、意味がちょっと違います。

  • 301:恒久的な転送
  • 302:一時的な転送

このように、302でリダイレクトをしておくと、Googleなどの検索エンジンには一時的なので、きっとそのうちこっちのドメインに戻ってくるよ!って感じ(テキトーな表現)なので、今回のように完全にドメインを変更する場合は301でリダイレクトしておく必要があります。

wwwの向き先をはてなブログに設定する

まずは、DNSレコードの設定を行います。

Hostname(ホスト名) Record Type(レコードタイプ) Address(IPアドレス)
blog CNAME hatenablog.com.
www CNAME hatenablog.com.

(自分は昔の名残でFC2ドメインを使用しております。そろそろお名前.comに移行させたい。。) このように、wwwについて、はてなブログに届くように設定します。

はてなブログのドメインの設定を変更する

また、はてなブログ側の独自ドメインを設定するところの設定も変更しておく必要があります。

f:id:ponkotsu0605:20190721234844p:plain

今までだと、blog.pnkts.netになっているところをwww.pnkts.netに変更します。

いったんblogをwwwに302でリダイレクトしておく

お名前.comやFC2ドメインなどで設定できるDNSレコードの設定だと、URLのリダイレクトは302の一時的な転送になってしまいます。 なので、自分でどうにかして301で返すような仕組みを作らないといけません。 ただ、時間がかかるし、とりあえずはてなブログの設定を変えた以上、古いドメインでアクセスしてくるとはてなブログのエラー画面が表示されていまいます。 そこで、とりあえずここの手順としては302でもいいので、リダイレクトをさせておくことにしておきましょう。

Hostname(ホスト名) Record Type(レコードタイプ) Address(IPアドレス)
blog URL Redirect www.pnkts.net
www CNAME hatenablog.com.

このように設定することで、httpやhttpsのどちらでも古いドメインのblogにアクセスしてくると、そのままwwwにドメインだけを変更してリダイレクトしてくれるようになります。 もちろん、https://blog.pnkts.net/AAAhttps://www.pnkts.net/AAAにリダイレクトしてくれます。

いったん、この設定で、理想の状態に近いものが完成します。 といっても、リダイレクトのレスポンスのステータスコードが302になってしまっていますが。ここを次の手順から修正してきます。

リダイレクト用のインスタンス用意する

インスタンスの作成

リダイレクト用のため、スペックは最低のもので問題ありません。 awsだったらt2.microとかでもいいし、gcpだったらgceの最小スペックで問題ありません。

apacheを起動させておく

yum install httpd
systemctl start httpd

また、.htaccessを使えるようにするために、httpd.confを修正します。

vim /etc/httpd/conf/httpd.conf

### httpd.confの修正
### AllowOverride Allに設定する

systemctl restart httpd

参考サイト

kenzo0107.hatenablog.com

リダイレクトの処理を.htaccessを使って行う

/var/www/html直下に.htaccessを作成することで、いろんな処理をさせることができるようになります。

cd /var/www/html/
vim .htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !^.*hc\.(html)$ [NC]
RewriteRule ^(.*)$ https://www.pnkts.net/$1 [R=301,L]

上のようにすることで、リクエストをhttps://www.pnkts.netに飛ばすことができます。また、$1などの書き方をすることで、https://blog.pnkts.net/AAAhttps://www.pnkts.net/AAAに飛ばすことが可能になります。 また、ここで、hc.htmlのリクエストに関してはリダイレクトはせずにそのままファイルを返すようになっていますが、こちらは、後の手順で設定するヘルスチェックで使用する項目になります。

HTTPS

また、httpsのリクエストが来てもちゃんとリダイレクトしてくれるように、SSL証明書を作成したりする必要があります。

前に紹介したブログの構成のように、LBを挟むことで、httpでもhttpsでもそのリクエストをhttpのリクエスト(80番ポート)でインスタンスに変換することができます。

www.pnkts.net

また、前にも書きましたが、以下のようにLet's Encryptを使用することで、無料でSSL証明を使用することができます。

www.pnkts.net

そして、DNSレコードをそのLBのIPアドレスやエンドポイントを設定することで、そのインスタンスに飛ばすことができます。

Hostname(ホスト名) Record Type(レコードタイプ) Address(IPアドレス)
blog A XXX.XXX.XXX.XXX
www CNAME hatenablog.com.

(XXX.XXX.XXX.XXXにはLBのIPアドレスを設定します) これを組み合わせることで、httpのリクエストとhttpsのリクエストをスムーズにリダイレクトさせることができます。

LBのヘルスチェックについて

LBを設定している以上、ヘルスチェックを受けつけるヘルスチェック用のAPIを用意してあげる必要があります。 そこで、ここでは、hc.htmlというファイルを作成してそれについては200を返すようにしておきます。

vim /var/www/html/hc.html

### 中身をOKとか書いておくとわかりやすいかも

また、上でhc.htmlだけはリダイレクトしないように、.htaccessを設定しているため、http://XXX.XXX.XXX.XXX/hc.htmlhttp://blog.pnkts.net/hc.htmlにアクセスするとOKが返ってくるようになります。もちろんそれ以外のリクエストはwwwにリダイレクトされます。

設定完了

以上の手順を完了すると、すべての手順が完了になり、上で紹介した理想のリクエストの流れになると思います。 f:id:ponkotsu0605:20190721234019j:plain

あとは、GoogleアナリティクスやGoogle Search Consoleなどの設定を修正することで、可能になります。 また、しっかりと301のリダイレクトにさせることができたので、Google Search Consoleのドメインの変更もスムーズに設定できるかと思います。

まとめ

サブドメインをwwwにすることで、Googleアドセンスなどの広告掲載も行うことができるらしいので、今回はその準備として対応してみました。 301で新しいURLにリダイレクトさせるようにできたので、SEO対策としても適切に設定できたかと思います。