【AWS】 Route53+ACM+CloudFront+S3で静的Webサイトの構築

Last updated at 2024-05-19Posted at 2024-05-18

今回の意義

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" 相当の機能を有効にすると発生するものだ。
したがって、一般ユーザによる実行ではなく、開発者が実行するという意図で実装されている。