Zenn
🐰

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

2023/09/26に公開
AWS
S3
alb
Google
tech

概要

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

事前準備

必要なもの

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

構築

AWS

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にログイン済みの場合は、認証画面がでずにコンテンツが表示される

参考

https://aws.amazon.com/jp/blogs/networking-and-content-delivery/hosting-internal-https-static-websites-with-alb-s3-and-privatelink/
https://qiita.com/k_bobchin/items/c016cc65912a905b90ef
https://dev.classmethod.jp/articles/add-google-authenticate-your-webapp-on-alb/

Discussion