Amazon S3で静的サイトをWeb公開する
オブジェクトストレージの印象が強いAmazon S3ですが、実は静的なリソースをインターネットで公開することができます。
これを使えば、HTML/CSS/JavaScriptだけでできた静的なサイトを公開したり、JSONファイルを公開して別のプログラムから定期的にJSONファイルを更新することでWebAPIを作ることもできます。
それでは早速やってみます!
![](https://www13.a8.net/0.gif?a8mat=35D1T5+3BO5DE+50+2HLY9D)
S3バケットの作成・公開
まずは、リソースを保存するS3バケットを作成します。AWSのコンソールからS3を選び「バケットを作成する」を選択します。
適当なバケット名を付けて「作成」を押します。
バケットが作成されたら一覧から選択し「プロパティ」タブから「Static website hosting」を選択します。
![](https://www.blog.danishi.net/wp-content/uploads/2019/05/image-1-864x1024.png)
「このバケットを使用してウェブサイトをホストする」を選び、「インデックスドキュメント」を設定します。
エラーページを表示したければ「エラードキュメント」も設定しましょう。
次に、バケットに外部からアクセスできるように設定をおこないます。
「アクセス権限」タブの「パブリックアクセス設定」を選択します。
![](https://www.blog.danishi.net/wp-content/uploads/2019/05/image-1024x428.png)
これで、この後追加するパブリックポリシーが有効になります。
次に「バケットポリシー」を選択し「バケットポリシーエディター」に設定のJSONを入力し、保存します。
![](https://www.blog.danishi.net/wp-content/uploads/2019/05/image-2-1024x575.png)
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::s3-static-web-site0502/*"
}
]
}
Resourceプロパティは自分のバケットのARN(Amazon Resource Name)を設定しましょう。ARNは「バケットポリシーエディター」の横に書いてあります。
後は、公開したいファイルをアップロードすればサイトが見れます。
![](https://www.blog.danishi.net/wp-content/uploads/2019/05/image-3-1024x401.png)
See the Pen s3-static-web-site0502 by danishi (@danishi) on CodePen.
https://s3-static-web-site0502.s3-website-ap-northeast-1.amazonaws.com/
ウニョウニョ動いてるやつは、「particles.js」を使ってみました。
これで静的サイトが公開できました!
![](https://www17.a8.net/0.gif?a8mat=35D82V+97114I+348+1UHH4H)
気になるのは運用コストですが、S3は以下3点に関して費用がかかります。
- ストレージ使用量
- データ転送量(アップロードは無料)
- リクエスト数(GETは安く、POSTは高い)
サーバサイドの処理が必要ないならEC2で公開するより俄然割安だとは思います。
でわ。
ディスカッション
コメント一覧
まだ、コメントがありません