【Docker】ビルド時に発生する複数のエラーの解決方法

【スキル】エンジニア
2025.01.30

VSCodeでDevcontainerを使ってdockerを立ち上げる時に、

ng-pain-log/
├── .devcontainer/
│   ├── devcontainer.json
│   ├── docker-compose.yml
│   └── docker/
│       └── Dockerfile
├── pain-log/
│   ├── src/
│   ├── package.json
│   └── package-lock.json

上記のようなディレクトリ構成でした。

dockerにかかわるファイルの内容は以下の通りです。

{
    "name": "angular",
    "dockerComposeFile": ["docker-compose.yml"],
    "service": "angular",
    "workspaceFolder": "/angular"
}
version: '3.8'

services:
  angular:
    build: ./docker
    container_name: angular
    volumes:
      - ../:/angular
    ports:
      - "4200:4200"
    tty: true
FROM node:18
WORKDIR /angular
RUN npm install -g @angular/cli
EXPOSE 4200

上記ではエラーなくビルドできていたのですが、”ng serve”
でAngularのローカルサーバーを起動させようとすると、npmがインストールされていないとのエラーが出てしまいました。

Dockerfileに “RUN npm install” と記載しているのにです。調べてみると、

・コンテナの/angular にプロジェクトをマウントしているため、node_modulesがコンテナ内に正しく作成されないこと
・キャッシュを活用するためにpackage.jsonとpackage-lock.json をコピーする必要がある

とのことでしたので、下記のように修正しました。

version: '3.8'

services:
  angular:
    build: ./docker
    container_name: angular
    volumes:
      - ../:/angular
      - /angular/pain-log/node_modules  # node_modules をコンテナ内に保持
    ports:
      - "4200:4200"
    tty: true
    working_dir: /angular/pain-log  # 作業ディレクトリをプロジェクトに変更

FROM node:18

# 作業ディレクトリをAngularプロジェクトのルートに変更
WORKDIR /angular/pain-log

# package.json/package-lock.json をコピー (キャッシュを活用するため)
COPY pain-log/package.json pain-log/package-lock.json ./

RUN npm install
RUN npm install -g @angular/cli
EXPOSE 4200
CMD ["npm", "start"]

この構成でdevcontainerをビルドすると

failed to solve: failed to compute cache key: failed to calculate checksum of ref XXXXXXXXXXXXXX: "/pain-log/package-lock.json": not found

というエラーが生じてしまいました。つまり、package.jsonが見つからないというエラーです。

このエラーは、Dockerfile の COPY 命令で pain-log/package-lock.json をコピーしようとした際に、ファイルが見つからないため発生しています。
原因として、package.json や package-lock.json は pain-log/ にあるため、コンテキスト外でアクセスできずエラーが発生しています。

したがって、docker-compose.ymlとDockerfileを以下のように変更しました。

version: '3.8'

services:
  angular:
    build:
      context: ..  #ここを変更
      dockerfile: .devcontainer/docker/Dockerfile  #ここを変更
    container_name: angular
    volumes:
      - ../:/angular
      - /angular/pain-log/node_modules

    ports:
      - "4200:4200"
    tty: true
    working_dir: /angular/pain-log
FROM node:18
WORKDIR /angular/pain-log
COPY pain-log/package.json pain-log/package-lock.json ./  #ここを変更
RUN npm install
RUN npm install -g @angular/cli
EXPOSE 4200
CMD ["npm", "start"]

すると、エラーなくビルドできるようになりました！

※実際に使用する際は＃の部分を削除してください。

タイトルとURLをコピーしました