今回の意義

AWSへの知見を深める
代表的なサービスに触れるため

使用サービス

【AWS】
･AWS Certificate Manager
･Amazon CloudFront
･Amazon S3
･Amazon Route53
･AWS　CLI(VSCODE)

参考資料

構成図

S3の設定

・バケットの作成

・バケット名を指定

パブリックアクセス設定のチェックを外す。
※S3バケットへの直接アクセスではなく、CloudFront経由の独自ドメインでアクセスするように設定するため後ほどONにはするが、この段階ではOFFにする。

その他はデフォルト設定のままバケットを作成

バケット名を押下

プロパティ→静的ウェブサイトホスティング→編集

有効･indexhtmlを追加

次にアクセス許可→バケットポリシー
※先ほどパブリックアクセスを許可するようにチェックを外したが、ポリシーを設定しないとパブリックアクセスは許可されない。

以下を記述
Getオブジェクト(バケット内の情報は誰でも取得可能)を許可

{
  "Version": "2012-10-17",
  "Statement": [
      {
          "Sid": "PublicReadGetObject",
          "Effect": "Allow",
          "Principal": "*",
          "Action": [
              "s3:GetObject"
          ],
          "Resource": [
              "arn:aws:s3:::test26.co.jp/*"
          ]
      }
  ]
}

次にファイルの追加を実行
以下ページに戻り、アップロードを押下

事前に準備したindex.htmlファイルを追加

※プロパティ→静的ウェブサイトホスティングに行くとURLがあるのでそこで正しくつながるかを確認

ここまでの構成図

次にVSCODE(AWS CLIインストール済み)でファイルを編集し、デプロイする

先ほどのindex.htmlファイルをVSCODE上で開く

これを以下のように変更

実行すると以下のように

ターミナルへ行き、ファイルのあるディレクトリへ移動しローカルからS3へ保存

aws s3 cp index.html s3://test26.co.jp

先ほどと同様にS3のウェブサイトホスティングのURLから開いても下記のようになっていることを確認

ここまでの構成

※Cloud9→vscode(AWS CLIインストール済み)

ファイルの作成

cssとimageファイルをそれぞれ作成

AWSファイルにfavicon(ICOファイル)、CSSにはソースファイル(空)，イメージには画像ファイルを挿入（今回はLamdbaのマーク)。

そしてindex.htmlファイルを再度開き、下記のように変更

<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>初めてのAWS</title>
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div>
  </div class="icon">
    <img src="image/lambda.png">
      このページではAWSについて学んだことを書いていきます。
    </div>
  </div>
</body>
</html>

先ほどのファイルらを使用するように明記

実行結果としては以下のようになる

ちなみにCSSファイルに以下を書き込むと

body {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

配置場所が変わる

これらのファイルをS3にコピーするためにファイルのあるディレクトリへ移動し、ターミナルで下記コマンドを実施(.で全ファイル。--recursiveで再帰的に）

aws s3 cp . s3://test26.co.jp --recursive

S3に追加されていることを確認

Cloudfrontの設置

オリジン名を上記のURLにして作成


こちらのドメイン名で検索すると開けることを確認

キャッシュされていることを確認するためF12でdevelopertoolを開く

ネットワークを押下

サイトのリロードをするとファイルが表示される

lamdbaファイルのx-cacheにcloudfrontがある

この状態でWindowsなのでForce Reload を実行
Windowsなのでshift + F5
※Force Reload
Force Reload は Super Reload などとも呼ばれ、 Shift + Reload や DevTools の "Disable Cache" 相当の機能を有効にすると発生するものだ。
したがって、一般ユーザによる実行ではなく、開発者が実行するという意図で実装されている。

再度確認するとCloudfront(エッジ)からcacheされていることを確認
なのでわざわざオリジン(S3)から取りに行かなくて良いということを確認

Route53で独自ドメインを取得しS3にHTTPアクセスをする

※以前作成していたため作成方法は省略

登録済みのドメイン名でホストゾーンを作成し、レコード作成を押下
と、ここで、、、
ドメイン名とS3バケット名が一致していないとエンドポイントと紐づけできないことに気づく。。。
S3をドメイン名と同じにして再度作成。（バケット、ドメイン名は以降伏せます。)

なので改めてS3を作成してレコード設定(エンドポイントとの紐づけ)を完了し下記のように

しかし、ドメイン名が停止しており、時間がかかるため以下よりハンズオン動画の内容を抜粋していく。

本来はドメイン名で検索をかけると同様の画面が表示される

最終的な構成図

ユーザーが直接S3バケットを除くことを防ぎ、HTTPS経由でS3バケットへアクセスできるようにACMで証明書を発行する。

ACMを開きドメイン名を入力

続いてドメインの検証をする。方法は任意

※以下はDNSでの検証方法でCNAMEを作成し検証する

証明が完了したらCloudFrontへ戻る

HTTPをHTTPSにリダイレクトするように設定を変更

次にGenelalで編集

ここではCNAMEの変更(先ほど追加したもの)とカスタム証明書を選択

そしてRoute53のホストゾーン編集で先ほどS3エンドポイントを指定していたAレコードのものをCloudFrontディストリビューションを選択

これでHTTPSでの通信を確認できる！！

S3への外からのアクセスを制御

S3へ戻りバケットポリシーを変更,削除する

ウェブサイトホスティングも無効化する

続いてCloudFrontへ戻りオリジンの編集

オリジンドメイン名の再入力等

以降、S3の静的ホスティングで使用していたURLではアクセス不可になる。
S3のバケットポリシーを見てもCloudFront経由でのみアクセス可能な記述に変更されている

学習点

S3バケット名とドメイン名

S3バケットとドメイン名が一致していないとS3への紐づけができないということを認識できた。
Route53以外で作成したドメイン名だとどういう設定をする必要があるかは要勉強。。

S3の仕組み

S3への理解は資格勉強時にあったが、どういった形でウェブサイトとして機能するのかを認識できる良い機会となった。またAWS CLIを使用することでバケット間のコピーなども出来ることを認識でき、効率よく作業出来る方法も学ぶこともできた。