はじめに
S3の静的Webサイトホスティング機能を使って、作成したファイルを公開してみました。
S3の静的ホスティング機能の有効化 ＋ 手動デプロイ
①S3バケット作成
バケット作成
- S3管理画面からバケット作成を押下します。
- バケット名を入力します。（バケット名は任意）
- その他はデフォルトのまま進み、「作成」ボタンを押下します。
バケット「（任意のバケット名）」が正常に作成されましたと表示されれば成功です。
静的ウェブサイトホスティング
- 作成出来たらバケット名を押下し、プロパティタブを押下します。
- 静的ウェブサイトホスティングというブロックの「編集」ボタンを押下します。
- インデックスドキュメントに「portfolio.html」を入力します。
- 「変更の保存」ボタンを押下します。
静的ウェブサイトホスティングが正常に編集されました。と表示されれば成功です。
バケットポリシー作成の手順
- 次にアクセス許可のタブを押下します。
- バケットポリシーのブロックの「編集」ボタンを押下します。
- 下記バケットポリシーを記述することで、パブリックアクセスを許可できます。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::任意のバケット名/*"
]
}
]
}
バケットポリシーが正常に編集されました。と表示されれば成功です。
ファイルのアップロードと確認
次にオブジェクトタブを押下します。
「アップロード」→「ファイルを追加」ボタンを押下し、ファイルをアップロードします。
アップロードに成功しましたと表示されれば成功です。
最後に実際にWebサイトがホスティングされているかを確認します。
プロパティタブを押下し、静的ウェブサイトホスティングのブロックまで移動します。
バケットウェブサイトエンドポイントの下にURLがあるので、それを押下します。
無事にサイトを開くことができました。
これにより、Webサイトがホスティングされていることを確認できました。
②Cloud9を使ってファイルを修正＋他ファイルを一括アップロードする
Cloud9環境の作成
- Cloud9管理画面から「環境を作成」ボタンを押下します。
- 名前を入力し、EC2などはデフォルトのまま進み、「作成」ボタンを押下します。
1 個の環境が正常に作成されました。と表示されれば成功です。
作業ディレクトリの作成
- Cloud9 IDEの「開く」よりCloud9の環境にアクセスします。
- ターミナルで下記コマンドを入力し、作業ディレクトリを作成します。
$ mkdir my-webpage
-
先ほどS3にアップした「portfolio.html」をcloud9の「my-webpage」にアップロードします。
-
css、imgのディレクトリも作成します。
$ mkdir mkdir img
$ mkdir css
- imgに「hnadson1.png」という画像ファイルを、
cssに「styles.css」というcssのファイルをローカルからアップロードします。
※画像ファイルやcssファイルは任意のものを使用します。
一括でファイルをアップロード
cloud9のターミナルからS3にファイルをアップロードします。
下記コマンドを入力
$ aws s3 cp . s3://任意のバケット名 --recursive
バケットを確認すると、アップロードされたことが確認できます。
ここで再びエンドポイントにアクセスしてみます。
無事に表示されました！
CSSも適用されていることが確認できます。
③CloudFrontを使ってコンテンツをキャッシュさせる
ディストリビューションの作成
- CloudFromtの管理画面に行き、CloudFront ディストリビューションを作成を押下します。
- オリジンドメインにバケットウェブサイトエンドポイントのURLを貼り付けます。
- ウェブアプリケーションファイアウォール (WAF) は、今回は「セキュリティ保護を有効にしないでください」を選択します。
- 他の項目はデフォルトのまま「ディストリビューションを作成」を押下します。
新しいディストリビューションが正常に作成されました。と表示されれば成功です。
キャッシュの確認
- CloudFromtの管理画面に戻り、ドメイン名をコピーします。
- 新しいタブにドメイン名を貼り付けます。
Webサイトが表示されました！
デベロッパーツールで確認すると「X-Cache:Hit from cloudfront」と表示されています。
CloudFrontからキャッシュされて返ってきたというのがわかります。
CloudFront経由でWebサイトをネット上に公開することができました！
まとめ
S3、Cloud9、CloudFrontを用いると、個人で作成したサイトが容易にホスティング、コンテンツキャッシュができることがわかりました。
おまけ（リソースの削除）
・CloudFront
管理画面に遷移し、ディストリビューションの状態を無効にします。
ディストリビューションを選択し、「削除」ボタンを押下します。
・S3
管理画面に遷移し、バケットを選択し、「削除」ボタンを押下します。
ここで「バケットを削除するには、バケットを殻にする必要があります。」とメッセージが出てきます。
「空のバケット設定」リンクを押下し、バケットを空にします。
もう一度バケット名を選択し、「削除」ボタンを押下し削除します。
・Cloud9
管理画面に遷移し、環境名を選択し、「削除」ボタンを押下します。