みなさんこんにちは！
2025年4月にアイレットに入社しました
第一開発事業部の德永です。
7月末から約2ヶ月間かけて部署内でAWS CDKとVue.jsを使ったWebアプリケーションの開発研修を行いました。
今回は実際に作成した画面をお見せしながら開発の流れや感想などを紹介していきたいと思います。

目次

  1. AWS CDKとVue.jsとは
  2. 主要機能紹介
  3. 大変だったこと
  4. 面白さを感じたところ
  5. まとめ

1. AWS CDKとVue.jsとは

はじめに、今回の開発の主軸となったAWS CDKとVue.jsについて説明します。

  • AWS CDKとは？

AWS Cloud Development Kit (AWS CDK) は、コードでクラウドインフラストラクチャを定義し、 AWS CloudFormation を通じてプロビジョニングするためのオープンソースのソフトウェア開発フレームワークです。

AWS公式ガイド より引用
簡単に言うと、使い慣れているPython、TypeScript、Javaなどのプログラミング言語で、コードを書いてクラウドのインフラを構築することができるツールです。
今回の開発ではこのAWS CDKを使用して下記のAWSリソースを作成しました。

  • 使用言語: TypeScript
  • 作成したAWSリソース: Amazon Cognito、Amazon CloudFront、Amazon API Gateway、AWS Lambda、Amazon S3(画像保存用、フロント用)

  • Vue.jsとは？

Vue（発音は /vjuː/、view と同様）は、ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript の上に構築され、あらゆる複雑さのユーザーインターフェースを効率的に開発するのに役立つ、宣言的でコンポーネントベースのプログラミングモデルを提供します。

Vue.js公式サイトより引用
このフレームワークを使ってログイン画面や画像アップロード画面などのフロントエンドの各ページを作成しました。

2. 主要機能紹介

次に実際に作成した主要機能について紹介します。

①ユーザー認証
Amazon Cognitoを活用したセキュアな認証を実現しました。
認証の流れは以下の通りです。

ユーザーがログインフォーム入力
↓
Amazon Cognitoで認証
↓
アクセス権限の確認とトークン発行
↓
ログイン完了
↓
画像一覧画面へリダイレクト

ログインではAmazon Cognitoのユーザープールを設定しました。
下記のsignInAliases:{} を使用すると、メールアドレスとユーザー名の両方を使ってサインインする設定を簡単に作ることができます！これがAWS CDKの良さの一つですね✨

signInAliases: {
    email: true,
    username: true,
},

パスワードを設定するときに「最低〇文字以上で大文字小文字を含めてください」のようなメッセージが表示されるのをよく見かけますよね？
私もセキュリティを高めるために、パスワードには最低10文字以上、大文字/小文字、数字、記号を含めることを必須としたパスワードポリシーを設定しました。また直近2回までに使用したパスワードは使用できないようにする設定も加えました。
以下のように設定できます

passwordPolicy: {
    minLength: 10,
    requireLowercase: true,
    requireDigits: true,
    requireSymbols: true,
    requireUppercase: true,
    passwordHistorySize: 2,
},

②画像アップロード画面

アップロード画面では、画像ファイルとタイトルやコメント、撮影地といったメタデータを一緒に入力できます。
処理の流れは下記の通りです。

ユーザーが各項目を入力
↓
送信ボタンを押下
↓
情報がバックエンドの画像編集用APIに送信
↓
送られてきた情報を基に、画像をS3に保存＋画像とコメントや撮影地などのメタデータをRDSに登録

画像編集用APIはそれぞれの登録／編集／削除の操作に応じて、S3 と RDS の画像データを管理するためのAPIです。

#登録の時
if operation == "R":
   required_fields = {...} # 必須項目のチェックのため省略
file_bytes = await image.read()
s3_url = await upload_image_to_s3(file_bytes, title) # S3にアップロード
photo_in = schemas.PhotoCreate(...)
saved_photo = crud.create_photo(db, photo_in) # RDSに保存
return JSONResponse(status_code=200, content={"message":"画像情報を登録しました。"})

削除と編集の時にはそれぞれ#編集 elif operation == "E": 、 #削除 elif operation == "D": のようにoperation の値を変えて設定します。
この使い分けによって、登録と編集と削除の計3つの処理を簡単に実行することができます！

③画像一覧画面
アップロードされた画像は、画像一覧画面に表示されます。

※共有データベースのためプライバシー保護の観点から私が投稿した画像のみお見せいたします🙇‍♀️

処理の流れは下記の通りです。

フロントエンドが画像一覧表示用APIを呼び出し
↓
APIはデータベースにアクセスし、保存されているすべての画像データを取得
↓
フロントエンドはこれらの情報を使って、各画像を一覧として表示

④画像詳細画面
画像一覧画面で画像をクリックすると、その詳細ページに遷移します。

この詳細画面で閲覧できる情報は、画像詳細用APIを呼び出してRDSから取得しています。
情報編集のボタンでは写真の置き換えやタイトルの編集をすることができます。削除ボタンを押すとポップが表示され、画像を削除できます。
詳細ページでは画像やタイトル、コメントに加えて「写真を投稿した投稿者情報」も返すようにしています。

"photo_detail": {
"id": photo.id,
"photo_url": photo.s3_url,
"title": photo.title,
"comment": photo.detail.comment if photo.detail else None,
"location": photo.detail.location if photo.detail else None,
"user": photo.detail.user if photo.detail else None, # ←投稿者情報
}

投稿者情報 (user) と、ログイン時に発行されるトークンに含まれる ログイン中のユーザーを比較します。
これにより、
・投稿者と一致する → 編集／削除ボタンを表示
・投稿者と一致しない → ボタンを非表示
という制御ができます。

この処理によって他のユーザーの写真詳細ページを閲覧できたとしても、自分以外の画像を勝手に編集・削除できないように、強固なセキュリティを確保することができますね！

⑤パスワード変更画面
最後にパスワード変更画面を紹介します。

この画面では、現在のパスワードと新しいパスワードと認証コードを入力して、パスワード変更をすることができます。確認コードを設定することによって他人が勝手にパスワードを変更することを防ぎ、セキュリティを強化しています。

変更処理にはAmazon Cognitoの機能を活用し、パスワードポリシーの遵守と、スムーズなユーザー体験の両立を目指しました。

3. 大変だったこと

開発を通して大変だったことはエラー解消です。
代表的なものを挙げると…

例
[ERROR] Runtime.ImportModuleError: Unable to import module 'main': No module named 'pydantic_core._pydantic_core'

(zip化したファイルの中にbackendがありません、main.pyがありません、fastapiが見つかりません..など)
ImportModuleErrorが多く、全て解決して正常な動きを確認するまでに丸１週間かかりました..🫨

どのように乗り越えたか

試行錯誤の連続でしたが、ひとつずつ潰していったことでようやく解決できました。

  • パス名の一致確認

指定するLambdaのentryパスと、zip化したディレクトリ構造を何度も見直し、
ディレクトリ二重問題（backend/backendのような構造）を見つけて解消しました。

  • AWS CDKキャッシュ削除

古いキャッシュが残っていると何度デプロイしても反映されないためデプロイの度にキャッシュ削除することを徹底しました。

  • requirements.txtをきちんと書く

「ライブラリ名」だけでなく、それぞれの相互性が良いバージョンも指定しました。

  • zip化の再構築

ディレクトリを作り直し、本当に必要なファイルだけをzip化しました。

エラーを深追いしすぎず、一度最小構成に戻す勇気も大事と言う教訓も得ました笑

4. 面白さを感じたところ

開発を通して面白さややりがいを感じた部分は、ブラウザを開き自分がコーディングした通りの動作を確認できた時です。サイドバーやユーザー名とパスワード入力する欄ができているのを確認した時には諦めずに試行錯誤をして良かった！と思えるような達成感を実感しました。

5.まとめ

初めての開発でしたが、バックエンドからインフラ、フロントまで通して実装し、ひとつのWebアプリケーションを完成させることができました。
エラー解消やスケジュール管理など大変なことも多かったですが、その分問題解決方法や開発の流れを学べたのは大きな収穫です。
将来的にはいいねボタンや画像検索のような追加機能も取り入れるとより利便性の高いアプリケーションになるのではないかと考えました！
ここまでご覧いただきましてありがとうございました！