AWS Amplify のことを調べたら思ってた以上に機能モリモリだったのでせめてホスティングだけでも

タイトルの通り。

Azure の App Service を見た流れで、AWS Amplify のことも少し調べてみました。
今まではなんとなく、気軽にホスティングができるサービスだと勘違いしていたんですけど、少し調べるとそもそものモノが違うってことを知って驚いておりまする。。

AWS Amplify

・スケーラブルなWebアプリ、モバイルアプリを簡単に開発するためのライブラリ
・必要な機能の各種ライブラリ、UIコンポーネント、CLIチェーンツール、静的ホスティングを提供する
・OSS

github.com

と書いてしまうとあっさりしていますが、その内容は非常に多くの機能を含んでいます。

なかでも、提供されているライブラリがかなり豊富で、認証機能やGraphQL・RESTAPI とのAPI連携、プッシュ通知、分析などなどがあり、開発者はビジネスロジックに注力することができるというところでしょうか。
以前書いた Azure App Service も同様のサービスを提供していましたし、Firebase にも似たところがあると思います。
ただ、Firebase と比較してみても、Amplifyの方が機能的に幾分かモリモリな印象です。

ホスティングやCI/CD環境には Amplify Console を利用します。
もちろん、ブランチごとのデプロイも可能です。

また、Web開発においてメジャーなフレームワーク（React、Angular、Vue、Ionicなど）に即したSDKも提供されています。
なので、開発するフレームワークに合わせてSDKを選択して、Amplify が提供する機能をすぐに使い始めることが可能...ということです。
もはや、この辺りの環境整備は当たり前になってきた感じもありますが。

と、まとめようとすると結構なボリュームになりそうなので、まずはホスティングの流れだけでも書いていこうと思います。

Amplify Console

先述のように、Amplify を利用したホスティングには Amplify Console を使います。
まずは Amplify CLI のインストールから始めます。

Amplify CLI のインストール

$ npm install -g @aws-amplify/cli
$ amplify -v
4.24.2

Amplify の設定

以下のコマンドで設定を始めます。

$ amplify configure

このタイミングでブラウザが開いてAWSコンソールへログインするよう促されます。
AWSコンソールへログインしたら、ターミナルに戻ってEnterを押して進みます。

リージョンを選択します。
ここでは ap-northeast-1 にしておきます。
f:id:massyuu-d:20200716175024p:plain

次に、Amplifyを扱うIAMユーザーを設定します。
f:id:massyuu-d:20200717112125p:plain

Enterを押すと、ブラウザが開いて新しいIAMユーザーの作成画面が表示されます。
ユーザー名やアクセス権などが規定値で入力(選択)されているので、これらはこのまま作成していきます。
f:id:massyuu-d:20200717112153p:plain
f:id:massyuu-d:20200716175235p:plain f:id:massyuu-d:20200717112214p:plain

IAMユーザーの作成が終わったら、ターミナルに戻ります。
アクセスキー、シークレットキーの入力が必要になるので、先ほど作成したIAMユーザーのキー情報を入力します。
その後、作業する端末に保存されるAWSのプロファイル情報の名前を入力します。
ここでは amplify_sample_pj としています。 f:id:massyuu-d:20200717100826p:plain

ここまでで、Amplifyの設定が終わりました。

ホスティングするプロジェクトの設定

ホスティング用のサンプルプロジェクトを作ります。
今回もVue.jsです。

$ vue --version
@vue/cli 4.2.2

$ vue create vue-sample-app
$ cd vue-sample-app

以下のコマンドでプロジェクトの Amplify の設定を始めます。

$ amplify init

プロジェクトの名前や構成などを入力・選択していきますが、概ね規定値でいいのかなと思います。
途中でエディタやアプリケーションの種類、フレームワークなどを選択することになりますが、これは自分の環境に合わせて選べばよいですね。
最後の方で、プロファイルを使うか否かの選択が出てきますので、先ほど作成したプロファイルを選択します。
f:id:massyuu-d:20200717094800p:plain

しばらく待つと、

Your project has been successfully initialized and connected to the cloud!

の文字が出て設定完了になります。
この時、AWSコンソールから Amplifyコンソールを確認してみると、作成したアプリが作られていることが確認できます。
f:id:massyuu-d:20200717095004p:plain

まだアプリの中身は何もない状態なので、このプロジェクトをホスティングしていきます。

$ amplify add hosting

選択肢を見ると、 CloudFront + S3 でのホスティングもできるようですが、今回は Amplify Console を使います。
また、デプロイの方法を選択できるので、ここでは Continuous deployment を選択します。
f:id:massyuu-d:20200717095243p:plain