こんにちは、技術1課の加藤です。
Amplify 使ってますか？
とっても便利な Amplify ですが、ついに Amplify Console と Amplify CLI の紐付けがされたみたいです。
早速ご紹介していきます！
AWS Amplify とは？
雑に書くと、AWS が提供する OSS の開発プラットフォームです。
モバイルアプリケーションおよびWebアプリケーションを構築するために必要なツール群を総称したもので、具体的には、
- iOS, Android, Webアプリと統合するためのライブラリ
- UIコンポーネント
- コマンドラインインターフェース ( Amplify CLI )
を提供しています。
Amplify Console とは？
一方 AWS Amplify Console というのは、サーバーレスウェブアプリケーションのデプロイ・ホストをするための AWS サービスのひとつです。
Git のブランチを指定し、環境名などを設定するだけで、簡単に継続的デプロイ環境を構築、ホスティングまで行ってくれます。
Basic認証の機能やリダイレクト設定、デプロイ時のメール通知などの機能も標準で搭載されているため、静的サイトのホスティングに非常に便利です。
Amplify Console に CLI のインターフェースが追加された #とは
前述の通り、 AWS Amplify には CLIツールがあります。
数回のコマンドを叩くだけで簡単にAPIや認証機構を作成できる超絶便利なものですが、元々 Amplify Console とは統合されていませんでした。
つまり今までは Amplify CLI を用いてAPIや認証機構を実装し、
別途 Amplify Console を使って継続的デプロイの構築やフロントエンドのホスティングを行う必要があったわけです。
今回のアップデートでは、CLIの amplify add hosting コマンドに、新しく Hosting with Amplify Console という選択肢が増えます。
これにより、あらゆる設定を CLI を通して行うことができるようになった、というわけです。
使い方
簡単なハンズオンを用意したのでぜひ触ってみてください。
なお試す際には以下のコマンドで Amplify の最新版をインストールしておいてください。
$ npm install -g @aws-amplify/cli
(※ ぼくの環境では、yarnを利用してglobalインストールするとうまく動きませんでした。まだ細かな検証はできていないのですが、同様のnpm でインストールする方が確実かもしれません。)
またフロントエンドにVue.jsを用いますので、Vue CLIをインストールしておいていただけるとスムーズです。
$ npm install -g @vue/cli or $ yarn global add @vue/cli
1. Vueプロジェクトを作成する
今回は sabatest という名前で環境を作成してみます。
途中で設定を聞かれますが、defaultのまま Enter を押してください。
$ vue create sabatest Vue CLI v4.2.3 ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) // Enter Manually select features $ cd sabatest
2. Amplify の設定を行う
初めて Amplify CLI を利用する場合、 Amplify で使用する IAM ユーザーの作成などを以下のコマンドで行います。
$ amplify configure
指示に従い、設定を完了してください。
3. Amplify プロジェクトを初期化
Amplify プロジェクトを作成します
基本的にはデフォルト設定で Enter を押し続ければ OK です。
途中、環境名 (a name for the environment)を聞かれる箇所がありますので、そちらだけ任意の値を入力しておいてください (今回はdevで進めます)
$ amplify init ? Enter a name for the project sabatest ? Enter a name for the environment dev ? Choose your default editor: Vim (via Terminal, Mac OS only) ? Choose the type of app that you're building javascript Please tell us about your project ? What javascript framework are you using vue ? Source Directory Path: src ? Distribution Directory Path: dist ? Build Command: npm run-script build ? Start Command: npm run-script serve Using default provider awscloudformation For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html ? Do you want to use an AWS profile? Yes ? Please choose the profile you want to use default
4. Amplify Console を用いたホスティング設定を追加
ここからアプリケーションをホスティングする設定を CLI から追加してみます。
今回追加された Amplify Console を用いたデプロイには、2つの種類があります。
- Continuous deployment (Git-based deployments)
- Manual deployment
1は Git ベースの継続的デプロイ環境を作成する選択肢です。つまり変更が指定したブランチに Push されると自動的にデプロイが走るようになる、ということです。
一方2は手動デプロイとなりますので、CLIから明示的にコマンドを打つことによってデプロイを行います。Gitリポジトリにコードをあげていない場合や継続的デプロイまではいらないかな、というときはこちらを選択してあげてください。
今回はお試しですので、ひとまず手動デプロイを試してみましょう。
amplify add hosting コマンドでホスティング設定を追加します。
$ amplify add hosting ? Select the plugin module to execute Hosting with Amplify Console (Managed host ing with custom domains, Continuous deployment) ? Choose a type Manual deployment You can now publish your app using the following command: Command: amplify publish
設定ができたら、以下のコマンドでデプロイしましょう。
途中本当に続けるの？ と聞かれるので優しく Enter を押してあげてください。
$ amplify publish ... (中略)... ✔ Zipping artifacts completed. ✔ Deployment complete! https://dev.xxxxxxxxxx.amplifyapp.com
これでホスティングが完了します。
最終行に表示された URL にアクセスしてみましょう。Vue の初期ページが表示されていれば成功です。
簡単ですね。
おまけ
ちなみに手動デプロイではなく継続的デプロイを選択すると、実は Amplify Console のコンソール画面がブラウザで開かれます。
Gitリポジトリサービスの認証作業などが必要になるので、そこは CLI に閉じられなかった様子。ちょこっとおしいですねー。
IAM ユーザー作成もコンソール使って行いますし CLI に全部完結、とはなかなかいかなそうですね。
さいごに
Amplify CLI から簡単に Amplify Console を利用できるようになりました。
これにより CLI ツールを使って、バックエンドの設定からホスティングまでまるっと行うことができるようになりました。進化が止まりませんね。
今回のブログの内容は、3/11にYouTubeにて配信した AWS UPDATE でも紹介しております！
リンクを貼っておきますので、ぜひご覧ください！
