ぴろログ

Output Driven

AWSをフル活用してブログをdevドメインに移行した

Googledevドメインの提供を開始しました。

jp.techcrunch.com

年間で12ドル(1,400円)なので、サクッと買っちゃって、このブログをblog.pirox.devに移行してみました。

もともと「pirox.com」が欲しかったのですが、すでに誰かに取得されてしまっていて泣く泣く「blog.pirox.dev」というアホっぽいドメインを使っていた経緯があります。これで気持ちよくブログを運営できます。

前提

このブログはAWSのLightSailで用意されているWordPressイメージ(bitnami)を使って構築しています。

また、非SSL対応のまま放置しており、Chromeにアラートを出されちゃうようなブログだったので、SSL対応も一緒に実施しました。

作業の流れ

こんな感じです。フル活用は言い過ぎかもしれないです。

  1. devドメインの取得
  2. ブログをdevドメインに移行
  3. ドメインからのリダイレクト処理
    • S3とCloudFrontでリダイレクト処理

devドメインの取得

Google Domainsでdevドメインを購入します。

  • お好みのドメイン名を入力して購入可能かチェック。(早い者勝ち!!)

  • pirox.devが取得可能だった。購入可能なら緑のチェックマークが付いている。+マークをクリック後、カートマークをクリックしてお会計へ。
    ※購入時にキャプチャとるの忘れてたので、↓の画像は購入後に再検索したもの。 (Unavailableとなっているのはそのせい。)
  • Registrationの設定画面
    • Privacy protection is on:ONにしておくと、WHOISに個人の連絡先ではなくレジストラの代替連絡先を載せてくれる。
      • 余談ですが、GDPRではWHOISで個人情報を公開するのもアウトらしいです。マスキングだらけで全然わからん。
    • Auto-renew is on:契約の自動更新機能。迷わずON。
    • で、CHECK OUT。
  • その後、契約者情報として名前やクレカ登録、レジストラの指定、連絡先メールアドレスのバリデーションがあったはず。よしなに進めてください。

これでdevドメインをゲットできました。

devドメインの特徴に「HSTS(HTTP Strict Transport Security)」機能があります。これは当該ドメインへの接続をHTTPSに限定する、というもので、HTTPでアクセスすると強制的にHTTPSへ切り替えられます。HTTPS非対応のWebサイトに警告出したり、devドメインはHSTSにしたり、オレたちがインターネットをつくってるんだ感がいいですね、Google

ブログをdevドメインに移行

いくつかのステップを踏んで、このブログをblog.pirox.devに移行しました。

ドメインの管理をRoute53へ

AWS側でドメインのレコードを管理した方が楽なので(ACM証明書の発行とか)、Route53に管理を移行します。

  • Route 53 でHostedZoneを作成
  • Google DomainsでName serversの設定
    • DNSを選択
    • Name servers
      • User Cusom name serversを選択
      • Route 53で確認したAWSのName Serverを一個ずつ登録
      • これで完了(画像)

ACMによるSSL証明書の発行

AWS Certificate Manager (ACM) で、AWS発行のSSL証明書(無償)を取得します。

  • Certificate Manager
    • 証明書のリクエストをクリック。
    • パブリック証明書のリクエストを選択。
    • ドメイン名の追加
    • 検証方法の選択:DNSの検証
    • 確認画面で確定とリクエストをクリック。

DNSの検証画面が表示され、検証用のCNAMEレコードを登録するよう指示されます。対象ドメインをRoute53で管理していると、クリック一つで自動登録してくれるので便利です。

CNAMEレコードを登録後、5分ほどで証明書が有効になります。状況が発行済みになればOKです。

名前はNameタグを設定することで任意の文字列を表示できます。

CloudFrontでSSL対応 & WordPress用のカスタマイズ

ちょうどクラメソさんが記事を書いてくれていたので、こちらを参考に進めました。

dev.classmethod.jp

基本的にこのまま設定していけばOKです。というか、この通り設定しないとエラーになります。(なりました。)CloudFrontの設定ミスってWordPressの管理画面に入れなかったり、コード記述場所をミスってブログにアクセスできなくなったり。。写経するが如く、記載の通り進めてください。

これでdevドメインへの移行が完了です。

ドメインからのリダイレクト

このブログを立てて半年ほど経つのですが、ブログ名「ぴろログ」でググるといつの間にかトップに表示されるようになっていました。

ブログを始めたときから「検索で一番をとれたらいいなぁ」とは思っていたのですが、ほとんど記事を書かずに目標を達成。ブログ名を決めるときにリサーチした甲斐がありました。(他のぴろログさんは更新止まってた。)

そういう訳で、旧ドメインから新ドメインへのリダイレクトが必要です。 どういう訳かというと、検索結果を見ての通り、現時点でこのブログは「https://blog.pirox.dev」で認識されています。これを捨ててゼロからblog.pirox.devで得点稼ぎをするのはもったいないので、リダイレクトで繋いであげて、過去の資産をそのままに移行するのが目的です。いわゆるSEO対策ってやつです。また、どこかにいらっしゃるかもしれない過去記事のリンクを持っている方に申し訳ないですしね。

で、お馴染みの.htaccessファイルでリダイレクト処理をかけようとするもうまくいかない。。なんでやねんと調べていると、どうもbitnamiイメージのWordPressはセキュリティ上の理由で.htaccessファイルを無効にしているらしいです。

んでんで、/opt/bitnami/apache2/conf/bitnami/bitnami-apps-prefix.confにリダイレクトの記述を入れるっぽい。 Understand The Default Apache Configuration / bitnami Documentation だけどなかなかうまくいかない。。 こうして、わたしはフルマネージドAWS先輩を頼ることにしました。

AWSのS3のWebホスティング機能とCloudFrontを使って、Webサイト移転時のリダイレクトを実現できます。 CloudFrontを使うのは、S3だけではカスタムドメインSSL対応が実現できないから。つまり、http://blog.pirox.devはリダイレクト可能だけど、https://〜でアクセスされるとリダイレクトNGです。この制約に気づかずS3だけで構築して満足していました。後日HTTPSで接続した際に、私の戦いがまだ終わっていなかったことを悟りました。

前置きが長くなりましたが、設定方法です。 こちらの記事を参考にさせていただきました。

S3の設定

CloudFrontの作成

  • CloudFrontのコンソール画面
    • Create Distribution
    • Webを選択して「Get Started」
    • 各種設定(記載のしていないところはデフォルト値のまま)
      • Origin Settings
        • Origin Domain Name:S3のウェブホスティング用エンドポイント
          • 今回はblog.pirox.dev.s3-website-ap-northeast-1.amazonaws.com
        • Origin ID:custom-blog.pirox.dev
        • Default Cache Behavior
        • Distribution Settings
          • Alternate Domain Names(CNAMEs):旧ドメイン名(blog.pirox.dev
          • SSL Certificate:Custom SSL Certificate旧ドメインblog.pirox.dev)のACM証明書を選択
      • 「 Create Distribution」をクリックしてデプロイ開始
        • 時間かかかります。結局1時間ぐらい待ちました。

Route 53でALIASレコード登録

ドメインblog.pirox.dev)をCloudFront(d3oxu3f7e55lpe.cloudfront.net)に紐付けます。

  • Route53
    • blog.pirox.devAレコードを選択。
      • Alias:Yes
      • Alias Target:d3oxu3f7e55lpe.cloudfront.net

これで https://blog.pirox.dev から https://blog.purix.dev にリダイレクトされるようになりました。

いやー、ここまで長かった。

つぶやき

お気づきの方もいらっしゃるかもですが「www.blog.pirox.dev」も同様にリダイレクト処理しています。(CNAMEで「blog.pirox.dev」と紐付けたのですが、うまくリダイレクトされなかったので。)

あと、エラー対応での設定変更時にCloudFrontが旧キャッシュを返してくるので、そこに気づかずハマったりしました。設定を変えてアクセスし直しても、それが反映された画面にならず。 裏側の設定を変更したときはCloudFrontのキャッシュを削除(Invalidation)することをお忘れなく。(もちろんWebブラウザのキャッシュも。)


今回いろいろ大変で、はてブロ使っときゃ良かったな、、と思いました。