Amplify Consoleでお手軽ホスティング 第1回 Amplify Consoleでできること
AWSのさまざまなサービスを自動で連携させ、フロントエンド中心のプロジェクトを簡単に公開できるAmplify Consoleというサービスを紹介します。まずはその概要を掴んでみましょう。
はじめに
この連載では、AWSのAmplify Consoleというサービスの紹介と、実際にどのように使うかを解説します。
静的なWebサイト、Jamstackな構成のWebサイト、シングルページアプリケーションなどの開発を行う際、ホスティング先やテスト環境の一候補としてオススメです。筆者は案件でも使ったこともありますし、個人的にも何か作るときは基本的にはAmplify Consoleを使っており、かれこれもう4回ぐらいは使っています。
第1回ではまずはAmplify Consoleの概要から解説しますので、「自分が作っているのもマッチするかも！」と思われたならば、この連載がAmplify Consoleの理解と、導入の参考になれば幸いです。
AWS Amplifyとは
まず、AWS Amplify Consoleというのは何なのかということについてです。
これは、AWS Amplifyという、AWSが提供する開発環境ソリューションみたいなやつの一部です。「みたいなやつ」とは何だと思われるかもしれませんが、公式サイトの説明を見てもいろいろ含まれすぎていて、よくわかりません……！
公式サイトの文面の一部を引用してみると、次のようにあります。
AWS Amplify は、それぞれを連携させたり個別で使用したりできる、ツールとサービスのセットです。これらの機能により、フロントエンドウェブおよびモバイルのデベロッパーが、AWSによるスケーラブルなフルスタックアプリケーションをビルドできるようにします。Amplifyを使用するお客様は、数分の内にバックエンドを構成しアプリケーションと接続でき、また、静的なウェブアプリケーションのデプロイは数クリックだけで実行できます。さらに、AWSコンソールの外部でも、簡単にアプリケーションコンテンツの管理が行えます。
AWS Amplifyには、SDKとかCLIとか、Amplify Console以外にもいろいろあります。要するに、AWSは、バックエンドからフロントエンドまで、まるっとシームレスに開発できちゃう環境とツールのセットを、AWS Amplifyという名前で打ち出していきたいと考えているのだと筆者は理解しています。詳しい人にそう言うと何かツッコまれそうな気もしますが、だいたいそういう認識で良いだろうと筆者は思います。
マンガでわかる!? Amplify
Amplifyとは何だろう？ と思ってGoogleで検索しても、みんな一言でうまく言い表せない感じの感想が散見されます。Amplifyが何かというのについては、AWSが提供する以下のマンガを読んでみてください。なんとなくわかった気分になれるので、それで十分です。
AWS Amplify Consoleとは
さて、AWS Amplifyはひとまず置いておいて、今回紹介するのはこの中の一つのパーツであるホスティング部分、これを担うのがAmplify Consoleというサービスです。我々がこの連載で触るのはこれだけです。
この連載では、Amplify Consoleを使う流れと、どのように使うのか、どういう特長があるのかについて解説していきます。
同じようなサービスは？
このAmplify Console、似たようなサービスはなにかというと、ズバリCodeGridの記事にもあるNetlifyが挙げられます。そんなわけで、以下の連載を読んでいただけたのであれば、Amplify Consoleを半分ぐらい理解できたも同然です。
Amplify Consoleが気になる方は、Amplify Conosoleの踏み込んだ理解と、他のサービスの比較のためにも、上記Netlifyの連載をざっとで良いので目を通して貰うことをオススメします。
旧来のホスティング方法
ではAmplify Consoleについて解説を進めていきましょう。細かく書くとドキュメントの水増しのようになってしまうので、この連載は「流して読んでもらえればなんとなく理解できる感じ」を目指しています。
仕事やら趣味やらで、何かしらWebサイト、Webアプリケーションを作ると仮定しましょう。
最近の開発であれば、最終的なHTMLを作るためには、ビルドというステップが挟まることが当たり前になっています。Jamstack的なアプローチならまず必須。そうでなくても、SassのコンパイルやらJSのminifyやら、現代のフロントエンド開発においては、ビルドというステップはほぼ必須といえます。こうしてビルドされ、出力された結果のソースコード一式を、レンタルサーバーなりVPSなりを契約してアップロード、Apacheやらnginxやらで公開するのが旧来のWebサイト公開の流れです。しかし、これを全部真面目にやろうとすると結構大変です。
まず、ビルドしてからアップロードするというところですが、この手順がまず望ましくないです。たとえばJamstack的なアプローチで作るサイトなら、ヘッドレスCMSの内容を画面に反映するかもしれません。そうしたらどうでしょう、CMSの管理画面で入力を終え、手元でビルドしてからFTPなどでサーバーにアップロードするのでしょうか。これは非常に効率が悪いです。おまけにローカルでビルドしたら、環境によっていろいろと差も出てしまいそうです。
そこで、ヘッドレスCMSの更新に合わせ、ビルドを走らせる仕組みを作るとします。しかし、これを一から作るのは大変すぎるので、世の中にはCI/CDと呼ばれるサービスが存在しています。このようなサービスを利用すると、CMSの更新時にwebhook経由でCI/CDにこのビルド処理をさせることができます。
CI/CDのサービスのCircleCI
CircleCIに関しては、CodeGridでも記事があるので興味がある方は読んでみてください。
CI/CDでビルドが完了したら、どこかにアップロードしますか？ たとえばレンタルサーバーにFTPでアップロードするとします。この設定もまた大変そうです。それに、アップロードする先がVPSなら、Apacheやnginxを設定しないとならないですし、OSのメンテナンスもしなければなりません。もし想定を超えるリクエストが飛んできたらサーバーが落ちることも考えられます。
Amplify Consoleを使えば
……と、長々と書いてきましたが、ここまでに書いてきた内容は、Amplify Consoleを使えば一発解決です。Amplify Consoleなら、以下のステップでこの問題を解決できます。
- AWSアカウント作成
- Amplify Consoleでアプリ作成
- 作成時にGitHubレポジトリと連携させる
- コンフィグをちょっと書いてレポジトリに追加
これだけで、レポジトリにコミットが追加されたら、自動でWebサーバーに更新したソースコードをビルドした結果が反映されます。Apacheの設定も不要ですし、CI/CDもいりません。
「いりません」というより、AWSにはCI/CDのサービスも、ファイルのホスティングも、配信のサービスもそれぞれ独立して存在しています。以下がそれらです。
Amplify Consoleは、これらをまとめ、すべて連携させてくれます。結果、ただレポジトリにコミットするだけですべてが自動で処理され、我々開発者としては即座にWebサイトが更新されるという、オールインワンな仕組みが手に入るのです。突っ込んでAWSを使っていなくとも、これらのサービス名を耳にしたことのある方は多いかと思いますが、Amplify Consoleを使えば、これらサービスを直接触ることなく、「勝手にいい感じ」にすべてを構成してくれるのです。
このあたりの仕組みはNetlifyも似たようなものですが、これがAmplify Consoleというサービスがやってくれることです。一概には言い切れませんが、AWSのサービスであるという安心感も、Amplify Consoleを選択する一つの大きな理由となるのではないでしょうか。我々が普段利用しているWebサイトやWebサービスの中には、AWSを利用して作られているものが多数あるはずです。
Amplify Consoleでできないこと
このように書くとなんでもできそうな感じに聞こえますが、もちろんできないこともあります。ここで、Amplify Consoleだけではできないことをお伝えしておきます。
サーバーサイドでのダイナミックな処理
たとえばPHPとかCGIとかRubyとかで実現するような、画面にアクセスしたとき、サーバー側で何かダイナミックに処理した結果を返すようなこと。これはAmplify Consoleだけではできません。DBの内容を読んだり書いたりなども同様です。ですので、基本的には最終的にWebサーバーにアップロードする内容が静的なファイルだけになる場合が、Amplify Consoleにベストマッチするケースだと言えます。
詳しくは書きませんが、そういうことをしたかったら、そもそも別のサービスを利用するか、自分でサーバーを立てるか、API部分は別にするなどの検討が必要です。AWSにはそういったことをする仕組みもいろいろとありますが、これはAmplify Consoleの外側の話になります。
細かいサーバーの設定はできない
このほか、細かいサーバーの設定もできません。たとえばApacheでしたら、多種多様な設定が可能です。PHPやらCGI等と連携させたり、ディレクトリごとに設定を書けたり、ポートを変えたり、やろうと思えばいくらでも好きなようにいじれるかと思います。しかし、Amplify Consoleの場合、Amplify Consoleが用意してくれた機能しか使えません。
とは言っても、かなりいろいろなことができるので、筆者は致命的に困ったことはまだありません。しかし、たとえば、ディレクトリごとにベーシック認証をかけたかったが、実現できなかったということはありました。
このあたり、フルで設定をいじれるサーバーなわけではないので、基本的にAmplify Consoleが用意してくれた機能を使っていくというスタンスが妥当かと筆者は考えます。ですので、たとえばクライアントワークでAmplify Consoleを使う場合に「あれもこれもできます！」と適当に言ってしまうと、後で後悔する可能性があります。
このように、Amplify Consoleは、一言で表すと「静的サイト公開のためのおまかせ高機能パッケージ」のようなサービスです。おそらく、サーバーサイドで何かしたかったら適切な選択肢ではなさそうですが、そういうわけではない静的サイトの場合は、十分な機能を持っていると筆者は考えます。
この連載の流れ
Amplify Consoleの特徴についてはこれくらいにしましょう。この連載では、
- ステップ1: ビルドが必要なWebサイトを作成
- ステップ2: Amplify Consoleを設定して公開
- ステップ3: Web previews機能で開発の流れを紹介
という流れで進めていく予定です。サイトを作ってAmplify Consoleを使って公開、最後に、Pull Requestごとにプレビュー用のURLを自動で作ってくれる、Web previewsという機能を紹介します。
今回はステップ1の終わりまで解説しましょう（ステップ1はAmplify Consoleと直接的には関係がありませんが）。
ステップ1: ビルドが必要なWebサイトを作成
ではさっそく、ビルドが必要なWebサイトを作ります。とは言っても、何か特別なことをするつもりはありません。ただ、ビルドが必要なプロジェクトを、Amplify Consoleでデプロイさせたいだけですので。
ということで、筆者の好きなGatsbyという静的サイトジェネレータのデフォルトテンプレートを、そのままAmplify Consoleへデプロイすることにしてみます。
Gatsbyについて
少し古いバージョンですが、CodeGridでも記事があるので、ご興味あればご参照ください。
Gatsbyのセットアップ
Gatsbyの初期設定はとても簡単。以下ドキュメント「Gatsby: Quick Start」の手順にあるように、
npm init gatsbyと打てば、何が必要なのか、何のプラグインを入れたいのかなどと聞かれるので、答えていけばセットアップ完了です。GitHubで新しくレポジトリを作り、このセットアップが完了した状態のファイル一式をコミットしました。それが以下です。
このシリーズのリポジトリ
この連載が進むにつれて、このレポジトリには追ってファイルを追加するので、この段階のコミットにgatsby-installedタグを付けておきました。
https://github.com/codegrid/2021-amplify-console/releases/tag/gatsby-installed
動作確認
このGatsbyの動作確認方法を紹介しておきます。Gatsbyは、開発用にnpm run developというコマンドが用意されています。ディレクトリでこのコマンドを打つと、以下のようにビルドが走ってサーバーが立ち上がり、http://localhost:8000/を開くと動作確認が行えます。
$ npm run develop
> [email protected] develop
> gatsby develop
success open and validate gatsby-configs - 0.043s
success load plugins - 0.065s
success onPreInit - 0.021s
success initialize cache - 0.010s
success copy gatsby files - 0.180s
success onPreBootstrap - 0.018s
success createSchemaCustomization - 0.002s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.030s
success building schema - 0.191s
info Total nodes: 18, SitePage nodes: 1 (use --verbose for breakdown)
success createPages - 0.002s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.030s
success update schema - 0.036s
success write out redirect data - 0.001s
success onPostBootstrap - 0.001s
info bootstrap finished - 3.478s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.096s
success write out requires - 0.005s
success run page queries - 0.022s - 3/3 137.49/s
⠀
You can now view codegrid-amplify-example in the browser.
⠀
http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 9.663sブラウザでhttp://localhost:8000/を表示した状態が以下です。
何かしらソースコードを変更するとリロードされ、変更が反映されます。Gatsbyを使った開発は、これでデバッグします。
ビルド
さて、このGatsbyですが、Webサーバーに公開するときには、静的なファイル一式を出してくれないと困ります。これを作るには、以下のビルドコマンドを実行します。
npm run buildすると、publicという名前でディレクトリが作られ、この中にファイル一式が作られます。このpublicディレクトリが、Webサーバーのルートに置きたいファイル一式です*。
*注：Gatsby以外のサーバー
cd publicし、npx http-serverなどと実行すれば、手元で、Gatsby以外のサーバーを立ち上げた状態を再現することができます。
これでAmplify ConsoleのデプロイするWebサイトが完成しました！ ここまででステップ1の「ビルドが必要なWebサイトを作成」は完了とします。
次回はこのGatsbyのサイトをAmplify Consoleを使って公開してみます。