はじめに
昨日まででGraphQLのサーバーを立てることができたので今日からクライアントアプリを実装してみます。今回はその事前準備をします。
環境
以下の開発ツールを用います
Amplifyはアプリケーションのデプロイを簡単にすることができる便利ツールです。cdkでもデプロイはできますが、フロントエンドアプリのデプロイに特化したツールを用いたいと思ったのでAmplifyにしました。
また、今回もReactの開発環境の構築はcreate-react-appを用いました。
開発環境の構築
まずはRectの環境から構築していきます。環境が構築できたらそのディレクトリに移動します。
create-react-app appsync-client
cd appsync-client
次はAmplifyの設定を行います。事前にaws-cliでの認証を済ませておきましょう。また、Amplifyを今回はじめて使ったのでインストールから行いました。
npm install -g @aws-amplify/cli
インストールが完了したら早速Amplifyを立ち上げます。
amplify init
立ち上げるとCLIから色々と質問されるかと思います。私は以下のような感じで設定しました。だいだいはエンターキー連打で問題ないと思います。途中、Reactをフレームワークとして選択する箇所があるのでそこだけ注意してください。
? Enter a name for the project appsyncclient
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
? What javascript framework are you using react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm run-script build
? Start Command: npm run-script start
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default
そしたら次にAppSyncと連携させるために以下のコマンドを実行します。
amplify add codegen --apiId hogehoge
--apiIdはコンソールの設定のところから確認ができます。また、上記のコマンド操作についてはコンソール内のトップのアプリと統合するという欄のJavaScriptのタブに切り替えたページにも説明されています。amplify add codegenについてもエンターキー連打で問題ないです。
あとはaws-exports.jsを読み込ませる作業がいります。create-reacte-appで作成したsrc/index.jsからロードさせます。ロードにはaws-amplifyを用いるのでパッケージをインストールします。
yarn add aws-amplify
そしたらsrc/index.jsに以下のコードを加えましょう。
import Amplify from "aws-amplify"
import config from "./aws-exports"
Amplify.configure(config)
下準備は以上です。
さいごに
今日はインストールと必要ファイルの読み込みまでを進めました。明日から実装に入っていきたいと思います。