AWS Amplifyを使ってみた！
こんにちは！クラウドソリューション開発部の今野です。
AWS、いろんなサービスがありますよね～
EC2、DynamoDB、Lambda(うんうん、ここまでは有名)
「AWS Amplify」
アン…プリファイ…？？(そもそもアンプリファイってどういう意味)
Amplify、実は隠れた便利サービスなんです。
今回はAmplifyについて紹介していきたいと思います！
AWS Amplifyとは
一言で言うと、Webアプリやモバイルアプリをカリっと香ばしく、「サクッ」と作ることができる開発プラットフォームです。
ちなみに、Amplifyという英単語には「増幅する」といった意味です。
(サービス内容と英単語の関係があるのかわからないですが、あることを強く信じて)
さらに、AWS Amplifyの公式サイトを上から下にサーっと眺めていると…。
https://aws.amazon.com/jp/amplify/
「開始も簡単、スケールも簡単」
「アイデアから始めて、数時間でアプリケーションを完成」
「自信をもってコミット、コラボレーション、提供」(結果にコミットする…? ズンチャ、ズンチャ)
何やら物凄く簡単に作れてしまうといった文言が書かれているではありませんか。
カップヌードルのようにお湯を注いで3分！のような簡単さ。
簡単にWebアプリが作れてしまうのならば、全ての人が活用したくなるはず。
ということで、試しに作ってみました。
AWS AmplifyでWebアプリケーションを作ってみた
Webアプリケーションを作成する
さて、ReactでWebアプリケーションを作成していきましょう。
今回のプロジェクト名は「amplify-test-app」としています。
|
1 |
npm create vite@latest amplify-test-app -- --template react-ts |
ここで少し解説をしておくと、
create-react-app というツールは開発が止まっており、AWS公式も初心者には Vite（ヴィート） という新しいツールを勧めています。
そのため、Viteを使用して作成しています。
実行すると、以下の文字が表示されます。
「http://localhost:5173」と出ているので、Webブラウザ上でURLを叩いてみましょう。
こんな画面が表示されました！
次に、プロジェクトにAmplify（Gen 2）を導入します。
別でターミナルを開くか、一度サーバーを止めてから以下を叩きます。
以下を叩いて、amplifyを導入します。
|
1 |
npm create amplify@latest -y |
「Welcome to AWS Amplify」です。Amplifyがおもてなししてくれます。
その後ターミナルで、作成したプロジェクト「amplify-test-app」に以下のコマンドで移動します。
|
1 |
cd amplify-test-app |
その後、以下のコマンドを叩きます。
これにより、クラウド上に開発用のバックエンド環境（サンドボックス）が構築されます。
|
1 |
npx ampx sandbox |
すると、再びAWSコンソールのAmplify上に飛ばされます。
「今すぐ設定を初期化」をクリックします。
アプリ作成が開始されます。
パンの生地を焼いているような感覚でお待ちを。(気長に待ちましょう)
その後、以下の表示が出てきたら完了です。
コードの実装
あともう一息です。
表示したいコードを書いていきましょう。
こちらを叩いてUI周りのライブラリを導入します。
|
1 |
npm install @aws-amplify/ui-react aws-amplify |
App.tsxにて、以下のように実装します。ほんの一例です。
(Reactご存じの方は色々コードをいじって試してみても良さそうですね)
App.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import { Authenticator } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; import { Amplify } from 'aws-amplify'; import outputs from '../amplify_outputs.json'; // Amplifyの設定を読み込む Amplify.configure(outputs); function App() { return ( <Authenticator> {({ signOut, user }) => ( <main style={{ padding: '2rem', textAlign: 'center' }}> <h1>🎉 ログイン成功！</h1> <p>こんにちは、<strong>{user?.signInDetails?.loginId}</strong> さん</p> <button onClick={signOut} style={{ marginTop: '20px' }}> サインアウト </button> </main> )} </Authenticator> ); } export default App; |
UI上ではどのように表示されている？
再び、先ほど温めておいた「http://localhost:5173」を見てみましょう。
無事作成されてますね～。
作ったAmplifyのアプリで遊んでみた
せっかくなので、作ったアプリで遊んでみましょう。
Create Accountのタブをクリックし、ユーザー名、パスワード(今回はあくまでお試しのため、ゆるいパスワードです)を入力し、Create Accountをクリックします。
すると、「メールに認証コードが送信されたので、数字を入力してね！」という画面に切り替わります。
メールに届いた認証コードを入力して「Confirm」をクリックすると…
ログイン成功の画面が表示されましたね！
片付け
このままおいておくと課金が発生するため、
学習以外でAmplifyを使用しない場合は、以下のコマンドを叩いて全て消しておくことをおすすめします。
|
1 |
npx ampx sandbox delete |
最後に
いかがでしたでしょうか？
Amplify、なかなか使う機会がない人にとっては、初見の敷居は高く思いますよね。
ですが、実際に触ってみると比較的容易に作れてしまいました。
フロントエンドエンジニアが、バックエンドの知識がなくても一人でフルスタックなアプリを作れるようにしてくれる強力な味方となりそうです。
ちなみに、Amplifyでスマホアプリも作れるとのことだったため(なんとSwiftやKotlinにも対応！)、今度はAmplifyを使ったスマホアプリにも挑戦してみようと思います。
弊社ではIoTに関連した、様々な案件にチャレンジすることができます。
ぜひ一緒にこれからの未来を作っていきませんか？
募集要項はこちら
最後までご覧いただき、ありがとうございました！
