挨拶
はじめまして！ クラウドエンジニアを目指しているShowです！
前回はAWSアカウントの作成、IAMユーザーの作成、AWS Budgetsによる予算アラートの設定を行いました。
今回はS3の静的ウェブサイトホスティング機能を使ってWebサイトを公開します。
想定するお客さんからの要望
・簡単な企業の紹介ページを低コストで公開したい
・サイトはHTMLと画像だけのシンプルなもの
・サーバー管理などの面倒なことはしたくない
そんなときはS3の静的ウェブサイトホスティングが最適です。
なぜS3静的ウェブサイトホスティングなのか？
この要望を整理すると「低コスト・シンプル・サーバーレス」がキーワードになります。
そこで最適解となるのが S3の静的ウェブサイトホスティング です。
S3を選ぶメリットは以下の通りです。
-
低コスト
サーバーを常時稼働させる必要がなく、料金はストレージ代と転送料のみ。小規模サイトなら月数円〜数十円で運用可能。
-
サーバーレスで管理が不要
EC2のようにOSのインストールなどをする必要がない。
HTMLや画像をS3にアップロードするだけでサイトを公開できる。
-
高可用性とスケーラビリティ
S3はAWSが自動的に冗長化しており、障害に強い。急なアクセス増にも対応できる。
-
公開がシンプル
管理者がやることは「ファイルをアップロードして公開設定する」だけ。
事前準備1（index.htmlとstyles.cssの作成）
Chat GPTに企業のサイトの index.html と styles.css を書いてもらいました。
思った以上に良いものができて驚きました。
このサイトをS3にアップしていきます！
事前準備2(デフォルトのリージョンを東京（ap-northeast-1）に変更)
リージョンという単位で世界中にAWSは存在しています
これがデフォルトだと、東京になっていないので変更していきます
コンソール画面右上のから、東京を選択してください
右上の表示が「アジアパシフィック（東京）」になっていることを確認してください
S3の設定
- S3サービスにアクセス
検索バーに「S3」と入力。検索結果が表示されたら、「S3」をクリック
- バケットを作成
「バケットを作成」をクリック
- 各種設定
バケット作成時の設定例
今回、S3バケットを作成するときに私は以下のように設定しました。
一般的な設定
- バケットタイプ：
汎用 - バケット名：
sample-static-site（わかりやすいものでOK。ただしほかの人と名前が被っていると登録できない）
オブジェクト所有者
- バケットタイプ：
ACL 無効 (推奨)
ブロックパブリックアクセス
- 「パブリックアクセスをすべてブロック」を選択
バケットのバージョニング
- 「有効にする」にチェック
タグ（オプション）
- 未設定
デフォルトの暗号化
- Amazon S3 マネージドキーを使用したサーバー側の暗号化 (SSE-S3)
- 「バケットキー」は「有効にする」にチェック
各種設定が終わったら「バケットを作成」をクリック
作成されたことが通知される
設定内容の評価
一般的な設定
- 汎用：標準的なユースケースではこれで
- バケット名：一意でわかりやすい命名を推奨
オブジェクト所有者
- ACL 無効 (推奨)：ACLは複雑化しやすいので無効化
ブロックパブリックアクセス
- すべてブロック：CloudFront経由で公開するので、この設定
バージョニング
- 有効化：ファイル更新時に過去バージョンを残せるので安心
タグ
- 未設定：実務では「プロジェクト名」「担当者」「環境（dev/prod）」などタグ管理を行う
暗号化
- SSE-S3（Amazon管理キー）＋バケットキー有効：最小の手間でセキュリティを高める
S3にアップロードを開始
- S3コンソールで作成したバケットを選択
- オブジェクトをアップロード
「アップロード」をクリック
- オブジェクトをアップロード
- ローカルで作成した
index.htmlとstyles.cssが入っているフォルダwebsiteをアップロード
- ローカルで作成した
静的ウェブサイトホスティングを有効化
S3バケットを「静的ウェブサイト」として公開できるように設定します。
- バケットの詳細画面を開く
S3の画面に戻り、「汎用バケット」をクリック
先ほど作成したバケットをクリック
上部のタブから「プロパティ」を選択
2. 「静的ウェブサイトホスティング」を探す
ページをスクロールして下の方にある「静的ウェブサイトホスティング」まで進み「編集」をクリック
3. ホスティングを有効化
-
「有効化」を選択
-
「ホスティングタイプ」では 「静的ウェブサイトをホストする」 を選択
-
「インデックスドキュメント」の欄に
index.htmlを入力（このファイルが「トップページ」として表示される） -
error.htmlを入力すると、存在しないページにアクセスされたときにそのHTMLが表示されます
例：http://バケット名.s3-website-ap-northeast-1.amazonaws.comにアクセスすると、このindex.htmlが返される）
- 「変更を保存」をクリックして設定完了
これでS3バケットが「Webサーバー」として動作し始めます。
料金
バケット作成・アップロードは無料（保存と通信でわずかな課金あり）
まとめと次回予告
今回は
- バケット作成
- ファイルアップロード
- 静的ウェブサイトホスティングの有効化
をやっていきました！
しかしまだ外部からサイトを見られません
パブリックアクセスがブロック されているためです
パブリックアクセスを許可するとサイトを見られるようになりますが、セキュリティが危険です
次回は CloudFront を使用して、webサイトの安全に公開をしていきます！