![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
WEBサイトの運用料金を安くしたいです
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
AWSのS3なら静的なWEBサイトを低料金で運用できます
- AWSのS3でWEBサーバーを作成するメリット
- AWSのS3でWEBサーバーを作成する手順
S3ではWEBサイトの作成もできる
AWSのS3はストレージサービスですが、ウェブホスティング機能があり、アップロードしたファイルをWEBサーバー経由で公開することができます。
この機能を利用して、S3で静的なWEBサイトを作成することができます。
S3上ではプログラムは一切動かせないので、PHPやNode.jsなどは使えずWordPressも使えません。
HTML、CSS、JavaScriptの静的サイトのみ作成が可能です。
S3のWEBサイトでできること
S3で作成するWEBサイトでは、以下のことが行なえます。
- CloudFrontと連携してhttps通信やSSL証明書の自動更新が可能
- Route53と連携して独自ドメインを使用可能
S3のWEBホスティングはhttp
のみ対応ですが、CloudFrontと連携することでhttps
にも対応できます。
CloudFrontでACM(AWS Certificate Manager)を利用すれば、SSL証明書の自動更新も行えます。
![](https://a0.awsstatic.com/libra-css/images/logos/aws_logo_smile_1200x630.png)
![](https://a0.awsstatic.com/libra-css/images/logos/aws_logo_smile_1200x630.png)
S3をRoute53と連携することで、S3のWEBサイトを独自ドメインで公開できます。
S3でWEBサイトを運用するメリット
S3でのWEBサイト作成には以下のメリットがあります。
従量制課金なので料金が安い
S3は従量制課金のため、アクセス数がそこまで多くないWEBサイトでは、VPSやレンタルサーバーのサービスと比べて料金を安く抑えることができます。
WEBサーバーをS3任せにできる
S3はフルマネージドサービスで、WEBホスティング機能を有効にするだけで、あとはS3任せでコンテンツの更新のみに集中できます。
S3でWEBサイトを作成する手順
S3でWEBサイトを作成する手順は以下になります。
WEBサイトのコンテンツファイルのアップロード先となるバケットを作成します。
AWSのマネジメントコンソールの検索欄にs3
と入力してS3サービスを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-116-1024x385.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-116-1024x385.png)
S3の画面で バケットを作成をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-131.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-131.png)
バケットの作成画面になるので必要な情報を入力します。
バケット名
を入力してAWSリージョン
はアジアパシフィック (東京) ap-northeast-1
をリストから選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-68.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-68.png)
バケット名には英字は小文字のみ使用できるなどの命名規則があります。
また、S3のバケット名は、世界中の他のユーザーのバケットとも重複しない名前が必要です。
既にあるバケットと同じ名前にすると、作成時に変更を求められます。
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
今回バケット名は表に出さないので、覚えにくい意味の無い名前でも問題ありません。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-132.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-132.png)
このバケットのブロックパブリックアクセス設定
を設定します。
S3の初期設定ではパブリックアクセスをすべてブロック
が選択されています。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-134.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-134.png)
S3のファイルをWEBサイトのコンテンツとして公開するのでパブリックアクセスをすべてブロック
のチェックを外します。
パブリックアクセスをブロックしない危険性を承諾するか
を聞かれるのでチェックを入れて承諾します。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-135.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-135.png)
バケットのバージョニング
は今回は無効にする
のままにします。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-122.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-122.png)
タグ
はバケットにラベルを付けて管理しやすくするためのものですが、今回は設定しません。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-123.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-123.png)
デフォルトの暗号化
はバケットにコンテンツを保存する時の暗号化の方式を設定します。
今回のバケット内容は公開WEBサイトのコンテンツで暗号化の方法を気にする必要はないのでAmazon S3 マネージドキー(SSE-S3)
のままにします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-122.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-122.png)
詳細設定
では上書き不可の設定ができますが、今回はWEBコンテンツで更新していくのでオブジェクトロック
は無効にする
のままにします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-123.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-123.png)
今回の入力内容の全体は以下のようになります。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-154.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-154.png)
全ての内容を入力したら バケットを作成ボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-124.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-124.png)
バケットが作成されてバケット一覧画面に移ります。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-129-1024x475.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-129-1024x475.png)
以上でバケットの作成は完了です。
バケットにファイルをアップロードする
作成したバケットにWEBサイトのコンテンツのファイルをアップロードします。
アップロードするファイルを用意します。
今回はテスト用の以下のファイルをアップロードします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
</head>
<body>
<h1>サンプルページ</h1>
</body>
</html>
以下のボタンから上のファイルをダウンロードできます。
S3のバケット一覧画面で、作成したバケットの名前をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-157.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-157.png)
バケットの内容が表示されるので アップロードをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-164-1024x485.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-164-1024x485.png)
上のエリアにファイルやフォルダをドラッグアンドドロップするか ファイルを追加 フォルダの追加をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-163.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-163.png)
ここでは上で用意したファイルをFinderからドラッグアンドドロップします。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-161-1024x380.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-161-1024x380.png)
ファイルがアップロード画面のリストに追加されるので アップロードをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-73.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-73.png)
バケットへのファイルのアップロードが完了します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-125.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-125.png)
静的ウェブサイトエンドポイントを有効にする
バケット画面の上部メニュープロパティ
を選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-131.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-131.png)
プロパティ画面の一番下にある静的ウェブサイトホスティングの 編集をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-169.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-169.png)
静的ウェブサイトホスティングの編集画面になります。
静的ウェブサイトホスティング
を有効にする
にしてインデックスドキュメント
にindex.html
と入力して 変更の保存をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/05/image-170.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-170.png)
静的ウェブサイトホスティング
を有効にすると、バケットのWEBサイトへのリンクが表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-126.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-126.png)
今の時点では、リンクをクリックしてもブロックされてWEBページは表示されません。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-130.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-130.png)
バケットポリシーを設定する
バケット内のファイルを公開するためのバケットポリシーを設定します。
バケット画面の上部メニューアクセス許可
を選択してバケットポリシー
の 編集をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-129.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-129.png)
バケットポリシーの編集画面になります。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-72-1024x961.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-72-1024x961.png)
バケットポリシーに以下の通りに記述します。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::バケット名/*"
]
}
]
}
![](https://mik2062.jp/wp-content/uploads/2023/06/image.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-175-809x1024.png)
![](https://mik2062.jp/wp-content/uploads/2023/05/image-175-809x1024.png)
バケットポリシーを入力して 変更の保存をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-3-1024x946.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-3-1024x946.png)
保存したバケットポリシーが適用されます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-127.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-127.png)
再度バケットのプロパティ
の静的ウェブサイトホスティング
のリンクをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-155.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-155.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-157.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-157.png)
今度はバケットにアップロードしたWEBページが表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-6-1024x570.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-6-1024x570.png)
以上で手順は完了ですが、今のままだとhttpsではなくURLも長くて分かりにくいです。
S3のWEBサイトをhttps化して独自ドメインに対応する手順は以下の記事になります。
![](https://mik2062.jp/wp-content/uploads/2023/06/aws-1-2-300x158.jpg)
![](https://mik2062.jp/wp-content/uploads/2023/06/aws-1-2-300x158.jpg)