このサイトについて

AWS・Cloudflare・Google Cloud を活用し、設計・構築・運用までを実践しながら学習したマルチクラウド構成のポートフォリオです。

クラウドインフラやAI技術を理解するため、実際に環境を構築し、継続的な改善を行っています。

AWS

静的サイト配信・サーバーレス

Cloudflare

認証・アクセス制御

Google Cloud

AIエージェント・API

目的

AWS・Cloudflare・Google Cloud を組み合わせたマルチクラウド環境を実際に構築し、クラウドインフラの設計・運用を学ぶことを目的として制作しました。

設計

クラウドサービスごとの役割を整理し、全体構成を設計しました。

構築

サービスを実際に構築し、動作する環境を作成しました。

運用

READMEの整備や構成管理を行い、継続的に改善しています。

システム構成

AWS・Cloudflare・Google Cloudを役割ごとに分け、フロントエンド・認証・AIサービスを連携させたマルチクラウド構成で運用しています。

Internet

利用者

Cloudflare

DNS・Access

AWS

CloudFront

Amazon S3

Learning by Building

API Gateway

AWS Lambda

DynamoDB

Google Cloud

Cloud Run

FastAPI

Gemini API

AIエージェント

AIチャット機能は Google Cloud 上で動作する FastAPI と Gemini API を利用して構築しています。会話履歴は保持せず、ステートレスな構成を採用しています。

ブラウザ

ユーザーがメッセージを送信

↓

Cloudflare

認証・アクセス制御

↓

Cloud Run

FastAPI を実行

↓

Gemini API

AIが応答を生成

↓

ブラウザ

回答を表示

FastAPI

REST API を実装し、 Cloud Run 上で実行しています。

Gemini API

ユーザーの入力を AI が解析し、回答を生成します。

セキュリティ

Cloudflare Access・Secret Header・ CORS 制御を実装しています。

設計

会話履歴を保存しないステートレス構成です。

Learning by Building

学習内容や構築手順を整理・記録するために制作した自己学習用のWebサイトです。サーバーレス構成を採用し、学習記録を継続的に管理できる環境を構築しています。

システム構成

Frontend	Amazon S3 / CloudFront
API	Amazon API Gateway
Backend	AWS Lambda
Database	Amazon DynamoDB

主な機能

記事登録	タイトル・本文を保存
記事管理	一覧表示・学習記録
公開	CloudFrontによる配信
目的	学習内容の蓄積・整理

リポジトリ構成

ポートフォリオサイトとAIエージェントをそれぞれ独立したリポジトリとして管理しています。フロントエンドとバックエンドを分離することで、保守性と拡張性を意識した構成としています。

Portal Site

index.html
about.html
about.css
agent.html
design.css
agent.css
app.js
README.md

ポートフォリオサイトおよび AIチャット画面のフロントエンドです。

AI Agent

main.py
Dockerfile
requirements.txt
.env
README.md
versions/

FastAPI・Cloud Run・Gemini APIを利用した AIエージェントのバックエンドです。

使用技術

本ポートフォリオの設計・構築・運用で利用している主な技術スタックです。

分類	使用技術
Frontend	HTML / CSS / JavaScript
Backend	Python / FastAPI
Cloud	AWS・Google Cloud・Cloudflare
AI	Gemini API
Serverless	Cloud Run・AWS Lambda
Database	Amazon DynamoDB
CDN	Amazon CloudFront
Authentication	Cloudflare Access
Version Control	Git / GitHub
OS	Linux (Ubuntu)

このサイトで学んだこと

本サイトの設計・構築・運用を通して、クラウドインフラやAIサービスの連携だけでなく、実際の開発・運用を意識した環境構築を経験しました。

マルチクラウド設計

AWS・Cloudflare・Google Cloudを役割ごとに組み合わせたシステム構成を設計・構築しました。

AIサービス連携

FastAPIとGemini APIを利用し、 AIチャットサービスを構築しました。

サーバーレス開発

Cloud Run・AWS Lambdaを利用したサーバーレス構成を学びました。

運用・保守

READMEの整備やディレクトリ構成を整理し、保守性を意識した開発を行いました。

まとめ

本ポートフォリオは、AWS・Cloudflare・Google Cloud を組み合わせたマルチクラウド環境を実際に設計・構築・運用しながら学習した内容をまとめた自己学習サイトです。

設計	マルチクラウド構成の設計
構築	AWS・Cloudflare・Google Cloud の連携
開発	FastAPI・Gemini API を利用したAIサービス
運用	README整備・リポジトリ管理・構成整理

今後も実際に環境を構築・運用しながら、クラウドインフラやAI技術への理解を深め、継続的に学習を進めていきます。