静的ウェブサイトをホストする シンプルなマーケティングウェブサイトまたはウェブアプリケーションを AWS でホストします。 静的ウェブサイトは、HTML、JavaScript、画像、動画などのファイルをウェブサイトの訪問者に提供します。静的ウェブサイトは非常に低コストで、信頼性が高く、IT 管理はほとんど必要ありません。また、追加作業を行うことなく、エンタープライズレベルのトラフィックを扱えるようスケールすることができます。 よくある質問については、こちらを参照してください >> AWS コンソールで AWS Amplify を使って静的ウェブサイトをホスティングします。AWS Amplify は、静的ウェブサイトおよびウェブアプリにフルマネージドのホスティングを提供します。Amplify のホスティングソリューションは、Amazon CloudFront と Amazon S3 を使って
Zero-effort Container deployment for GraphQL and REST APIs and Web Hosting with Amplify CLI | Amazon Web Services
Front-End Web & Mobile Zero-effort Container deployment for GraphQL and REST APIs and Web Hosting with Amplify CLI AWS Amplify is the fastest and easiest way to build cloud-powered mobile and web apps on AWS. Amplify comprises a set of tools and services that enables front-end web and mobile developers to leverage the power of AWS services to build innovative and feature-rich applications. With to
Next.jsでAmplifyに入門する
この本ではNext.jsを使ってAmplify（AWS）を初めて使う方にもわかりやすく始めてもらうための入門書になっています。 また、Next.js・ Reactについて詳しい解説はしていませんが、React・Next.jsの基本について理解できていればわかるようにしてあります。 <追記> amplify のバージョンアップに伴い、本書の内容が古い情報となってしまっているので無料にて公開させていただきます。
Amplify CLI GraphQL TransformとディレクティブでAppSync+DynamoDBをいじってみよう！(@model @auth, @key) - Qiita
Amplify CLI GraphQL TransformとディレクティブでAppSync+DynamoDBをいじってみよう！(@model @auth, @key)AWSGraphQLAppSyncAWSAmplify 概要 AWS Amplify Advent Calendar 2019、7日目はAWS Amplify CLIでAWS AppSync + Amazon DynamoDBをセットアップするschema.graphqlで使用可能な3つのディレクティブ(@model、@auth、 @key)を触っていきます。 想定読者 amplify add api、なんとなく使ったことあるけど、@model、@authとか@keyよくわからん！という方に向けた記事になります。検証用アプリケーションはReactでの実装ですが、Reactの知識がなくても大丈夫です。 動作確認環境 @aws-a
New – Local Mocking and Testing with the Amplify CLI | Amazon Web Services
AWS News Blog New – Local Mocking and Testing with the Amplify CLI The open source Amplify Framework provides a set of libraries, user interface (UI) components, and a command line interface (CLI) that make it easier to add sophisticated cloud features to your web or mobile apps by provisioning backend resources using AWS CloudFormation. A comment I often get when talking with our customers, is th
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???とい
Amplify Communityのご紹介 – Amplifyの最新情報が開発者から学べる公式コミュニティサイト #reinvent | DevelopersIO
Amplify Community re:Invent 2019のセッション内で初めて知りましたが、Amplify CommunityというAWS Amplifyの公式コミュニティサイトがオープンしていたのでご紹介したいと思います。 https://amplify.aws/community/ どのようなサイトか？ Amplifyを使ったプロジェクトの共有やイベント情報、あるいは技術記事などの共有などをまとめているサイトになります。 各種リソースはコミュニティ参加者から自発的に提供されています！ コンテンツの紹介 Events 世界各地で開催される、Amplify関連のイベントが一覧できます。 Posts Amplifyの技術記事、事例紹介、TIPSなどなど様々な情報をまとめてみることができます。 基本的には、ブログなどで紹介されている内容のリンクという形になります。つまり様々なブログを追
Amazon Kinesis Video Streams WebRTC を使った LINE 風ビデオ通話 Web アプリを簡単に作れる AWS Amplify CLI Plugin を作った（あるいは作ろうとした）話 - Qiita
Amazon Kinesis Video Streams WebRTC を使った LINE 風ビデオ通話 Web アプリを簡単に作れる AWS Amplify CLI Plugin を作った（あるいは作ろうとした）話AWSWebRTCamplifyKinesisVideoStream はじめに なろう小説ばりに長いタイトルですみません。この記事は AWS Amplify Advent Calendar 2019 の20日目の記事です。 タイトルそのままですが、今月発表された Amazon Kinesis Video Streams の WebRTC 対応を利用して、LINE 風のビデオ通話 Web アプリをより簡単に作るための AWS Amplify Plugin を作りました。 この記事では、このプラグインをどうやって作ったか、どうやって使うかを解説します。最後には Amplify とプ
Amplifyプロジェクトのgitリポジトリを公開するときの注意点 - BioErrorLog Tech Blog
AWS Amplifyプロジェクトのgitリポジトリをパブリックにするときのセキュリティ上の注意点についての備忘録です。 一言で言うと、team-provider-info.jsonをgit管理から外すべし、となります。 はじめに 作業環境 Amplifyプロジェクトのgitリポジトリを公開するときの注意点 Amplifyの.gitignoreファイル git管理されるAmplify関連ファイル 結論: team-provider-info.jsonはgit管理から外すべし 関連記事 参考 はじめに おはよう。@bioerrorlogです。 最近、Amplifyをよく使います。 主にReact + Amplifyの組み合わせで開発していますが、APIの作成やCognito連携、Hosting環境やCI/CDパイプライン立ち上げなどが極めて容易にできるため、とても有用なサービスだと感じていま
GitHub - harunobukameda/AWS-Amplify-AWS-Lambda-Amazon-DynamoDB-AWS-API-Gateway-Amazon-Cognito
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
【Amplify と Figma の連携】Amplify Studio の UI Library を使ってみた - サーバーワークスエンジニアブログ
本ブログは動画での解説も行っています。 youtu.be はじめに 新卒1年目の近藤です。今回AWSのサービス「Amplify」で、デザインツール「Figma」との連携に関する（Amplify Studio）アップデートがありました。どちらも普段からよく使うものランキング上位のサービスなので、知りたい！ただそれだけの思いで設定を行ってみました。 何がうれしいのか デザインツールで作成した UI をコード（React コンポーネント）に変換できる Amplify Studio 上でコンポーネントを管理できる ローカルの開発環境へのインポートが簡単 私が率直に感じたうれしいポイントは上記の3つです。React などのフレームワークでは、Webページでよく使う要素（例えばボタンのUIなど）をコンポーネントとして管理することができます。通常、開発において、デザインツールで作成した UI をコードで
これから始めるAppSync開発！AppSyncとGraphQL開発手法をCTOが解説します😎 | Ragate ブログ
こんにちは！ AppSync 開発の情報は、API Gateway と比較すると少ないと思います。GraphQL がまだまだ浸透していない日本の開発市場では、経験値のない開発チームが AppSync の開発方法を整理するのには苦労しますよね。 筆者も最初の AppSync 開発案件は非常に緊張しましたが、最近ではある程度開発手法が固まり、開発に安定感がついてきました。 本記事では、AppSync での API 開発の流れをソースコード交えて解説します！ 想定する読者 AppSync を導入検討しているエンジニア自己学習で AppSync 触ったけど実戦経験がなくて不安なヒトRestAPI 開発と具体的にどのような違いがあるのか把握したいヒト はじめに GraphQL の学習コストは高い？ わたし達は、Amplify フレームワークの機能で GraphQL のコードを自動生成しています。 A
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
素早くアイデアを実験できる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のガイド内容から、必要なカラムを全て定義しなくてはいけないと感じるかもしれ
【Amplify】Amplify Console に CLI のインターフェースが追加されました！ - サーバーワークスエンジニアブログ
こんにちは、技術1課の加藤です。 Amplify 使ってますか？ とっても便利な Amplify ですが、ついに Amplify Console と Amplify CLI の紐付けがされたみたいです。 早速ご紹介していきます！ AWS Amplify とは？ 雑に書くと、AWS が提供する OSS の開発プラットフォームです。 モバイルアプリケーションおよびWebアプリケーションを構築するために必要なツール群を総称したもので、具体的には、 iOS, Android, Webアプリと統合するためのライブラリ UIコンポーネント コマンドラインインターフェース ( Amplify CLI ) を提供しています。 Amplify Console とは？ 一方 AWS Amplify Console というのは、サーバーレスウェブアプリケーションのデプロイ・ホストをするための AWS サービスの
【参考まとめ】AWS Amplify ✕ Nuxt.js ✕ stripeでのサイト制作のための記事一覧 - Qiita
はじめに Nuxt.js✕Amplifyの組み合わせでの開発にあたって、全体的に参考になった記事をまとめました。 Nuxtってなに？AWSってどうやって始めるの？決済処理どうしよう、、、の状態から参考にしている記事になるため、基礎的なことから込み入った記事まで幅広くまとまっています。 今でも何度も読み直す記事や重要な記事には「★」マークを付けてますので、ご参考までに。 AWS共通 AWSサービスを利用するにあたっての基礎記事です。 ★★AWSアカウントの初期設定 AWSアカウントを作成したら、まずはこれやる。 AWSアカウントを取得したら速攻でやっておくべき初期設定まとめ AWSリソースグループ(AWSリソース管理) テスト環境や本番環境が同一アカウントでの作業になる場合は、やりたいけどまだできていない。 [AWS]リソースグループを使って、テスト・ステージング・本番環境ごとにAWSリソー
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
はじめに 私は、現在Nuxt.jsとamplifyのフレームワークを使って、WEBサイトを絶賛製作中のエンジニアです。 amplifyのフレームワークは、WEBサイト開発の初心者に私とって、非常に便利と感じる一方で、amplify自体が絶賛開発中であるため、新しい仕様が次々に追加され、なかなか日本語での解説された情報が少なく、情報収集にとても苦戦しています。 結局は、公式リファレンスが一番ベストな情報源だったりしますが、その内容を読み解くにも一苦労でしたので、自身の備忘録も兼ねてアウトプットとできればと思います。 対象 この記事は以下のような方におすすめしたいです。 amplifyで認証の実装はしてみたが、デフォルトのままで細かい設定は何も行えていない 公式リファレンスを見たが、イマイチよくわからない amplifyのフレームワークを最大限に活用したい GUIから各サービスの設定をしたこと
はじめに 本記事は、チーム開発において、個々のローカル環境を同一に整えるために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 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 するだけでウェブサイトをホス
Amplify + Nuxt.js + Cognitoでログイン機能を実装してみた - Qiita
今回の記事は、AWS amplifyの機能の一つであるAuthenticationについての記事です。 Nuxt.jsとAmazon Cognitoによるアプリケーションにユーザーのサインアップ、サインインなどの機能を追加し、実際にログイン画面を実装していきたいと思います。 環境 ・Pug を使用 ・コーディング規約は Nuxt.js に則って StandardJS ・Visual Studio Code ※amplify initによりプロジェクトが初期化されている前提のもと話を進めていきます。 Cognitoの準備 Cognitoを使用するためにAWSサービス機能のauthを追加しましょう
JAWS-UG 千葉支部にて、 re:Cap with AWS Serverless Hero ということでお話しさせていただきました。
Amplifyで生成されたバックエンドリソースをCDKでカスタマイズする新機能 「オーバーライド」のご紹介 | Amazon Web Services
Amazon Web Services ブログ Amplifyで生成されたバックエンドリソースをCDKでカスタマイズする新機能 「オーバーライド」のご紹介 この記事は、Override Amplify-generated backend resources using CDKを翻訳したものです。 AWS Amplifyは、開発者がAmplifyで生成されたAWS IAM、Amazon Cognito、Amazon S3、およびAmazon DynamoDBのリソース構成を上書きし、アプリの要件を最適に満たす機能を発表しました。 開発者はAmplifyが提供する標準のリソースを使用してバックエンドを簡単に構成できますが、この新しい “オーバーライド” 機能を用いることでさらに細かいリソースの設定をカスタマイズできます。 AWS Amplifyは、AWS上でモバイルアプリやウェブアプリを構築す
このツイートの通り、快適な開発環境を手に入れることが出来たので今回はその方法について書きます。 背景 OpenAPIを導入しているプロジェクトがあったのですが、中身の確認のためにはyamlファイルを読むか、SwaggerEditorを利用するしか方法がありませんでした。 そのため直感的に確認が出来ず、APIの仕様のレビューだけでも時間がかかってしまっていました。 そこで、OpenAPIの変更をコードベースではなく、UIでわかりやすく確認することにしました。 そのためにamplifyを使ってPRを上げたタイミングで、OpenAPIに関するディレクトリをホスティングして、確認用URLを発行することにしました。 ディレクトリ構成 今回はRailsのプロジェクトにdocsというフォルダを作り、その中にOpenAPIを入れているような構成でした。 ├── docs │ ├── openapi │ │
Amplify UI’s new Authenticator component makes it easy to add customizable login pages to your React, Angular, or Vue app | Amazon Web Services
Front-End Web & Mobile Amplify UI’s new Authenticator component makes it easy to add customizable login pages to your React, Angular, or Vue app This post is written by Nikhil Swaminathan and Eric Clemmons who work at AWS Amplify. AWS Amplify UI recently announced a new version of the Authenticator component for JavaScript (JS)-based web apps, giving developers the easiest way to add login experie
GraphQL API Security with AWS AppSync and Amplify | Amazon Web Services
Front-End Web & Mobile GraphQL API Security with AWS AppSync and Amplify This article was written by Brice Pellé, Principal Specialist Solutions Architect, AWS September 14, 2021: Amazon Elasticsearch Service has been renamed to Amazon OpenSearch Service. See details. AWS AppSync is a fully managed service which allows to deploy and interact with serverless scalable GraphQL backends on AWS. AppSyn
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
Amplify Boost Up #04 Amplify Japan User Group さん主催の Amplify Boost Up の4回目に登壇したので、その内容について補足しつつまとめてみました。 資料は以下の SpeakerDeck で共有しておりますので、ご確認ください Amplify を使っている理由 我々開発運用チームは社外の方も含めて5名です。この人数で動画配信サービスの「hod」と番組関連グッズを販売している「HTBオンラインショップ」の２つのオンライン事業のシステムを担当しています。やらないことを少しでも増やすために、サーバレス構成を基本としており、その流れでAmplifyを活用しています。 だいぶ、省略した部分はありますが、以下にアーキテクチャを載せます。 フロントエンドのデプロイ先としては Amplify Hosting を利用しており、フロントエンドはサービス
SPA with Implicit Grant - handling token refresh · Issue #1218 · aws-amplify/amplify-js
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
AWS Amplifyで、既存のAmazon Cognitoを使う方法を探してみた - メモ的な思考的な
AWS Amplifyでは、Authentication moduleを使うことで、簡単にAmazon Cognitoの新しい環境が作れます。 Authentication ただ、Amplify CLIを使って既存のAmazon Cognito環境を利用する方法が見当たらなかったので、調べた時のメモを残します。 目次 環境 結論 試してみた 対応 ソースコード 環境 @aws-amplify/cli 1.8.2 結論 これらのissueがあるように、現時点のAmplify CLIでは既存のCognitoを指定できないようです。 Adding existing UserPool and Appsync API to amplify project · Issue #288 · aws-amplify/amplify-cli Use existing Cognito User pool wit
Amplify JavaScript releases support for Vue 3 | Amazon Web Services
Front-End Web & Mobile Amplify JavaScript releases support for Vue 3 Today, Amplify JavaScript adds support for version 3 of Vue JS to accompany current Vue support. The Amplify open-source client libraries provide use-case centric, opinionated, declarative, and easy-to-use interfaces across different categories of cloud powered operations enabling mobile and web developers to easily interact with
morishitaです。 Nuxt.js で作っている SPA を Amplify Console で運用していることはこれまで数本のエントリで紹介してきました。 tech.actindi.net tech.actindi.net その Amplify Console に Cypress によるE2Eテストがサポートされたという発表が2019年の10月にありました。 aws.amazon.com その時から気になっていたのですが、ついに導入したので紹介します。 結論から言うと、Preview 機能と併用するとむちゃくちゃ便利です。 更にDependabotを組み合わせるとライブラリのアップデートもサクサク進みます！ Amplify ConsoleのE2Eテスト 次の手順で、E2E テストを追加できます。 Cypressの導入 テストの実装 Amplify.yml への Test ステップの
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より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 の ServiceWorker で Web Push 対応を実装してみる - クライアント編 - Qiita
Web Push、送りたいことありますよね。 この記事は Web Push 通知を使うアプリを AWS Amplify で作ってみる話です。 特にクライアント側を AWS Amplify でどう実装するかを見てみます。 当初サーバー側もあわせて書こうとしたのですが、分量が多くなりそうだったので今回は一旦クライアント編として、サーバー編はまた Amplify の API カテゴリを絡めたものを後日書きます（たぶん）。 Web Push やりたいときにやらなきゃいけないこと Web Push を運用しようとすると、けっこう色々やることがあります。 Push を受け取るクライアント側 Service Worker の実装 購読状態管理、Service Worker 登録等を行うフロントアプリケーションの実装 購読処理時に払い出されるエンドポイントをサーバーサイドに送信 Push を送るサーバー側
前回 は Amplify DataStore をスタンドアロンで使用しました。 シンプルなインターフェースで使用できるデータストアであることが分かったと思います。 しかし、Amplify DataStore をスタンドアロンで使用するだけでは、その魅力の一割にも満たないです。 Amplify DataStore はネットワーク接続が利用可能であれば AWS AppSync を使用してデータを透過的に同期します。 Amplify DataStore はデータを自動的にバージョン管理し、AppSync を使用してクラウド上で競合の検出と解決を行います。 ネットワーク接続がオフラインになっても Amplify DataStore はローカルのみで機能し続けます。 そして、ネットワークが復旧すれば、アプリケーションは自動的にバックエンドに再接続し、データを同期して、競合がある場合は解決してくれ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AWS で静的ウェブサイトをホストする | AWS デベロッパーセンター
素早くアイデアを実験できるAWS Amplifyを試す(バックエンド編)
AWS amplify フレームワークの使い方Part1〜Auth設定編〜 - Qiita
Docker上にNodeJSとAWS Amplify（Amplify CLI）の環境の構築 - Qiita
https://pages.awscloud.com/rs/112-TZM-766/images/F-6.pdf
Amplify x CDK でカスタムリソースを作る& CDK v2 に移行する
ノーコード時代のアーキテクチャ
PRをトリガーにOpenAPIのURLをamplifyで自動ホスティングして、最高の開発環境を手に入れた話
AWS Amplifyの公開設定を色々とためしてみた - Qiita
本番環境でAmplifyを3年くらい使ってみている弊社環境のご紹介 - Qiita
Amplify ConsoleのE2Eテストを導入してみた - アクトインディ開発者ブログ
Get started - AWS Amplify Gen 2 Documentation
Amplify Stadio - UI Library を試してみる
すべてが Amplify DataStore になる - アールスリーインスティテュート ｜R3 Institute