既存の Amplify App をモノレポに対応させる

この記事はAWS Amplify Advent Calendar 2020 4 日目の記事となります。

はじめに

今年はじめより、Amplify Console がモノレポに対応しました。
モノレポ対応について公式のドキュメントはありませんが、こちらのブログ記事に作成方法について記述があります。

ただ、このブログ記事には、既存のAmplify Appをモノレポ化する方法について触れられていません。
(この記事では、Amplify Console 上で作成したアプリのことを、Amplify Appと呼ぶことにします)
(アプリを作り直せばいい話かもしれませんが、Ci/CD の関係上別アプリを作成するのは高コストでした)

また、こちらのbuild-settingsで一部モノレポについて触れられてはいますが、内容が不十分だったり、間違っていたりしています。
(2020/12/04 時点。修正依頼は出したので、そのうち直るかもしれません)

今回そのあたりを設定する機会があったので、備忘を兼ねて残しておきます。

前提

1. 以下のようなリポジトリがあるものとする

   repo
   ├── app1
   └── app2
   
   

2. 上記の App1 について、既にAmplify Appが存在するものとする

3. 2.のAmplify Appのbuild settingsのApp build specificationが以下のようになっている

   version: 1
   frontend:
     phases:
       preBuild:
         commands:
           - cd app1
           - npm ci
       build:
         commands:
           - npm run build
     artifacts:
       baseDirectory: app1/build
       files:
         - "**/*"
     cache:
       paths: []
   

対応方法

※amplify.yml を使用しているか否か、で対応が少し変わります。

amplify.yml を使用していない場合

• applicationsでモノレポであることを明記
• appRootでビルドするディレクトリを指定

具体的には、App build specificationが以下のようになります。

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

amplify.yml を使用している場合

amplify.yml はルートディレクトリに設置する必要があります。
そのため、app1 と app2、2 つのプロジェクトのビルド手順を amplify.yml に記入する必要があります。

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

次に、各Amplify AppのApp build specificationに以下を設定します。
これにより、それぞれのAmplify Appが app1, app2、どちらに対応しているか AWS が判断することができます。

version: 0.1
applications:
  - appRoot: app1

version: 0.1
applications:
  - appRoot: app2

注意点

スラッシュは必要ない

こちらのドキュメントにはappRoot: /react-appのようにディレクトリ名の先頭にスラッシュをつけています。

同じようにスラッシュをつけて実装しても満足に動作しなかったので AWS に問い合わせたところ、スラッシュをつけると正しく認識されない、とのことです。
よって、appRootに指定するディレクトリの先頭にはスラッシュをつけないのが正しいです。
(ドキュメントもそのうち修正されるとのこと)

App build specification が常にamplify.ymlで上書きされるわけではない

今まで、amplify.yml が存在する場合はApp build specificationに設定された値が上書きされるものとばかり思っていました。
モノレポではない場合それは正しいですが、モノレポの場合は上に示したように両者を適切に設定しないと思うように動作しません。