【Docker】仮想環境で、Nuxt.jsを立ち上げる時に起こるエラー【エラーNo2】

#エラー内容

状況としては、docker-composeを使ってイメージとアプリを作っていて、サーバーを立ち上げようとしたら、次のようなエラーが出て、立ち上がらなかった。

app_front | npm ERR! code ENOENT
app_front | npm ERR! syscall open
app_front | npm ERR! path /app/package.json
app_front | npm ERR! errno -2
app_front | npm ERR! enoent ENOENT: no such file or directory, open '/app/package.json'
app_front | npm ERR! enoent This is related to npm not being able to find a file.
app_front | npm ERR! enoent 
app_front | 
app_front | npm ERR! A complete log of this run can be found in:
app_front | npm ERR!     /app/.npm/_logs/2020-08-08T13_35_16_656Z-debug.log
app_front exited with code 254

#参考対象者

• Dockerを使って、Nuxt.jsアプリを立ち上げたい方

#環境

$ docker -v
Docker version 19.03.12

#エラー発生

###ディレクトリ構成

environment--/app
             |
             |--docker-compose.yml
             |--/front
                |
                |--Dockerfile

Dockerfile

FROM node:12.5.0-alpine

ENV HOME="/app" \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo

WORKDIR ${HOME}

RUN apk update && \
    apk upgrade && \
    npm install -g npm && \
    npm install -g @vue/cli

ENV HOST 0.0.0.0
EXPOSE 300

docler-compose.yml

version: "3"

services:
  front:
    container_name: app_front
    build: front
    command:
      npm run dev
    tty: true
    volumes:
      - ./front:/app
    ports:
      - 8080:3000
    depends_on:
      - back

###コンテナ作成から、サーバー起動

ビルドしてイメージを作成する。

$ docker-compose build

作成したイメージから、Nuxt.jsのアプリをつくていく。

$ docker-compose run --rm front npx create-nuxt-app sample_app

アプリが作成できたら、コンテナを立ち上げてみる（=サーバーを立ち上げる）

$ docker-compose up

すると、冒頭にあったエラーが、、、

Starting app_front ... done
Attaching to app_front
app_front | npm ERR! code ENOENT
app_front | npm ERR! syscall open
app_front | npm ERR! path /app/package.json
app_front | npm ERR! errno -2
app_front | npm ERR! enoent ENOENT: no such file or directory, open '/app/package.json'
app_front | npm ERR! enoent This is related to npm not being able to find a file.
app_front | npm ERR! enoent 
app_front | 
app_front | npm ERR! A complete log of this run can be found in:
app_front | npm ERR!     /app/.npm/_logs/2020-08-08T13_35_16_656Z-debug.log
app_front exited with code 254

#解決への試行錯誤

app_front | npm ERR! path /app/package.json
app_front | npm ERR! errno -2
app_front | npm ERR! enoent ENOENT: no such file or directory, open '/app/package.json'

この辺のエラーを見ると、/app/package.jsonとかディレクトリ構成が違ってんだよなぁーとか思いつつ、そこを中心にせめていくことにした。

まずは、本来のディレクトリ構成である/app/front/package.jsonでコンテナを起動するように、コマンドでディレクトリ移動させるようにする。

docker-compose.yml

    command:>
      cd front    #追記
      npm run dev

サーバー起動

$ docker-compose up

#エラー出力

違うエラー....

#解決法

そうか、じゃあ最初から起動する場所を指定すればいいじゃん。
ということで、

Dockerfile

FROM node:12.5.0-alpine

ENV HOME="/app/feederin" \   #HOMEの値を変更
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo

WORKDIR ${HOME}

RUN apk update && \
    apk upgrade && \
    npm install -g npm && \
    npm install -g @vue/cli

ENV HOST 0.0.0.0
EXPOSE 3000

更新したDockerfileから、イメージを再構築する

$ docker-compose up -d --build

そして、コンテナを起動すると、、、

$ docker-compose up -d

Starting app_front ... done

嬉しみいいいいい（起動した。）