なんかやりたいなと思ったのでAWS Amplifyのチュートリアルをやります。

サービスについてはよく知りません。バックエンドをいい感じにしてくれるらしいです。

以下、チュートリアルに沿って進めていくのですが途中で断念しました。設定を誤ってチュートリアルと違う内容になっていたようです。やり直す気もなかったので辞めてしまいましたが日記として記事には残しておきます。

セットアップ

macにNode.jsが入っていなかったのでまずはそこから。

Node.js

バージョン管理用のnodebrewをインストール。

$ brew install nodebrew

Node.jsをインストール…しようと思っらエラー。

$ nodebrew install-binary latest

Fetching: https://nodejs.org/dist/v13.12.0/node-v13.12.0-darwin-x64.tar.gz
Warning: Failed to create the file                                             
Warning: /Users/user/.nodebrew/src/v13.12.0/node-v13.12.0-darwin-x64.tar.gz: 
Warning: No such file or directory

こちらのサイトを参考にディレクトリを作成してなんとかなりました。

$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v13.12.0/node-v13.12.0-darwin-x64.tar.gz
######################################################################### 100.0%
Installed successfully

パスを通して完了。

$ vim .zshrc
# 下記を追加
export PATH=$HOME/.nodebrew/current/bin:$PATH

$ source ~/.zshrc
$ node -v
v13.12.0

Amplify

$ npm install -g @aws-amplify/cli
$ amplify configure

このあと説明に沿ってリージョンとIAMユーザーの設定を行います。

Step 1. Create a New App

npxでローカルにないパッケージを実行できることを初めて知りました。create-react-appよりReactプロジェクトを作ります。

$ npx create-react-app amplify
$ cd amplify

作成したディレクトリ内にAmplifyをインストール。

$ npm install @aws-amplify/api @aws-amplify/pubsub
$ npm install aws-amplify-react

Step 2: Set Up Your Backend

$ amplify init

いろいろ聞かれるので答えます。

? Enter a name for the project amplify
? Enter a name for the environment test
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? 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

何も分からずに進めていて早くも飽きてきました。

Step 3: Add API and Database

GraphQLのAPIを追加するっぽいです。GraphQLは名前聞いたことあるくらいで全く分かりません。

$ amplify add api

いろいろ聞かれるので答えます。

? Please select from one of the below mentioned services: GraphQL
? Provide API name: amplify
? Choose the default authorization type for the API API key
? Enter a description for the API key: 
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? No
? Provide a custom type name MyType

これで設定を反映するのかな？もう分かりません。

$ amplify push

眠いです。今日やるべきではなかったかもしれない。

? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions sr
c/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, muta
tions and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply 
nested] 2

Step 4: Integrate into your app

コードが出てきて少しモチベーションが上がりました。久しぶりにReact触ります。

App.js

import React from 'react';

import API, { graphqlOperation } from '@aws-amplify/api';
import PubSub from '@aws-amplify/pubsub';

import { createTodo } from './graphql/mutations';

import awsconfig from './aws-exports';
import './App.css';

// Configure Amplify
API.configure(awsconfig)
PubSub.configure(awsconfig)

const createNewTodo = async () => {
  const todo = { name: "Use AWS Async", description: "Realtime and Offline"}
  await API.graphql(graphqlOperation(createTodo, {input: todo}))
}

const App = () => {
  return (
    <div className="App">
      <button onclick={createNewTodo}>Add Todo</button>
    </div>
  );
}

export default App;

最初の修正の段階でエラー。

Failed to compile.

./src/App.js
Attempted import error: 'createTodo' is not exported from './graphql/mutations'.

指摘されているファイルは自動生成したものなのでAPIを追加するとことかでチュートリアルと違う内容を設定してしまったのだと思います。

というわけでここで断念。ちゃんと理解しながらすすめるべきだなあという感じ。おしまい。

Log

いろいろ

AWS Amplifyのチュートリアルをやろうと思ったけど途中で辞めた