🍇

Figma + AWS Amplify Studio + ReactでCRUDなアプリを作ってみる② ~環境構築編~

2022/06/23に公開

AWS

こんにちは、ロンです。
前回は以下の記事で概要や事前準備について書きました。

本記事では、環境構築をしていきたいと思います。
大まかな流れとしては

Reactの初期アプリを作成
Amplify CLIにて初期設定
GithubリポジトリとAmplifyの連携
Amplify Studioの起動

になります。

React初期アプリを作成

npx create-react-app my-amplify-studio-app

念の為、動作確認

cd my-amplify-studio-app
yarn install
yarn start

するとlocalhost:3000に以下のアプリが起動する。

ここまでできたら、GithubにPushしておいてください。後ほどAmplifyと連携させます。

AWS Amplify初期設定

yarn global add @aws-amplify/cli
yarn add aws-amplify @aws-amplify/ui-react

AWSのアカウントと紐付け

amplify configure

Amplifyのアプリ初期化

amplify init

正常に終了すると、以下のようにAmplifyにアプリが作成される。

Githubのリポジトリと連携

以下のHosting environmentsの画面から、Githubを選択し、ブランチを接続する。

以下設定画面ですが、Environmentと、ロールを設定する。(新しいロールを作成する。)
フルスタックの継続的デプロイ(CI/CD)を有効化をONにしておくと、Githubのmaster or mainブランチが更新されると自動でビルド→デプロイまでしてくれて非常に便利なので、おすすめです。

これでGithubリポジトリとの連携は終了です。正常に終了すると以下の画面のようになります。
白くなっているブラウザマークの部分をクリックすると、デプロイされているReactアプリにアクセスできます。

次にBackend environmentsにてAmplify Studioを起動します。
以下のような画面になればOKです。

以上で環境構築は一通り完了しました。
Githubとの連携は必須ではありませんが、便利なのでやっておいたほうが良いと思います。
次回はAmplify StudioにてFigmaのインポートや、バックエンドの設計・実装をやっていきたいと思います。

React初期アプリを作成

AWS Amplify初期設定

Githubのリポジトリと連携

Discussion