S3のバケットにIPアドレスでアクセス制限を設定する

本記事では、AWSにデプロイしたアプリケーションへのアクセスをIPアドレスで制限する方法を紹介します。

Z-A-K-I

SPAのアプリケーションを特定の人だけに公開したい！

と、思ってる方におすすめです。

この記事では、以下のことを紹介してます。

S3のバケットポリシーの設定方法
指定したIPアドレスのみ許可するバケットポリシー

AWSのS3上にデプロイしたVue.jsのアプリケーションを特定のIPアドレスからのみアクセスを許可する方法を手順を追って解説します。

Vue.jsのアプリケーションをS3にデプロイする手順は以下記事を参照ください。

S3(静的ウェブサイトホスティング)のバケットポリシーの設定
指定したIPアドレスのみ許可するバケットポリシー
まとめ
参考サイト

S3(静的ウェブサイトホスティング)のバケットポリシーの設定

静的ウェブホスティングの場合、デフォルトではすべてのIPアドレスからのアクセスが拒否される設定となってます。

アプリケーションを公開するためにバケットポリシーを変更しなければなりませんが、AWSのチュートリアルに従い設定すると、以下のように「全ての利用者」に「オブジェクトの読み取り」権限を付与する形式となってました。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::vue.second.s3.bucket/*"
        }
    ]
}

サービスとして本番稼働する場合は、上記でよい気もしますが身内や会社だけに公開するサービスとしたい場合には、許可する相手を制限する必要があります。

今回は、勉強中のサイトのため、自宅と会社のＩＰアドレスからのみアクセスを許可するポリシーを書いていきます。

指定したIPアドレスのみ許可するバケットポリシー

指定したIPアドレスのみを許可する場合、Conditionを使って条件を設定します。「SourceIp」の部分に許可するIPアドレスを設定します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::vue.second.s3.bucket/*",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": [
                        "xxx.xxx.x.xxx/24",
                        "xxx.xxx.x.xxx/24",
                        "xxx.xxx.x.xxx/24"
                    ]
                }
            }
        }
    ]
}

上記の設定を行うと、許可していないIPアドレスからのアクセスの場合、以下画面が表示されるようになります。