フルスタック React アプリケーションを構築する

実装

• 新しい React アプリケーションを作成する

  簡単に React アプリケーションを作成するには、create-react-app のコマンドを使用します。コマンドプロンプトまたはターミナルで次のコマンドを使用して、このパッケージをインストールします。

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

  Code snippet copied

  コピー
• GitHub リポジトリを初期化する

  このステップでは、GitHub リポジトリを作成してコードをリポジトリにコミットします。このステップを完了するには、GitHub アカウントが必要です。まだお持ちでない場合はこちらでサインアップしてください。

  a.アプリケーション用の新しい GitHub リポジトリを作成します。
  

  

  b.新しいターミナルを開き、アプリケーションのルートフォルダ (例: amplifyapp) に戻ります。

  c.create-react-app を使用すると、Git リポジトリが自動的に初期化され、最初のコミットが行われます。Git が初期化されていない状態で既存の React アプリケーションをデプロイする場合は、続行する前に必ず以下のコマンドを入力してください。

  git init
  git add .
  git commit -m "initial commit"

  Code snippet copied

  コピー

  d.コンピュータで GitHub を一度も使用したことがない場合は、アカウントへの接続の許可を続行する前に、次のステップを実行してください。
  

  コマンドラインインターフェイスで次のコマンドを実行して、新しい GitHub リポジトリにアプリケーションをプッシュします。

  git remote add origin git@github.com:username/reponame.git
  git branch -M main
  git push -u origin main

  Code snippet copied

  コピー
• AWS マネジメントコンソールにログインする

  このステップバイステップガイドを開いたままにしておくため、AWS マネジメントコンソールを別ウィンドウで開きます。画面がロードされたら、ユーザー名とパスワードを入力して開始します。その後、検索バーに Amplify と入力して [AWS Amplify] を選択し、サービスコンソールを開きます。
  

  

• アプリを AWS Amplify でデプロイする

  このステップでは、先ほど作成した GitHub リポジトリを AWS Amplify サービスに接続します。これにより、アプリを AWS 上でビルド、デプロイ、ホストできるようになります。

  a.AWS Amplify サービスコンソールで、[Amplify Hosting] の下の [Get Started] (使用を開始) を選択します。
  

  

  b.レポジトリサービスとして [GitHub] を選択し、[続行] をクリックします。

  

  c.GitHub で認証し、Amplify コンソールに戻ります。先ほど作成したリポジトリとメインブランチを選択してから、[Next] (次へ) を選択します。
  

  

  d.デフォルトのビルド設定を使用し、[次へ] を選択します。

  

  e.最終的な詳細を確認し、[Save and deploy] (保存してデプロイ) を選択します。
  

  

  f.AWS Amplify によってソースコードがビルドされ、アプリが https://...amplifyapp.com にデプロイされます。
  

  

  g.ビルドが完了したら、サムネイルを選択してウェブアプリが稼動していることを確認します。 

  

• コードの変更を自動的にデプロイする

  このステップでは、テキストエディタを使ってコードにいくつかの変更を加え、その変更をアプリケーションのメインブランチにプッシュします。

  a.次のコードで src/App.js を編集して保存します。
  

  import React from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1>Hello from V2</h1>
        </header>
      </div>
    );
  }
  
  export default App;

  Code snippet copied

  コピー

  b.コマンドプロンプト (Windows) またはターミナル (macOS) で GitHub に変更をプッシュして、新しいビルドを自動的に開始します。 

  git add .
  git commit -m “changes for v2”
  git push origin main

  Code snippet copied

  コピー

  c.ビルドが完了したら、AWS Amplify コンソールのサムネイルを選択して更新されたアプリケーションを確認します。