AWS Amplifyをもっと便利に使うための取り組み/amplify-tools-and-contributions

JAWS-UG 福井 #1 リブート宣言LT会

Transcript

1. AWS Amplify をもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言 LT 会 2026-01-17 株式会社永和システムマネジメント プリンシパルエンジニア 村上 雅彦 a.k.a @fossamagna AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 1
2. 自己紹介 名前: 村上 雅彦 所属: 株式会社永和システムマネジメント コミュニティ活動: JAWS-UG 福井支部 運営メンバー Amplify Japan User Group 運営メンバー AWS Community Builder (DevTools since 2022) X (Twitter): @fossamagna GitHub: @fossamagna AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 2
3. 普段の開発 AWS上でWeb アプリケーション、モバイルアプリケーションを構築 AWS Amplify や AWS CDK をベースにサーバーレス構成 フロントエンドからバックエンドまで一貫して構築 インフラもコードで管理（IaC） AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 3
4. 開発ツールを作るのが好き 開発を効率化するためのツールを作ることが好きで、 Amplify 関連でいくつかのツールを開発・公開しています。 今日はその中から 3 つのツールを紹介します AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 4
5. 1. react-router-amplify React Router (SSR 含む) を Amplify Hosting にデプロイするための Vite プラグイン 課題 React Router v7 の SSR を Amplify Hosting にデプロイする標準的な方法がない。標準 で Next.js , Nuxt.js がビルトインでサポートされている。 解決 Amplify Hosting のオープンソースアダプターを作成（オープンソースアダプター：フレー ムワークのビルド結果を Amplify Hosting 仕様に変換する機能） Vite プラグインとして実装 vite build でデプロイに必要な compute/server.js と deploy-manifest.json を生成 AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 5
6. react-router-amplify の使い方 // vite.config.ts import { defineConfig } from "vite"; import { reactRouter } from "@react-router/dev/vite"; import { amplifyHosting } from "react-router-amplify/vite"; export default defineConfig({ plugins: [ reactRouter(), amplifyHosting(), // このプラグインを追加するだけ ], }); リポジトリ: https://github.com/fossamagna/react-router-amplify AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 6
7. 2. amplify-backend-vscode Amplify Gen2 Sandbox 向け VSCode 拡張機能 課題 Amplifyの管理コンソールではsandbox環境は1行で表示されるだけで、sandbox内の AWSリソースは確認できない AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 7
8. 2. amplify-backend-vscode 解決 VSCode の Exploer でリソース情報をツリー表示で確認可能 ツリー表示されたリソースからAWSマネージメントコンソールのリソースページをブ ラウザで開く AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 8
9. amplify-backend-vscode デモ Marketplace: https://marketplace.visualstudio.com/items?itemName=fossamagna.amplify- backend-vscode AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 9
10. 3. amplify-build-notification Amplify Hosting のビルド結果のSlackへの通知を構成する CDK Construct 課題: ビルドの成功・失敗を Slack 等に通知したいが標準では Emai のみ EventBridge + SNS + ChatBot を毎回手動で構成するのは面倒 解決: CDK Construct として実装 数行のコードで通知機能を追加可能 AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 10
11. amplify-build-notification の使い方 import { App, Stack } from "aws-cdk-lib"; import { Construct } from "constructs"; import { AmplifyBuildNotification } from "amplify-build-notification-construct"; const app = new App(); const stack = new Stack(app, 'AmplifyBuildNotificationStack'); new AmplifyBuildNotification( stack, "AmplifyBuildNotification", { slackWorkspaceId: "TXXXXXXX", // Slack Workspace's ID slackChannelId: "CXXXXXXX", // Slack Channel ID } ); npm: https://www.npmjs.com/package/amplify-build-notification-construct AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 11
12. AWS Amplify は OSS AWS Amplify はオープンソースプロジェクト！ GitHub (https://github.com/aws-amplify) で開発されている 誰でもコントリビュート可能 Issue を立てたり、PR を送ったりできる 自分が欲しい機能は自分で追加できる AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 12
13. コントリビューション例 いくつかの PR を送って、Amplify をもっと便利にしています AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 13
14. 1. タイムゾーン対応のスケジューリング Lambda 関数のスケジューリングにタイムゾーン対応を追加 (#3016) EventBridge Rules から EventBridge Scheduler に移行することで、タイムゾーン指定を可能 に export const dailyReport = defineFunction({ name: 'daily-report', schedule: [ // every tuesday at 9am in Aisa/Tokyo { cron: "0 9 ? * 3 *", timezone: "Aisa/Tokyo" }, // every friday at 9am "0 9 ? * 6 *", ] }); AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 14
15. 2. Durable Functions サポート Lambda Durable Functions 設定のサポートを追加 (#3069) Lambda の新機能である Durable Function を Amplify Gen2 で利用可能に export const processOrder = defineFunction({ name: 'process-order', runtime: NodejsVersion.NODE_22, durableConfig: { executionTimeoutSeconds: 86400, // 1 day retentionPeriodDays: 30, } }); AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 15
16. コントリビュートのメリット 自分の課題を直接解決できる 機能要望を待つより早い AWS チームと直接やり取りできる 設計思想やベストプラクティスを学べる コミュニティに貢献できる 同じ課題を抱える人を助けられる AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 16
17. まとめ 開発ツールを作ることで開発体験を向上できる react-router-amplify amplify-backend-vscode amplify-build-notification AWS Amplify は OSS なのでコントリビュートもできる 自分で機能を追加・改善できる Amplify をもっと便利に、そして楽しく使いましょう！ AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 17
18. AWS Amplify Conference 2026 開催日時: 2026年1月20日（火）10:00〜 19:30 会場: 目黒セントラルスクエア 21F 内容: 午前: 初心者向けハンズオン 午後: Amplify 活用事例セッション 夕方: 懇親会 詳細: https://aws-amplify- jp.github.io/conference/2026/ AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 18
19. ご清聴ありがとうございました 質問・フィードバックお待ちしています！ X (Twitter): @fossamagna GitHub: @fossamagna AWS Amplifyをもっと便利に使うための取り組み JAWS-UG 福井 #1 リブート宣言LT会 19