dockerにてイメージビルド時にyarn installが行われない問題

Question

以下のdockerfileでイメージをビルドした後、コンテナを起動すると後述のエラーが出ます。
どうやらイメージビルド時にyarn installがうまく行われていないようで

docker run イメージ sh

を実行してコンテナの中でyarn installをすれば、うまくパッケージをインストール出来ます。

なぜイメージビルド時にyarn installがうまく動作しないのでしょうか。

ちなみにnode_modulesは.gitignoreに記述しているためディレクトリには含まれていません(含まれていない状況で起動したい)。

ご回答よろしくお願い致します。

error

front_1  | yarn run v1.22.4
front_1  | $ nuxt
front_1  | /bin/sh: 1: nuxt: not found
front_1  | error Command failed with exit code 127.
front_1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

docker-compose

version: "3"
services:
  db:
    image: mariadb:10.5.1
    ports:
      - "3306"
    environment:
      MYSQL_ROOT_PASSWORD: 'pass'
    volumes:
      - mariadb-data:/var/lib/mysql
  back:
    build:
      context: back
    environment:
      RAILS_ENV: development
      DATABASE_URL: mysql2://root:pass@db:3306
      MYSQL_ROOT_PASSWORD: 'pass'
    volumes:
      - ./back:/usr/src/app
    ports:
      - "3001:3001"
    depends_on:
      - db
  front:
    build:
      context: front
    volumes:
      - ./front:/usr/src/app
    ports:
      - "3000:3000"

volumes:
  mariadb-data:

dockerfile

FROM node:13.12-buster

ENV LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    APP=/usr/src/app

ENV HOST 0.0.0.0

WORKDIR $APP

COPY package.json $APP
COPY yarn.lock $APP
RUN yarn

COPY . $APP

CMD ["yarn", "run", "dev"]

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "My best Nuxt.js project",
  "author": "msickpaler",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "nuxt": "^2.0.0",
    "@nuxtjs/axios": "^5.3.6"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^2.0.0",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^1.19.1"
  }
}

.gitignore

node_modules

Answer 1

回答ありがとうございました。こちらは以下の方法で解決しました。

docker-compose.yml

 front:
    build:
      context: front
    volumes:
      - ./front:/usr/src/app
      - node-modules:/usr/src/app/node_modules #こちらを追加
    ports:
      - "3000:3000"

Answer 2

yarnを実行したあとのCOPYで、インストールしたディレクトリごと上書きされてるようにみえます。

最初にcopyしてから、yarnを実行するとどうでしょうか。