このページは
個人趣味レベルで開発はしたことがあるけど、業務開発経験はこれからレベルの自分が噛み砕いた内容で記載。
AWS Amplifyとは
As is
開発してサービス作りたいけど、ホスティング先考えたり、データベース準備したり、リリースの仕組み用意したり、結構やること多い。
To be
UIになるフロントエンドやサービスロジックの開発に集中して、バックエンドの諸々準備に手間をかける必要なし。
手段
AWS amplifyを使って開発する。
AWS Amplifyの実態
自分の理解では以下。
AWS Amplifyライブラリ
開発するフロントエンドのソースコード内でインポートをかけて利用するライブラリ。
ライブラリで準備されているメソッドを利用し、バックエンドとの連携・操作を一元サポートしてくれる。
Amplify CLI
コマンドライン操作でAWSのバックエンドを準備・管理できる。データベース作ったりAPI追加したり。
AWS Amplify Console
CI/CDとフロントエンドのホスティングを準備してくれる。
(補足)開発環境・テストの整備面でできること
- バックエンドのローカルテスト
- バックエンド開発環境の分離
- Gitリポジトリ変更を検知し自動デプロイ
- ビルドフェーズで任意のテストを実行
- Cypress(E2Eテスト）
AWS Amplify はじめ方
Amplify準備
以下を参考にすると便利。
https://docs.amplify.aws/start/getting-started/installation/q/integration/react/
【必要な環境】
- Node.js v14.x or later
- npm v6.14.4 or later
以下を実行。
npm install -g @aws-amplify/cli
インストールができたら、amplifyのセットアップを行う。
amplify configure
対話式で進むので、必要な設定を答えていく。
初期プロジェクトの準備
以下を参考に進める。※今回はReact
https://docs.amplify.aws/start/getting-started/setup/q/integration/react/#create-a-new-react-app
Reactの空アプリケーションを作成。
npx create-react-app hands-on-todo
対話式で進むので進める。
プロジェクト向けにamplifyのバックエンドを準備する
Reactのアプリケーションのディレクトリに移動し、amplify init コマンドを実行し、対話式で設定を進める。
cd hands-on-todo
amplify init
React向けのamplifyのライブラリをインストールする。
npm install aws-amplify @aws-amplify/ui-react