ポートフォリオサイトにサーバは不要です。AWS S3を使ったウェブサイト公開について

エンジニア転職でポートフォリオサイトをつくる方が多いと思いますが、みなさんインフラはどうされていますか？

どんなサイトをつくるかで最適なインフラは異なると思いますが、複雑なアーキテクチャを構成しないならサーバは不要です。

ということで、AWS S3の静的ウェブサイトホスティング機能を使って、さくっとウェブページを公開する方法を以下の動画で紹介しています。

この記事では動画で紹介した内容を補足したいと思います。

静的ウェブサイトってなに？

なので、ワードプレスのようにデータベースを使って記事を公開するタイプの構成は不可能です。

とはいえ、静的なウェブページってかなり多く、AWSのS3ホスティングの技術はいろんなところで使われています。よくあるのはS3とCloudFrontを使った合わせ技ですね。これは本当に多い！

このブログ面白い笑
CloudFrontはコンテンツ配信1回あたりの料金がS3のそれよりも安価だし速いしHTTPS出来るし使わない手はないhttps://t.co/aXYQoRbeQK

— ルカ@AWSクラウドエンジニア (@MACDEDT) July 7, 2020

バケットポリシーってなに？

本当に簡単にできるのが、静的ウェブサイトホスティングの良いところなのですが、ちゃんとおさえておくべきなのはバケットポリシーです。バケットポリシーとはバケット内のどのコンテンツに対して、誰がどのようなアクションをして良いか、許可設定を行うものです。

ここをミスるとウェブサイトがちゃんと公開されなくなります。

基本的には以下のコピペでOKなのですが、赤字にしたところだけ編集が必要です。この部分だけ自分が設定したバケット名に変更してください。私の動画の場合だと、バケット名がwebsite-hello-awsでしたので、arn:aws:s3:::website-hello-aws/*となります。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::example.com/*"  #←赤字部分を自分のバケット名に変更する
            ]
        }
    ]
}

バケットポリシーを簡単に説明します

具体的な処理はStatement以下に記載します。

Sid

Sidは任意の文字列です。上記の例ではPublicReadGetObjectなので「誰でも見れるバケットポリシー書いてるよ」と言ってるだけですね。

Effect

Allowとdenyの2パターンあります。AllowならActionに書いたことを許可する、denyなら拒否するという意味です。

principal

誰が、について記載するセクションです。*は誰でもを意味します。もし特定の誰かだけを指定するなら、以下のように記載します。

"Principal": {
                "AWS": "arn:aws:iam::Account-ID:user/Luka"
            },

Action

何を?にあたる部分です。s3:GetObjectはバケットのコンテンツを見ること、と言う意味です。EffectにはAllowが記載されていますので、バケットのコンテンツを見てもいいよと言う意味です。

Resource

ここにはコンテンツを記載します。arn:aws:s3:::example.com/*の/*はバケット内の全てのコンテンツを意味します。具体的にコンテンツを指定する場合は、/以下にフォルダやファイル名を記載する必要があります。

以上、ウェブサイトを公開するだけなら、動画にあるように超カンタンです。

しかし、公開方法を細かく設定する場合はバケットポリシーを書く必要がありますので、一気に難易度が上がりますね。