Knob/のまど先生

念願のAWSデビュー🎉
僕は1年半前にプログラミング学習を始めたんだけど,いきがってAWSの学習を始めてしまったせいで,初回登録時の1年間無料枠をすでに失っている.もちろん初回登録時の無料枠で得られたAWSに関する知識は皆無だ.なぜならその当時の僕にAWSは難しすぎたからだ🤗

AWSと言えば,ビットコインなどのマイニング目的でハッキングされ,気がつけば数百万の請求が来ているというニュースを聞いたエンジニアの方は多いだろう.
そんな中ビクビクしながらAWSをモダンなAmplifyで始めようと思う...🙉

まじ,怖すぎ.

取り組むチュートリアルはこれ

このチュートリアル淡白すぎないか...

心配なので,他を参考にしながらすすめる

参考はとりあえずこのあたり.

Knob/のまど先生

Amplifyとはなにか

なんかFirebaseみたいな感じらしい（雑

AWSっていろんな機能ごとにサービスを細かく提供している（dbとか認証機能とかAIとか）んだけど,それをパッケージ化したのがこのAmplifyらしい.
中には認証機能やNoSQLDBが使えるやつとかいろいろ入っている.
ドキュメントがアリすぎて困惑.
調べているともっと困惑してきたので,もうやる.すぐやる.
これやる

Knob/のまど先生

STEP1

deployする
Reactのアプリが必要なので,create-react-appする.
Next.jsにしたいけど,わからなすぎて言われたとおりにします.
そして,GitHubと連携して,deployしたいRepositoryを選択し,
特別なことはせずただ次へを押します.

うおおおお

きたあああああああああああ

https://main.d60clqphwd1dq.amplifyapp.com/

vercel並の簡単さだった.

Knob/のまど先生

認証の話

話は変わるがセキュリティに関して心配すぎて作業がはかどらないので,調べた.
結果
多要素認証とIAMユーザの2つを使用すると良いらしい
ここがわかりやすかった.

IAMユーザでログインするのにユーザ名やらパスワードがどれかわからなくて1時間かかった
「コンソールでログイン」という言葉をCLIでログインと認識してしまったのが,致命的でした🙉

なにはともあれ,Amplifyの操作権限だけ持ったIAMユーザを作成できました！

Knob/のまど先生

Amplify CLI を使っていく

これはFirebase CLIみたいなものでコンソールからamplifyコマンドを使用できるようにする.

npm install -g @aws-amplify/cli

でインストールしたら,設定する必要があるみたいなので,

amplify configure

いろいろ聞かれるので,リージョンとか選択して,IAMユーザでログインする.

ん〜次の「Amplifyアプリを初期化する」がよくわからなくて,バックエンド環境のタブにある「Getting Started」を押したら,ブラウザのGUIを通して環境構築のセットアップをやってくれたようなので,Local setup instructionsというとこにあるコマンド

amplify pull --appId [AMPLIFY_ID] --envName staging

をローカルで実行したら,それで良さそうなので,次に行く.
（多分いきなりローカルで,amplify initを実行するのと同じような気がしている）

Knob/のまど先生

認証機能を実装する

まずは,必要なAmplifyライブラリのinstall

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

認証機能の追加

amplify add auth

そのまま手順通りに実装するとログイン機能ができた.
AWSが用意したコンポーネントを使用している感じ.
電話番号が登録の必須項目なのを外したいが,今はいいや.
メール認証がデフォルトで付いていていい感じ.

Knob/のまど先生

GraphQL APIを作成する

アプリにapiを追加

amplify add api

AWSのサーバに反映（無限ループかと思うくらい時間かかる...3分くらいだけど...）

amplify push

この流れはわりとテンプレートの様子

これでAPIができてAppSyncとの接続やなんやらもやってくれるみたいです.

完了後にAmplify UIというページでContentsやらDataやらをdeployするとDBやその構造が見れるようになり,それらをローカルのReactAppから変更できるようになりました！
（デフォルトのサンプルデータをシンプルなTodoではなく,Blogにしたので,少し戸惑ったけど...）

ポイントとしてはAmplifyのライブラリからAPIと言われるメソッドをインポートして,

import { API } from 'aws-amplify';

こんなふうに使っています.

await API.graphql({ query: listBlogs });

await API.graphql({
        query: createBlogMutation,
        variables: { input: { name: blogName } },
      });

Apollo clientを使う場合もそのうちやりたいと思います.

Knob/のまど先生

Storageに画像を保存する

いよいよ最後！
意外とこの質素なチュートリアルでもいけてるな.

では,明らかにFirebase Storageのような機能を使っていく.

まずはこれもCLIで追加する

amplify add storage

最初の項目選択にNoSQL Databaseというのがあったのが気になったけど,下手なことすると大変なので,チュートリアルのままいきます.

基本の流れや構造としては,amplify add hogehogeみたいなコマンドを叩くとプロジェクトフォルダ直下の/amplify/backendの中にapiやらstorageやらがフォルダとして生成される感じです.

GraphQLのスキーマに画像項目を追加して,

amplify push

なんかデータをまたdeployしなきゃいけなくなったからデプロイした.

ローカルからアップロードした画像を追加したデータを保存すると,

すのこ日記ができた！

Knob/のまど先生

ちょっとまだ怖いのでソースコードは貼りませんが,それほど難なくAWSに入門できたのは嬉しいです！Amplifyのおかげですね.

次はNext.jsをdeployして,簡単なチャットアプリを作りたいと思います.
また,認証機能やDBの更新をテンプレートに依存せずに実装できるようになりたい.

また,この形式の学習記録がわりといい感じだった.