🚀
AWS×生成AIで3行要約デモを2日で作る！

2025/07/06に公開
 はじめにAWSと生成AI（OpenAI API）を組み合わせて、「3行要約」サービスを週末2日間で開発・公開した記録です。

「まずは動くものをサクッと作ってみたい」「AWSや生成AIを使ったサービス開発の流れを体験したい」方に向けて、シンプルな構成と必要最小限の実装でどこまでできるかを実践した内容をまとめました。
本記事は詳細なハンズオンではなく、
サービスの設計・構成
実際の作業タイムライン
開発の流れ・要点
作ってみて感じたことや気づき
を中心にまとめています。

ポートフォリオ開発の事例としてはもちろん、「AWSや生成AIに手を出してみたい」と考えている方の最初の一歩の参考になれば幸いです。

 サービス概要とシステム構成
 サービス概要作ったのは、「3行要約サービス」です。

使い方はとてもシンプルで、テキストを入力すると、日本語で3行に要約した結果が返ってきます。

「文章の要点を素早くつかみたい」「大量テキストをサマリで眺めたい」そんなときに使えるミニWebアプリを目指しました。

 技術構成本サービスは、主に以下の技術で構成しています。

フロントエンド：S3で静的Webサイトをホスティング、CloudFrontで配信

バックエンド/API：API Gateway＋Lambda（Node.js）

要約処理：OpenAI API（gpt-4o-mini）

スタイリング：Tailwind CSS（CDN利用）

 システム構成図

 完成イメージ

 なぜこの構成・技術を選んだか今回この構成を選んだのは、「とにかく最短で動くものをAWS上で公開したかったから」です。
AWSの資格（CLF/SAA）を取得したものの、実際のサービス開発経験はまだ浅かったため、「学んだ知識を実践で試したい」というモチベーションがありました。
また、要約ロジックは生成AI（OpenAI API）ならアルゴリズムを自作せずに済むので、「生成AIを活用したミニサービス」というアイデアの実現にぴったりだと考えました。
AWSにした理由も、「せっかく資格を取ったので実際に使ってみたかった」程度で、他のクラウドやオンプレでなければダメな理由は特にありません。
個人開発ならこの構成で十分ですし、AWSサービスを使った「最低限の公開体験」をしてみたかったのが正直なところです。

 作業タイムラインこの「3行要約サービス」は、週末（土日）の2日間で一気に開発から公開まで行いました。

どのくらいのペースでどんな作業をしたのか、実際のタイムラインをまとめておきます。

 作業の流れと時間配分
Day1（1日目・土曜）午前～夜
サービスアイデア・構成検討
AWSアカウント準備、OpenAI APIキー取得
Lambda＋API Gatewayでバックエンド実装・動作テスト


Day2（2日目・日曜）午前～夕方
フロントエンド（S3＋CloudFront）構築
API連携、プロンプト・バリデーション調整
公開・動作確認、説明文やキャッチコピー追加

合計の実作業時間はおおよそ8～9時間ほどでした。
主要な工程ごとにChatGPTや公式ドキュメントを活用し、最短ルートで形にしています。

 備考実際は平日にアイデアを練ったりChatGPTと壁打ちした時間もありましたが、手を動かした実作業時間ベースでのカウントです。

「このくらいで公開デモまでたどり着ける」という目安として参考になれば幸いです。

 開発の流れと主なポイントこの章では、「3行要約サービス」の実装プロセスをざっくり工程ごとにまとめます。

どれも複雑な手順は省き、最小限で「動くもの」を作るためのポイントを絞っています。

 フロントエンド構築S3バケットで静的Webサイトをセットアップ
新規バケット作成→静的Webサイトホスティング有効化。パブリックアクセスやバケットポリシーの調整が必要。
CloudFrontでS3を配信
ディストリビューション作成、S3をオリジンに指定。SSLやオリジンポリシーも設定。
HTML＋Tailwind CDNでUI作成
入力フォームと要約結果エリアをシンプルに配置。Tailwindのユーティリティでレスポンシブ対応。
フロントからAPIエンドポイントにPOST
JavaScript（fetch API）でAPI GatewayのエンドポイントにPOSTリクエスト。
fetch(API_ENDPOINT, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ text: inputText }),
})
  .then(response => response.json())
  .then(data => {
    // 要約結果の表示処理
  });

 バックエンドAPI（API Gateway＋Lambda）API Gatewayでエンドポイント作成
POSTリクエスト用HTTP API新規作成。Lambda統合・CORS設定必須。
Lambda関数（Node.js）実装
環境変数でOpenAI APIキーを管理。受信テキストをOpenAI APIに渡し、要約結果を返す。
エラー処理・バリデーション
入力チェックをフロント＆Lambda両方で。APIやLambdaエラーもフロントに通知。
const { OpenAIApi, Configuration } = require("openai");
const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
const openai = new OpenAIApi(configuration);

exports.handler = async (event) => {
  const { text } = JSON.parse(event.body);
  const prompt = `以下の文章を日本語で3行に要約してください。\n${text}`;
  const response = await openai.createChatCompletion({
    model: "gpt-4o",
    messages: [{ role: "user", content: prompt }],
    max_tokens: 200,
  });
  return {
    statusCode: 200,
    headers: { "Access-Control-Allow-Origin": "*" },
    body: JSON.stringify({ summary: response.data.choices[0].message.content }),
  };
};

 OpenAI APIとの連携gpt-4o-mini（またはgpt-3.5等）を利用
用途とコストで選択（デモ用途ならgpt-3.5でも十分）。
プロンプト設計のポイント
日本語3行要約を返すため、プロンプト文言を工夫。「以下の文章を日本語で3行に要約してください。」
APIキーの管理
Lambda環境変数として保存（ソースコード直書きしない）。
APIの課金管理
デモ規模ならコストは低めだが、使いすぎに注意。

 デプロイ・公開CloudFrontのキャッシュ更新（インバリデーション）
デプロイ後はインバリデーションで変更を即反映。
公開URLの作成・シェア
CloudFrontのドメインを使い、誰でもアクセス可能に。
公開後の動作確認・微調整
実際のブラウザ上でテストし、見た目やエラー表示を最終調整。

 注意点・つまずきポイント1. Lambda & API Gateway実装でのつまずき
どんなことで困った？
LambdaをAWSコンソールから作るのか、ローカルでnpm installしてzip化してアップするのか分からず右往左往した。
Node.jsのバージョンを18にしたが、本当にこれで動くのかちょっと不安。
Lambda関数の環境変数でAPIキー（OPENAI_API_KEY）を入れ忘れてエラー多発、動かない理由が最初分からなかった。
どうやって突破した？
AWS CloudShellを初めてちゃんと触り、手順を1つずつ整理しながら進めた。
Lambdaのコンソールで「コード」から直接編集できると後で知ったが、最初は依存モジュール（openai SDK）をnpmでインストールしてzipでアップロードする必要があると理解。
環境変数（OPENAI_API_KEY）はLambdaの「設定」タブで手動で追加。エラーが出るたびにCloudWatch Logsを何度も見て、やっと「APIキーがない」のが原因だと気づいた。
一度仕組みが分かれば、コード修正→zip化→アップロード→curlでテストのサイクルがすぐ回せるようになった。
2. CORS（クロスオリジン）エラーの連発
どんなことで困った？
ブラウザでフロントの「要約する」ボタンを押すと通信エラー: Failed to fetchが必ず出る。なぜなのかサッパリ分からなかった。
API Gatewayで「CORSを有効化したのに」直らない現象があり、何度も設定とデプロイを繰り返した。
どうやって突破した？
ネットの記事を探し、「API GatewayのCORSはウィザードの青いボタンで設定しないとダメ」と知る。
curlコマンドでOPTIONSメソッドのリクエストを投げ、Access-Control-Allow-Originヘッダーがレスポンスに出るか何度も確認。
設定したつもりが効いてない時は、「一度クリアしてもう一度ウィザードからやり直す」のが確実だと学んだ。
うまくいった後はローカルのHTTPサーバー（python -m http.server）経由でhtmlを開き、やっとfetchできるようになった。
3. CloudFront／S3連携の罠
どんなことで困った？
CloudFrontの「Create new OAC」ボタンを押したら「S3バケットポリシーを更新しろ」という警告が出て先に進めない。
S3バケットの「静的ウェブサイトホスティング」はONにするのかOFFなのか混乱。
CloudFrontドメインでアクセスしても「403 Forbidden」が消えない。「何が間違ってるのか」分からずしばらく悩んだ。
どうやって突破した？
CloudFrontの警告に出てくる「バケットポリシー例」をそのままS3バケットの「アクセス許可→バケットポリシー」に貼り付けることで、やっとアクセス許可が反映された。
「S3静的サイトホスティングは無効、CloudFront＋OACのみでOK」というネット記事や公式ドキュメントを読み直して手順を再整理。
「表示されない」ときは、URL（S3エンドポイントではなくCloudFrontドメイン）、バケットポリシー、CloudFrontのオリジン設定、全てを順に見直すことが大事だと分かった。
4. デプロイ＆キャッシュ（CloudFrontインバリデーション）
どんなことで困った？
index.htmlやCSSを書き換えてS3に再アップロードしても、ブラウザで見ても全然更新されてない
何度リロードしても古いままなので「デプロイ手順を間違えた？」と焦った
どうやって突破した？
CloudFrontの「Invalidations」タブから「/*」でインバリデーションをかけると、数分後に最新状態が反映されると分かった。
CLIコマンド（aws cloudfront create-invalidation --distribution-id ... --paths "/*"）も使い、毎回アップロード後はキャッシュクリアする習慣をつけた。
「Completed」になるまで数分待つ必要があること、ファイル単体（/index.htmlだけ）も指定できることも覚えた。
5. 料金・コスト不安
どんなことで困った？
OpenAI APIが従量課金なので、「どれくらい請求されるか分からず」少しビビっていた
どのモデルが最安なのか、gpt-3.5-turboとgpt-4o-miniで悩んだ
APIキー登録やクレジットカードの投入タイミングを間違えそうで慎重になった
どうやって突破した？
公式料金表やZenn記事、SNSで「gpt-4o-miniが一番安い」と確認し、Lambdaのmodel指定だけで即切り替えた
無料枠終了後も、「フロント/バック両方で4000字上限」やAPI利用の頻度制限を入れ、「コスト爆発」対策をした
実際には要約サービスくらいの規模・アクセス数なら、月数百円も掛からないことが分かり安心した
6. 本番デプロイの細かな手順（S3/CloudFront/バケット設定）
どんなことで困った？
S3の静的サイトエンドポイントとCloudFrontのドメイン名を混同し、「どちらでアクセスすればよいか」何度も間違えた
バケットのパブリックアクセスや静的ホスティングのON/OFFなど、公式記事ごとに微妙に手順が違い、どれを信じていいか分かりづらかった
CloudFrontディストリビューションを作った後、バケットポリシーの貼り付け忘れや、デフォルトルートオブジェクト（index.html）の未設定で「表示されない」ことがあった
どうやって突破した？
S3は基本「静的サイトホスティング無効＆パブリックアクセス全ブロック」、CloudFrontのOAC経由でだけアクセス許可を出す
CloudFrontのオリジン設定をよく見直し、「S3バケット名.s3.amazonaws.com」にすること
ディストリビューション作成後は、必ずバケットポリシーの追加→保存を忘れないことをルーチンに
表示トラブル時は「バケット設定」「オリジン設定」「CloudFrontのDefault Root Object」「キャッシュ状態」を一個ずつ見直し
とくに初回公開時は、CloudFrontのインバリデーションとキャッシュの反映遅延も必ず疑う

 やってみて分かったこと・所感要件定義から設計、実装まで、最初から最後までChatGPTに相談しながら、2日で一気に作ることができました。

今回の開発は、勉強のためのアウトプットとして作ったものです。爆速で「動くもの」を作れるのは良い体験でしたが、ChatGPTに言われるまま受け身で進めているだけだと、やっぱり学びは得づらいなと感じました。

「こうじゃないかな？」「これを試してみたい」といった自分の興味や疑問をぶつけながら、能動的に取り組む姿勢があると、試行錯誤の質もスピードもぐっと良くなる気がします。

 今後やりたいこと・気付いたこと今回作った「3 Lines Summary」はシンプルな構成ですが、実際に動かしてみて「ここをもうちょっとアップデートしてみたい」と思うことも出てきました。
【機能面】
要約のバリエーションを増やして、「ビジネス用」「カジュアル用」など目的に応じて切り替えられるようにしたい
3行要約以外にも、箇条書きやキーワード抽出など、用途を選べるような機能も面白そう
【非機能面】
今回は全部AWSのGUIで設定したけど、CLI（コマンドライン）で同じ構成を作れるようにスクリプト化したい
→ CLI化すれば、再現性が高くなるし、環境の配布や自動化にも便利

→ AIエージェントと組み合わせる場合も、コマンドで指示できる方が親和性が高いと感じた
サービスの保守やアップデートも、「CLIベースなら楽になりそうだな」と思った
他にも、「自分以外の人でも簡単にデプロイ・使えるサービスにしたい」とか、今後触っていく中でまた気付きが出てくるかもしれません。

 まとめAIやクラウドを活用すれば、アイデアを形にする最初の一歩も、ぐっと踏み出しやすくなったと思います。

やってみたい方は、ぜひこの記事を参考に同じものを作ってみてください。

記事をコピペするか、URLを貼って「同じものを作りたい」とAIに伝えれば、きっと作れるはずです。
はじめに

サービス概要とシステム構成

サービス概要

技術構成

システム構成図

完成イメージ

なぜこの構成・技術を選んだか

作業タイムライン

作業の流れと時間配分

備考

開発の流れと主なポイント

フロントエンド構築

バックエンドAPI（API Gateway＋Lambda）

OpenAI APIとの連携

デプロイ・公開

注意点・つまずきポイント

やってみて分かったこと・所感

今後やりたいこと・気付いたこと

まとめ

Discussion
