「AWS Amplify Console」を使ってみた 〜カスタムドメイン編〜 #reinvent

はじめに

本日、re:Invent2018にてAWS Amplify Consoleが発表されました。

早速AWS Amplify Consoleを使ってAngularプロジェクトのデプロイとカスタムドメインの設定までをやってみたいと思います。

AWS Amplify Consoleとは？

速報記事は以下になります！
サービスの概要についてはこちらをご覧ください。

新サービス「AWS Amplify Console」登場！簡単3ステップでWebアプリのCI/CD環境を構築！ #reinvent

リージョン

現在選べるリージョンは以下になります。

• 米国東部 (バージニア北部)
• 米国東部 (オハイオ)
• 米国西部 (オレゴン)
• アジアパシフィック (シドニー)
• EU (アイルランド)

やってみる

アプリの準備（CodeCommit）

# angularプロジェクト作成
ng new amplify-app
cd amplify-app
npm install --save aws-amplify

CodeCommitにデプロイ対象のAngularプロジェクトを作成しておきます。

ここで注意点です。
リポジトリとAmplify Consoleプロジェクトは同じリージョンに作成する必要があります。

デプロイ

AWSコンソールからamplifyと検索すると以下のように「AWS　Amplify」が選択できるようになっています。

リージョンを選択します。

リージョンを選択すると、Amplify　Consoleの開始画面になります。

「Deploy」の GET STARTED をクリックしましょう。

ステップ 1　リポジトリサービスの追加

「CodeCommit」を選択して次へ

ステップ ２　リポジトリブランチの追加

デプロイ対象のリポジトリとブランチをドロップダウンで選択して次へ

ステップ 3　ビルド設定の構成

ソースを選択するとフレームワークが自動検出されました。環境変数も設定できるようです。

ステップ ４　確認

各設定項目を確認して 保存してデプロイ をクリック

デプロイが完了しました。

アプリの確認

作成が完了するとURLが付与されてブラウザからアプリが確認できるようになります。

Angularのスタート画面が表示されたことを確認できます。

ドメインの設定

Route53に登録済みのドメインであれば選択できます。

ステータスが AVAILABLE になれば完了です。 今まではCloudfrontの設定、Route53のレコード追加というステップが必要でしたが、AWS Amplify Consoleで完結しました。

まとめ

サーバーレス開発部ではAmplifyとAngularを組み合わせた開発をよく行っていますが、これまではCI/CD環境が乱雑化してしまうことが多々ありました。
Amplify Consoleができたことによってコード管理はCodeCommitだからCodePipeline作ってCodeBuildでs3 syncしてcloudfrontのキャッシュ無効化して、、あっちのプロジェクトはgithubだからCircleCI設定して、、なんてことをしなくて良くなるかもしれません。

今後の機能拡張も追っていきたいと思います！