KaQiita

新米 Web エンジニアが適当なことを書いてます。温かく見守ってやってください。

CloudFront と S3 で静的サイトをサーバーレスで作る

はじめに

最近少し AWS の勉強をしていて、ふとこんなことを思いました。

そこでまずは「CloudFront + S3」でサーバーレスな静的サイトを作ってみようと思います。

f:id:KakkiiiiKyg:20200302232600p:plain

S3 の設定

まずは S3 の Web ホスティング機能を使って、S3 のみの静的サイトを構築していきます。

バケットの作成

まずは S3 のコンソールに入ってバケットを作成します。

f:id:KakkiiiiKyg:20200302233304p:plain

次に「バケット名」と「リージョン」を設定して「次へ」を押します。その後の「オプションの設定」「アクセス許可の設定」はデフォルトのままで OK です。そのままバケットを作成します。

f:id:KakkiiiiKyg:20200302233926p:plain

ホスティングの設定

バケットが作成できたら、それを静的サイトのホストとして使用するための設定を行います。まずは「プロパティ」をクリックします。

f:id:KakkiiiiKyg:20200302234303p:plain

次に Static website hosting をクリックします。

f:id:KakkiiiiKyg:20200302234837p:plain

「このバケットを使用してウェブサイトをホストする」を選択して、インデックスドキュメントには index.html、エラードキュメントには error.html と入力し保存します。これでホスティングの設定は完了です。

f:id:KakkiiiiKyg:20200302235318p:plain

アップロード

ではこの index.html と error.html をアップロードしていきます。作成したバケットを選択して、アップロードボタンをクリックします。

f:id:KakkiiiiKyg:20200308132038p:plain

アップロード画面が現れるので、ファイルをドラッグ & ドロップしてアップロードボタンをクリックします。これでアップロード完了です。

f:id:KakkiiiiKyg:20200308132326p:plain

この index.html と error.html はどんなファイルでも良いのですが、私は本当に最低限しか書いていない以下のようなファイルにしました。

index.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>index</title>
<p>index</p>

error.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>error</title>
<p>error</p>

バケットポリシーの設定

S3 へのファイルのアップロードが完了しましたが、これらのコンテンツをインターネットに公開するにはバケットポリシーを変更する必要があります。もう少し具体的に言うと、全てのユーザーに対して S3 の GetObject 操作を許可する必要があります。

そこでまずは S3 へのパブリックなアクセスを許可します。デフォルトではパブリックなアクセスは全てブロックされることになっているので、「アクセス権限」⇨「ブロックパブリックアクセス」から「パブリックアクセスをすべてブロック」のチェックを外します。

f:id:KakkiiiiKyg:20200308134449p:plain

そして「アクセス権限」の「バケットポリシー」に以下のように記述します。

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"PublicReadForGetBucketObjects",
      "Effect":"Allow",
      "Principal":"*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::kaqiita-test/*"]
    }
  ]
}

f:id:KakkiiiiKyg:20200308133513p:plain

これでアップロードしたファイルがインターネットに公開されました。試しに「プロパティ」の「Static website hosting」からエンドポイントを確認してアクセスしてみましょう。

f:id:KakkiiiiKyg:20200308134834p:plain

このように index.html が表示されました。

f:id:KakkiiiiKyg:20200308135111p:plain

因みに存在しない path を叩くと、ちゃんと error.html が表示されます。

これで S3 の方は設定終了です。あとは作った静的ファイルをどんどんアップロードしていきましょう。

CloudFront の設定

S3 だけで一応静的サイトはできていますが、CDN サービスを使うことで負荷分散・キャッシュを用いた速度改善ができるので、CloudFront も使っていきます。

まずは CloudFront のコンソールに入って「Create Distribution」を選択します。

f:id:KakkiiiiKyg:20200308151228p:plain

コンテンツ配信方法の設定

次の配信方法では「Web」の Get Started を選択します。「RTMP」は動画ストリーミング配信などを行う場合に使用するものです。

f:id:KakkiiiiKyg:20200308151515p:plain

Distribution の設定

最後に Distribution の設定を行います。Origin Domain Name から先程作った S3 のバケットを選択して、Origin ID が変わったことを確認しましょう。その他の設定はデフォルトのままで大丈夫です。

f:id:KakkiiiiKyg:20200308151854p:plain

以上で CloudFront の設定は終了です。

確認

CloudFront の一覧画面から今回作ったものの Domain Name を確認して、domain name/index.html とブラウザのアドレスバーに打ち込んでみると、無事 index.html が表示されたかと思います。

終わりに

これで簡単に静的サイトをサーバーレスで作ることができました。ここからさらに Route 53 を使うことで、独自ドメインを使うこともできます。参考文献にはその辺のやり方も書いてあったので、機会があればやってみようと思います。

参考文献