docker-compose buildでエラーが出る

Question

前提・実現したいこと

nuxt.jsの環境構築をしていたのですが、docker-compose buildでエラーが発生しています。

発生している問題・エラーメッセージ

Building backend
Step 1/9 : FROM ruby:2.6.6
 ---> c694ec1d9cce
Step 2/9 : ENV LANG C.UTF-8
 ---> Using cache
 ---> 26aeba1cad35
Step 3/9 : ENV TZ Asia/Tokyo
 ---> Using cache
 ---> 357bfc15dee5
Step 4/9 : RUN mkdir /app
 ---> Using cache
 ---> 45478251d6e2
Step 5/9 : WORKDIR /app
 ---> Using cache
 ---> a4f857cc7457
Step 6/9 : ADD Gemfile /app/Gemfile
 ---> Using cache
 ---> dfb40f1ecad4
Step 7/9 : RUN apt-get update -qq &&   apt-get install -y build-essential   libpq-dev   sudo   nginx &&   gem install bundler:2.0.1
 ---> Using cache
 ---> e69afd5bb39f
Step 8/9 : RUN bundle install
 ---> Using cache
 ---> 83fd3ca8c731
Step 9/9 : ADD . /app
 ---> Using cache
 ---> e261856195dd

Successfully built e261856195dd
Successfully tagged backend:latest
Building frontend
Step 1/12 : FROM node:14.3
 ---> 91a3cf793116
Step 2/12 : WORKDIR /app
 ---> Using cache
 ---> 339587fbcca1
Step 3/12 : ENV LANG C.UTF-8
 ---> Using cache
 ---> abf88d35ccd4
Step 4/12 : ENV TZ Asia/Tokyo
 ---> Using cache
 ---> 3d11e345189a
Step 5/12 : ENV HOST 0.0.0.0
 ---> Using cache
 ---> 1e4443975cf6
Step 6/12 : ADD package.json /app/package.json
ERROR: Service 'frontend' failed to build : ADD failed: file not found in build context or excluded by .dockerignore: stat package.json: file does not exist

該当のソースコード

version: "3"

services:
  db:
    container_name: db
    image: mysql:5.7.30
    environment:
      TZ: Asia/Tokyo
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
    volumes:
      - mysql_data:/var/lib/mysql
    ports:
      - 3307:3306
    networks:
      app_net:
        ipv4_address: '172.20.0.2'

  backend:
    container_name: backend
    build: ./backend/
    image: backend
    command: bundle exec rails server -b 0.0.0.0
    tty: true
    stdin_open: true
    volumes:
      - ./backend:/app:cached
      - bundle_data:/usr/local/bundle:cached
      - /app/vendor
      - /app/tmp
      - /app/log
      - /app/.git
    environment:
      TZ: Asia/Tokyo
    depends_on:
      - db
    ports:
      - 5000:3000 # ポートフォワード
    networks:
      app_net:
        ipv4_address: '172.20.0.3'

  frontend:
    container_name: frontend
    build: ./frontend/
    image: frontend
    volumes:
      - ./frontend:/app
    ports:
      - 3000:3000
    command: "npm run dev"
    networks:
      app_net:
        ipv4_address: '172.20.0.4'

networks:
  app_net:
    driver: bridge
    ipam:
      driver: default
      config:
        - subnet: 172.20.0.0/24

volumes:
  mysql_data:
  bundle_data:

FROM node:14.3

WORKDIR /app

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo
ENV HOST 0.0.0.0

ADD package.json /app/package.json
ADD package-lock.json /app/package-lock.json

RUN apt-get update -y && \
  apt-get upgrade -y && \
  npm install npm@6.14.4 && \
  npm install ejs@3.0.1 &&\
  npm install nuxt@2.0.0 &&\
  npm install create-nuxt-app@2.15.0 &&\
  npm install defu@3.1.0

ADD . /app

RUN npm run build

EXPOSE 3000

CMD ["npm", "run", "start"]

ディレクトリ構成

|
|-backend
|
|-frontend
| |-Dockerfile
|
docker-compose.yml

こうなっています。
どなたか問題点等ご教示いただければ幸いです。
よろしくお願いいたします。

Comments

[t_obara]

package.jsonファイルが見当たらないと言うエラーですが、どこに置いていますか？

[takuya861]

自己解決しました！
ありがとうございました。

Answer 1

Docker composeのなかの

build: ./frontend/

が問題な気がしますね。

build:
  context: ./frontend/
  dockerfile: .

とかってやってあげたらどうでしょう？

Comments

[takuya861]

自己解決しました！
ありがとうございました！

Answer 2

docker-compose.ymlの記述ミスでした。

  frontend:
    container_name: front ←endがいらなかった
    build: ./frontend/
    image: frontend
    volumes:
      - ./frontend:/app
    ports:
      - 3000:3000
    command: "npm run dev"
    networks:
      app_net:
        ipv4_address: '172.20.0.4'