メインコンテンツまでスキップ

ローカル実行によるデバッグとテスト

アプリケーションコードをローカル開発環境で実行しデバッグを行う方法とテストの方法を記載したドキュメントです。

VSCode 上での開発モード実行と確認方法​

本カタログ AMI は Remote EC2 Sandbox を元に作られているため、VSCode を利用する場合、Remote EC2 Sandbox の接続方法と使い方 に記載されている「Remote SSH」を使って、お手元のローカルPCのブラウザから動作確認が可能です。

VSCode のターミナルで開発モードを実行する​

VSCode トップメニューから Terminal > New Terminal を選択し、npm installを実行して依存関係をインストール。その後、npm run dev を実行してください。

[ec2-sandbox-x86_64@ serverless-frontend-application-stack] $ npm install
[ec2-sandbox-x86_64@ serverless-frontend-application-stack] $ npm run dev

> dev
> react-router dev

  ➜  Local:   http://localhost:3000/
  ➜  Network: http://10.0.100.127:3000/
  ➜  press h + enter to show help

エラーなく実行できると、画面右下にこのようなお知らせが表示されます。

ポートフォワーディングされているポート番号を確認する​

VSCode の Remote SSH Extension を利用している場合は、前項で表示されたお知らせから「Open in Browser」をクリックするとお手元のローカルPCでそのまま画面が開きます。もし、フォワーディングされているポート番号を確認したり、別のブラウザで動作を確認したい場合は、Terminal 画面から Ports タブを開き、Forwarded Address を開いてください。

動作確認画面​

以下のように確認されれば、OKです。

Welcome Page (Top Page)​

TodoList Page​

非同期処理・サーバー側API実装の例​

loader / action の定義で、WebAPI を実装することも可能です。以下の赤枠をクリックすると、ローダーが表示され、非同期で PUT /todolist へダミーリクエストを送ります。本カタログでは動作確認のため 1秒ほど sleep してダミーレスポンスを返す仕組みになっています。

完了後は toast でメッセージが表示されます。