はじめに
こんにちは。Tsukasaです！
先日プレーリーカードでデジタル名刺を作った記事を書きましたが、今回はここにAWSの技術を追加してみようと思います。
これは最近勉強会でよくお会いしていて、私も尊敬しているumitsuさんが実装していたということもあり、今回はumitsuさんのQiita記事を参考に行いたいと思います。
今回やること
今回やることの構成図はこのようになります
プレーリーカードの自分の自己紹介ページをHTMLファイル化して、S3バケットに保存します。
その後CloudFrontに連携して高速ウェブホスティングを実現します。
ファイル名は必ずindex.htmlとします。
S3バケットの実装
それではまずS3バケットの実装から始めます。
バケット名は唯一無二のものにする必要があります。
デフォルトでは「パブリックアクセスをすべてブロック」にチェックが入っているかと思うので、今回はこれを解除します。
S3バケットを作成できたら、プロパティタブに行きます。
静的ウェブサイトホスティングを編集します。
「静的ウェブサイトホスティング」の「有効にする」にチェックを入れます。
「インデックスドキュメント」に「index.html」と入力します。
ここまでできたら、一番下までスクロールして「変更を保存」します。
その後自分のプロフィールページのHTMLファイルをS3バケットにアップロードします。
CloudFrontの実装
コンソール画面からCloudFrontを検索します。
その後ディストリビューションを作成画面から以下の画面を開きます。
ここではDistribution nameを指定します。
オリジンアクセス名に先程作成したS3を指定します。
Browse S3をクリックすると先程作成したS3バケット名が表示されるので、こちらを選択します。
その後、ディストリビューションを作成した後、ビヘイビアを編集で設定を変更します。
「ビューワープロトコルポリシー」を「Redirect HTTP to HTTPS」に変更します。
「キャッシュキーとオリジンリクエスト」をCache policy and origin request policy (recommended)」を選択します。
「Origin access control settings (recommended)」を選択します。
ここまでできたら「変更を保存」をクリックして変更を保存します。
Origin Access Control（OAC）の設定
ここまでS3バケットの作成とCloudFrontのディストリビューションの作成も行いました。
しかし、このままではせっかく作ったものも繋がりません。
そのため、この2つを繋ぐためにOrigin Access Control（OAC）の設定が必要になります。
まずは先程作成したディストリビューションページに行き、オリジン編集画面に行きます。
そうすると下記のようにポリシーをコピーする箇所があるので、コピーします。
その後、S3バケットを再度開き、先程作成したバケットのページに行きます。
「アクセス許可」のタブを開きます。
一番下まで来ると「バケットポリシー」の項目があるので、それを編集して、先程コピーしたアクセスポリシーを貼り付けます。
動作確認
設定は以上になります。
それでは動作確認をしようと思います。
CloudFrontの画面に行き、ディストリビューション名がありますので、それをコピーします。
コピーしたURLをブラウザに貼り付けます。
おーー！！ちゃんと表示されました！！
これで私もCloudFrontとS3を用いて高速ウェブホスティングを実現できました！！！
......あれ...??
確かに表示はされているけど、何かがおかしい。。。
文字化けしている？？
せっかく表示ができても、これでは何も読めません。
修正する必要がありますね。
この修正は次回の記事で行いたいと思います！
最後に
いかがでしたでしょうか？
プレーリーカードの自分のページをS3とCloudFrontを用いて簡単に高速ウェブホスティングができました！
皆さんも是非試してみてください！