1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

導入

皆様こんにちは、珍しく連日記事を書いております。
前回Amplifyで簡単なappを公開したのですが、それとセットで使うBEを作ってみます。

AmplifyはGen1とGen2があるらしい

まずBEを作る際に困惑したのが、AmplifyはGen1とGen2があるらしく、
今はデフォルトだとGen2の方で作成されるらしいです。

この際に何が困ったかというと、
Gen2はFE専用のような形になっており、BEが作成できませんでした。

という訳でまずはGen2のAmplifyを作る手順をまとめていきます。

IAMユーザーを作ってアクセスキーを作成

Amplify Gen2を使う際に必要になるのでまずはこれを作成します。

AWSにIAMというサービスがあるのでユーザーの作成を行えます。
image.png

ユーザーを作成したら権限の設定ができます。
今回は勉強用になんでもできる権限を付けておきました。
(本来はグループに権限を付けてユーザーを割り振る事が多そう、、、?)
image.png

次はアクセスキーの作成を行います。
セキュリティ認証情報タブを選ぶと少し下の方にアクセスキータブがあるので、
アクセスキーの作成を行います。
(後で使うのでメモ等しておきましょう)
今回はCLIを使うのでCLIを選んでいますが他の手段もあると思います。
image.png
image.png

ローカルの準備

BE側のフォルダを用意しておきましょう。
ここは自分が分かれば何でも良いです。

次にamplifyのコマンドを使用するのでこれをインストールします。
npm install -g @aws-amplify/cli

インストールが終わったらAmplify Gen1を作成していきます
amplify init

質問はざっくりこんな感じです。
認証情報はIAMで作成したAccessKeyを使います。

主な回答:

Gen1 を使うか? → Yes

Why Gen1? → Prefer not to answer

App type → javascript

JS framework → none

Source directory → .(空でもOK)

Distribution directory → .(空でもOK)

Build command → 空(そのまま Enter)

Start command → 空(そのまま Enter)

認証 → さっきの環境変数の IAM ユーザーが使われる

Amplify Gen1 のバックエンド環境(dev)が作成 & 接続完了。
ここまでで、ざっくり環境が作れました。
そしたら試しに使うAPIを作ってみます

Lambda関数を作成

ではまずは以下のコマンドでLambda 関数を追加します。
自分も詳しくないですが、サーバー等意識せずAPI部分だけ自分で作れる物のようです。
amplify add function

主な質問の回答は以下のような形で良いと思います

Capability → Lambda function (serverless function)

Function name → hello

Runtime → Node.js(最新)

Advanced settings? → N

テンプレート編集する? → n(あとでOK)****

ここまでで、ローカルに amplify/backend/function/hello/ が生成される、、、はず、、、、

APIを作成

次に以下のコマンドで追加するAPIの情報を追加します
amplify add api

質問の内容は大体以下のような形だと思います。

サービス → REST

Friendly name → helloApi(デフォルトでもOK)

Path → /hello

既存の Lambda を利用 → hello

Restrict access? → No(誰でも叩ける)

ここまででAPIが一旦作成できたので、AWS側にpushします
amplify push

ここまでで一旦叩けるAPIが作成できているかと思います

GUI側で確認

AWSのLambda側に作成したAPIが表示されてました。
GUIで状態を確認したい場合は多分ここで確認すれば良いはずです。
image.png

あとがき

という訳で今回は小さい開発をするためのバックエンドの作成をしました。
本法は前回作成したAmplifyでBEも一緒に作成できるかと思っていましたが、
別途作成する必要が出てきてしまってびっくりしました。

現在自分のAmplifyには2つAppが作成されている状態になっています。
(料金とか大丈夫なのかな、、、)
image.png

Lambdaは使用された分しか料金が発生しないはずなので多分大丈夫なはず、、

次回は気分次第ですが、実際にFEと通信させる箇所をやる予定です。
その後はBEにDB関連の仕様を付けたしたいですね。

そこまでいけば立派な開発環境といえるのではないでしょうか、、、!
では今回の記事はここまでです!

また次回お会いしましょう(`・ω・´)ゞ

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?