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

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

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

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

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

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

VSCode トップメニューから Terminal > New Terminal を選択し、npm run dev を実行してください。

[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​