このチュートリアルでは、AWS Amplify を使用してシンプルなフルスタックウェブアプリケーションを作成します。AWS Amplify は、ウェブホスティングサービスを含む一連のツールとサービスです。最初のモジュールでは、AWS で React アプリケーションを構築してホストします。残りの 4 つのモジュールでは、CLI を使用してローカルアプリケーションを初期化し、認証を追加して、GraphQL API とデータベースを追加し、アプリケーションを更新して画像を保存します。
![AWS でフルスタック React アプリケーションを構築](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4f530e16dfb308a48108c71972db725de90d0d5/height=288;version=1;width=512/https%3A%2F%2Fa0.awsstatic.com%2Flibra-css%2Fimages%2Flogos%2Faws_logo_smile_1200x630.png)
AmplifyがNext.jsとNuxt.jsを利用したSSR(Server Side Rendering)をサポートしました! Amplify JavaScript adds server-side rendering (SSR) support for frameworks like Next.js and Nuxt.js これまで、AmplifyはSPAで構築するのが基本でしたが、SSRな構成をとることもできるようになり、選択の幅が広がったと思います! このSSR環境をさっそく構築してみました! 構成図 AmplifyでNext.jsを利用してSSR環境を構築するとこんな感じの構成になります。 Serveless Frameworkを利用して、Lambda@EdgeでレンダリングするSSR可能なCloudFrontを構築することで、SSRを実現しています。 構築してみた Amplif
こんにちは、JAWS-UG 浜松支部の松井です。 普段からモノリシックな環境やそれに準じる環境での Web アプリケーションの開発、保守に取り組んでいますが、継続的にサービスを運用していく上では様々な悩みが尽きません。 OS のバージョンアップ、セキュリティパッチはどうするか ? 言語やミドルウェアのバージョンはどうするか ? ステージング、本番等の環境のデプロイはどうするか ? コスト最適化はどうするか ? etc・・・ そこで、サーバーレスアーキテクチャを採用することにより、こう言ったホストマシンやネットワークの管理に起因する悩みを軽減することができます。 とはいえ、いきなりサーバーレスに着手するとしても、 本当にちゃんと動くのか ? 設計、構築が難しいのではないか ? コストはどのくらいかかるのか ? まずどこから手をつければ良いのか ? と言った疑問があると思います。 今回はそう言
こんにちは!コンサル部のテウです。 2020年7月31日にAWS Japanさんより、日本初のAmplify Meetupが開催されました!(パチパチパチ) 私は普段 AWS Amplify が好きで、AWS Amplify を使ったいろんな開発パターンや、さらに効率よく開発できるパターンを考えていたため、今回のAmplify Meetupで、LT登壇を申し込みさせて頂きました。 本記事はそのLT登壇資料を公開する記事となります。 登壇資料 登壇のため作成したブログシリーズ 今回のLT登壇のため、いくつかのブログを書きました。 【AWS Amplify ノウハウ】 1. バックエンドとフロントエンドは分離しましょう! Amplify プロジェクトを初期化する際に、バックエンドプロジェクトとフロントエンドプロジェクトを分離することで、どのようなメリットがあるか説明します。 【AWS Ampl
こんにちは!コンサル部のテウです。 私はスタートアップ環境にも興味を持っており、スタートアップ等で迅速なサービス開発ができる AWS Amplify にも興味を持っています。なので、普段 AppSync や Amplify を用いてサイドプロジェクトをしたりしますが、今回は特に AWS Amplifyを実際に使ってみて感じたノウハウになれるようなことをまとめるブログシリーズを企画してみたいと思いました。 本シリーズでは Amplify の基礎部分には触れず、一度でも Amplify を使ってみた方々の役に立つそうな情報を要約してお伝えしますので、基礎部分につきましては公式文書のチュートリアルか他のブログを参照してください :) 今日はまず、バックエンドとフロントエンドは分離しましょう! というタイトルでブログを書いてみます! それでは始めます!:) バックエンドプロジェクトを分離するってど
はじめに こんにちは、技術1課の山中です。 暑くなってきましたね!いつも仕事をしている部屋にエアコンがなくてそろそろやばいなあと感じ始めています。。 というのはさておき! 今回はこのアップデートについて見ていきます! Amplify Console がすべてのブランチデプロイのカスタムサブドメインを自動的に作成および削除するためのサポートを追加 AWS Amplify とは AWS Amplify (Amplify) は Web フロントエンド、モバイルアプリの開発を加速させるために作られた AWS が提供する OSS の開発プラットフォームです。 モバイルアプリケーションおよびWebアプリケーションを構築するために必要なツール群を総称したもので、具体的には、 iOS, Android, Webアプリと統合するためのライブラリ UIコンポーネント コマンドラインインターフェース ( Amp
はじめに おはようございます、加藤です。今回はフロントエンドエンジニア向けに静的なWebサイトをホスティングなどが出来るサービスであるAWS Amplify Consoleの使い方や出来る事を紹介します。 古の時代、ただの静的なコンテンツを表示する為だけだとしてもサーバーを建ててApache or nginxをインストールして...という事をやっていました。フロントエンドエンジニア or デザイナーが作成し、インフラエンジニアに依頼する必要がありました。古の時代といった通り現代では、NetlifyやFirebase hosting、そして本ブログで紹介するAmplify Consoleを使えば自分自身で簡単に簡単にリリースを行うことができます。より多くのエンジニアにそういった体験をして貰えれば良いなと思いこのブログを書きます。 AWS Amplifyとは AWS Amplify(以降、Am
Developers.IO 2020 Connectで「Android + AWS AmplifyでAWSに入門してみた!」についてビデオセッションを公開しました。セッション動画では省略してしまったソースコードや解説などを追記しております。 みなさん、Developers.IO 2020 楽しんでますか?(挨拶 新卒エンジニアのハウンです? 2020年6月16日(火)より、弊社主催のオンラインイベントDEVELOPERS.IO 2020 CONNECTが開催されています。本日はUX系のセッションが勢ぞろいとなっていることで、私もビデオセッションを公開いたしました! 新卒エンジニアであり、韓国人という身分では過酷な挑戦だったことではあったものの、周りからも励ましていただいて最後まで頑張ることができたと思います。 本記事では「Android + AWS AmplifyでAWSに入門してみた!」
ご挨拶 みなさん、こんにちは ぎりぎり1年目エンジニアの佐々木です。 さて、今回はAmplifyのデプロイで…という題を銘打ちましたが、若干特殊です。 というのも、「開発環境のAWS環境」にはデプロイしているアプリケーションを、本番環境として用意している「別のAWS環境」にデプロイ(移行?)する、というものだからです。 よくあるような(?)同じAWS環境内で環境名だけ変えてデプロイとは若干趣が違います。 しかし、今回私が当たった問題の数々は、通常デプロイする方にも起こることだと思いますので、 本記事がそういった方々の一助になればと思います。 環境構築手順(超簡易版) GitHub上にソースコード(amplifyの環境情報~cloudformation~含む)があり、これをgit clone してくる aws cli(amlify cli)を用いてamplify initする amplify
AmplifyとCognitoを利用すると、Amplifyがうまいことやってくれるので、プログラム開発者は認証フローを意識することなく認証機能が実装できます。 その、うまいことってのが具体的に何をやっているのかを暴きます。 Amplifyを使うと、Cognitoを利用して簡単に認証機能を作れて便利です。 詳しくは弊社ブログをご覧ください。 AWS Amplify+Angular6+Cognitoでログインページを作ってみる ~バックエンド編~ | Developers.IO AWS AmplifyとAngular8を使ってCognitoでAWS Management Consoleにログインするページを作ってみる | Developers.IO また、こういったログインのほかに、CognitoにはホストされたUIを利用してユーザー認証をするという機能があります。 イメージ動画を作成したので
大阪オフィスのYui(@MayForBlue)です。 Amplify CLI をインストールする手順とCLI上でプロジェクトを操作するユーザーを設定する方法をご紹介します。 前提 Node.js バージョン8.x以降がインストールされていること npm バージョン5.x以降がインストールされていること Node.js のバージョン確認コマンドはこちら node -v npm のバージョン確認コマンドはこちら npm -v Amplify CLI をインストールする 以下のコマンドでAmplify CLI をインストールします。 $ npm install -g @aws-amplify/cli IAMユーザーを作成する Amplify CLI でプロジェクトを操作するIAMユーザーを作成します。 以下のコマンドを実行します。 $ amplify configure AWSマネジメントコンソ
こんにちは、技術1課の加藤です。 今回は、AWS Amplify のお話。簡単にアプリケーションが構築できちゃう超便利サービスな Amplify なわけですが、一定の型から外れようとするとなかなか苦労する印象がありました。 しかし機能の拡充は進み、今となってはバッチ処理用の Lambda 関数を用意するのもお茶の子さいさいとのこと。 素敵な機能だと思ったので試してみました。 手順 Amplify プロジェクトの作成 Lambda 関数の追加 デプロイ 以下のブログを参考にしています。 How to schedule recurring Lambda functions using the Amplify CLI 1. Amplify プロジェクトの作成 Amplify CLI のインストールや amplify configure の実行がまだの方はGet started - Install
はじめに 業務でサーバーサイドとのやり取りをGraphQLを使ってやってみようということになり、AndroidアプリにAWS Amplify CLIとAndroid用AWS SDKを導入しました。 今回AWSの各サービスを統一して利用するため、Cognito認証を使います。 開発環境 MacBook Pro 10.14.1 Android Studio 3.2.1 公式ドキュメント Amplify Android SDK Getting Start https://aws-amplify.github.io/docs/android/start 事前準備 Node.jsとnpmがマシンにインストールされていない場合はインストールします。 導入したAndroidアプリのディレクトリへ移動しAmplify Command Line Interface (Amplify CLI)をインストールし
AWS Amplify ハンズオン 基本ステップ 今回のハンズオンでは、AWSが提供するクラウドベースの統合開発環境 (IDE)であるAWS Cloud9上で開発を行っていただきます。 アプリケーションの開発にはSPA(シングルページアプリケーション)のフレームワークであるVueを用います。 本ステップでは、Cloud9のセットアップ、Vueプロジェクトの作成、Amplifyの初期セットアップを行います。 事前準備 Step 0: 開発環境の選択 本ハンズオンでは、環境の違いによる挙動の違いを除外するためクラウドベースの統合開発環境 (IDE)であるAWS Cloud9上で開発を行う手順になっています。 ご自身のローカルの環境で手順を実施したい場合は、「Step 3: 新規 Vue アプリケーションの作成」の手順から実施してください。 Step 1: Cloud9のセットアップ Ampli
Amazon Web Services ブログ [AWS Black Belt Online Seminar] AWS Amplify 資料及び QA 公開 先日 (2020/05/20) 開催しました AWS Black Belt Online Seminar「AWS Amplify」の資料を公開しました。当日、参加者の皆様から頂いた QA の一部についても共有しております。 20200520 AWS Black Belt Online Seminar AWS Amplify AWS クラウドサービス活用資料集(すべての過去資料が閲覧できます) Q1. AWS Amplify で使う「カテゴリ」はどのような単位で使うものですか?イメージがわかないので具体例を教えてください。 A. Amplify のカテゴリはユースケース単位でアプリケーションに機能を追加することができます。 Amplif
AWS AmplifyとAngular8を使ってCognitoでAWS Management Consoleにログインするページを作ってみる 今回のブログではブラウザで動かせるCognitoユーザープールのユーザーでAWSマネジメントコンソールにログインするページを作ります。 そのサイトをAWS AmplifyとAngular8で実装する例を紹介します。 先日、CognitoユーザープールのユーザーでAWSのマネジメントコンソールへフェデレーションログインする方法についてのブログを書きました。 そのブログではAWS CLIを使って、フェデレーションログイン用のURLを生成する方法を紹介していました。 今回のブログではブラウザで動かせるCognitoユーザープールのユーザーでAWSマネジメントコンソールにログインするページを作ります。 そのサイトをAWS AmplifyとAngular8で実
"AWS Amplify SNS Workshop" をやるときに使える Visual Studio Code 用のコンテナ環境 今年のゴールデンウィークは家で過ごす時間が長そうなので、ツイッタで同僚が教えてくれた AWS Amplify のワークショップ、"Amplify SNS Workshop" をやってみることにしました. ワークショップの中で事前に見ておくことをオススメされているセッションを2本見て、よっしゃやるぞとページを進めていきました. ローカルマシンはできるだけキレイに保ちたい このワークショップ、途中で Node と Java が使える環境であることを要求してきます. 以下のスクショのような感じです. Node のインストールを強要されている様子 JDK のインストールを強要されている様子 WFH が長引きそうなご時世ですので、できるだけラップトップに不要なものがたまる
Amplify FrameworkのUIコンポーネントをカスタマイズして、テーマカラーの変更と日本語化をしてみた こんにちは!DA(データアナリティクス)事業本部 インテグレーション部の大高です。 先日、試してみた新しくなったAmplify FrameworkのUIコンポーネントですが、今回はUIのカスタマイズを試してみました。 色を変えてみる テーマのカスタマイズについては以下のヘルプに記載がありますので、早速試してみます。 rootのcssに適用が良いとのことなので、下記のとおりsrc/styles.scssへ追記してみます。 src/styles.scss :root { --amplify-primary-color: #fc7963; --amplify-primary-tint: #ff7359; --amplify-primary-shade: #e0573e; } 元のオレ
Privacy | Site Terms | © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved. navigation Welcome to Amplify Social Network App(or SNS) Workshop! In this workshop, you will learn about AWS Amplify in hands-on way through the development of twitter-like social media applications. Audience Application developer who wants to develop at explosion speed Server-side engineers who want
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く