4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

Organization

既存の 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

  1. 上記の App1 について、既にAmplify Appが存在するものとする
  2. 2.のAmplify Appbuild settingsApp 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 AppApp 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に設定された値が上書きされるものとばかり思っていました。
モノレポではない場合それは正しいですが、モノレポの場合は上に示したように両者を適切に設定しないと思うように動作しません。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?