Cloud9とAmplify CLIでWEBバックエンド構築

こんにちは。M.Tです。

今回は、Cloud9とAmplify CLIを使用してWEBアプリのバックエンド構築とデプロイを行ったのでその過程をご紹介いたします。

基本的にはAmplify Docsのチュートリアル(Amplify Framework Docs)に沿って進めてまいりますが、いくつかCloud9で作業するうえで注意しなければならない点がありましたので、あわせてご紹介します。

目次

• 前提
• Cloud9セットアップ
• Amplify CLIのインストール
• プロジェクトのセットアップ
• Amplify CLIによるバックエンドの初期設定とデプロイ
• おわりに、Amplify環境の削除

前提

本作業で使用するものとして以下のものが必要となります。

• AWSアカウント
• EC2、Cloud9、Amplify、IAMの操作権限を持ったIAMユーザー

作業は基本的にCloud9とAWSコンソール上で行います。

また、今回は動作確認および今後のアプリ拡張を考えVueを使用していますが、Reactや素のJavascriptなども使えます。大筋は変わりませんが、それらを使用したいと考えている方はAmplify Framework Docsを参考に適宜読み替えていただくようお願いいたします。

Cloud9セットアップ

まずはAWSコンソールにログインし、Cloud9コンソール画面のcreate environmentからデフォルト設定で作業環境を作成します。

今回の作業でCloud9のストレージが10GiBだと途中でエラーが出てしまうのでまずはストレージの拡張を行います。

EC2のコンソール画面から今作成したCloud9用のインスタンスを選択し、ストレージのボリュームIDをクリックします。

すでに変更後のサイズになってますがもとは10GiBとなっています

表示されたボリュームにチェックを入れ、[アクション]→[ボリュームの変更]をクリックします。

「サイズ」項目を10→30に変更し、[変更]をクリックします。

ボリュームの変更が完了したらインスタンスを再起動します。再起動しないとCloud9上ではサイズ変更が認識されません。

これでCloud9のセットアップは完了です。

Amplify CLIのインストール

Cloud9のセットアップが終わったら早速作業のほうに入っていきましょう。

まずCloud9コンソールからOpen IDEでCloud9作業環境に入ります。(作成時に開かれているかと思いますが念のためいったん閉じて開きなおすことをお勧めします。)

ここからの作業はCloud9のターミナルで行います。

まずははAmplify CLIを以下のコマンドを実行してインストールします。

$ npm install -g @aws-amplify/cli

インストールが完了したらAmplify CLIの設定を行うため以下のコマンドを実行します。

$ amplify configure

Press Enter to continueと表示されたらEnterを押します。するといくつか設定を求められます。

まず任意のregionを選択します。

ここではap-northeast1(東京)とします。

次にユーザーネームを入力します。

ここではamplifyとします。

するとリンクが表示されるのでそれをコピーし、別タブからアクセスします。Cloud9の画面はそのままにしておいてください。

アクセス先はIAMコンソールです。

ここではAmplifyがAWSリソースを作成するため必要な権限を付与したIAMユーザーを作成します。

デフォルトで必要な権限が付与されたポリシー「AdministratorAccess-Amplify」にチェックが入っているのでそのままユーザーを作成します。

作成したIAMユーザーのアクセスキーとシークレットアクセスキーを使うのでメモするか、CSVのダウンロードをしておきます。

IAMの作成が終了したらCloud9の画面に戻ります。

ターミナルでPress Enter to continueと表示されていると思うのでEnterを押します。

アクセスキーとシークレットアクセスキーが求められるので、先ほど作成したIAMユーザーのものを順に貼り付けていきます。

Profile NameはデフォルトのままEnterを押します。

"Successfully set up the new user."と表示されたらAmplify CLIの設定は完了です。

プロジェクトのセットアップ

それではプロジェクトをセットアップしていきます。

前提でもお話ししましたが、今回はVueを使用していきます。Vue以外の使用を考えている方は適宜読み替えていただくようお願いいたします。

まずはVue.jsをインストールします。

$ npm install -g @vue/cli

インストールが終わったらプロジェクトを作成します。

ここではプロジェクト名を"myamplifyproject"としています。

$ vue create myamplifyproject

プリセットを聞かれるので、ここではDefault (Vue 3) ([Vue 3] babel, eslint)を選択します。

プロジェクトが作成されたら、プロジェクトディレクトリに移動します。

$ cd myamplifyproject

プロジェクトディレクトリ内でnpmをインストールします。

$ npm install

サーバーを起動します。

$ npm run serve

ここまででVueプロジェクトの原型ができているのですが、そのままCloud9でプレビューを確認しようとしても"Invalid Host header"と表示されて正しく表示されません。
これはCloud9のプレビュー表示ではホスト名が本来のものと違うため、ホスト名不一致の処理が入ってしまうためです。なのでCloud9でプレビューを確認するために以下のファイルをプロジェクトのルートディレクトリ(今回は myamplifyproject 直下)に作成することで、ホストのチェックを回避します。

vue.config.js

module.exports = {
  devServer: {
    disableHostCheck: true
  }

ファイル作成後Cloud9画面の[Preview]→[Preview Running Application]をクリックします。

以下のような画面が表示されたらCloud9上にVueプロジェクトが正常に作成されています。

Amplify CLIによるバックエンドの初期設定とデプロイ

ここからバックエンドの設定を行っていきます。

サーバーを起動したターミナルとは別に新しいターミナルを開きプロジェクトディレクトリに移動します。

ここからの作業は プロジェクトディレクトリ 内で行います。

$ cd myamplifyproject

ここで注意なのですが、Cloud9のデフォルトのインスタンスだと途中でメモリが足りずエラーが出てしまうので以下のコマンドでメモリを確保します。

$ export NODE_OPTIONS="--max-old-space-size=2048"

それではAmplifyプロジェクトの設定を行います。

まず以下のコマンドを実行します。

$ amplify init

最初にプロジェクト名を聞かれます。ここではデフォルトの"myamplifyproject"で作成します。

すると以下のような設定で作成してもよいか聞かれます。

ここではデフォルト設定のままYで決定します。(nを押すとそれぞれの項目について個別で設定できます)

select the authentication method you want to useと出てきたらAWS profileを選択します。

次のPlease choose the profile you want to useもdefaultのままEnterを押します。

↑のような画面が出てきたらAmplify環境が正常に構築されています。Amplifyコンソール画面を見てみると、

↑画像のようにAmplify環境が作成されていることがわかります。

ここからAmplify addでAPIなどを追加していくことができますが、今回はそのままデプロイしたいと思います。

ターミナルに戻り以下のコマンドでAmplifyのホスティングを有効にします。

$ amplify add hosting

それぞれSelect the plugin module to execute　には　Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)

Choose a type には Manual deployment を選択します。

そして以下のコマンドでデプロイします。

$ amplify publish

↑のような画面が出てきます。Amplify CLIのコマンドでAPIや認証などを追加しているとそれらも項目として表示されます。(今回はホスティングのみ)

Yを押します。

deployment complete!の表示が出てきたらdeploy完了です。

同時に表示されているURLにアクセスしてみます。

↑のような画面が出てきます。作成したWEBページがAmplifyによってホスティングされています。

Amplifyコンソールのほうも見てみます。

↑のような状態となっています。

先ほど表示されたURLがこちらでもDomainの下で表示されています。

おわりに、Amplify環境の削除

以上でAmplifyでのバックエンド構築、デプロイまでが終了しました。今後APIや認証機能などを追加していきたいと思います。

ハンズオンとして作業していた方はAmplifyによって作成されたリソースを削除すると思いますが、その際注意点があります。

Amplifyによって作成されたリソースはAmplifyによって削除するようにしてください。たとえばAPIなどを追加した後コンソール画面上からAPIを削除するとその後Amplify環境そのものを削除する際エラーが出ます。

Amplifyから削除するには

$ amplify delete <削除する項目>

環境そのものを削除したい場合は

$ amplify delete

Amplifyで使用しているリソースと環境そのものが削除されます。