🐰

ALB+S3を使った社内からのみ閲覧可能なスタティックサイトの構築

🐰もちだもちお🐰

2023/09/26に公開

概要

社内からのみ閲覧可能なスタティックWebサイト
コンテンツは静的コンテンツのみで、WEBサーバーは不要（インスタンスの管理したくない）
ユーザープールの管理が辛いので、認証はGoogleとする
アクセス数も数が知れてるのでできるだけ安く、メンテナンスフリーで運用したい
コンテンツは既にS3に格納されているので、できる限りAWSで完結したい

事前準備

必要なもの

AWS
- ALB
- S3
- VPC
- VPC　Endpoint
GoogleWorkspace
GCPアカウント＋プロジェクト
その他
- ドメイン
- SSL証明書

構築

AWS

下記記事を元に構築
- https://aws.amazon.com/jp/blogs/networking-and-content-delivery/hosting-internal-https-static-websites-with-alb-s3-and-privatelink/
- 上記では、プライベートサブネット内からALBを経由したS3へのアクセスとなっているが、グローバル経由からのでも可能

VPC

VPC、サブネット、ルートテーブルなど一式を構築する
ALBからS3への経路を確保するため、VPC　エンドポイントを作成
- VPC　エンドポイントは、Amazon S3 Interface Endpointを選択する
- VPC　エンドポイントに割り当てるセキュリティグループは、HTTPとHTTPSを許可する
  - 接続元はALBとする
VPCエンドポイント作成後、VPCエンドポイントを選択し、サブネットにあるIPｖ4アドレスをメモする

S3バケット

公開したいドメイン名で、S3バケットを作成する
バケットポリシーを以下の内容に設定する

{
    "Version": "2012-10-17",
    "Id": "Policy1415115909152",
    "Statement": [
        {
            "Sid": "Access-to-specific-VPCE-only",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": [
                "arn:aws:s3:::sample.com",
                "arn:aws:s3:::sample.com/*"
            ],
            "Condition": {
                "StringEquals": {
                    "aws:SourceVpce": "vpce-1234567890"
                }
            }
        }
    ]
}

ALB

ターゲットグループを以下の内容で作成する
- 基本的な設定
  - ターゲットタイプ：IP
  - プロトコル：HTTPS（443）
- ヘルスチェック
  - ヘルスチェックプロトコル：HTTP
- ヘルスチェックの詳細設定
  - ヘルスチェックポート：上書き：80
  - 成功コード：200,307,405
- IP アドレス
  - VPC エンドポイント作成時にメモをしたIPアドレスをサブネット分登録する
ALBを作成し、作成したターゲットグループを登録する
- SSL化が必要なためACMに事前にアップロードor作成したSSL証明書を選択する
- 記事中ではリライトの設定をしているが、今回の用途ではリライト無しでも問題ないのでスキップ

Google

GoogleCloudコンソールにログインし、プロジェクトを作成する
作成したプロジェクトに切り替える
左メニューAPIとサービス　>　OAuth同意画面 を選択する
- 初回選択時にはユーザータイプの選択画面が出る
  - 内部
    - GoogleWorkspaceに登録されたドメインのみ
  - 外部
    - Google認証が通れば誰でも
  - 今回の用途では社内のみなので、内部を選択する
- 認証済みドメインは、ALBに割り当てたドメイン入力する
左メニューAPIとサービス　>　認証情報 を選択する
- アプリケーションの種類：ウェブアプリケーション
- 認証済みのリダイレクトURI：https://sample.com/oauth2/idpresponse
  - ドメイン名/oauth2/idpresponse は固定値
- 作成後、右メニューに表示されるクライアントIDをメモしておく

AWS

ALB

前工程で作成したALBを選択し、リスナーとルールから既存のルールを選択する
アクション >　リスナーの編集を選択
- 認証　>　OpenIDまたはAmazonCognitoを使用する　にチェック
- アイデンティティプロバイダー　：　OIDC
- 発行者：https://accounts.google.com
- 認証エンドポイント：https://accounts.google.com/o/oauth2/v2/auth
- トークンエンドポイント：https://oauth2.googleapis.com/token
- ユーザー情報のエンドポイント:https://openidconnect.googleapis.com/v1/userinfo
- クライアントID：前工程でメモしたクライアントID
上記の設定完了後に、該当ドメインにアクセスしGoogle認証画面が出れば成功
- 既にGoogleにログイン済みの場合は、認証画面がでずにコンテンツが表示される

参考

MI-6株式会社Publication

積極採用中です！ MI・AI技術をSaaSとして提供し、素材メーカーの研究開発を支援しています #BtoB #フルリモート #フレックスタイム #Python #React #TypeScript #Rails #AI #機械学習 #マテリアルズインフォマティクス #ベイズ最適化

概要

事前準備

必要なもの

構築

AWS

VPC

S3バケット

ALB

Google

AWS

ALB

参考

Discussion