長くつかっているとAmplify のビルド時間が気になってきます。
アジャイルをまわしているとビルド速度の改善が生産性にかかわってくるため戦ってきました。
そこで得た TIPS を二つご紹介します！
差分ビルドの適用
Amplify は環境変数を設定することによって差分ビルドを行うことができます。
- フロントエンドのビルドがない時はフロントエンドフェーズのビルドをスキップ
AMPLIFY_DIFF_DEPLOY.
- バックエンドのビルドがない時はバックエンドフェーズのビルドをスキップ
AMPLIFY_DIFF_BACKEND
ホスティングしている環境ごとに設定可能です！
いくつかの問題点
-
最新版は確認できてないのですが差分ビルドを全体に適用していると新規環境作成時にフロントエンドのビルドが行われない問題がありました。 preview などで新規作成する場合、front deploy がスキップされてしまいます。issue にて報告ですが、対処されたかは不明です。
-
backend の差分ビルドをしていると amplify update auth などの適用が反映されないケースがある。こういった場合は、直接pushしてます。
カスタムビルドの作成
差分ビルドを行うようになるとプロビジョニングの時間が気になります。
標準ビルドイメージは汎用的につくられているため最適化できる箇所が多く存在します。
特に amplify などのバージョンはビルド毎にconsoleで指定したバージョンのインストールを都度行っています。
準備
ビルドイメージは Docker でビルドします。
Docker をインストールする必要があります。
ステップ1
標準ビルドイメージのリポジトリをフォークします。
https://github.com/aws-amplify/amplify-console
フォークしたリポジトリを git clone します。
ステップ2
まずはビルドしてましょう
$ cd images
$ docker build -t ${accountname}/buildimage:latest -f latest/Dockerfile
こちらでビルドに成功すると完了です。
accountname は Docker Hub のアカウント名です。
ステップ3
下記を編集します。
https://github.com/aws-amplify/amplify-console/blob/master/images/latest/Dockerfile
まず nvm でインストールされる node の数を減らしましょう
# Framework Versions
ENV VERSION_NODE_8=8.12.0
ENV VERSION_NODE_10=10.16.0
ENV VERSION_NODE_12=12
ENV VERSION_NODE_DEFAULT=$VERSION_NODE_10
中略
RUN /bin/bash -c ". ~/.nvm/nvm.sh && \
nvm install $VERSION_NODE_8 && nvm use $VERSION_NODE_8 && \
nvm install $VERSION_NODE_10 && nvm use $VERSION_NODE_10 && \
npm install -g sm grunt-cli bower vuepress gatsby-cli && \
bash /usr/local/bin/yarn-install.sh --version $VERSION_YARN && \
nvm install $VERSION_NODE_12 && nvm use $VERSION_NODE_12 && \
npm install -g sm grunt-cli bower vuepress gatsby-cli && \
bash /usr/local/bin/yarn-install.sh --version $VERSION_YARN && \
nvm alias default node && nvm cache clear"
デフォルト必要ではないバージョンの指定を削除します。デフォルトを設定し、不要なインストールを減らすことで最適化されます。
ENV VERSION_AMPLIFY=1.12.0
つづいてAmplify のバージョンを固定します。こちらのバージョンを console web の設定と同一にすると、ビルドの前処理でAmplify のインストールがなくなります。
## Install Ruby 2.4.x and 2.6.x
RUN gpg --keyserver hkp://pool.sks-keyservers.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB && \
curl -sL https://get.rvm.io | bash -s -- --with-gems="bundler"
ENV PATH /usr/local/rvm/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
RUN /bin/bash --login -c "\
rvm install $VERSION_RUBY_2_4 && rvm use $VERSION_RUBY_2_4 && gem install bundler -v $VERSION_BUNDLER && gem install jekyll && \
rvm install $VERSION_RUBY_2_6 && rvm use $VERSION_RUBY_2_6 && gem install bundler -v $VERSION_BUNDLER && gem install jekyll && \
rvm cleanup all"
Ruby Pyhton, Hugo がインストールされていますが不要な場合は削除しましょう。
## Install AWS Amplify CLI for VERSION_NODE_DEFAULT and VERSION_NODE_10RUN /bin/bash -c ". ~/.nvm/nvm.sh && nvm use ${VERSION_NODE_DEFAULT} && \ npm config set user 0 && npm config set unsafe-perm true && \ npm install -g @aws-amplify/cli@${VERSION_AMPLIFY} && \ npm install -g typescript && \ npm install -g expo-cli"
Ruby, Go, Python など不要なランタイムのインストールを削除
node 以外は削除しても問題ありません。
npm global module
Typescriptなど必要なglobalModule は Amplify cli の後に追加します。ビルド毎に取得する必要がなくなるため、高速になります。
global module のキャッシュ化が難しいため、事前にインストールするようにしていました。
（キャッシュする方法ご存知のかたいらっしゃたら教えてください。）
ステップ4 Docker Hub に公開
Push to Hub を選択するとリモートリポジトリーに公開されます。
${accountName}/amplify-buildimage:latest
こちらを Amplify console のビルド設定に設定します。
この時、Amplify CLI や yarn のバージョンをビルドイメージに設定した値と同じ値してください。異なると、Amplify CLI のビルドが開始されます。
Amazon ECR
Docker Hub はとても便利なのですが、フリー版は制限が厳しいので、Amazon ECR を使うことをおすすめします。
タグづけ、プッシュ手順は Web Console にガイドがあり、そのまま実施するとpushできます。
注意する点は下記の通りです。
注意点としては、IAM権限をつけないとアップロードできない。
Amplify Consoleからの参照は、Public のみ対応しているという点です。
以上です！！
私がCTOとして参画している O:株式会社はsaasの開発から公開までをすべて Amplify で行っています。
新しい技術に興味があるエンジニアを募集しています！
お気軽に応募ください。
O: メンバーが書いたAmplify 記事です。よければこちらもどうぞ。
Amplify で Slack アプリつくってみた
https://qiita.com/HayatoW/items/e2ed24dcf54f352616ad
Amplifyを使って招待機能を実装してみた
https://qiita.com/Kaiki-kk/items/32fd1e94186015c4105f