【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

エラー発生時の状態

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

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:

試したコマンド

ターミナル

$ 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の変更が正常に反映されていない可能性に思い当たる。
↓
こちらの記事を参考に、
$ docker-compose buildとしていたビルドを、
$ docker-compose build --no-cache
とすることで、
Dockerfileの変更が正常に反映されるようになり、色々と想定した挙動を示すようになった。

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

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

試したコマンド

ターミナル

$ 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記事等を参考にした場合)、**よくわからないエラーが出てきたら、原因の一つとしてバージョンの古さを疑うこと。

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