AmplifyのGithub連携を使って簡単にアプリケーションをデプロイする

こんにちは。Spacemarketでエンジニアをしている8zkです。
最近暖かくなり、気づけば4月で桜も見ごろを迎え春を感じますね。

Webアプリケーションを簡単にデプロイしたいなぁ、ということはありませんか？
簡単なデプロイといえば、VercelやFly.io、Cyclicなどを用いた方法もありますが、先日Amplifyを使ったデプロイを触ったのでこちらを備忘録として残しておきたいと思います。

事前準備

アプリケーションを用意する

今回はアプリケーションの中身は主題ではないのでcreate-next-appでさくっとアプリケーションを作ります。

npx create-next-app@latest

Githubでリポジトリ作成、プッシュする

今回はGithubと連携して特定のブランチをホスティングするので、コミット&プッシュします。

デプロイ方法

AWS ConsleからAmplifyを開く

Github連携を行う

ホスティング方法でGithubを選択し、Github認証を行います。

連携するリポジトリを選択します。
全てのリポジトリを選択することもできますが、今回はデプロイしたいリポジトリだけを選択します。

リポジトリとブランチを選択する

ホスティングしたいリポジトリとブランチを選択します。

ビルドの設定

ビルドの設定を行います。
特に変更しなくてもビルドできるので、今回は触りません。

デプロイ

「保存してデプロイ」を押すとデプロイを開始します。

数分でデプロイが完了します。
赤枠のurlをクリックするとホスティングされたurlに遷移します。

うまく表示されているようです。

ブランチを変えてデプロイ

同じブランチでデプロイする限りはurlは変わりません。
ブランチを変えてデプロイするとurlが変わっているのがわかります。urlの最初にブランチ名がついています。
mainブランチ → main.hoge~
feature/fix-textブランチ → feature-fix-text.hoge~

また、ドメインを変更したい場合はドメイン管理 → 「ドメインを追加」から変更できます。

ドメイン取得に料金がかかるため今回は割愛しますが、こちらも設定は画面上で操作するだけなのでお好きなものに変更するのもよさそうです。

まとめ

びっくりするほど簡単に、そして高速にデプロイできました。
AWS CLIを使った方法も試しましたが、今回はGithub連携を行うことで画面上の操作だけで完結できて特別なことは何もしていません。
また、冒頭でも触れたようにデプロイ方法は他にもたくさんあるので色々触ってみて自分に合ったものをみつけるのも楽しそうに思いました。