LoginSignup
181
153

More than 3 years have passed since last update.

AWS S3でのhttps対応含む静的ウェブサイト公開

Last updated at Posted at 2017-01-09

AWSのS3って単純にストレージとして利用している人も多いと思いますが、html/js/cssだけの静的なウェブサイトやホームページ、アプリなんかはs3でホスティングした方が、落ちることもないし、良いと思う。

S3での静的ウェブサイト公開

  1. S3でバケットを作成
  2. html/css/jsを配置する
  3. バケットのプロパティ[静的ウェブサイトホスティング]で[ウェブサイトのホスティングを有効にする]を選択し、トップページにしたいhtmlとインデックスドキュメントに設定する
  4. バケットのプロパティ[アクセス許可]で[バケットポリシーの編集]を押し、下記を入力
{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[バケット名]/*"
        }
    ]
}

上記でバケットのプロパティ[静的ウェブサイトホスティング]の[エンドポイント]に記載されているURLで配置したhtmlが公開される

上記だと公開されるURLが
http://[バケット名].s3-website-[region].amazonaws.com/~
みたいになる。
これをhttpsにしたい場合は、CloudFrontというAWSの別サービスを利用する必要がある。

https, 独自ドメインでのs3 静的ウェブサイト公開

  1. S3でバケットを作成し、html/css/jsを配置する(この時、バケット名を公開したいドメイン名にしておく https://hogehoge.co.jp であれば、バケット名は hogehoge.co.jp )
  2. CloudFrontでDistributionを作成
    1. [CreateDistribution]を押し、[Web]の方の[Get Started]を押す
    2. [Origin Settings]
      1. [Origin Domain Name]にカーソルを合わせると上記で作成したS3のバケットが選択肢に出てくるので選択
      2. [Origin Path]は付けたければ
      3. [Origin ID]は[Origin Domain Name]選択で自動付加
      4. [Restrict Bucket Access]を[yes]にする(S3のアドレスで直接アクセスを許さなくする)
      5. [Origin Access Identity]は[Create a New Identity]を選択
      6. [Comment]はわかりやすいもの(自動でもつく)
      7. [Grant Read Permissions on Bucket]は[yes]にする
      8. [Origin Custom Headers]は付けたければ
    3. [Default Cache Behavior Settings]
      1. アクセスをhttpsのみにしたければ[Viewer Protocol Policy]を設定
    4. [Distribution Settings]
      1. [Alternate Domain Names(CNAMEs)]にはs3のバケット名でもあるドメイン
      2. [SSL Certificate]は独自ドメインであればcustomの証明書を選択
      3. [Default Root Object]はs3のrootのhtmlを入力
      4. [log]は付けたければ
  3. Route53
    1. [Create Record Set]を押す
    2. [Name]はバケット名に設定したドメイン名を入力
    3. [Type]は[CNAME-Canonical name]を選択
    4. [Value]は上記で作成したCloudFrontの[Domain Name] (generalから確認可能)

上記でhttpsによる独自ドメインの静的ウェブサイトがs3で公開できるはずです。

何かご指摘、ご意見あればお願い致します。

181
153
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
181
153