Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Amplify Gen2の 新機能と実践的な使用例 AWS Amplify Gen 2 Fes...

Amplify Gen2の 新機能と実践的な使用例 AWS Amplify Gen 2 Festival in Japan/New features and practical use cases in Amplify Gen2

MURAKAMI Masahiko

June 19, 2024
Tweet

More Decks by MURAKAMI Masahiko

Other Decks in Technology

Transcript

  1. Amplify Gen2の 新機能と実践的な使用例 AWS Amplify Gen 2 Festival in Japan

    2024-06-19 株式会社永和システムマネジメント 村上雅彦 (a.k.a @fossamagna)
  2. 村上 雅彦 株式会社永和システムマネジメント Amplify Japan User Group 運営メンバー AWS Community

    Builder (Front-End Web & Mobile since 2022) GitHub: https://github.com/fossamagna X(旧Twitter): https://x.com/fossamagna 自己紹介
  3. • 開発者毎の独立した sandbox環境を提供 • npx ampx sandboxコマン ド一発で環境構築完了 • hot

    swapデプロイ対応で 迅速にデプロイ可能 Amplify Gen2 sandbox environments https://docs.amplify.aws/react/how-amplify-works/concepts/#faster-local-development
  4. 問題の原因: • devcontainer上のユーザー名が全員同じだったためサンドボックス 環境も同じ名前になり共有されてしまった • サンドボックス名は amplify-<app-name>-<$(whoami)>-sandbox 対応: • npx

    ampx sandboxコマンドの--identifierオプションでホストマシン 側のユーザー名を指定して開発者毎に別々の名前になるようにした Amplify Gen2 sandbox environmentsで困ったこと、その1 ※名前付きサンドボックス環境 https://docs.amplify.aws/react/deploy-and-host/sandbox-environments/features/#work-with-multiple-named-sandboxes
  5. • Amplify Gen2のバックエンドとして auth, data, function, storageが 提供されている • Amplify

    Gen2はAWS CDKベース なので任意のCDK Constructを利 用してカスタマイズ可能 ◦ https://docs.amplify.aws/ge n2/build-a-backend/add-aw s-services Amplify Gen2はCDKアプリ
  6. • Amplify Gen2のfunctionは Node.jsランタイムのみサポート • CDKを利用して別ランタイムをデプロ イすることも可能 • ただし、Amplify Consoleからデプ

    ロイしようとすると失敗する • Amplify Consoleではdockerイ メージをビルドできない。 // amplify/custom/docker/resource.ts export class DockerImageLambda extends Construct { constructor(scope: Construct, id: string, props: Props) { new lambda.DockerImageFunction(this, 'DockerImageFunction', { code: lambda.DockerImageCode.fromImageAsset('image-handler'), }); } } // amplify/backend.ts new DockerImageLambda(backend.createStack('Docker'); , 'Docker', {}); LambdaでNode.js以外を利用する
  7. • Amplify Gen2は任意のCI/CDサービスからデプロイす ることが可能 • バックエンドはdockerのイメージがビルドできる環境で行 い、Amplify ConsoleでフロントエンドをAmplify Hostingにデプロイするという連携が可能 •

    今回はバックエンドのデプロイにAWS Codepipelineを 利用した カスタムパイプライン https://docs.amplify.aws/react/deploy-and-host/fullstack-branching/custom-pipelines/