AWS Amplifyを使ってNext.jsをデプロイする（Basic認証、Monorepoもあり）

AWS Amplifyとは

手軽にWeb,モバイルアプリケーションをデプロイすることができるAWSサービスの一つです。
Amplifyを活用することでインフラ周りはすべてAWSにおまかせして開発者はフロントエンドの開発に集中することができるため高速で開発→リリースすることができます。
またCI/CD環境の導入も自動的に導入でき、GitHubと連携すれば指定のブランチにプッシュされると自動でデプロイすることができます。

事前準備

今回はGitHubのリモートリポジトリからアプリをデプロイしていきたいので、事前にリモートリポジトリを作成して、アプリのコードを先程作成したリモートリポジトリへ上げておきましょう。

デプロイ編

Amplifyのマネジメントコンソールにアクセスする

AWSマネジメントコンソールから「Amplify」を検索してコンソールにアクセスします。
まだ一度もアプリケーションを作成していなければ画像のような画面となっていますので
「Get started」→「Amplify Hosting」から始めていきましょう。

Amplifyホスティングの開始方法

デプロイするアプリケーションのコードがあるリポジトリと接続していきます。
今回はGitHubを使用するのでGitHubを選択して「続行」をクリックします。

認証を求められるのでアカウントがリポジトリが存在しているアカウントであることを確認してGitHubとAWSを連携します。
その後マネジメントコンソールにリダイレクトされます。

リポジトリブランチの追加

GitHubとの連携に成功すると以下の画面が表示されます。
デプロイするリポジトリ・ブランチを選択して「次へ」をクリックして進みます。

※もしリポジトリ・ブランチがない場合にはGitHubのアクセス許可を表示を押してリポジトリを選択することで権限を追加することができます。

ビルドの設定

アプリケーションの名前や、ビルド時の設定などを定義していきます。
「アプリケーションの名前」にはアプリケーションの名前を入力します。

「構築とテストの設定」では環境変数の設定や、ビルド時のコマンド、キャッシュの設定をすることができます。
「構築とテストの設定」の内容はフロントエンドフレームワークとpackage.jsonの内容から自動的に設定されます。
またEditから内容を編集することもできたりDownloadからdeploy.ymlをダウンロードすることもできます。
入力形式はYAMLです。
「構築とテストの設定」の内容に問題がなければ「次へ」をクリックしてデプロイ内容の確認画面へ進みます。

amplify.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

【項目の解説】
frontend - フロントエンドのビルドコマンドを実行する。
test - テストフェーズのコマンドを実行する。（今回のamplify.ymlには入っていません）
preBuild - ビルドが始まる前や、パッケージの依存関係をインストールしたあとに実行したいコマンドを書きます。
build - ビルドコマンドを書きます。
postBuild - ビルドが終了した後に実行したいコマンドを書きます。
artifacts->baseDirectory - ビルド後のファイルが存在するディレクトリを指定します。今回はNext.jsを使用しているので　.nextになります。
artifacts->files - aritifactsにあるデプロイしたいファイルを指定します。**/*であればすべてのファイルという意味になります。
cache - キャッシュさせたいディレクトリを指定します。初期ではフレームワークからキャッシュさせるディレクトリが自動的に判断されます。

それ以外については下記リンクの公式ドキュメントをご参考ください。

※日本語版のドキュメントの訳がめちゃくちゃなので英語版を読むのをおすすめします・・・

※　リポジトリのプロジェクトルートにdeploy.ymlを上げておくビルド時の設定を定義することもできますが、現時点で(2023年1月2日)Please acknowledgeという警告が表示されるも、確認するためのボタンがないため次に進むことができないというissueが立っていて未解決です。
amplify.ymlはアプリをデプロイ後にリポジトリに上げるのが良さそうです。

確認

デプロイされる内容の確認画面です。
問題なければ「保存してデプロイ」をクリックしてデプロイを開始しましょう。

デプロイ

「保存してデプロイ」をクリックするとすぐにデプロイが開始されます。

デプロイしているブランチ名（今回であればmain）をクリックすればコマンドの実行状況を確認することができます。
もしデプロイに失敗した場合にはここにエラーメッセージが表示されるので参考にすることができます。
ドメイン名をクリックすればデプロイしたアプリを表示することができます。
これでデプロイは完了です！

デプロイしたアプリにBasci認証をかける

Amplifyを活用すると簡単にBasic認証をかけることができます。
まずAmplifyの左ペインからアクセスコントロールを選択します。

「アクセス設定」がパブリックに表示可能となっているとBasic認証がかかっていない状態です。
右上の「アクセスの管理」からユーザー名、パスワードを設定していきます。

「アクセス設定」を「制限-パスワードが必要です」を選択するとユーザーネームとパスワードのフォームが活性化されるので設定したいユーザー名、パスワードを入力して「SAVE」をクリックすれば設定が完了です！

再びアプリのドメインにアクセスしてみるとユーザー名とパスワードが求められるようになりました。
以上で完了となります。簡単ですね！

参考リンク

モノレポアプリをデプロイする場合のamplify.ymlの書き方

今回自分がAmplifyにデプロイするアプリのディレクトリの構成は以下のようなMonorepoでした。

project
 ├ api
 └ front

/apiがFastAPIを使用したAPIサーバのディレクトリ、/frontがフロントエンドのディレクトリになります。
この場合、先程書いたようにはデプロイすることができずamplify.ymlを少し編集する必要があり、そこで少しつまりました。
結果以下のようなamplify.ymlでデプロイすることができました。

amplify.yml

version: 1
applications:
  - appRoot: front
    frontend:
      phases:
        preBuild:
          commands:
            - npm ci
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: build
        files:
          - '**/*'
      cache:
        paths: []

appRootでフロントのディレクトリを指定することでprebuildやbuildのコマンドがフロントのコードが有る/frontディレクトリ内で実行することができます。

最後に

インフラのことをあまり考えずに爆速でデプロイすることができるのがAmplifyの素晴らしいところだと感じました。
今後はFastAPIとの連携もやっていくのでまたそれについても記事にしていきたいと思います。