【AWS Amplifyで作るフルスタックReactアプリ #1】Reactアプリの作成からGitHub自動デプロイまで

Reactアプリの公開から認証・データ保存・画像アップロード、最後の削除まで一通り体験

Reactで画面を作るところまではできても、認証やデータ保存、画像アップロードまで含めて「ちゃんと動くアプリ」にしようとすると、一気に難しく感じることがあります。そこで今回は、AWS公式のハンズオン Build a Full Stack React Application を実際に追ってみました。公式では Beginner 向け、所要時間は約30分、コストは Free Tier eligible と案内されており、Reactアプリのホスティングから認証・データ・ストレージの接続、最後のクリーンアップまでを4つのタスクで体験できる構成です。

先に感想を言うと、このチュートリアルは「まず公開する」「あとからバックエンド機能を足す」という順番がかなり分かりやすいです。最初から認証やDBの細かい話に入るのではなく、Task 1 でまず React アプリをデプロイし、Task 2〜3 で認証・データ・画像保存を足していくので、全体像をつかみやすいと感じました。公式の学習目標も、React アプリのホスト、認証・データ・ストレージの追加、cloud sandbox の起動、ノートの作成・更新・削除を実装する、という流れになっています。

このチュートリアルで最終的に作るのは、ユーザーがサインアップしてログインし、自分のノートを作成・表示・削除できる Notes アプリです。さらに画像も保存できるので、単なるフロントエンドの練習ではなく、認証付きフルスタックアプリの基本形をまとめて試せる内容になっています。

タスク1：Reactアプリのデプロイとホスティング ― AWS Amplifyでフルスタックアプリを構築する

AWS Amplifyの公式チュートリアルを実際に手を動かしながら進めています。この記事では、最初のステップであるTask 1の内容と、触ってみて感じたことをまとめます。Task 1のゴールは、Reactアプリを作成し、GitHub経由でAWS Amplify Hostingにデプロイして公開URLを取得することです。

Task 1の全体像

細かい手順に入る前に、Task 1がどういう順番で進むのかを先に整理しておきます。

Reactプロジェクトを作成する
GitHubリポジトリに初回push
npm create amplify@latest -y でAmplifyのバックエンド構成を追加
その変更をGitHubにpush
Amplifyコンソールでリポジトリとmainブランチを接続
Save and deployで初回デプロイ
App.jsx を書き換えてpushし、自動デプロイの動作を確認

最初に引っかかりやすいのが、npm create amplify@latest -y を「Amplifyコンソールで接続したあと」にやるのか「前」にやるのか、という点です。公式チュートリアルは接続の前にこのコマンドを実行し、Amplify構成ごとGitHubにpushしてから接続に進みます。こうしておくと、コンソールから接続した瞬間にバックエンド定義を含んだ状態で初回デプロイが走り始めます。

Reactプロジェクトの作成とローカル確認

最初に以下のコマンドでReactプロジェクトを作成します。

bash

npm create vite@latest notesapp -- --template react

続けて依存パッケージをインストールし、ローカル開発サーバーを起動します。

bash

cd notesapp
npm install
npm run dev

ブラウザ上にReactの初期画面が表示され、自分のPC上でアプリが動くことをまず確認できます。

GitHubへの初回push

続いてGitHubに notesapp リポジトリを作成し、ローカルのコードをpushします。

bash

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/<your-username>/notesapp.git
git push -u origin main

Amplify HostingはGitHub上のリポジトリを起点に自動デプロイする仕組みのため、ここでGitHubにコードを置くことで「ローカルで修正してpushするだけで公開アプリが更新される」状態の土台ができます。

Amplifyバックエンド構成の追加

GitHubへの初回pushが終わったら、Amplifyコンソールで接続する前に以下のコマンドを実行します。

bash

npm create amplify@latest -y

このコマンドは画面を書き換えるものではなく、プロジェクト直下に amplify/ フォルダを作り、その中にバックエンド定義ファイルのひな形を生成するだけのコマンドです。実行直後にブラウザ上の見た目が変わらないのは正常で、慌てる必要はありません。

生成されるのは amplify/backend.ts や amplify/auth/resource.ts、amplify/data/resource.ts といったTypeScriptファイルです。ここに認証・データ・ストレージといったバックエンドの設計をコードで書いていくことになります。AWSコンソールをポチポチ操作して構築するのではなく、すべてコードで管理するのがAmplify Gen 2の前提です。

重要なのは、この段階で起きているのはあくまで「ローカルにひな形を作る」ことだけで、AWS側にバックエンド用のリソースはまだ何も作られていない、という点です。実際にAWS上に開発用のバックエンド環境(cloud sandbox)が立ち上がるのは、次のTaskで npx ampx sandbox を実行したときになります。

ひな形を生成したら、その変更もGitHubへpushしておきます。

bash

git add .
git commit -m "add amplify backend scaffold"
git push origin main

こうしておくと、次のコンソール接続のステップで、Amplify構成を含んだ状態のリポジトリをそのまま接続できるようになります。

Amplifyコンソールでの接続とデプロイ

GitHub側に amplify/ フォルダを含んだ状態が揃ったら、AWS Amplifyコンソールでの接続作業に進みます。ここはUI操作が細かく分かれているので、一段ずつ追っていきます。

1.Amplifyコンソールで「アプリケーションのデプロイ」 を選択

2.Deploy your app の画面で GitHub を選択

3.GitHub認証を済ませ、Amplifyにリポジトリアクセスを許可

4.対象のリポジトリと main ブランチを選択

5.ビルド設定はデフォルトのまま（Amplifyが自動検出してくれます）

6.「保存してデプロイ」 をクリック

7.デプロイ完了後、発行された amplifyapp.com のURLをブラウザで開いて表示を確認

ここまで進めた時点で、Amplify Hosting側のAWSリソースと公開URLはすでに作られている状態です。ただし、さきほど amplify/ フォルダに書いた認証・データ・ストレージの定義に対応する開発用バックエンド(sandbox)のほうはまだ作られていません。この区別は次のTaskでsandboxを起動するときに効いてくるので、頭の片隅に置いておくと混乱しません。

pushした変更が公開サイトに反映されるか試す

Task 1の最後に、src/App.jsx の表示内容を書き換えます。以下は動作確認の意図が伝わりやすいように簡略化した例です（公式ではReactロゴや App.css をそのまま残した状態で一部だけ更新しています）。

jsx

function App() {
  return (
    <div>
      <h1>Hello from Amplify</h1>
    </div>
  );
}

export default App;

変更をGitHubにpushします。

bash

git add .
git commit -m "update App.jsx"
git push

あとはAmplify Hosting側がpushを検知し、自動的にビルドとデプロイを走らせてくれます。しばらく待ってから公開URLを開き、表示が Hello from Amplify に変わっていれば、GitHub連携による自動反映が正しく機能していることが確認できます。

ここで見ているのは npm run dev のようなローカルのプレビューではなく、GitHubにpushした変更がクラウド上の公開サイトまで届く、本番に近い流れそのものです。派手な見た目の変化はありませんが、この先Task 2以降で認証やデータベースを組み込んでいくうえで、「コードを書き換えてpushすれば公開アプリに反映される」という土台が動いていることを最初に確かめておく意味のある工程です。

まとめ

Task 1では、Reactプロジェクトの作成からGitHub経由でAmplify Hostingにデプロイするまで、フルスタックアプリの「土台」にあたる部分を一通り動かしてみました。

一番のポイントは、npm create amplify@latest -y を Amplifyコンソールで接続する前に実行し、amplify/ フォルダを含んだ状態でGitHubにpushしておくことです。この順番で進めておくと、コンソールから接続した瞬間にバックエンド定義ごと初回デプロイが走るので、あとから構成を足して再デプロイし直す手間が発生しません。

もう一つ意識しておきたいのは、この段階で実際にAWS上に作られているのはAmplify Hosting側の公開用リソースだけで、認証やデータベースといったバックエンドの実体はまだ何も作られていない、という点です。amplify/ フォルダに書いてあるのは設計図のようなもので、それがAWSリソースになるのは次のTaskで cloud sandbox を起動したタイミングになります。この区別ができていると、Task 2以降で「どこまでがローカルの話で、どこからがクラウド側の話なのか」がぶれずに読み進められます。

見た目としては「Hello from Amplify」が表示されるだけの地味な段階ですが、GitHubにpushすれば公開サイトに反映される自動デプロイの流れがすでに動いている、という事実がTask 1の一番の収穫です。このあと認証やデータを足していく工程でも、「コードを書いてpushすれば反映される」という基本の流れは最後まで変わりません。

次回はTask 2として、cloud sandboxの起動と認証機能の追加に進みます。

Reactアプリの公開から認証・データ保存・画像アップロード、最後の削除まで一通り体験

タスク1：Reactアプリのデプロイとホスティング ― AWS Amplifyでフルスタックアプリを構築する

Task 1の全体像

Reactプロジェクトの作成とローカル確認

GitHubへの初回push

Amplifyバックエンド構成の追加

Amplifyコンソールでの接続とデプロイ

pushした変更が公開サイトに反映されるか試す

まとめ

DevpediaCode編集部