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


#エラー内容

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

```shell
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
```

```docker: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
```

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

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

```shell
$ docker-compose build
```

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

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

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

```shell
$ docker-compose up
```

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

```shell
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
```

#解決への試行錯誤


```shell
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
```

サーバー起動

```shell
$ docker-compose up

#エラー出力
```

違うエラー....


#解決法

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

```docker: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から、イメージを再構築する

```shell
$ docker-compose up -d --build
```

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

```shell
$ docker-compose up -d

Starting app_front ... done
```

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