こちらの記事はカケハシ Advent Calendar 2022 の16日目の記事になります。

はじめに

こんにちは、おくすり連絡帳 Pocket Musubi というサービスを開発している宮里です。

サービスの運用をしていると、開発当初とはサービスとして重要視すべきことや技術トレンドも変化していき、より適したライブラリやフレームワークへのリプレイスを行うことがある思います。

おくすり連絡帳でも、デザイン大幅刷新のタイミングに合わせて、フロントエンドのフレームワークを Angular から React(Next.js) へのリプレイスをしよう！という話が挙がりました。すべての機能を新しいデザインで作り直すには数ヶ月かかる大規模な改修になる見込みでしたが、

できるだけ早くユーザーに価値を提供したい
ビッグバンリリースを避けて、不具合発生のリスクを下げたい

という理由から、全ページまとめてリプレイスするのではなく、使用頻度の高い機能やページから順次リプレイスを行うことになりました。

具体的には以下の図のように、 Amplify で Angular と Next.js のアプリケーションをそれぞれホスティングし、その前段に追加した CloudFront でリプレイス済みのページのみ Next.js に向き先を変える方法を採りました。

Angular と Next.js を別リポジトリにする選択肢もあったのですが

Amplify はモノレポに対応しているらしいぞ
一部の機能は Angular と Next.js で並行して開発する必要があり、モノレポだと作業が楽
移植作業にあたって、モノレポだと既存ロジックや画像等のリソースの移行が楽

という理由から、 Angular と Next.js をモノレポで管理し、Amplify でホスティングすることにしました。

この記事でやること

GitHub の同一リポジトリにある Angular と Next.js のアプリケーションを、 Amplify Console からホスティングする方法について説明します。（CloudFront のリソース振り分けについても、また別の機会に触れられたらと思います。）

モノレポを Amplify でホスティングする

amplify.yml にビルド設定を記述

事前準備として、リポジトリのルート直下に angular/ と next/ を作成してそれぞれのアプリケーションを配置します。

Amplify ではビルド設定の指定方法として

Amplify Console 上から amplify.yml を記述（アプリケーション単位の設定）
リポジトリのルートに amplify.yml を配置（ブランチ単位の設定）

の2パターンがありますが、今回は後者のパターンで設定します。

それでは amplify.yml の具体的な記述方法をみていきたいと思います。 Angular のみの場合、 amplify.yml は以下のような記述でホスティングしていました。

frontend:
  phases:
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist/angular
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

モノレポの場合は、以下のように applications でネストが一段深くなります。そして appRoot に事前準備でアプリケーションを配置したディレクトリを指定し、それぞれのビルド設定を記述します。

version: 1
applications:
  - appRoot: angular
    frontend:
      phases:
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: dist/angular
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*
  - appRoot: next
    frontend:
      phases:
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: out
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*

Amplify Console から新しいアプリケーションを作成

モノレポ用の amplify.yml を対象ブランチに push したら、あとはコンソールからポチポチしていくだけです！

Amplifyコンソールから新しいアプリケーション>ウェブアプリケーションをホストを選択します。
Amplify Hosting の開始方法: GitHub を選択して続行を選択します。
リポジトリブランチの追加: 紐付けるブランチを選択、 monorepo を接続しますか?にチェック、対象アプリケーションの PATH を聞かれるので angular と入力し、次へを選択します。
構築設定の構成: 次へを選択します。（AMPLIFY_MONOREPO_APP_ROOT には、さきほど指定した PATH が自動的に入ります。）
確認: 保存してデプロイを選択すると、 Angular のアプリケーションがホスティングされます！

PATHを next に変えて、上記の手順をもう一度実行することで Next.js のアプリケーションもホスティングされます！

注意点

GitHub のモノレポで複数アプリケーションを Amplify でホスティングする際は以下に注意する必要があります。

Amplify をホスティングする際、 GitHub リポジトリ側に web hook が作成され、それを用いて変更を検知している
ひとつのリポジトリに対して作成できる web hook の上限数は20件
上限数に達している場合にホスティングしようとすると、 web hook が作成できずエラーになる

たとえば、モノレポで6つのアプリケーションを管理していて、 develop/staging/production の3つの環境にホスティングする場合は、 web hook が6*3=18個必要になります。 Amplify × モノレポを検討する際は、ホスティングする環境数とアプリケーション数から必要な web hook を見積もっておくのをオススメします。