KAEDE Hack blog

JavaScript 中心に ライブラリなどの使い方を解説する技術ブログ。

AWS S3 の buckets に html を upload してアクセスできるようにする

f:id:kei_s_lifehack:20210725001736p:plain

why

シンプルに FW なしで S3 での公開を試してみたくなった

ref

https://qiita.com/dogwood008/items/a92abae789f4b0466f38

AWS アカウントの作成と Amazon の買い物アカウントのリンク

これらを作成すると S3 の buckets を作成できるようになる

ROOT と IAM の二種類

bucket の作成と設定

Permissions で Public にする

f:id:kei_s_lifehack:20210724230517p:plain

記事とは違うが、一時的に完全に public にする。

Objects に index.html を upload

gist.github.com

このシンプルな html を DL して

f:id:kei_s_lifehack:20210724230939p:plain

作った bucket の中に upload する

Properties で静的ホスティングを有効化

f:id:kei_s_lifehack:20210724231219p:plain

静的サイトホスティングを有効化。

index の場所を index.html に設定。

f:id:kei_s_lifehack:20210724231433p:plain

しかしここまでやってもまだアクセスできない。

バケットポリシーを書く必要がある。

Permission にポリシーを書く

{
   "Version":"2012-10-17",
   "Statement":[{
    "Sid":"PublicReadForGetBucketObjects",
         "Effect":"Allow",
      "Principal": "*",
       "Action":["s3:GetObject"],
       "Resource":["arn:aws:s3:::【ここをバケット名に置換】/*"
       ]
     }
   ]
 }

この Qiita の 2012 の記事通りに書くと

f:id:kei_s_lifehack:20210724232011p:plain

API がエラーを返す。古くなっているのだろうか。最新のサンプルを探してみる。

docs.aws.amazon.com

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"PublicRead",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject","s3:GetObjectVersion"],
      "Resource":["arn:aws:s3:::DOC-EXAMPLE-BUCKET/*"]
    }
  ]
}

公式の情報では Sid が PublicRead になっているので

まずここを変更する。

また、2012 の日時にしてみると適用された。

現在の日付ではなく、この特定の日時にする必要があったようだ。

f:id:kei_s_lifehack:20210724232633p:plain

すると、Publicly Accessible のマークが表示された。

f:id:kei_s_lifehack:20210724232821p:plain

アクセスすると GitHub のあの index とるページの HTML が表示された!違うわああ!!!

f:id:kei_s_lifehack:20210725000902p:plain

無事に出た。

0724-test.s3-website-ap-northeast-1.amazonaws.com

URL はこちら。

FTP で上げるファイルサーバーより簡単だし拡張性も高そう!

CLI と CNAME と

www.freecodecamp.org

これらの操作は CLI でも可能で、CNAME, DNS をやるとドメイン名を変えられる。

HTTPS にしたければ Cloud Front も噛ませる必要があるらしい。

まとめ

AWS S3 で html でサイトをとりあえず見れる状態にするためには

AWS のアカウントをクレカ登録して作成して、

bucket を作成して

index.html を upload して、

全てのアクセスを許可にして

静的ホスティングを有効化して

root の場所を index にして

バケットのポリシーの version の日付と、許可することと、リソースのバケット名を書いて

Publicly accessible になれば展開 URL にアクセスできる。

そこから CNAME の設定をすれば URL にドメイン噛ませたり、Cloud font の別サービスの設定をすれば HTTPS にしたりもできる。

以上。