AWSとJavaによるサーバーレス動的サイト構築：S3・CloudFront・Lambda活用事例

どんな取り組みか

スマートフォンをかざすだけでポートフォリオサイトが開く「NFC搭載デジタル名刺」を、サーバーレスアーキテクチャで内製化した事例です。個人開発におけるサーバー維持コストを抑えつつ、動的な処理を持つWebアプリケーションを実現するため、EC2のような常時稼働サーバーを避け、「S3 + CloudFront + API Gateway + Lambda」の構成が採用されました。

使われた技術スタック

このプロジェクトで利用された主なAWSサービスとツールは以下の通りです。

• フロントエンドホスティング: Amazon S3 (HTML/CSS/JSなどの静的コンテンツを格納)
• バックエンド処理: AWS Lambda (Javaランタイムで動的処理を実行)
• APIエンドポイント: Amazon API Gateway (Lambda関数を外部から呼び出すためのトリガー。HTTP APIを選定)
• コンテンツ配信とルーティング: Amazon CloudFront (S3とAPI Gatewayへのアクセスを振り分け、コンテンツを高速配信)
• ドメイン管理とDNS: Amazon Route 53
• SSL/TLS証明書: AWS Certificate Manager (ACM)
• ビルドツール: Maven (Javaプロジェクトのビルドとパッケージング)
• 物理デバイス: NFCカード

実装のポイント

サーバーレスな動的サイトの構築における主要なステップと技術的なポイントを解説します。

バックエンドの配備 (Lambda + API Gateway)

動的処理を担うJavaプログラムをAWS上にデプロイします。

• Fat JAR化: Lambda環境でClassNotFoundExceptionエラーを防ぐため、依存ライブラリをすべて含んだ単一のJARファイル（Fat JAR）を作成する必要があります。これにはMavenのmaven-shade-pluginを利用します。

  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-shade-plugin</artifactId>
    <version>3.2.4</version>
    <executions>
      <execution>
        <phase>package</phase>
        <goals>
          <goal>shade</goal>
        </goals>
      </execution>
    </executions>
  </plugin>

• API Gatewayの選定: インフラコストを最小限に抑え、シンプルなステージ管理を実現するため、REST APIではなくHTTP APIが選定されました。API Gatewayをトリガーとして設定し、特定のURLへのGETリクエストでLambda関数が呼び出されるように構成します。

フロントエンドの配備とアクセス制御 (S3 + CloudFront)

ユーザーに表示される画面（ポートフォリオサイト）をS3に配置し、CloudFront経由でのみアクセスできるように制限します。

• OAC (Origin Access Control) の利用: S3バケット自体は非公開（パブリックアクセスをブロック）に設定します。CloudFrontからS3へのアクセスを許可するためにOACを有効化することで、S3への直接アクセスを禁止し、セキュリティを確保します。この設定はCloudFrontのオリジン設定時に自動的に構成できます。

独自ドメインと証明書の準備 (ACM + Route 53)

サイトを独自ドメインで安全に公開するための準備です。

• 証明書の発行リージョン: CloudFrontに紐付けるSSL/TLS証明書は、AWS Certificate Manager (ACM) を使用して発行しますが、必ず「バージニア北部 (us-east-1)」リージョンで作成する必要があります。
• DNS検証: ドメインの所有権を証明するため、Route 53にACMから指定されたCNAMEレコードを追加します。

配信とルーティングの統合 (CloudFront)

フロントエンド（S3）とバックエンド（Lambda）をCloudFrontで統合し、単一のドメインでアクセスできるようにします。

• ビヘイビア設定: CloudFrontのビヘイビア（振る舞い）設定で、パスに基づいたルーティングルールを定義します。例えば、/api/*へのアクセスはAPI Gateway（バックエンド）へ、それ以外（デフォルト）のアクセスはS3（フロントエンド）へ転送するように設定します。
• CORS問題の回避: この構成により、フロントエンドとAPIが同じドメインで提供されるため、ブラウザが異なるドメイン間の通信をブロックする「CORS (Cross-Origin Resource Sharing) 問題」をインフラレベルで未然に防ぐことができます。

NFCカードへのURL書き込み

インフラ構築後、完成したサイトのURLを物理的なNFCカードに書き込みます。「NFC Tools」などのスマートフォンアプリを利用して行います。データの不正な上書きを防ぐ「Lock」機能がありますが、一度Lockすると二度と書き換えができなくなるため、複数端末で十分な動作確認を行った後にLockをかけることが推奨されます。

得られた成果や学び

この取り組みにより、低コストで運用可能なサーバーレス動的サイトを構築し、NFCデジタル名刺として実用化することができました。インフラの全体像を理解していれば、短時間でセキュアかつ高速配信が可能なインフラの構築から物理カードへの実装までを完了させることが可能です。また、CloudFrontを中心にサービスを統合することで、CORSのようなWeb開発で頻出する問題をインフラ設計の段階で解決できるという知見が得られました。

まとめ

本記事では、「S3 + CloudFront + API Gateway + Lambda」というAWSのサーバーレスサービス群とJavaを活用して、動的なWebサイトを組み込んだデジタル名刺を内製化した事例を紹介しました。コストを抑えながらも、セキュリティとパフォーマンスを両立させた構成は、個人開発のポートフォリオサイトや小規模なWebアプリケーションを構築する際の有効な選択肢となります。

出典: https://qiita.com/usanchuu/items/2c5dbeed9c22dad0b7ad