LoginSignup
0
1

More than 5 years have passed since last update.

今年は令和何年.com を作った: AMP + Route 53 + CloudFront + S3

Posted at

TL; DR

  • 今年は令和何年.com を作った
  • 4月1日21時位から作って25:30頃完成したので4時間半くらいかかった
  • AMP対応のペライチHTMLと画像を S3 に置いて、CF でキャッシュしつつ HTTP/2 で待ち受け、 Route 53 のエイリアスを使って apexドメインで Aレコードとして CF のIPアドレスを返す

はじめに

需要がありそうだったら各手順をもう少し詳細にまとめようかなと思っていますが、一旦今日は大まかに触れるくらいにしています。

眠い目をこすりながら書いているので、厳密さに欠けたり誤りがある可能性があります。お気づきの方は編集リクエストかコメントでお知らせ頂けると幸いです。 :bow:

AMP

これはあらかじめ表示できる要素を限定したり、特定のタグの使用を強制することで表示を早くできるようにする技術です。例えば、a タグは target="_blank" 以外には使用不可だったり、画像の表示には img タグではなく amp-img を使うといった制約があります。

ただ、これ以外にも他にもたくさんの技術が組み合わさってAMPが成り立っています。詳しくはAMP Startが参考になります。

HTTP/2

これはサーバとクライアント間でファイルの送受信毎に接続を繋がないで1つの接続を使い回す(並列で利用する)ことにより、無駄な通信をカットして早く表示できるようにする仕組みです。

他にも要件として接続のプロトコルがhttpは許容されない等いろいろあります。

実際にどれくらい速さが変わるのか、デモを見られるサイトがあるので紹介します。
http://www.http2demo.io/

SSL/TLS証明書の利用

証明書の利用により、通信を全て暗号化しています。これにより、通信経路上の第三者に通信内容を盗聴される危険性を大幅に減らし、仮に通信内容を改竄された時に、そのことが検知できるようになっています。

ペライチのページにそこまでは正直オーバースペック気味ですが、前述のHTTP/2の恩恵を受けるためには必須です。

証明書は ACM を使用して無料で発行してもらいました。特に証明書の発行維持にはお金はかからないのですが、CF に紐付けるのなら us-east-1 で作らないとダメなので注意が必要です。

サーバレス

前述の通りサーバを持たず、配信は CF + S3 で行っています。

任意のDNSで CNAME を設定することで、CloudFront に独自ドメインを設定することができます。つまり、一般的なDNSサーバを使用すると www.example.comhttps://test.example.com にアクセスされた時、 CF に到達することができます。

しかし、 CNAME を apexドメイン(www.等のサブドメインが付かないドメイン)に設定することが RFC 上できません。つまり、 example.comhttps://example.com には CF を設置することができません。

ところが、Route 53 は独自の「エイリアス」という機能を持っており、これを使うと apex ドメインに対し、 CloudFront, ELB 等を A レコードのように設定することができます。これにより、従来は CNAME を設定できないはずの apex ドメインにおいて CloudFront による待ち受けを実現しています。

IPv6

これは CF を使っていることと Route 53 を使っていることで簡単に実現できたので、おまけ程度に有効化しました。

手順は単純で、 CF の設定項目で General -> IPv6: Enabled にして、Route 53 で AAAA レコードをエイリアスで作成するだけです。

動作の確認をするIPv6環境が手元にないのでテストしていませんが、おそらく動くのでは無いかと思います。

おわりに

ここまでご覧いただきありがとうございました。この記事のどこか一部でも参考になれば幸いです。
参考になったらページ左側の「いいね」ボタンを押したり、 今年は令和何年.com をツイートしていただけると励みになります :pray:

本記事中で何かあれば、編集リクエスト、コメント欄、TwitterのDMここに記載のメールアドレスまでお願いします。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1