AWS 髙妻智一

AWSのCloudFrontとS3で静的サイトをホスティングする方法




S3だけでホスティングする場合

S3だけの場合は簡単でホスティングしたいhtmlをS3に配置し、ホスティングの機能をONにしてインデックスドキュメントを選択するだけです。

S3のプロパティからStatic website hostingを選択し、インデックスドキュッメントを入力します。これだけでS3での静的サイトのホスティングが完成します。

CloudFrontを使ってホスティングする場合

CloudForntを使う場合はS3のホスティング機能を無効にしておく必要があります。

CloudFrontの設定

ホスティングする場合はwebのGet Startedを選択します。

Origin Domain NameにS3を選択します。

キャッシュの設定は静的サイトの場合デフォルトの設定で問題ないです。Cache Based on Selected Request HeadersはNoneにしておくとキャッシュを活用できます。

Distribution SettingはWAF（Web Application Firewall）の設定やドメインの設定ができます。ここの詳細は別途書きたいと思います。

後の設定は特に何もいじらなくて大丈夫です。最後にCreate Distributionを押して完成です。

CloudFrontのキャッシュ削除

S3にアップロードしたファイルを更新した場合はクラウドフロントのキャッシュを削除しないといけません。削除はタブのInvalidationからできます。

サンプルのようにファイルを指定もできますし、*を使って全てのファイルのキャッシュを削除することもできます。以前はキャッシュの削除に10分程度かかっていましたが、今は1,2分で完了するように改善されています。

まとめ

CloudFrontとS3を使うと静的サイトのホスティングがものすごく簡単にできます。サーバーを用意しなくていいので十分な負荷にも耐えられるし、世界中のエッジロケーションを使うことで世界中どこからアクセスしても遅延なく配信できるのが素晴らしいです。

CloudFrontは静的サイトだけでなくELBと連携することで動的サイトも構築できます。SPAの構築も慣れれば簡単にできるので今後紹介したいと思います。

The following two tabs change content below.
Twitter のプロフィール

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。２年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら




コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。