#10「AWS Amplify + Nuxt.jsで実現する静的Webサイトのサーバレスアーキテクチャ」
今回は、AWS AmplifyとNuxt.jsで作るサーバレスな静的サイトについて、サーバレスとは？というところから、アーキテクチャの特徴、利点について話しました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 加藤
- こんにちは！
- 古川
- こんにちはー。
- 加藤
- ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアしたりするためのポッドキャストです。
今回の司会は加藤が務めさせていただきます。ゲストは古川さんです。古川さん、よろしくお願いします！ - 古川
- よろしくお願いしまーす！
- 加藤
- はい、本日のテーマは「Amplify + Nuxt.jsで実現する静的Webサイトのサーバレスアーキテクチャ」です！最近はいろんなクラウドサービスが充実してきていて、Webサイトの作り方も多種多様になっているということで、今回はサーバレスアーキテクチャを取り上げて古川さんと話していきたいと思います！
- 古川
- はーい。えっと、テーマなんですけど、そのNuxt.jsとは言ってるんですが、モダンな静的サイトジェネレーターならどれでもつかえると思うので、適宜置き換えながら聞いていただければと思います！
- 加藤
- はい！まずは、聞く人によって認識が違ってそうな「サーバレスアーキテクチャ」というところはどんなものかってところについて前提を合わせておきたいんですけども、そこ古川さんに簡単に説明してもらってもいいでしょうか？
- 古川
- はーい。今日お話する「サーバレスアーキテクチャ」とか、あと「サーバレス」というのは、AWSやAzure、GCPなどクラウドサービスが提供してくれるサーバを利用するアーキテクチャのひとつになります。たとえば、何かアプリケーションを動かす場合っていうのは必ず実行環境のサーバを用意する必要があると思うんですけど、サーバレスな環境っていうのは、アプリケーションをクラウド上で動かす際に、サーバの処理とかパッチングなどの運用作業などが不要であるという構成を指します。処理だけこっちが用意しておけば、実行環境の管理とか運用作業っていうのをAWSなどのクラウドサービスが私たちの代わりにやってくれるっていう感じですね。
- 加藤
- なるほど。超ざっくりいうと、サーバレスだと私たちがこう、サーバを意識しなくても、WebサイトとかWebアプリケーションをクラウド上で動かせるってことですよね。
- 古川
- うん、そうです。
- 加藤
- 確かに、フロントエンドエンジニアでもGCPとかAWSを使うとNode.jsのサーバ立ち上げたりとか、楽にホスティングできたりとかするので、個人的にはフロントエンドエンジニアのできる領域が広がったなぁーという印象を持っています。
- 古川
- ただその、逆に静的サイト中心の構築を主にやってる方の場合だと、従来のサーバのホスティングだけで事足りちゃうので手を出す人ってのは少ないかもしれないです。あとさまざまな要因でクラウドが導入できないケースっていうのもあると思うので、そういう場合だと、触れる機会ってのはかなり少なくなっちゃうのかなと思います。
- 加藤
- まぁ、確かにそうですね。
- 古川
- でも実は静的サイトを構築する場合でも、サーバレスアーキテクチャを活用する方法っていうのはたくさんあるんですよ。
- 加藤
- といいますと？
- 古川
- 分かりやすいところで言うと、Jamstackですね。Jamstackはウェブサイトやアプリケーションを構築するための構築手法のひとつで、GitHubとかにリソースを配置して、プッシュをトリガーに静的HTMLをビルドしてCDNやADN経由で配信するっていう仕組みなんですけど、これってできあがり自体は静的サイトなんですが、いわゆるサーバレスに該当しますよね。
- 加藤
- 確かにそうですね。
- 古川
- 静的サイトだけにフォーカスすると、CloudfrareがCloudfrare Pagesをリリースしましたし、AzureもStatic Web Appっていうサービスをリリースしました。プラットフォーム側はかなり充実してきてるのかなと感じてます。で、あとはすでに日本でもいくつか事例があって、たとえばはてなさんが自社コーポレートサイトをいわゆるJamstackな構成で構築されたりしているそうで、諸々踏まえると、Jamstackを含めたサーバレスアーキテクチャの構成っていうのは、すでにWebサイト構築の方法のひとつになってるのかなぁと思います。
- 加藤
- あー、それは知らなかったですね。まぁちょっとどこまでフロントエンドの領域かっていうのはちょっといったん置いといて、いざJamstackで作ろうってなったら、当然フロントエンド開発プロセスにも影響があるので、やっぱ私たちもサーバレスについては知っておいたほうがいいですよね。
- 古川
- そうですね。とはいえ、その普段クラウドに馴染みがないフロントエンドエンジニアが、サーバレスやってみる！みたいになると、ちょっと心理的にハードル高く聞こえちゃって出しづらいと思うので、今日は紹介したいと思うのがAWS AmplifyとNuxt.jsで構築する静的サイトのサーバレスアーキテクチャになります。
- 加藤
- はい！Nuxt.jsはVue.jsベースの静的サイトジェネレーターですよね。
- 古川
- そうですね。
- 加藤
- で、AWS AmplifyというのはAWSサービスの1つだと思うんですけど、ちょっと機能を具体的にどういうものかっていうのを教えてもらってもいいですか？
- 古川
- はい。えーと、AWS Amplifyは、簡単で、かつ迅速にWebフロントエンドとかアプリケーションを構築できる開発プラットフォームになります。で、AWSを用いたサーバレスな環境を構築するためのAmplify CLIや、バックエンドを接続するためのクライアントライブラリだったりとか、Webサイトのホスティングの仕組みもこの中に含まれているので、アプリケーション構築からホスティングまでをまるっとAmplifyで対応できるものになります。
- 加藤
- なるほど。ということは、AWS Amplifyは何か機能を持ってるっていうよりは、そのAWSのいろんなマイクロサービスを組み合わせた1つのソリューションという理解でいいんですかね？
- 古川
- そんな感じだと思います！
- 加藤
- その説明にあった、サーバレスな構築をするためのCLIっていうのは、コマンドラインからAWSが提供しているCLIツールを使って、たとえばWebサイトホスティングとかがコマンド一発でできるっていうことですかね？
- 古川
- うん、そんな感じです。そのホスティングに限らずに、開発に必要な一般的な機能、たとえば認証やデータストアとか、あとはリアルタイム通知機能の基盤を用意する仕組みもAmplifyっていうのには用意されてて、その設定もCLIでできますね。たとえば「Webサイトに認証機能をつけたい」ってなったら、
amplify add authみたいな感じのコマンドを入力すると、コンソールにいくつかの質問事項が表示されます。で、この質問に答えていくだけで認証機能が実装されるのでAWSにそんなに詳しくなくても「やりたいこと」から逆引きしてサーバサイドの環境ってのを構築することができます。 - 加藤
- なるほど。これさらっと説明してくれたけど、裏側でAWSがやってくれていることを自前で用意しようとするとかなり大変ってことですよね。
- 古川
- まぁ、そうですね。大変さが想像に難くないって感じです。
- 加藤
- なるほど…これがサーバレスのすごさですね…。
- 古川
- そうですね。あとは、静的サイトの環境構築に関しては、やっぱりAmplify Consoleっていう機能が外せないです。もちろんCLIからでもホスティングだけってのは可能なんですけど、Amplify Consoleっていうのは、アプリケーションのデプロイとかホスティングするための、GitベースのワークフローをUI上で設定することができる機能になってます。で、具体的には、GitHubとかGitLabなどのGitリポジトリをAmplifyと接続して、ビルドの設定を行うことで、以降
amplify pushっていうコマンドでプッシュされるたびに勝手にデプロイとかビルドをしてくれるって感じですね。Amplifyにはこのほかにも、ログイン画面やチャットボットのUIコンポーネントとかたくさんの機能があるんですけど、全部説明してると日が暮れちゃうので、Amplifyの概要っていうところはこの辺りにして、ここからはNuxt.jsで生成した静的サイトをAWS Amplifyでサーバレス化するためのかんたんな流れを紹介したいと思います！ - 加藤
- お願いします。
- 古川
- Amplifyでは、一般的なWebフレームワーク、いわゆるReactとか、Vueなどといったさまざまなフレームワークがサポートされてます。また、これまではSPAでの構築が基本だったんですけど、最近Nuxt.jsやNext.jsなどのSSRに対応したことでさらに開発の幅が広がりました。まずその、今上げたようなフレームワークを使って、Webサイトをビルドできる状態にして、リポジトリにプッシュしておきます。で、準備ができたらコマンドラインを立ち上げて
amplify initを実行してAmplifyをプロジェクトに設定する作業を行います。ここでは、コマンドからAmplify Console立ち上げたりとか、ビルドコマンドの設定っていうのを決めたりします。 - 加藤
- この設定の部分は、さっき話してくれたように、コマンドライン上で対話形式で行っていけるっていうイメージですよね？
- 古川
- そうです。画面上にAmplify Consoleが自動的に表示されるんですけど、Amplify Console上で連携したいGitリポジトリとブランチを選択して、ビルドなどの設定を記述していきます。で、最後にAmplify上で初回のビルドとホスティングにエラーがなければ、セットアップが完了します。
- 加藤
- え、それだけ？
- 古川
- そうです笑
- 加藤
- めちゃくちゃ簡単ですね笑
- 古川
- あとは、連携したブランチで
amplify pushコマンドを実行するたびにビルドやデプロイをしてくれるようになる感じです。 - 加藤
- なるほど。まぁ、AWSアカウントの作成とか、CLIツールのインストールとかってのは多分別で必要になると思うんですけど、それにしてもめちゃくちゃお手軽な感じですね。
- 古川
- そうですね、喋っててもサラッと終わっちゃいます笑
- 加藤
- 笑
はい、導入はとても楽にできるってのはわかったんですけど、なんだろデプロイが楽にできるとか以外に、このサーバレスアーキテクチャの利点とかってあるんでしょうか。 - 古川
- 冒頭で話したサーバー管理が不要、ってところはもちろんなんですけど、柔軟なスケーリングも強みですよね。あとは、他にも従量課金性になるので、つかった分だけコストが発生するところも利点だと思います。 他にも開発者目線だと、開発者体験の向上が挙げられますかね。サーバー管理の必要がないっていう分、開発者はアプリケーション開発に注力できますし、あとはさっき話したGitHubでプッシュするだけでビルドされてサーバにアップロードされる流れって、私たち目線でもかなり楽じゃないですか。
- 加藤
- そうですよね、やっぱアプリケーションの開発にフォーカスできるっていうのはかなり体験としてはいいですよね。ただその、逆に言うと、Gitへのプッシュをトリガーにするとしたら、開発者じゃない人が公開作業をしたい場合ってのはどうやって更新作業を行うんですか？
- 古川
- そうですね、そのたとえばエンジニアではない人が記事投稿をしたいっていう場合、記事を画面上で投稿できるUIっていうのを別途構築していく必要があります。個々の機能っていうのがマイクロサービス化されているので、アーキテクチャに機能を追加する場合っていうのは、必要な機能を提供しているプラットフォームのサービスを契約したりとかしてどんどん追加していくってことが必要になります。ただ、その複数のプラットフォームを使わなくても、たとえばADNのサービスの中で一緒に管理画面とか色んな機能提供しているものもあったりしますね。なので、誰がどう運用していくのかみたいなワークフローを加味してから、どのサービスプラットフォームを使うかっていうところの選定を行っていかないと、できあがってみたら誰も使えないみたいなことになりかねないので注意が必要かなと思います。
- 加藤
- なるほど。
- 古川
- えーっと、まぁAWS Amplifyに関しては、Amplify Admin UIっていう、Amplifyのデータベースとかユーザー管理とかをUIから管理できるサービスっていうのが12月くらいですかね、行われたre:Invent 2020で発表されてました。なので、そのAWSのアカウントがないユーザーもAmplify Admin UIからアプリケーションを管理できる機能みたいなのもあって、そうやってサービスプラットフォーム側で今後提供していくみたいなこともありそうなので、今後のアップデートっていうのは要注目かなと思ってます。
- 加藤
- 管理画面とかの課題も、プラットフォーム側が解決してくれる可能性があるんですね。ますます便利になっていきそうですね。
- 古川
- 楽しみです！
- 加藤
- はい、というわけで、今回のミツエーテックラジオでは、「AmplifyとNuxt.jsで実現する静的Webサイトのサーバレスアーキテクチャ」についてお話しました。個人的にちょっと曖昧だったサーバレスだったんですけど、今回の話で少し理解が深まった気がします！
- 古川
- はい。あの、アカウントを作成して1年間はAWS無料利用枠ってのが適用されるんで、是非Amplifyでがんがん色々アプリケーション制作で使ってみてください！
- 加藤
- はい！
最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。 - 古川
- このPodcastはApple Podcast、Google Podcast、Spotifyで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐに視聴できます！ぜひこちらもご活用ください。
- 加藤
- はい、それでは今日はこの辺で！ありがとうございましたー。
- 古川
- ありがとうございました！次回もお楽しみにー！