Amplifyのすゝめ　～その１～

2024年3月21日 09:27

最初に

　こんにちは。株式会社GA technologies AISC(Advanced Innovation Strategy Center)室長の稲本です。先日我々のテクノロジーショーケースであるTechLabの紹介をしましたが、そこで採用しているAWS Amplify ついて何回かに分けて紹介していきたいと思います。

　AWS AmplifyはServerlessでフルスタックのウェブアプリケーションを提供できるサービスとなっていて、フロントサイドのスキルがあれば、ホスティングや認証、バックエンド処理、ストレージ、データベース等を統合的に扱うことが可能という、とても便利なサービスです。

　前置きはさておき、amplifyでどれだけ簡単にウェブアプリケーションを作れるのかを見ていきたいと思います。

前提条件

OS: windows WSL 上のUbuntu 22.04
editor: Visual Studio Code
front framework: React
build tool: Vite
amplify javascript: V6
IAMに"AdministratorAccess-Amplify"ポリシーがアタッチされている
aws cliにIAMのaccess Key IDとSecret Access Keyが設定されている

プロジェクト名は"amplify-sample"で進めます

導入準備

node.jsとnpm インストール

sudo apt install -y nodejs npm

　因みに、Ubuntu20.04の場合、aptでインストールできるnode.jsとnpmが古いので、アップデートすることをお勧めしますが、インストールがちょっと面倒になります。

Amplify 環境のsetup

sudo npm install -g @aws-amplify/cli

amplify configure

Region: ap-northeast-1選択
User name: メアド選択
accessKeyId: （AWS CLIに設定されていなければ入力）
secretAccessKey: （AWS CLIに設定されていなければ入力）
Profile Name: enter
何度もブラウザ開くけど無視して閉じてOK

一度設定してしまったら、次回からはここまでの操作は不要です。

ローカルでの開発

project作成

npm create vite@latest

ok to proceed? → y
project name: → amplify-sample
Select a framework: → React
Select a variant → Javascript

projectの起動

code amplify-sample
npm install
npm run dev

Webブラウザでhttp://localhost:5173/　開く

　以下の様な画面になったら成功です。buildツールに高速なviteを採用したので、ここまで１分足らずだと思います。

amplifyの設定

　ここまで作ったプロジェクトはlocalhostつまり個人のPC上で動いているので、外部に発信できるようにホスティングを行っていきましょう。以下のようにコマンドを入力していきます。

初期化

amplify init

ひたすらEnterでOK

パッケージのインストール

npm install @aws-amplify/ui-react aws-amplify
npm install @aws-amplify/ui-react

ui-reactは無くても動きますが、公式のチュートリアルでも導入しているのでインストールしておきます。

ホスティング機能の追加

amplify add hosting

ここもEnterでOK ！

Viteに合わせて設定変更

amplify configure project

Distribution Directory Pathはdefaultでbuildですが dist にしてください。defaultのままだと、次のamplify publishが通らなくなります。他はdefault valueで大丈夫です

デプロイ

amplify publish -y

　しばし待ちます。

　最後に表示されるURLを開くと、先ほどと同様の画面が表示されると思います。表示されている物は全く同じですが、このページに世界中のどこからでもアクセスできるようになっているという点で異なります。

　後はhtmlを変更→amplify publishを繰り返すことで、オリジナルのウェブページを全世界に配信することが出来ます。サーバーを借りたりする必要はありません。

プロジェクトの削除

amplify delete

　最後にサンプルプロジェクトなので消しておきましょう。

裏側の仕組み

　因みに「サーバーはどこにあるの？」って思いましたか？実は図のようにS3にファイルを置いて、CloudFrontと呼ばれる機能を使ってホスティングしています。

　S3(simple storage service)もCloudFrontも、起動そのものに課金されるサービスではないので、通常のサーバーのように起動させておくだけで月に数千円かかるようなことはありません。逆に、ストレージに置くファイル容量であったり、ユーザからのアクセスによって料金が発生しますが、無料枠もありますので、小規模なサービスである限り発生するコストは少ないです。（実際に生じるコストについて責任は負いかねますので、ご了承ください）

　あと、地味に嬉しいのがCloudFrontやS3は、Amazonの超一流のエンジニアが管理してくれているのでセキュリティ面でも安心だという事です。以前AISCの新卒が立ち上げたec2サーバーをエンジニアに確認してもらったところ、開発者のIAMが抜ける状態にあると警告されました。それ以降、メンバーがサーバーを立ち上げる度に少し恐怖感を感じてましたが、そういった恐怖から解放されたのもServerlessであるAmplifyの良いところだと思います。

まとめ

　どうでしたか？導入準備さえできてしまえば、ものの数分で自作のWebページをホスティングし、全世界に発信することが出来ました。しかもServerlessなので、起動しておくのに料金がかかる事もなく、セキュアなサーバー管理を実現するために苦労することもありません。

　AISCではリーンな開発プロセスを大切にしており、大量のMVP: Minimum ViableなPrototype（Productではない）が発生するのですが、それらを維持するコストも馬鹿にならないので、利用されない限り料金があまり発生しないAmplifyはとてもありがたいです。

　私自身のキャリアは企業の画像処理研究者、SaaSサービスの企画・プロダクトマネージャー、研究開発組織のマネージャーというキャリアを歩んでおり、業務でまっとうなエンジニアリングをした経験はありません。そんな私でもAmplifyを使えば本当に簡単に、外部提供可能なアプリが作れます。

　我々が重宝しているAWS Amplifyの魅力を読者の皆様にも感じて頂けたとしたら幸いです。次回は認証を導入しようと思います。

Amplifyのすゝめ ～その１～

最初に