【React】Amplify UI Components でログイン画面を実装する | DevelopersIO
はじめに 最近、Amplify UI Componentsでログイン画面を実装する機会がありました。 2022/6/30 現在、Amplify UI Componentsのバージョンは大幅にアップしており、@aws-amplify/ui-react package は、v3.0.3が最新となっています。その実装方法も大幅に変更され、より簡単・便利に扱えるようになっています。 Amplify React UI (React) Amplify Docs (React) 前バージョンでの実装記事は、よくヒットするのですが、最新バージョンでの実装はあまり見かけないように思いましたので、ここに記載します。とはいえ、公式リファレンスの通りです。 実装コード /src/App.tsx function App() { const { route } = useAuthenticator((context
【AWS】Amplify Studioを使ってGUI+FigmaでReactアプリを作ってみる | ソフトウェア開発のギークフィード
こんにちは、最近ゲームボーイミクロを買って昔のゲームを嬉々として遊んでいる20代後半男児です。 AWSのWeb/モバイルアプリの構築サービスであるAmplifyに、昨年末新機能「Amplify Studio」がプレビュー版として公開されました。 もともとAmplifyはアプリのバックエンド構築、フロントエンドホスティング、CI/CDなどの機能を提供するサービスでしたが、 「Amplify Studio」として、Figmaのデータを連携し最小限のコーディングでアプリを構築する機能が新たに追加されました。 AWS Amplify Studio – 最小限のプログラミングでFigmaからフルスタックのReactアプリを実現 | Amazon Web Services 今回はそのAmplify Studioを使用して、Figmaで作成したデザインデータを連携してReactアプリを作成していきたいと
モジュール 1: React アプリケーションをデプロイしてホストする
AWS Amplify は、サーバーレスバックエンドを備えた単一ページのウェブアプリケーションや静的サイトを構築、デプロイ、ホストするための Git ベースの CI/CD ワークフローを提供します。Git リポジトリに接続すると、Amplify はフロントエンドフレームワークと Amplify CLI で設定されたサーバーレスバックエンドリソースの両方のビルド設定を決定し、コードをコミットするたびに更新を自動的にデプロイします。 このモジュールでは、まず新しい React アプリケーションを作成し、それを GitHub リポジトリにプッシュします。その後、リポジトリを AWS Amplify のウェブホスティングに接続し、amplifyapp.com ドメイン上でホストされる、グローバルに利用可能なコンテンツ配信ネットワーク (CDN) にデプロイします。次に、React アプリケーション
Gatsby.js と AWS Amplify を使って爆速でブログサイトをデプロイする | DevelopersIO
概要 CX事業本部の佐藤です。 Gatsby.js という React ベースの静的サイトジェネレータがあります。 それを AWS Amplify でデプロイして爆速でブログサイトをデプロイできましたので、手順を記事にしたいと思います。 Gatsby.js とは https://www.gatsbyjs.org/ React のフレームワークの一種で、静的サイトジェネレータです。静的サイトジェネレータとは、 ブログの記事やWebページなどをあらかじめビルド時に生成しておき、デプロイ後はそれを表示するだけにすることで、 Webサイトが高速に動作するようにした技術です。 Gatsby.js を使うことで、Wordpress などの CMS や Markdown ファイル、DB などからデータを取得して、 それを事前にビルドしてWebページに変換してデプロイすることが可能です。 Gatsby.j
AmplifyでReactアプリのデプロイ、CI/CDをする公式チュートリアルをやってみた | DevelopersIO
大阪オフィスのYui(@MayForBlue)です。 AWS Amplify(以下Amplify)を触る機会があり、Reactアプリのデプロイ、ホスティングとCI/CDを試すことができるチュートリアルを見つけたのでやってみました。 Reactを知らなくても簡単にできるのと、AmplifyだけでなくCI/CDがどういうものかをサクッと掴むこともできるのでとても良いチュートリアルだと思いました！ 所要時間は30分くらいでした。 Deploy and host a ReactJS app with AWS Amplify Console 手順 前提条件 Reactアプリケーションを作成する GitHubにpushする Amplify をセットアップする CI/CDを試す アプリケーションの削除 前提条件 Node.jsがインストールされていること GitHubアカウントを持っていること Node
Amplify を用いてウェブとネイティブのマルチプラットフォーム対応する - サーバーワークスエンジニアブログ
こんにちは、技術1課の加藤です。 最近 Amplify にハマって色々と触ってみているのですが、 Amplify って複数のクライアントプラットフォームに対応しているんですよね。 マルチプラットフォームに対応しているからにはやっぱり複数のプラットフォームでバックエンドを共有したいもの。 というわけで今回は React を使ってウェブアプリとネイティブアプリを作成し、同じ認証情報を使ってログインしてみます。 1. React ウェブアプリ まずはウェブアプリ + 認証機構の実装を行います。 1-1. React アプリの作成 $ npx create-react-app react-amplify $ cd react-amplify 一応、ちゃんと動くか確認します。 $ yarn start or $ npm start 以下の画面が開けばOKです。 確認が終わったら Ctrl + C で
AWS Amplify + React で認証を実装する中でハマったアレコレ | DevelopersIO
Amplify/AppSyncとReactを利用したプロダクトで、Amplifyの認証(Cognito)を利用してログイン、登録フォーム、PrivateRouteを作成した際にハマった内容をご紹介します。 ども、もこ@札幌オフィスです。 昨年の年末からAWSJ様によるプログラム「APN Next Generation Engineer Leaders Dojo」（以下ANGEL Dojoと表記）に参加しています。 Amplify/AppSyncとReactを利用したプロダクトで、Amplifyの認証(Cognito)を利用してログイン、登録フォーム、PrivateRouteを作成した際にハマった内容をご紹介します。 ANGEL Dojoとは？ ANGEL Dojoでは次世代を担うAPNの若手のエンジニアの方々に、擬似プロジェクトを通じてアジャイル、DevOps、モダンなアプリケーション開発
Amplify Reactで取得したトークンを使って、Swagger UIからAPIを実行してみた | DevelopersIO
サーバーレス開発部改めCX事業本部の岩田です。 Amplify Reactを使ってCognitoユーザープールにサインインし、払い出されたトークンを使ってSwagger UIからAPIを実行できる環境を作ったので、構築手順等ご紹介します。 環境 今回利用した環境です Node.js v8.10 Swagger UI 3.23.0 React 15.6.2 AWS Amplify 1.1.29 AWS Amplify React 2.3.9 概要 現在開発中の案件では以下のような環境でAPIの開発を行なっています。 API Gatewayの定義にはSwaggerを利用 Swagger UI × S3の静的ウェブサイトホスティングで上記Swaggerの定義を公開して顧客と共有 APIの認可にはCognitoユーザープールを利用 ちなみに、Swagger UIとはこんなツールです 見たことのある
【爆速】React+Amplify+AppSyncでリアルタイム掲示板アプリを15分で作り上げる 〜これが最高のDeveloper Experienceだ〜 - Qiita
【爆速】React+Amplify+AppSyncでリアルタイム掲示板アプリを15分で作り上げる 〜これが最高のDeveloper Experienceだ〜JavaScriptAWSReactamplifyAppSync Railsを使って15分でブログアプリを作り上げる動画が一斉を風靡したのはもう何年前でしょうか。 私はまだその頃Developerですらいなかったですが、いまその動画を見ても感動してしまいますね。 Webのアーキテクチャは進化し、API非同期通信、フロントエンドとバックエンドの分離、仮想DOMによるフロントエンド描画、GraphQLバックエンドの台頭といった具合に圧倒的な進化を遂げてきました。 では、この技術スタックを使ってRailsを使ってブログアプリを作り上げることと同様のことがどれだけの開発効率で実装できるのでしょうか？ 今回はAmplifyCLIとReactを使っ
AWS AmplifyをReactに組み込んでユーザー認証まわりをいい感じにする
なんかいい感じのがあったので試してみた。 https://github.com/aws/aws-amplify Reactプロジェクトのセットアップ 何はともあれReactプロジェクトがなければ話になりません。 Crea […] Reactプロジェクトのセットアップ 何はともあれReactプロジェクトがなければ話になりません。 Create React Appでサクッと作っちゃいます。 $ mkdir amplify-react $ cd amplify-react $ create-react-app ./ ※ npm install -g create-react-appでCreate React Appは導入できます。 こんなメッセージが出れば準備OK Success! Created amplify-react at /Users/develop/node/react/amplif
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AWS でフルスタック React アプリケーションを構築