AWS Amplify Console で Elm のアプリをデプロイしてみる #reinvent
こんにちは、かたいなかです。
新サービス AWS Amplify Console がリリースされ、フロントエンドのCI/CD環境が簡単に構築できるようになりました。
新サービス「AWS Amplify Console」登場！簡単3ステップでWebアプリのCI/CD環境を構築！ #reinvent
最近友人に「いいからElmだ！！！」と、アツい布教を受けたばかりなので早速Elmのアプリで試してみます。
今回のコード
今回は、Elmの公式サイトでも紹介されている Flatrisのリポジトリのコードを、少し修正したものをデプロイしていきます。
主にElmをnpmでローカルでインストールするように修正しました。これは、AWS Amplify Consoleではビルド環境をカスタマイズすることができないためです。
早速やってみる
Amplify Consoleに最初にアクセスしたときに表示される画面の中ほどの、Deployの方のGetting Startedボタンから自動デプロイおよびホスティング環境を作成していきます。
リポジトリサービスプロバイダーを選択する画面が表示されます。
今回はGitHub上のリポジトリを自動デプロイさせたいため、GitHubを選択します。
次へをクリックするとリポジトリとブランチを選択する画面が表示されます。
こちらで、今回の対象となるリポジトリのmasterブランチを指定します。
次へをクリックするとビルド設定の画面が表示されます。
今回のElmのサンプルアプリケーションのリポジトリはnpm installで依存ライブラリのインストール、npm run buildで./distディレクトリに静的ファイルを出力するようになっているため、ビルド設定を画像のように修正しました。
次へをクリックすると確認画面が表示されます。
保存してデプロイをクリックすると自動デプロイが開始されます。
自動デプロイが正常に終了し他状態で、画像内のリンクをクリックすると今回でプロイしたアプリケーションが表示されました。
まとめ
Elmのアプリであるため、どんなハックが必要になるだろうと意気込んで挑んだのですが、拍子抜けするぐらい何も特別なことは必要にならず簡単にデプロイできてしまいました。
ビルドまでがnpmで取得できる依存ライブラリで完結できるものであれば何でもいけそうなので、フロントエンドのデプロイでは本当に汎用性高く使えそうです。
