Amplify Boost Up #04 Amplify Japan User Group さん主催の Amplify Boost Up の4回目に登壇したので、その内容について補足しつつまとめてみました。 資料は以下の SpeakerDeck で共有しておりますので、ご確認ください Amplify を使っている理由 我々開発運用チームは社外の方も含めて5名です。この人数で動画配信サービスの「hod」と番組関連グッズを販売している「HTBオンラインショップ」の２つのオンライン事業のシステムを担当しています。やらないことを少しでも増やすために、サーバレス構成を基本としており、その流れでAmplifyを活用しています。 だいぶ、省略した部分はありますが、以下にアーキテクチャを載せます。 フロントエンドのデプロイ先としては Amplify Hosting を利用しており、フロントエンドはサービス
素早くアイデアを実験できるAWS Amplifyを試す(バックエンド編) 2022-01-18 2023-05-01 Backend Amplify, AWS, CI/CD, Node.js, Serverless 4337回 0件 環境概略図 それではバックエンドの構築/開発を始めます。フロントエンドと同様に、amplify-cliのガイドに従いながら進めます。順番としては、DynamoDB → API Gateway/Lambda → Cognitoの順です。 1. DynamoDBの構築 以下のコマンドでDBを構築します。 amplify add storage 下のキャプチャの通り、DynamoDBのテーブル名、パーティションキー、ソートキー、GSI、Streamsの構成を設定します。 amplify-cliのガイド内容から、必要なカラムを全て定義しなくてはいけないと感じるかもしれ
今回の記事のモチベーション 私はSI系のどっしりしたシステム開発に携わることが多かったので、開発者がサクッとアプリをホスティングできる！がウリのAmplifyに触れる機会がこれまで少なく、ちゃんと入門したいなと思ったのがきっかけです。 よく抱いていた疑問 「Amplify Consoleってたまに聞くけど、ドキュメントやマネコン見ても結局どの機能のことを指すのかよく分からないのだが…？？」 Amplifyの超概要 一言でいうと「アプリケーション開発者がAWSインフラをお手軽に利用できちゃうフレームワーク＆マネージドサービス」です。 Amplify 一番最初に出来た機能。iOSなどの「モバイルアプリ」用バックエンドを構築できるフレームワーク。 Amplify Hosting フロントエンドを含め、Webアプリをお手軽にホスティングできる。 Amplify Studio フロントエンド＋バック
Amplify Hostingのプレビュー環境をGitHub Actionsでデプロイする - ROUTE06 Tech Blog
こんにちは、ROUTE06でソフトウェアエンジニアをしている @MH4GF です。 Amplify Hosting を利用してホスティングしている Web アプリケーションで、プレビュー環境を GitHub Actions でデプロイする方法を紹介します。 背景 Amplify Hosting では、実はプルリクエストベースのプレビューを機能として提供しています。 docs.aws.amazon.com プルリクエストの作成と同時に環境にアクセスする URL が払い出され、Gitのコミットのプッシュと同時に再ビルドし、プルリクエストのマージと共に環境を削除します。 ビルドの進捗状況もプルリクエストの Checks として確認できるため、概ね期待する機能は揃っています。 ただ、運用する上でどうしても気になる点がありました。 モノレポで構築されているリポジトリで、ビルドの発火するディレクトリパ
AWS Amplify が効果を発揮する Next.js の 5 つの機能 | Amazon Web Services
Amazon Web Services ブログ AWS Amplify が効果を発揮する Next.js の 5 つの機能 Next.js は、React アプリのサーバーサイドレンダリングと静的サイト生成を可能にする、人気の React フレームワークです。フロントエンドの Web およびモバイル開発者が AWS 上で迅速かつ容易にフルスタックアプリケーションを構築できるようにする目的で構築されたツールおよび機能のセットである AWS Amplify と組み合わせると、開発者は本当に強力なアプリを構築することができます。 本記事では AWS Amplify が効果を発揮する Next.js の 5 つの機能を紹介します。 1. データフェッチと API Next.js は静的サイト生成（SSG）、サーバーサイドレンダリング（SSR）、クライアントサイドレンダリング（CSR）、インクリメン
Here I plan to share my technical knowledge and experience, as well as my interests in the subject. Please note that this tech blog is a space for sharing my personal views and ideas, and it does not represent the opinions of any company or organization I am affiliated with. The main purpose of this blog is to deepen my own technical skills and knowledge, to create an archive where I can record an
【AWS Amplify Studio + Figma + React】Amplify StudioとFigmaを同期してReactコンポーネントを自動生成する手順 - Qiita
【AWS Amplify Studio + Figma + React】Amplify StudioとFigmaを同期してReactコンポーネントを自動生成する手順AWSフロントエンドReactamplifyfigma 先日、AWS Summit Tokyoに行ってきました！とても楽しかったです。 私はフロントエンド実装が大好きな生き物なので、AWSのブースで紹介されていた、Amplify StudioをFigmaと同期することでReactコンポーネントを自動生成できる機能に感動しました。 ブースにいたAWSの方に機能の紹介をしてもらい、帰宅後に自分でもやってみましたが、結構苦戦しました...。なんとかコンポーネントを表示するところまではいけたので、いつか利用する時にまた躓かないように手順をまとめてみました。この記事がどこかで誰かの役に立てると幸いです。是非ご覧ください(^｡^) AWS
好きだったSlideSha○eが悲しいUXになっていたので、その怒りを糧にSlideの作成・共有サービスを爆誕させた話
概要 スライド形式の資料が好きな筆者が、Markdownでおしゃれなスライドをつくって、即座にシェアできるようなサービス、Slidevookを開発したので、紹介します。 この記事自体には、あまり技術的な話はでてきませんが、技術的な話は、別途記事にしていきたいと考えています。 書き起こしました。→ Wasmやモダンフロントエンドを駆使してMarkdownでLT資料を作ってシェアするアプリを作る技術の裏側 対象読者 よくLTで発表をする方 MarkdownでLT資料を作成するのが好きな方 つくったLT資料を公開するのに、いちいちPDF化してというのが大変という方 はじめに・動機 筆者は、いろいろな媒体から、技術やマネジメントや組織運営に関する情報を収集をしています。 その中でも、Slide形式は、記憶に残りやすく、好んで参照する癖があります。（もちろんZenn・Qiitaのようなブログ形式の情
ChatGPT API と AWS Amplify で会話履歴と文脈を読んで回答する LINE ボット を作る
3/18 から GPT-4 API waitlist に登録しているユーザー向けに GPT-4 API の β 版が利用可能になりました。 GPT-4 API を使用した LINE チャットボットの作り方については以下記事を参照ください。 https://zenn.dev/zuma_lab/articles/gpt-4-line-chatbot こんにちわ。 ZUMA です。 3/15 に OpenAI から GPT-4 が公開され、Google からも PaLM が発表されたり毎日が目まぐるしいですね。 OpenAI から現在公開されている最新のチャットモデル API は gpt-3.5-turbo です。 さて、今回は gpt-3.5-turbo モデル を使って、会話履歴と文脈を読んで回答してくれる ChatGPT の LINE チャットボットを作ってみました。 会話の文脈を読むのは
Astroで作成したWebサイトをAWS Amplify ホスティングにサクッとデプロイしてみた | DevelopersIO
こんにちは！コンサル部のinomaso(@inomasosan)です。 前回Astroでローカル環境にWebサイトを構築したので、今回はAWS Amplifyでのデプロイを試してみました。 デプロイ先について Astroの公式ドキュメントにはNetlifyやVercelといった様々なデプロイ先のガイドがあります。 今回は使ったことのないAWS Amplifyにデプロイしてみることしました。 ガイドにはAWS Amplify以外にも、S3静的WebサイトホスティングやCloudFrontとS3を組み合わせた手順が載っているので、機会があれば試してみようと思います。 やってみた デプロイするWebサイト作成 前回はサンプル用テンプレートでWebサイトのプロジェクトを作成しましたが、今回はシンプルにするためにテンプレートはEmptyを選択して再作成しています。 トップページにAstroと表示され
Cognitoと他の認証を協調させるような作り方はできるか 清水崇之氏（以下、清水）：視聴者のみなさんから1つ質問がきています。「Cognitoと他の認証を協調させるような作り方はできますか」という質問について、いかがですか？ 福井厚氏（以下、福井）：はい。これもCognitoがフェデレーションの機能を持っています。例えばFacebookやGoogle ID、あとはSAM認証をサポートしているような他のIdPと連携させて認証することができるようになっています。そういう複合というか、組み合わせで認証させることも可能です。 清水：ありがとうございます。 中村航也氏（以下、中村）：Deletion Policyの話に関係しますが、Cognitoのユーザー情報、DynamoDBに退避させておいて、いざという時に復旧できるようなアプローチがあるとしたら、そのDynamoDBはCognitoのスタック
GitHub App でリポジトリ接続した Amplify アプリを CloudFormation でデプロイしようとして苦戦したのでまとめてみた | DevelopersIO
GitHub App でリポジトリ接続した Amplify アプリを CloudFormation でデプロイしようとして苦戦したのでまとめてみた GitHub App を利用した GitHub との接続について Amplify で GitHub リポジトリと接続する際、以前は Oauth App を利用する必要がありました。現在は GitHub App を利用した形で接続することが推奨されています。 GitHub リポジトリに保存されている新しいアプリを接続すると、 GitHub Amplify はデフォルトでアプリを使用してリポジトリにアクセスします。ただし、 GitHub 以前にリポジトリから接続した既存の Amplify アプリは、OAuth を使用してアクセスします。CI/CD はこれらのアプリでも引き続き使用できますが、新しい Amplify GitHub アプリを使用するよう
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
はじめに 本記事は、チーム開発において、個々のローカル環境を同一に整えるためにDocker上にNodeJSとAWS Amplify（Amplify CLI）の環境の構築した。 主に、Dockerfileとdocker-compose.ymlのコードを説明する。 AWS Amplifyとは ※AWS Amplify で始める、サクッとアプリ開発から引用 サーバーレスなバックエンドをセットアップするための Amplify CLI フロントエンドからバックエンドに接続するための Amplify Libraries CI/CD やウェブアプリのホスティングに向けた Amplify Console ユーザー管理や CMS 的なコンテンツ管理を一元化するコンソール Amplify Admin UI などから構成される、Web およびモバイルアプリ開発のためのフレームワークです。 Dockerfileの
フルスタックのチャットアプリケーションをAWSとNext.jsで構築する | Amazon Web Services
Amazon Web Services ブログ フルスタックのチャットアプリケーションをAWSとNext.jsで構築する モダンなチャットアプリはリッチな機能を必要とします。これらの機能はファイルストレージ・リアルタイムの更新、そしてクライアントとサーバーの両方からデータを取得する能力が必要です。 従来、これは多くのサードパーティサービスをつなぎ合わせるか、カスタムソリューションの作成に開発時間を費やすことを意味していました。そして、この方法では市場投入までの時間が遅くなり、複数の障害点が発生します。 チャットアプリに必要な機能と、AWS が従来の問題点をどのように解決しているかを紹介するために、我々はリアルタイムチャットアプリケーションのサンプルを更新しました。このバージョンは、ローカルと AWS の両方でアプリケーションを完全に管理・制御することがいかに簡単かを強調するために再設計され
Announcing Flutter Web and Desktop support for AWS Amplify Storage, Analytics and API libraries | Amazon Web Services
Front-End Web & Mobile Announcing Flutter Web and Desktop support for AWS Amplify Storage, Analytics and API libraries Earlier this year, AWS Amplify announced a Developer Preview for web and desktop support for its Flutter libraries in the Auth category and Amplify UI Authenticator for creating authentication flows. Today, the Amplify Flutter team is announcing web and desktop support for REST an
EventBridgeとAmplify + Stripeで 「イベント駆動」な Webサービスを開発する/aws-dev-day-2022
EventBridgeとAmplify + Stripeで 「イベント駆動」な Webサービスを開発する/aws-dev-day-2022
Amplify Studioでチームポータルページを作ってみた - KAKEHASHI Tech Blog
はじめに こんにちは、LINE上で動くおくすり連絡帳 Pocket Musubi というサービスを開発している種岡です 早いもので入社してから3年が経ちました 会社の成長と共に取り扱うサービスも増え、今では12以上の開発グループが存在しています 誰がどのチームなのかを把握するのが非常に難しい、また、どのチームがどのサービスを担当するのか把握できないという声が寄せられ、チーム間のコミュニケーションの障害になっているという課題感が浮かび上がりました この課題に対して、チーム毎のポータルページを社内Wikiで作成するという運動が始まりました そこで、チームポータルページを社内WikiではなくAmplify Studioを使って作れたら面白そうだなと思い立ち筆をとりました ゴール チームポータルとしては以下のようなReactベースのウェブページを作成することができました 準備 Amplify St
こんにちは。ウェルスナビでソフトウェアエンジニアをしています水馬(@mizuma_t)です. 今回のテーマはフロントエンドモニタリングです。 みなさんフロントエンドのモニタリングは正しく行えているでしょうか？ 各ユーザの端末内で生した事象を正しくモニタリングするためにはサーバサイドとは異なる知見が求められます。今回は、AWS上でフロントエンドアプリケーション(Next.js)を運用するにあたってのモニタリングの知見をお伝えしたいと思います！ フロントエンドの「何を」モニタリングするのか？ ひとえにモニタリングといっても目的やサービスの特性に応じて期待されるモニタリングの範囲と意味合いが異なることが一般的です。 本記事では以下の項目に焦点を当ててAWSを用いたモニタリング手法について解説しています。 ユーザの端末内で発生したエラーを正しく検知できているか？ レンダリングサーバで発生したエラー
テストデータ投入後の状態 サンプルコンポーネント取り込み AWSよりAWS Amplify UI Kitが提供されているので、Figmaのアカウントにコンポーネントを複製する。 取り込んだコンポーネントから右クリック -> Copy/Paste as -> Copy linkで共有ファイルのリンクを取得する。 Design -> UI Librayに上記で取得したリンクを貼り付ける。 Acccept allで全て取り込む。 正常終了するとコンポーネントが28個取り込まれる。 コンポーネントプロパティ修正 今回のサンプルでは、以下コンポーネントを利用するため、コンポーネントプロパティを修正し、カスタマイズできるようにする。 NavBar HeroLayout4 CardC MarketingFooter NavBar, HeroLayout4, MarketingFooter レスポンシブデ
Flutter3 と Amplify UI Components で認証付きのWebページを作ってみました | DevelopersIO
1 はじめに CX事業本部デリバリー部の平内（SIN）です。 Flutterは、iOS・Androidなどで共通したUIを一度に作ることができるフレームワークですが、Webアプリでも利用することができます。 今回は、Amplify UI Components を使用して、簡単に認証付きのWebページを作成してみました。 なお、Flutter対応のAmplify Authenticationは、2022/08/28現在、Developers Previewであり、Flutter SDK 3.0.0以上が必要です。 https://ui.docs.amplify.aws/flutter/connected-components/authenticator https://docs.amplify.aws/lib/auth/getting-started/q/platform/flutter/#
【SAM + Cognito + Amplify ライブラリでログイン機能を実装した React アプリを作成】Part2 - React アプリから API 実行 - シー・エス・エス イノベーションラボ（ブログ）
みなさん、こんにちは。イノベーションLABのハヤシです。 以下の構成の Web アプリをさくっと作る手順をご紹介します。 バックエンド：Node.js の REST API（Amazon API Gateway / AWS Lambda） フロントエンド：TypeScript の React 今回は全 3 回のうちの 2 回目、フロントエンド実装編です。 必要な部分だけでも、ぜひ参考にしてみてください。 1回目はこちら↓ blog.css-net.co.jp 1. 前提条件 1-1. 想定読者 1-2. 前提条件 1-3. この手順でインストールするもの 2. フロントエンド SPA 2-1. React アプリ作成 2-2. コンポーネント分割 2-3. リポジトリに登録 2-4. Amplify ライブラリの設定 2-5. バックエンドの CORS 設定 3. 参考 1. 前提条件 1
このツイートの通り、快適な開発環境を手に入れることが出来たので今回はその方法について書きます。 背景 OpenAPIを導入しているプロジェクトがあったのですが、中身の確認のためにはyamlファイルを読むか、SwaggerEditorを利用するしか方法がありませんでした。 そのため直感的に確認が出来ず、APIの仕様のレビューだけでも時間がかかってしまっていました。 そこで、OpenAPIの変更をコードベースではなく、UIでわかりやすく確認することにしました。 そのためにamplifyを使ってPRを上げたタイミングで、OpenAPIに関するディレクトリをホスティングして、確認用URLを発行することにしました。 ディレクトリ構成 今回はRailsのプロジェクトにdocsというフォルダを作り、その中にOpenAPIを入れているような構成でした。 ├── docs │ ├── openapi │ │
はじめにNext.js アプリケーションのデプロイ先の候補として Vercel が真っ先に挙げられますが、料金などの色々な都合でほかの場所にホスティングしたいこともあると思います。 SSG (Static Site Generation) で利用する場合は、幅広い選択肢がありますが、SSR (Server Side Rendering) と ISR (Incremental Static Regeneration) を使いたい場合の選択肢は、それほど多くありません。 AWSに SSR可能な Next.js アプリケーションをデプロイするメジャーな２つの方法 AWS Amplify と Serverless Next.js Plugin (Component) を紹介します。 サーバーレスなSSRとISRNext.jsのさまざまなレンダリング形態と特徴については、本記事では深掘りしませんが、
AWSのローコード開発ツール「Amplify Studio」が正式リリース。Figmaと連携してプロトタイプからコードを自動生成
AWSのローコード開発ツール「Amplify Studio」が正式リリース。Figmaと連携してプロトタイプからコードを自動生成 Amazon Web Services（AWS）は、Webアプリケーションを最小限のコーディングで開発できる、いわゆるローコード開発ツール「Amplify Studio」の正式リリースを発表しました。 Announcing AWS Amplify Studio is in general availability: FREE pixel-perfect Figma-to-React conversion Bind UI components to data Extend React components in code Works seamlessly with Amplify backends Check out the launch blog!https:/
はじめに おはようございます、加藤です。現在AWSには223個（2022/01/05時点）のサービスがあります。コンピューティングのカテゴリだけでも10数個のサービスが存在し、WebアプリケーションをAWS上に構築するエンジニアは要件に応じて利用するサービスを選定しアーキテクチャを決定しなければなりません。 動くだけならばともかくアジリティ・スケーラビリティ・コストパフォーマンスを高水準で満たすアーキテクチャを設計するにはスペシャリストの存在が必要不可欠です。プロジェクトチーム内にスペシャルが存在しない場合は多くの会社がAWSのコンサルティングサービスを提供しているので外注で解決する事ができます。（もちろん、弊社もAWSコンサルティングサービスを提供しております、お気軽にお問い合わせください！） しかし、コスト・スケジュール・組織的な都合で外注が出来ないことやまずはノウハウを蓄積するために
こんにちは、kenzauros です。 前提 タイトルにもあるとおり、今回のテーマは「Amplify を使わず React で AWS Cognito 認証を使う」です。 Amplify 自体は使いません Amplify CLI も使いません Amplify の JS ライブラリ (aws-amplify) のみ使います 既存の Cognito ユーザープールを流用します また、画面は素の HTML だけにしました。 UI フレームワークはプロジェクトによって異なること、 UI のコードが含まれると本質的な部分がわかりづらくなることから、今回は最低限にしています。 対象とする読者は下記のとおりです。 React, React Hooks がある程度使える方 Congino のユーザープールは設定できる方 Amplify のプラットフォームを使いたいわけではない方 結局 React で Co
外部ユーザが安全かつ直接的に Amazon S3 へファイルをアップロードできるようにする方法 | Amazon Web Services
Amazon Web Services ブログ 外部ユーザが安全かつ直接的に Amazon S3 へファイルをアップロードできるようにする方法 このブログは 2022 年 3 月 24 日に Anderson Hiraoka (Solutions Architect) と、Rafael Koike (Principal Solutions Architect) によって執筆された内容を日本語化した物です。原文はこちらを参照して下さい。 企業では、ファイルや画像などのデジタル資産をリポジトリに保存することが求められることが多くあります。多くの場合、これらのファイルのソースは、社内システムに接続されていないパートナーまたは個人であり、ファイルをアップロードするためには、企業の認証が必要となります。お客様は従来、ファイルのアップロードを処理するためにサーバーを使用していましたが、大量のネットワー
特別編 Amplify Studio ハンズオンで利用する手順書です。 https://awsbasics.connpass.com/event/240343/
Amplify SDK のAuthライブラリ解説
Authまわり知見貯まるまでは結構むずいので僕のわかる範囲で解説していきます。 公式リファレンス Authライブラリはamazon-cognito-identity-jsのラッパーライブラリ Authライブラリはamazon-cognito-identity-jsのラッパーライブラリです。こちらの機能をamplify向けにインターフェース変えたものです。と解説しようと思ったのですが、GitHubのレポジトリはamplify-jsに統合したみたいですね... フロントエンド用のAPIとバックエンド用のAPI amplifyの他にAWS SDKにはCognitoライブラリが提供されています。以下のドキュメントと先ほどあげた公式リファレンスを比べてみてください。 同じ内容が書いてあることに気づきましたでしょうか？違いといえばAWS SDKのCognitoライブラリのほうには、admin???とい
AWS Amplifyの公開設定を色々とためしてみました AWS Amplifyには主に3パターンの公開方法があります。 AWSコンソールから利用するAmplify Consoleで公開 Amplify CLIから利用するAmplify Consoleで公開 Amplify CLIから利用するカスタム公開 詳細として下記について説明します。 Amplify Consoleで公開 Amplify ConsoleでBasic認証公開 Amplify Consoleでルーティング対応 Amplify Consoleで公開(Amplify CLI) カスタム公開(Amplify CLI) 公開削除(Amplify CLI) Amplify Consoleで公開 Amplify Consoleで公開する方法です。 AWSコンソール → AWS Amplifyをクリック。 Amplify Hostin
AWS Amplify 入門ハンズオンを公開しました！ – AWS Hands-on for Beginners Update | Amazon Web Services
Amazon Web Services ブログ AWS Amplify 入門ハンズオンを公開しました！ – AWS Hands-on for Beginners Update こんにちは！テクニカルソリューションアーキテクトの瀬高(@stktky)です。最近は気温の低い日が続き、布団が恋しく寝起きが悪くなるような日が多いのですが、起きる際にアラームではなくスマートウォッチの振動機能を試したところ、相性が良かったのかスムーズに起きられることが判明しました。加えて周囲の人を起こさなくて済む、睡眠データも取れる、ということでこのあたりに課題感のある方、ぜひお試しください。 さて、AWS Hands-on for Beginners シリーズの新コンテンツとして、 AWS Amplify 入門ハンズオンを追加しました。このハンズオンでは、 AWS を用いたアプリケーション開発を加速させるサービスで
2022/05/13 追記 記事の下の方で実現している解決方法について、最近うまく動いていないことを確認しました。サポートに連絡したところ、UpdateUserAttributesの完了のタイミングによってはこちらのコードはうまく動作しないことがわかりました。もしこちらの問題を現時点で解決したい場合はこちらの記事のように、独自でメールアドレス検証機構を作成するのが安定してよさそうです。 ユーザーロックされる こんにちはハトです。cognitoで詰まったので共有。 cognitoでメールアドレス変更機能を実装していた。すると以下のことに気づく。 新しいメールアドレスを申請して、メールで検証をする前にその新しいメールでログインできてしまう 逆に検証が成功していないのに古いメールアドレスでログインできない つまり間違ったメールアドレスをリクエストするとその時点で詰む(ユーザーロックというらしい)
Amplifyにおける複数モデルのGraphQL APIについて - 虎の穴開発室ブログ
虎の穴ラボのかのたんです。 AWSが公式で提供しているAmplifyという開発ツールは非常に簡単、かつ高速にAPI環境が構築できるということで注目度が上がっており、AWSの公式セミナーや勉強会等でも取り上げられる機会が増えています。 弊社でも有志でAmplifyの使い方についての調査を行っており、特に以前弊社のNSSさんがブログに投稿したAmplifyに関する記事は非常に多くの方に読んでいただきました。 toranoana-lab.hatenablog.com Amplifyの導入については、こちらのNSSさんの記事が非常に参考になります。 私の方でもAmplifyについて触ってみたので、今回の私の記事は上記のNSSさんの記事から派生するような形で、複数モデルのGraphQL APIの作り方について書きます。 GraphQL APIの作成 本記事の前提条件として、上記のNSSさんの記事等を
【多分初心者向け】AWS Amplify Studio に触ってみて、とりあえず1からwebページを作ってみた | DevelopersIO
【多分初心者向け】AWS Amplify Studio に触ってみて、とりあえず1からwebページを作ってみた こんにちは、リサリサです。Amplify も Figma も全然分からないのですが、AWS Amplify Studio に触ってみたので、ブログにしてみます。 ↓のブログ通りにして動かしてみましたが、本当に何も分からなかっため、なかなか苦労しました。このブログだと分かってる前提でさくさく進んで行ってしまう所があるので、苦労した所も含め、丁寧めに書いていければと思います。多分、この通りにやれば、初心者でもデプロイまでできるはずなので、多分初心者向け… ブログ通りに作ってできたページは、こちら。 そのあともう少し頑張った結果がこちら。可愛くなりました！きもーちだけレスポンシブル… なかなか大変ではありましたし、見て頂くと色々言いたいことがあるのは分かりますが、フロントサイドほぼ分か
こんにちは！Amplifyの改善を行っている @watilde です。この記事は AWS Amplify Advent Calendar 2021 と Figma Advent Calendar 2021 の 25 日目の記事です。 Amplify Studio の発表 2021年の12月3日に開催された re:Invent にて Amplify Studio が発表されました。新機能としてFigmaでデザインしたコンポーネントを Amplify Studio にてデータベース内のテーブルのスキーマと紐付けし、可読性の高い React のコンポーネントとして出力する “Figma to code” が追加されました。 https://docs.amplify.aws/console/ 本記事では、amplifyコマンドがどのように Figma, Amplify Studio で設定したコン
Flutter x AWS Amplifyでアプリを作る
この記事はFlutter Advent Calendar（カレンダー2）の22日目の記事です。 普段私はFlutterでアプリを開発する際はFirebaseと組み合わせてアプリを開発するのですが、 今回はAWSのAmplifyと組み合わせてアプリを作る方法をAWSのチュートリアルを参照しながら実装してみます。 ※チュートリアルでのFlutterはバージョンが古いので2系に書き直す必要があります。 作るもの フォトギャラリーアプリ 今回利用するAmplifyの機能 Amplify Auth (Cognito) ...ログイン認証 Amplify Storage (S3) ...ストレージ Amplify Analytics (Pinpoint) ...ログ分析 作成する環境 % flutter doctor Doctor summary (to see all details, run fl
はじめに これはAWS Amplify Advent Calendar 2021 18 日目の記事です。 Amplify CLI で CDK または CloudFormation を使ってカスタムリソースを作れるようになりました。この記事では Amazon IVS のプライベートチャネルを作ってみます。またどうも Amplify CLI 7.6.4 時点ではカスタムリソースを作るのに CDK v1 が使われているようなので CDK v2 に移行してみました。 なぜこの記事を書こうと思ったか あまり言ってないのですが私は Amplify が好きです。最初は AppSync のリゾルバを簡単に作れるところが気に入って(なので Amplify CLI を AppSync SDK みたいに思っていた)、最近は Amplify Console を使って git push するだけでウェブサイトをホス
「AWS Amplify Advent Calendar 2021」 19日目の記事となります 記事の概要 2021/11/23に、Amplify GraphQL Transformer v2(以下v2と表記)が発表されました[1]。以前のGraphQL Transformer v1(以下v1と表記)から大幅なアップデートがいくつも入っており、Breaking Changeも少なからずあります。この記事では GraphQL Transformer v2の主な変更点 GraphQL Transformer v1からのMigration時の注意事項 の2点についてまとめてみました！ 想定読者 Amplify CLIでGraphQL APIを利用している人 これから利用を検討しているが、既存のブログ記事などがv1で記述されており差分が知りたい人 話さないこと(及び参考資料) Amplify 自体
JAWS-UG 千葉支部にて、 re:Cap with AWS Serverless Hero ということでお話しさせていただきました。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本番環境でAmplifyを3年くらい使ってみている弊社環境のご紹介 - Qiita
素早くアイデアを実験できるAWS Amplifyを試す(バックエンド編)
AWS Amplifyファミリーの違いがよく分からん！！ - Qiita
Personal Tech Blog | hidekazu-konishi.com
「Cognitoと他の認証は協調できる？」「環境を分けた場合の振り分けは？」 AWSソリューションアーキテクトが回答する認証・認可のQ＆A
サーバレスでVODとECをリニューアルして、さらにくっつけてみました！
Docker上にNodeJSとAWS Amplify（Amplify CLI）の環境の構築 - Qiita
AWSを用いたフロントエンドモニタリング入門 ~Next.js編~ - ウェルスナビ開発者ブログ
Amplify Stadio - UI Library を試してみる
PRをトリガーにOpenAPIのURLをamplifyで自動ホスティングして、最高の開発環境を手に入れた話
Next.js をAWSにデプロイする Amplify vs Serverless - ちょっと株式会社 社員ブログ
AWSアーキテクチャ for beginner（Webアプリケーション・コンピューティング編）
Amplify を使わず React で AWS Cognito 認証を使う
AWS Amplify Studio + Figmaハンズオン
AWS Amplifyの公開設定を色々とためしてみた - Qiita
Cognitoでメールアドレス編集するとログインできなくなる問題
Amplify StudioがどのようにFigmaデータをReact componentに変換しているのか
Amplify x CDK でカスタムリソースを作る& CDK v2 に移行する
Amplify GraphQL Transformer v2 まとめ
ノーコード時代のアーキテクチャ