【未経験向け】Laravel×Reactで作るTodoアプリ！AWS環境へデプロイする全5ステップ

プログラミングの学習を進める中で、「そろそろ自作のアプリをインターネットに公開したい！」と思っていませんか？しかし、いざAWS（アマゾン・ウェブ・サービス）の画面を開くと、用語やサービスが多すぎて挫折しそうになりますよね。結論から言うと、未経験者がインフラを学ぶなら「Todoアプリ」のAWSデプロイから始めるのが最短ルートです。

この記事では、ローカル開発から、WinSCPを使った具体的なファイル転送、そしてAWSでの「落ちないシステム構築」まで、5つのステップで分かりやすく解説します。この記事を読めば、ただ動くだけでなく、実務でも高く評価されるハイレベルなポートフォリオの作り方が分かりますよ！

なぜAWSで「Todoアプリ」を作るのがおすすめなのか？

未経験者がAWSで挫折しやすい理由

AWSには数百種類ものサービスがあります。そのため、初心者は「何から手を付ければいいか分からない」状態になりがちです。目標を決めずにマニュアルを読むだけでは、複雑な設定の途中で迷子になってしまいます。

Todoアプリなら必要な機能がすべて詰まっている

Todoアプリはシンプルですが、Web開発の基本である「CRUD（作成・読み出し・更新・削除）」がすべて詰まっています。これをAWSで動かすには、サーバー、データベース、ネットワークの知識が必須です。基本が凝縮されているからこそ、最初の題材に最適なのです。

全体像を把握！Todoアプリ構築の5つのステップ

今回は、以下のような本格的なシステムを5つのステップで作っていきます。

今回構築するAWSの全体構成図

※未経験の方は、まず「VPCという大きな箱の中に、アプリ（EC2）とデータ（RDS）を入れるんだな」くらいのイメージを持っていただければOKです！

ステップ1：PCの中に開発環境を作ろう

まずは、自分のパソコン（ローカル環境）でアプリが動く土台を作ります。コードを書くエディタには「VS Code」を使い、サーバー環境には「XAMPP」などを導入するのが手軽でおすすめです。

ステップ2：アプリの画面と仕組みを作ろう

次に、アプリの中身をプログラミングしていきます。今回は、バックエンドに「Laravel」、フロントエンドに「React」を組み合わせます。見栄えを良くするために、デザインライブラリ「MUI（Material UI）」を活用しましょう。短期間でプロ品質の美しい見た目が完成します。さらに、データ更新時に通信を待たず画面を即座に変える「楽観的更新（React Query）」を導入すると、サクサク動いてユーザー体験（UX）が劇的に向上します。

ステップ3：AWSにネットワークとサーバーの土台を用意しよう

ローカルでアプリが完成したら、いよいよAWS側の準備です。先ほどの構成図にあった「VPC」という自分専用の仮想ネットワークを作り、その中にインターネットの通り道（ゲートウェイ）を通します。次に、アプリを動かす仮想サーバー（EC2）と、データを保存する専用のデータベース（RDS）を立ち上げましょう。

ステップ4：作ったアプリをAWSへ引っ越し＆合体させよう

土台ができたら、ローカルで作ったプログラムをAWSへアップロードします。今回は難しいコマンドを使わず、視覚的に操作できる「WinSCP」というファイル転送ツールを使います。

① WinSCPでEC2に接続する

WinSCPを起動し、ホスト名に「EC2のパブリックIPアドレス」、ユーザー名に「ec2-user」を入力します。認証設定には、EC2作成時にダウンロードした「秘密鍵（.pemファイル）」をセットしましょう。サーバー側のファイル書き込み権限を得るため、シェル設定で「sudo su -」を指定するのを忘れないでください。

② アプリのファイル（プログラム）をドラッグ＆ドロップでアップロード

接続できたら、ローカルPC内にあるアプリの資材を、EC2上のApacheが管理するディレクトリ（例：/var/www/todo-app）へドラッグ＆ドロップでまるごとコピーします。

③ AWS環境での最適化（仕上げのコマンド）

ファイルを送っただけではアプリは動きません。EC2にサインインし、仕上げの作業を行います。

• 権限の変更： Webサーバーがファイルを読み書きできるよう、所有者を「apache」ユーザーに変更します。
• 環境設定（.env）： .env.exampleをコピーして.envファイルを作ります。中身のデータベース接続先を、ローカルから「AWS의 RDSエンドポイント」に書き換えます。
• バックエンドの構築： composer installを実行して必要なライブラリを導入し、php artisan migrateでRDS上にテーブルを作成します。
• フロントエンドのビルド： Node.js（npm）を使ってパッケージをインストールし、npm run dev（またはbuild）を実行してReactのソースコードをビルドします。

これで、インターネット経由で自作のTodoアプリにアクセスできるようになります！

ステップ5：トラブルに強い「落ちない仕組み」に変身させよう

構成図の左側にある「ALB」と「Auto Scaling」の設定を行います。実務で使われるシステムは、サーバーが1台壊れたくらいでは止まりません。アクセスを分散するALB（ロードバランサー）と、自動でサーバーを増減させるAuto Scalingを組み合わせます。これにより、万が一サーバー1台に障害が起きても、自動で別のサーバーに切り替わる「止まらないシステム」が完成します。ここまでできれば、未経験者としては文句なしのハイレベルな構成です！

未経験者がAWSインフラ構築でつまずかないための2つのポイント

開発環境と本番環境の「違い」に注意する（実体験トラブル例）

「ローカル（XAMPP）では完璧に動いたのに、AWS（EC2）に持っていったらエラーになる！」これは現役エンジニアでもよく遭遇する、インフラ構築の「あるある」です。たとえば、EC2（Amazon Linux 2023）上でcomposer installを実行した際、PHPの拡張ライブラリ（php-xmlやphp-mbstringなど）が不足していて失敗することがあります。焦らずにエラーログを読み、OSのコマンド（dnfなど）を使って不足しているライブラリを手動でインストールしていきましょう。この環境による「違い」を乗り越えることで、インフラの理解がぐっと深まります。

ネットワーク（VPC）の「つながり」を図でイメージする

AWSを触るときは、文字だけでなく「図」を意識することが大切です。「このネットワークから、あのデータベースには通信が届く設定になっているか？」セキュリティグループ（壁）のインバウンドルールで、Webサーバーからの接続を許可できているか、データの流れをイメージしながら進めましょう。

まとめ：5つのステップをクリアして、ワンランク上のエンジニアへ！

今回は、Laravel×ReactのTodoアプリを、WinSCPを使ってAWSにデプロイする5つのステップを解説しました。Gitを使わなくても、ファイル転送ツールとサーバー上でのビルド作業を組み合わせることで、本番環境を構築できます。アプリ開発だけでなく、OS、ネットワーク、データベース、そして「自動復旧」といったインフラレイヤーまで挑戦することは、本番運用を学ぶ上で非常に重要です。この経験は、ポートフォリオとして面接官にアピールする際、他の求職者との大きな差別化ポイントになります。

まずはWinSCPのダウンロードから、最初の一歩を踏み出してみませんか？一歩ずつ構築していく楽しさを、ぜひ味わってみてください！