はじめに

Cloudfront + S3 + APIGateway + Lambda を使い、初めてサーバレス環境を構築しました。
自身の備忘録として記述しますが、どなたかのお役に立てたら光栄です。
（不足が多々あるかと思いますがご容赦ください！）

構成について

• CloudFront Functions を利用し、特定のIPアドレスのみアクセスを許可
• 静的コンテンツは S3 Bucket へ保存
• 動的コンテンツは API Gateway を利用
• Lambdaはデフォルトの"Hello Lambda" を利用

最終的に上記構成を目指します。
本記事ではまずCloudFrontとS3Bucketを構築します。
（CloudFront Functionsは別記事とします）

環境構築

①静的コンテンツ保存用 S3 Bucketの構築

• AWSログイン後にS3へ遷移したあとにバケットを作成する。
  以下の項目へ値を入力し、バケット作成をクリックする。
  ・バケット名　※グローバルに一意なバケット名を指定してください。
  ・AWSリージョン：ap-northeast-1

バケット作成後の設定は後述にておこなうので以上で作成は完了となります。

②CloudFrontの構築

• CloudFrontへ遷移後、ディストリビューションを作成する。
  以下の各項目を設定していきます。（記載の無い項目はデフォルト設定ままです）
  • オリジンドメイン：作成したS3ドメインを指定します。
  • オリジンアクセス：Origin access control settings(recommended)
    • Origin access control：※初めて作成する場合は「コントロール設定を作成」から設定
      
      
      • 名前：デフォルト設定のまま
      • 説明：任意入力
      • 署名動作：署名リクエスト（推奨）
        • 認証ヘッダーを上書きしないにはチェックしない
      • オリジンタイプ：S3
  • ウェブアプリケーションファイアウォール（WAF）
    • 「セキュリティ保護を有効にしないでください」へチェック
      
      上記の入力できたら「ディストリビューションを作成」をクリック。
      ディストリビューションが正常にされたことを確認します。
      「S3バケットポリシーを更新する必要があります」と表示されポリシーがコピーできるようになっているので、ポリシーをコピーし、メモ帳などに貼り付けておきます。
      

③ S3 Bucket ポリシーの修正

• バケットポリシーの修正
  ①にて作成したバケットをクリックし、アクセス許可タブをクリックし、バケットポリシーの編集をクリックする。
  
  バケットポリシーの編集画面になるので、CloudFront作成後にコピーしメモ帳に保存していた内容を貼り付け、変更の保存をクリック
  

④動作確認

• 確認用の index.html ファイルをS3へ保存します。
  （index.html の指定はないので、任意のテストファイルをご利用ください。）

• 作成したCloudFrontをクリックし、一般タブのディストリビューション名をコピーし、Chrome等のブラウザで参照できるかを確認します。
  
  アクセスすると「AccessDenied」のエラー画面が表示されます。
  
  URLの末尾に /index.html をつけてみると表示されます。
  
  CloudFrontにはURLにindex.htmlを省略できたりしますが、現時点では設定していないのでURLの末尾に /index.html をつける必要があります。

次回以降で設定＋APIGateway構築を進めていこうと考えております。
記事は以下となります。
・サーバレス環境構築（APIGateway+Lambda）