2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO
初めてAWSのサーバレスサービスを学習するときに利用できる「基本的なェブアプリケーションを構築する」の内容を2024年現在でも実行できる手順にしてみました こんにちは、臼田です。 みなさん、AWSのチュートリアル活用してますか？(挨拶 今回はAWSの初心者向けハンズオンコンテンツである基本的なウェブアプリケーションを構築するを2024年の現在版の手順としてまとめてみました。 このコンテンツはAWSのサーバレスなサービスを利用して、簡単にウェブアプリケーションを作成する体験ができるチュートリアルとなっており、登場するAWSの各サービスを理解するのにちょうどよい内容でした。しかし、リリースされてしばらく経っているのもあり、特に今回のAmplify Gen2リリースもあってだいぶ画面や操作方法などが変わってしまいました。 実現できる事自体は変わらないので、現時点でこのチュートリアルを初心者でも完
![2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/89d69da1ff63f03a6134b1ba08325495afbaf56e/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2024%2F06%2F000_basic_web_app.png)
Get started - AWS Amplify Gen 2 Documentation
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle. Fullstack TypeScriptWrite your app's data model, auth, storage, and functions in TypeScript; Amplify will do the rest.
AWS Amplify + React Native + Expo を始めてみる
こちらの記事は「山陰 Advent Calendar 2022」の19日目の記事です。 AWS Amplify + React Native + Expo の組み合わせでモバイルアプリケーションを作成してみました。 今回は以下の流れを紹介します。 AmplifyでExpoプロジェクト作成 Expo Application Services (EAS) を使ってアプリをビルド プロジェクトを作成 Amplifyの公式ドキュメントにステップバイステップでアプリケーションを作成するチュートリアルがあります。その中にReact NativeとExpoを使用するものも用意されています。 チュートリアルを参考にまずAmplify CLIのインストール、環境設定など必要環境を準備します。 続いてExpoプロジェクトを作成していきます。 Expo CLIのインストール $ npx create-expo-
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）、インクリメン
【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
【多分初心者向け】AWS Amplify Studio に触ってみて、とりあえず1からwebページを作ってみた | DevelopersIO
【多分初心者向け】AWS Amplify Studio に触ってみて、とりあえず1からwebページを作ってみた こんにちは、リサリサです。Amplify も Figma も全然分からないのですが、AWS Amplify Studio に触ってみたので、ブログにしてみます。 ↓のブログ通りにして動かしてみましたが、本当に何も分からなかっため、なかなか苦労しました。このブログだと分かってる前提でさくさく進んで行ってしまう所があるので、苦労した所も含め、丁寧めに書いていければと思います。多分、この通りにやれば、初心者でもデプロイまでできるはずなので、多分初心者向け… ブログ通りに作ってできたページは、こちら。 そのあともう少し頑張った結果がこちら。可愛くなりました！きもーちだけレスポンシブル… なかなか大変ではありましたし、見て頂くと色々言いたいことがあるのは分かりますが、フロントサイドほぼ分か
Amplify Stadio - UI Library を試してみる
テストデータ投入後の状態 サンプルコンポーネント取り込み AWSよりAWS Amplify UI Kitが提供されているので、Figmaのアカウントにコンポーネントを複製する。 取り込んだコンポーネントから右クリック -> Copy/Paste as -> Copy linkで共有ファイルのリンクを取得する。 Design -> UI Librayに上記で取得したリンクを貼り付ける。 Acccept allで全て取り込む。 正常終了するとコンポーネントが28個取り込まれる。 コンポーネントプロパティ修正 今回のサンプルでは、以下コンポーネントを利用するため、コンポーネントプロパティを修正し、カスタマイズできるようにする。 NavBar HeroLayout4 CardC MarketingFooter NavBar, HeroLayout4, MarketingFooter レスポンシブデ
AWS Amplify Studio を触ってみた - Chuck the Casual Web Surfer
すこし前に話題になったAmplify Studioを触ってみました。 ReactもFigmaも詳しくないのですが、今っぽいサービスなのと実際にどのくらい使えそうかを確認する目的です。 主に3つツールがそれぞれの役割で登場することになります。 Amplify Studio（AWSコンソール） データモデルの定義 デザインの取り込み Figma（デザインツール） UIコンポーネントの作成 ターミナル、VSCodeなど Amplify CLIから生成コードの取り込み Reactアプリケーションの開発作業 行う順序の縛りはそこまでないので、得意なものや気が向いたものから始められると思います。 ※ 動作環境：macOS Monterey / npm v8.19.2 / Node.js v14.17.0 Amplify StudioでStudio起動 AWSコンソールからAmplifyに移動し、Amp
AWS Amplify + Vue.js 3.0チュートリアルをやってみた | DevelopersIO
今年2月に、AWS AmplifyでVue.js 3.0がサポートされました。 どんな感じなのかな〜と気になっていたところ、公式っぽいチュートリアルを発見したので、やっていこうじゃないかというわけです。 はじめに（Getting Started） このチュートリアルでは、バックエンドをセットアップし、Webアプリに統合するまでガイドしていきます。TodoアプリをGraphQL APIで作成し、クラウド・データベースからアイテムを保存・取得し、リアルタイム・サブスクリプションを通してアップデートを受けとっていきます。 前提要件（Prerequisites） 初めに以下をインストールします。AWSアカウントをもっていない場合は、AWSのサインアップも必要です。 Node.js v12.x or later npm v5.x or later git v2.14.1 or later 今回の使用
TUTORIAL: Build a responsive pricing component with Amplify Studio Figma-to-React code | Amazon Web Services
Front-End Web & Mobile TUTORIAL: Build a responsive pricing component with Amplify Studio Figma-to-React code Contending with different screen sizes is something every front-end or full-stack developer has to handle, one way or another. Modern applications are not just expected to be functional across devices – users except an elegant, quality experience, from a phone screen to a 40“ ultrawide mon
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と表示され
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 AmplifyでのフルスタックアプリケーションのCI/CDパイプラインの構築 | Amazon Web Services
Amazon Web Services ブログ AWS AmplifyでのフルスタックアプリケーションのCI/CDパイプラインの構築 この記事は、Complete guide to full-stack CI/CD workflows with AWS Amplifyを翻訳したものです。 AWS Amplify は、1) 条件付きバックエンドデプロイ、2) ビルド時のaws-exports.js の自動生成、3) 異なるAmplify アプリケーション間でのバックエンドの共有といった３つの新しい機能をAmplify のCI/CD ワークフローに追加しました。これらの機能を使用することで、より柔軟にフルスタックアプリケーションをデプロイすることが可能です。 AWS Amplify は、フルマネージドな CI/CD およびホスティングサービスを提供し、開発者は Git リポジトリを接続するだけ
サーバレスのバックエンド作成サービス「AWS Amplify」で認証認可機能付きのダッシュボードを作る
「Amazon Web Services」（AWS）活用における便利な小技を簡潔に紹介する連載「AWSチートシート」。今回は「AWS Amplify」を使って認証認可機能付きのダッシュボードを作成します。 「AWS Amplify」とは Amplifyの公式サイトでは下記のように説明されています。 AWS Amplifyは、それぞれを連携させたり個別で使用したりできる、ツールとサービスのセットです。これらの機能により、フロントエンドウェブおよびモバイルのデベロッパーが、AWSによるスケーラブルなフルスタックアプリケーションをビルドできるようにします。Amplifyを使用するお客様は、数分の内にバックエンドを構成しアプリケーションと接続でき、また、静的なウェブアプリケーションのデプロイは数クリックだけで実行できます。さらに、AWSコンソールの外部でも、簡単にアプリケーションコンテンツの管理が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デベロッパー向け学習、トレーニング、コース、およびリソース - AWS
Amplify UI - Build UI fast with Amplify on React
Workshop Studio
Build UI - JavaScript - AWS Amplify Gen 1 Documentation
AWS Amplifyを軸にした フルサーバーレスなアプリケーション構成 / Full serverless application on AWS Amplify
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
