purepom media lab

Amplify ビルドイメージを作成してビルドの最適化を行う

Cover Image for Amplify ビルドイメージを作成してビルドの最適化を行う
coa00
coa00

Amplify のビルドイメージを作成することによりって、ビルド速度を改善することができます。

標準ビルドイメージは汎用的につくられているため最適化できる箇所が多く存在します。

準備

ビルドイメージは 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" Typescriptなど必要なglobalModule は Amplify cli の後に追加します。ビルド毎に取得する必要がなくなるため、高速になります。

ステップ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権限をつけないとアップロードできない。

  • Public のみ対応


More Stories

Cover Image for Purepom Media Lab(ピュアポムメディアラボ)のブログをはじめました。

Purepom Media Lab(ピュアポムメディアラボ)のブログをはじめました。

フロントエンド、Amplify、AWSまわりの技術や事例をかいていきます。

coa00
coa00