A Little Each Day

note to self

AWSのS3で静的サイトを公開する方法

こんにちは。本日はAWSのS3を使ってサイトを公開する方法についてです。

S3を使えば気軽で簡単に静的なサイトを公開できてしまいます。

S3でできること

S3は基本的には画像のホスティングに使われることが多いですが、以下のような使い方もできます。


・S3のバケットをまるごと公開する。
・静的サイトのみ。動的サイトには向いてない。
・独自ドメインも可能。


料金

VPSやレンタルサーバーを借りると、数百円〜数千円コストがかかりますが、AWSのS3でサイトを公開すると使ったS3のデータ量のみの料金しかコストがかかりません。

また最初の1年間は無料枠があるので、お金がかからずサイトを公開できてしまいます。


バケットをつくる

AWSにログインして、S3から「S3 Management Console」を立ち上げます。

立ち上げると以下のようにバケットをつくる画面が表示されるので、青いボタンの「バケットを作成する」をクリックする。

f:id:chi_kun:20170725160812p:plain


するとバケット名・リュージョンを入力する項目があるので、それぞれ埋める。

ただし、独自ドメインを当てたい場合は、独自ドメインと同じ名前のバケット名をつくらなければなりません。

ex). hoge.com(ドメイン名) -> hoge(バケット名)


f:id:chi_kun:20170725161318p:plain


リュージョンは東京でOKです。


「次へ」ボタンを押すと「プロパティの設定」ができますが、これは何もしないでOKです。


「次へ」ボタンを押すと「アクセス許可の設定」ができますが、こちらもデフォルトでOKです。


「次へ」ボタンを押すと「確認」が出ます。間違いがなければ、「バケットを作成」をクリックします。


バケットの設定

バケットが作成できたら「S3 Management Console」に自分が作成したバケット一覧が表示されるので、自分が上記で作成したバケット名(上記だとhoge)をクリックして開きます。


バケットを開いたら、まずはプロパティを設定していきます。

f:id:chi_kun:20170725163213p:plain


プロパティを開くと以下のような画面が表示されるので「Static website hosting」を開きます。

f:id:chi_kun:20170725165037p:plain


「Static website hosting」をクリックすると、Static website hostingの設定が出るので、「このバケットを使用してウェブサイトをホストする」にチェックを入れます。

f:id:chi_kun:20170725165150p:plain


すると上記のように、エンドポイント(ドメイン)が表示されます。
これが自分のサイトのドメインになります。

インデックスドキュメントは例にもあるように「imdex.html」でOKです。


設定できたら「保存」をクリックします。


アクセス権限の設定

次にアクセス権限からバケットポリシーを設定していきます。

f:id:chi_kun:20170725163213p:plain


アクセス権限をクリックすると以下のような画面が表示されるので、真ん中の「バケットポリシー」をクリックします。

f:id:chi_kun:20170725170900p:plain


すると「バケットポリシーエディター」というものが表示されるので、そこに以下のコードをコピペします。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::バケット名/*"
            ]
        }
    ]
}


コピペできたら「保存」ボタンをクリックします。


ファイルのアップロード

諸々の設定は完了したので、いよいよソースコードをS3にアップロードしていきましょう。

f:id:chi_kun:20170725163213p:plain


上記の「アップロード」をクリックして、「ファイルを追加」ボタンをクリックするとローカルのファイル一覧が表示されるので、公開したいファイルをアップロードしていきます。


全部完了すると以下のような感じになります。

f:id:chi_kun:20170725160016p:plain


アップロードが終わったら、先程のエンドポイント(ドメイン)にアクセスします。

f:id:chi_kun:20170725165150p:plain


きちんとアップロードできていれば、サイトが公開されているはずです。



AWSのS3を使えば本当に簡単にサイトを公開することができてしまいます。


またエンドポイントではなく独自ドメインも設定できますが、長くなりそうなので、その方法については後日また改めて書きたいと思います。



本日は以上です。