【Vue.jsコンテナが動かない】Error: No valid exports main found for '/app/node_modules/colorette'

「docker-composeで作ったVue.jsコンテナが、up後すぐに落ちる(Exitになる)」状態で詰まったので、どう解決したかを書き残しておきます。

**結論としては、主にDockerfileに記述したnodeイメージが古かったことが原因でした。**

#先に結論
**【原因①】**「Dockerfile変更後に、```$ docker-compose build```でビルドしていた」
＝```$ docker-compose build --no-cache``` としてなかった為、Dockerfileの変更が正常に反映されていなかった。

**【原因②】**「ベースイメージとしたnodeのバージョンが古かった」

##ディレクトリ構成

```
[project_name]
├── api
│   ├── Dockerfile
│   ├── Gemfile
│   └── Gemfile.lock
├── front
│   ├── Dockerfile
│   ├── ...
└── docker-compose.yml
```

#エラー発生時の状態

```text:front/Dockerfile
FROM node:12.18.3-alpine

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

RUN apk update
COPY package.json .
RUN npm install -g npm @vue/cli
```

```yml:docker-compose.yml
version: '3'

services:
  web:
    build: ./api
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    ports:
      - '3000:3000'
    depends_on:
      - db
    volumes:
      - ./api:/app
      - bundle:/usr/local/bundle
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - mysql_data:/var/lib/mysql/
    environment:
      MYSQL_ROOT_PASSWORD: *****
    ports:
      - '3306:3306'
  front:
    build: ./front
    volumes:
      - ./front:/app
      - node_modules:/app/node_modules
    ports:
      - '8080:8080'
    tty: true
    stdin_open: true
    command: npm run serve

volumes:
  mysql_data:
  bundle:
  node_modules:
```

##試したコマンド

```terminal:ターミナル
$ docker-compose build
（> 正常にbuildされる）

$ docker-compose up -d
$ docker-compose ps
     Name                    Command               State                  Ports              
---------------------------------------------------------------------------------------------
****_db_1      docker-entrypoint.sh mysqld      Up       0.0.0.0:3306->3306/tcp, 33060/tcp
****_front_1   docker-entrypoint.sh npm r ...   Exit 1                                    
****_web_1     bundle exec rails s -p 300 ...   Up       0.0.0.0:3000->3000/tcp

$ docker-compose logs
(中略)
front_1  |
front_1  | > app@0.1.0 serve /app
front_1  | > vue-cli-service serve
front_1  | 
front_1  |  INFO  Starting development server...
front_1  |  ERROR  Error: No valid exports main found for '/app/node_modules/colorette'
(中略)
```

#どうやってエラー解消したか
**【原因①】**
まず、Dockerfileの変更が正常に反映されていない可能性に思い当たる。
↓
[こちらの記事](https://hacknote.jp/archives/47137/)を参考に、
```$ docker-compose build```としていたビルドを、
```$ docker-compose build --no-cache```
とすることで、
Dockerfileの変更が正常に反映されるようになり、色々と想定した挙動を示すようになった。

**【原因②】**
[こちらの記事](https://qiita.com/kaz_goto/items/9b01e42fd884b4f5bffe)を見て、nodeイメージのバージョンが古いことがエラー原因になっている可能性に気づく。
↓
Dockerfileの``FROM``の部分を変更。
変更前）``FROM node:12.18.3-alpine``とか、``FROM node:13.5-alpine``
変更後）``FROM node:14.15.4-alpine3.10``

```text:front/Dockerfile
- FROM node:13.5-alpine
+ FROM node:14.15.4-alpine3.10

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

RUN apk update
COPY package.json .
RUN npm install -g npm @vue/cli
```

##試したコマンド
```terminal:ターミナル
$ docker-compose down
$ docker-compose ps
Name   Command   State   Ports
------------------------------

$ n --stable
14.15.4
$ sudo n stable
$ node -v
v14.15.4

$ docker-compose build --no-cache
（> 正常にbuildされる）
$ docker-compose up -d
$ docker-compose ps
     Name                    Command               State                 Ports              
--------------------------------------------------------------------------------------------
****_db_1      docker-entrypoint.sh mysqld      Up      0.0.0.0:3306->3306/tcp, 33060/tcp
****_front_1   docker-entrypoint.sh npm r ...   Up      0.0.0.0:8080->8080/tcp           
****_web_1     bundle exec rails s -p 300 ...   Up      0.0.0.0:3000->3000/tcp  
```

#最後に
① Dockerfile変更後は、build時に``--no-cache``を付けること。
② **(特に昔のQiita記事等を参考にした場合)、**よくわからないエラーが出てきたら、原因の一つとしてバージョンの古さを疑うこと。

今回の一件で、この２点を理解。特に②…！^^;