社内ネットワークに制限した静的サイトホスティング環境をAmazon S3で構築する

はじめに

どうもこんにちは。SODAでWebフロントエンドエンジニアをしているaokikenと申します。
今回は、社内向けに静的サイトホスティング環境をAmazon S3で構築した話になります。

構築に至るまで

Webフロントエンドの開発をしていて、実際の開発環境に実装する前に、検証として別環境にプロトタイプを作成することがあります。
そのときに作ったものを、スピーディーに社内共有して、フィードバックを得たい。
そういった背景から、社内ネットワークに制限した静的サイトホスティング環境の構築することを検討をし始めました。

要件を整理

Webフロントエンド視点でプロトタイプを作成するにあたり、ブラウザでの動作検証が主なので、基本的には静的データをホスティングできればよさそうです。

弊社では既にAWSを広く利用しているため、今回はAmazon S3を利用する前提で要件を整理していきます。
Amazon S3であれば、AWS CLIを利用してローカル環境からの直接アップロードや、GitHub Actions経由でアップロードを行うなどの導入もスムーズに行えそうです。

VPN経由でのみ利用できる状態を目指す

今回は社内での利用に特化しているため、普段から利用しているVPN経由でのみ利用できる状態にすることができれば、使い勝手も良さそうと考えました。
IP制限を設ける条件で調べてみると、ブロックパブリックアクセス（バケット設定）、アクセスコントロールリスト（ACL）、そしてバケットポリシーの設定を適切に行うことで、実現することが出来そうです。

プロトタイプ以外にも需要がありそう！

すでにプロダクト開発で導入しているOpenAPIの定義や、その他利用しているツールで生成した静的データをホスティングしてみるなど、今回の要件のもので流用することができそうです。

Amazon S3の具体的な設定

弊社ではterraformを利用しているため、以下の設定はすべてterraformの設定ファイルから設計し、SREの方にレビューを依頼し、環境に反映していきます。

今回は、参考までに各設定の状態をAWSの管理画面のスクリーンショットを一部共有します。

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

パブリックアクセスをすべて ブロックをオフに。

アクセスコントロールリスト（ACL）

パブリックアクセスに対して、読み取りを許可。

バケットポリシー

指定のIPアドレス以外からのAction: s3:GetObjectを拒否。

{
    "Version": "2012-10-17",
    "Statement": [
        ...
        {
            "Sid": "",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:*",
            "Resource" : [
              "arn:aws:s3:::S3_BUCKET_NAME",
              "arn:aws:s3:::S3_BUCKET_NAME/*"
            ],
            "Condition": {
                "NotIpAddress": {
                    "aws:SourceIp": "000.00.00.00/32"
                }
            }
        }
    ]
}

AWS CLIを使用してファイルをアップロード

こちらも参考までにですが、以下のように実施します。

今回は --acl public-read のオプションをつける必要があります。

$ aws s3 cp /PATH/TO/FILE_NAME s3://S3_BUCKET_NAME/PATH/TO/FILE_NAME --acl public-read

静的サイトホスティング環境を利用する上での注意事項

一般的なウェブサーバーで利用できるようなDirectoryIndexは効きません。
/index.html など詳細に指定してリクエストしてください。

生成した静的データが、ルートディレクトリ直下を想定した絶対パスになっている可能性があるので、相対パスや、アップロード先のパスに合わせて絶対パスでも動作するように生成する必要があります。

実際に導入してみて

プロトタイプで作ったものをスピーディーに共有できる点はやはりとても体験がよいと思いました。今後も日々の開発で活用していきたいと考えています。

別途、APIドキュメントをホスティングするところもやってみました。
社内で共有したところ、多く反応をもらえたのは嬉しかったです。

また、今回作成した環境を社内で利用してもらえることを伝えたところ、FlutterのWidgetbookを上げてみたいと早速動き出してくれました。
Webフロントエンドに限らず、このような環境のニーズが潜在的にあったことを再確認できて良かったです。

おわりに

今回は、Amazon S3のブロックパブリックアクセス（バケット設定）、アクセスコントロールリスト（ACL）、そしてバケットポリシーの設定を適切に行うことで社内ネットワークに制限した静的サイトホスティング環境を比較的カンタンに構築することができるという点がポイントになります。

社内向けに静的サイトホスティングを導入検討することがあれば、ぜひ参考にしてみてください。