はじめに
こんにちは。ビジネスアクセラレーション事業部の古川です。
この記事は、「AWSに興味はあるけどよく知らない」「資格を持っているけど実際に触ってみたことがない」という方向けに、「30分で学習できる」をテーマに毎週金曜日にお届けする連載シリーズの第三回です。
この記事では、AWS公式チュートリアルの「フルスタックのReactアプリケーションを構築する」に挑戦します。この記事は第三回となります。前回の記事はこちらです。
本日も一緒に取り組んでいただけると嬉しいです！
※本ブログではmacOSを使用しています。
※Gitの代わりにCodeCommitを使用しています。ご了承ください。
1.Amplify Authを設定する
本日はタスク2「ローカルAmplifyアプリを初期化する」を進めます。ブログでは私が実際に行った手順を紹介しますが、公式ガイドも合わせてご確認ください。
このアプリでは、メールアドレスをログイン方法として使います。デフォルトで設定されているため、特に変更する必要はありません。
notesapp/amplify/auth/resource.ts でファイルを開くと、認証方法について書かれたコードを確認できます。
2.Amplify Dataの設定
今回作成するアプリは、ユーザーがメモを作成、削除、一覧表示できるメモアプリです。
この手順では、承認ルールを「誰でも全メモが見える」状態から「ログインした本人の、本人が作ったメモだけを操作できる」状態に変更します。
- Finder を開き、notesapp/amplify/data/resource.ts へ移動します。
2.resource.ts ファイルを、VSコード等のコードエディタで開きます。
3.書かれているコードを全て削除して下記のコードを貼り付け、保存します。
import { type ClientSchema, a, defineData } from '@aws-amplify/backend';
const schema = a.schema({
Note: a
.model({
name:a.string(),
description: a.string(),
image: a.string(),
})
.authorization((allow) => [allow.owner()]),
});
export type Schema = ClientSchema;
export const data = defineData({
schema,
authorizationModes: {
defaultAuthorizationMode: 'userPool',
},
});
3.Amplify Storageの設定
この手順では、notesappの中に新しくフォルダとファイルを作成します。しかし、Finder にはデフォルトでファイルを作る機能がないため、VSコード等のコードエディタを使って行います。
なお、ショートカットを設定することで、Finderからファイルを作ることが可能になります。
1.VSコード（他のコードエディタでも可）を開きます。
2.「開く」を選択します。
3. 右上の検索バーに「notesapp」と入力し、出てきたnotesappフォルダを選択して開きます。
4.VSコードでnotesappフォルダが開かれます。amplifyの上にカーソルを合わせ、右クリックして新しいフォルダを作成します。「storage」と名前をつけます。
5.storageの上にカーソルを合わせ、新しいファイルを作成します。「resource.ts」と名前をつけます。このようになっていれば成功です。
6.先ほど作成したresource.tsファイルを開き、下記を貼り付けて保存します。
import { defineStorage } from "@aws-amplify/backend";
export const storage = defineStorage({
name: "amplifyNotesDrive",
access: (allow) => ({
"media/{entity_id}/*": [
allow.entity("identity").to(["read", "write", "delete"]),
],
}),
});
4. Amplify Cloudサンドボックスをデプロイする
1.VSコードの画面のまま、backend.ts ファイルに移動します。
2.中身を全て削除し、下記をコピーして貼り付けます。このコードは、認証、データ、およびストレージのバックエンド定義をインポートします。
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';
import { storage } from './storage/resource';
/**
* @see https://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more
*/
defineBackend({
auth,
data,
storage
});
- notesappの階層へ移動します。既に入っている方はこの手順は不要です。ターミナルで下記コマンドを入力します。
cd ~/notesapp4.サンドボックス環境を起動します。サンドボックスを使用すると、フルスタックアプリを迅速に構築、テスト、反復開発できます。詳細はこちらに記載されています。
npx ampx sandbox
このような画面が出れば成功です。
5.VSコードを開き、amplify_outputs.jsonファイルが作られていることを確認します。
エラーになった場合
私は下記のメッセージが流れ、サンドボックスが起動しないまま終了してしまいました。
Warning: Detected unsettled top-level await at file:///Users/h-furukawa/notesapp/node_modules/@aws-amplify/backend-cli/lib/ampx.js:36
await tracer.startActiveSpan('command', async (span) => {
エラーを見るため、下記のデバッグコマンドを入力します。
npx ampx sandbox --debug
このように返ってきました。
[Error] self-signed certificate in certificate chain
原因
会社独自の証明書が認識されていないことが原因でした。
curl や aws コマンドは macOS のシステム証明書ストア（登録済みの会社の証明書）を見るので通りますが、Node.js は独自の証明書ストアしか見ないため、認証が通らず弾かれてしまいます。
解決策
1.登録済みの証明書を取り出すために下記を入力します。
openssl s_client -showcerts -connect cognito-idp.ap-northeast-1.amazonaws.com:443 /dev/null | \
awk '/-----BEGIN CERTIFICATE-----/,/-----END CERTIFICATE-----/' > ~/corp-ca.pem
2.この証明書を、Node.jsに使わせます。下記２つを入力します。
export NODE_EXTRA_CA_CERTS="$HOME/corp-ca.pem"
npx ampx sandbox
私はこの手順でエラーを解消できました。
まとめ
お疲れ様でした！
本日はAmplifyを使用して、認証、データ、ストレージのリソースを設定しました。また、独自のクラウドサンドボックス環境も起動しました。読者の皆様が遭遇したエラーや対処法などありましたら、ぜひコメントで教えていただきたいです！
次回の更新は9/25（金）を予定しています。お楽しみに。
簡単30秒