Help us understand the problem. What is going on with this article?

Amplify Consoleのnode、yarnをバージョンアップする(Quasarアプリをビルドする)

Amplifyは、高速でアプリを開発できる開発プラットフォームです。(AWS版のFireBase
AmplifyQuasar(マルチプラットフォームアプリを高速で作れるVue.jsベースのフレームワーク)で作成したアプリをデプロイ(Amplify Console利用)して少しハマったので解決方法を記載します。

問題

デフォルト設定のままだと、nodeyarnのバージョンが古くエラーが発生します。

                                 # Starting phase: build
2020-06-20T16:01:17.980Z [INFO]: # Executing command: yarn
2020-06-20T16:01:18.130Z [INFO]: yarn install v1.16.0
2020-06-20T16:01:18.202Z [INFO]: [1/5] Validating package.json...
2020-06-20T16:01:18.204Z [WARNING]: error sample@0.0.1: The engine "node" is incompatible with this module. Expected version ">= 10.18.1". Got "10.16.0"
2020-06-20T16:01:18.205Z [WARNING]: error sample@0.0.1: The engine "yarn" is incompatible with this module. Expected version ">= 1.21.1". Got "1.16.0"

対応案

解決方法を急いでいる方はこちら

  1. Build Imageを変更する
  2. ビルドコマンドamplify.ymlで対応する
  3. 環境変数で対応する

Build Imageを変更する

AWS Amplify - 対象のアプリ - ビルドの設定 - Build image settings

Amplify Consoleでカスタムイメージを利用する
https://docs.aws.amazon.com/amplify/latest/userguide/custom-build-image.html

1-1. Amplify トップへ移動

スクリーンショット 2020-06-21 13.56.14.png

1-2. 対象のアプリ選択

1-3. ビルドの設定を選択

スクリーンショット 2020-06-21 13.58.47.png

1-4. ビルドイメージ変更

スクリーンショット 2020-06-21 13.59.06.png

この方法の考察

この方法でも、nodeyarnのアップデートは可能ですが、aws clinodeが入ったイメージを探し、色々準備する必要があるため(※以下発生したエラー)、かなり面倒です。なので、2のamplify.ymlで対応する方法に切り替えました。

2020-06-21T02:03:23.452Z [INFO]: aws codecommit credential-helper $@ get: 1: aws codecommit credential-helper $@ get: aws: not found
2020-06-21T02:03:23.453Z [INFO]: fatal: could not read Username for 'https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/amplify-sample-xxxxx': No such device or address

ビルドコマンドamplify.ymlで対応する

amplify.ymlで対応

preBuildフェーズで、nodeyarnの安定版を再取得します。

amplify.yml
    preBuild:
      commands:
        - nvm use stable #安定版を利用
        - curl -o- -L https://yarnpkg.com/install.sh | bash #安定版を再インストール
  • amplify.yml全量(Quasar pwaビルド)
amplify.yml
version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - nvm use stable #安定版を利用
        - curl -o- -L https://yarnpkg.com/install.sh | bash #安定版を再インストール
        - yarn global add @quasar/cli
    build:
      commands:
        - yarn
        - yarn build
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: /dist/pwa #distフォルダ指定
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

nodestableを利用

Provisionフェーズを確認すると、nvmを利用していることがわかるため、nvmコマンドで安定版を利用するようにします。

nvm use stable #安定版を利用
  • Provisionフェーズログ
78  RUN curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

yarnstableを利用

Provisionフェーズを確認すると、環境変数で指定したバージョンをインストールしているので、バージョン指定なしで最新の安定版をインストールします。

curl -o- -L https://yarnpkg.com/install.sh | bash #安定版を再インストール

yarnのインストール(Linuxディストリビューション)
https://classic.yarnpkg.com/ja/docs/install/#alternatives-stable

  • Provisionフェーズログ
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 $VERSI_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"

環境変数で対応する

Provisionフェーズのログからも環境変数を指定することでも課題が解決できそうでしたが、常に最新の安定版を利用してビルドしたかったため、この方法は見送りました。

  • Provisionフェーズログ
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 $VERSI_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"
bigtreetc
お客様のデジタルトランスフォーメーションの実現をミッションとして、DXに欠かせない「クラウド」「AI」「デジタルマーケティング」「RPA」をコアテクノロジーとして位置付け、各テクノロジーのプロフェッショナルチームにより専門的なサービスを提供しています。
https://www.bigtreetc.com/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした