S3にフロントエンド環境を構築してみた #AWS

今回はフロントエンド環境の実行環境を構築し、セキュリティ設定をします。

構成のおさらい（バックエンド含む）

EC2

Webアプリのバックエンドを実行します。
今回はJavaのjarファイルを常時実行し、フロント側から実行されたAPIを処理します。
RDSに構築されたデータベースとデータをやりとりします。
今回はSpringBootで実装しています。
なお、HTTPS接続したいために、SSLを有効にしています。
その際、今回はテスト環境のため自己署名証明書を使っています。

RDS

Webアプリのデータベースを担います。
今回はPostgreSQLです。

S3

Webアプリのフロントエンドを配置します。
静的ウェブサイトとして設定し、エンドポイントにアクセスすることでフロント側の画面を表示します。
今回はVue.jsを用いて画面を作成します。

S3の実行環境構築

アップロード

今回はVue.jsの環境でnpm run buildした際に作成されるdistディレクトリの中身を全てアップロードしました。
AWSコンソール画面より、Amazon S3 > バケットと進み、バケットを選択します。
オブジェクトタブよりアップロードしたいモジュールをアップロードします。（ドラッグ＆ドロップでも可）

ACLで公開

オブジェクトを公開するために、アップロードしたファイルのチェックボックスにチェックを入れ
アクションからACLを使用して公開するを選択し、公開します。

静的ウェブサイトホスティング

静的ウェブサイトホスティングを設定します。
Amazon S3 > バケットからプロパティタブを開きます。
静的ウェブサイトホスティングの編集を開き編集します。

静的ウェブサイトホスティング: 有効にする
ホスティングタイプ: 静的ウェブサイトをホストする
インデックスドキュメント: index.html（アップロードしたインデックスドキュメント）

有効にした後、バケットウェブサイトエンドポイントに表示されているURLがフロントエンドのエンドポイントになります。

アクセス許可設定

ブロックパブリックアクセス

Amazon S3 > バケット > アクセス許可からブロックパブリックアクセス (バケット設定)の編集をします。
「パブリックアクセスをすべてブロック」のチェックを外し、変更の保存をします。

バケットポリシー

Amazon S3 > バケット > アクセス許可からバケットポリシーの編集をします。
パブリックに公開する場合は以下の設定をします。

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

今回は特定のIPのみ許可したので、以下の設定をしました。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "IP",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ],
            "Condition": {
                "NotIpAddress": {
                    "aws:SourceIp": "IPアドレス"
                }
            }
        }
    ]
}

上記を設定し、静的ウェブサイトホスティングのエンドポイントにアクセスすることで、
フロントエンドの画面を表示できました。

以上でフロントエンドの画面からAPIを実行し、EC2、RDSでAPIを処理する環境が構築できました。