以前、静的ウェブサイトをGitHub Pagesで公開したことがありました。今回はそれのAWSバージョンです。なぜやったかと言われれば、やったことないからやりました。

GitHub Pages に比べ、複雑でいろいろ設定が必要でしたが、面白かったです。AWSがちょっとだけ分かった気がします。

AWSでコンテンツを配信するには

今回AWSの配信方法についていろいろ調べてみた結果、このサイトが1番いいと思いました。

最初はS3だけで公開していました。上記のサイトでいう「小結」ですね。ちょっと違うのはDNSを設定することで独自ドメインで公開していました。

この方法はとっても簡単で素晴らしいのですが、HTTPSができないというのが個人的に許せませんでした。（パフォーマンスもあまりよろしくないそうですが自分のサイトはそこまでアクセスはないので…）

なので「横綱」で構築してみました。一応言葉で説明すると、アクセスをRoute 53のAレコードで CloudFrontがある場所を示すという構成です。

最終構成

最終的にはこのような構成になりました。今回はthesis.so-ta.netというURLにアクセスすると自分が作成したサイトが表示されます。

開発者 (サイトを作る人) はGitHubにコードを書くだけ。コードを書くと、GitHub Actionsが動き、S3にアップロードされる。S3は変更があったらBuildされるのでここで静的ウェブサイトのデータが完成する。それをCDNであるCloudFrontに置いておくことで速く、負荷分散に強くなる。

ユーザ(サイトを見る人)側の動きはthesis.so-ta.netをみようとするとまず、Google DomainsのDNSに飛ぶ。Google Domains DNSではthesisというサブドメインはNSレコードでRoute 53に委任してあるので、Route 53にIPアドレスを聞きに行く。Route 53はCloudFrontのIPアドレスを知っているので渡す。IPアドレスが分かったので、ユーザはCloudFrontをみに行き、データを取得する。

参考にしたサイト

参考にしたサイトを載せておきます。

大体の手順

• https://s8a.jp/vue-js-github-aws-s3-auto-deploy

HTTPSにする方法

• https://dev.classmethod.jp/articles/tls-for-s3-web-hosting-with-cloudfront/

Google Domainsのサブドメイン をRoute 53に委任する方法

• https://dev.classmethod.jp/articles/create-subdomain-on-route53/

AWSのコンテンツ配信の方法をまとめたサイト (おすすめ)

• https://dev.classmethod.jp/articles/static-contents-delivery-patterns/