最近，Docker を使って vue-cli の勉強をしているのですが，アプリケーションのコンテナを起動し，ブラウザで localhost にアクセスすると「ERR_CONNECTION_REFUSED」と表示され，localhost にアクセスできなくなりました．

「え！？突然どうした？」という状態になって少し混乱していたのですが，結論としては私の単なる勘違いが原因でした．今回はその勘違いしていた内容についてまとめようと思います．

使っていた Dockerfile

何の変哲のない，「Dockerfile」と「docker-compose.yml」です．

portsでポートフォワーディングし，ブラウザで「http://localhost:1234/」でアクセスするようにしています．

# vuejs-practice/Dockerfile 
FROM node:12.18.3-alpine

WORKDIR /app

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

CMD ["/bin/ash"]

# vuejs-practice/docker-compose.yml
version: "3"
services:
  vuejs-practice:
    build: .
    command: yarn serve
    working_dir: /app/vuejs-practice
    ports:
      - 1234:8080
    volumes:
      - ./:/app
      - yarn-cache:/usr/local/share/.cache/yarn/v6
    stdin_open: true
    tty: true

volumes:
  yarn-cache:

アプリケーションを起動

さて，起動しましょう．当時は以下のコマンドで起動していました．

$ docker-compose run --rm vuejs-practice yarn serve

さてアクセスするぞ！！！という思いでブラウザで localhost にアクセスすると「ERR_CONNECTION_REFUSED」と表示されてしまいます...

f:id:bake0937:20200831200934p:plain

調べてみる

「なぜだ? 他のコンテナは停止もしているし，関係ありそうなプロセスも Kill しているのに...」と思いながらもdocker psで vue-cli のコンテナの起動状態を見てみました．

❯ docker ps
CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS              PORTS               NAMES
ee9e63a14442        vuejs-practice_vuejs-practice   "docker-entrypoint.s…"   9 seconds ago       Up 8 seconds                            vuejs-practice_vuejs-practice_run_d4ff59ff1d93

はい...そうです...「PORTS」の設定が無いです．これではいくらブラウザで localhost にアクセスしてもアプリケーションのページは表示されません．

「アレ？ docker-compose.yml に ports の設定書いたはずなんだけど？」と思っており，ここで少し混乱したのですが.... 「あ！そういえば docker-compose up で起動してなかったな」とふと思い，実行してみると...なんと「PORTS」が設定された状態になりました！

❯ docker-compose up
Starting vuejs-practice_vuejs-practice_1 ... done
Attaching to vuejs-lecture_vuejs-lecture_1
yarn run v1.22.4
$ vue-cli-service serve
vuejs-lecture_1  |  INFO  Starting development server...

❯ docker ps
CONTAINER ID        IMAGE                         COMMAND                  CREATED              STATUS              PORTS                    NAMES
0ba34e1ff069        vuejs-lecture_vuejs-lecture   "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:1234->8080/tcp   vuejs-lecture_vuejs-lecture_1

localhost にアクセスすると無事アプリケーションのページが表示されました．

f:id:bake0937:20200830132758p:plain

原因

もうここまで読めばだいたいわかったと思いますが，原因はコンテナの起動コマンドにありました．

せっかく，「docker-compose.yml」でportsを設定していたのにも関わらず，docker-compose upではなく，docker-compose run --rm vuejs-practice yarn serveで vuejs-practice サービスでyarn serveを起動するコマンドを実行してしまってました．

これではdocker-compose.ymlで設定した情報に沿ってコンテナが起動するのでなく．単に vue-cli のコンテナが起動しただけで，ポートフォワーディングされない状態のため接続できなかったということでした．

起動するコマンドが変わっていた原因としては，読んでいた技術書が vue-cli をマシンに直接インストールする環境で書いており，Docker で起動する場合で読み替えるべきところを忘れたまま進めてしまっていました😇，つまり凡ミスです笑．

docker-compose run --rm vuejs-practice yarn serveでどうしても起動したい場合は以下のように-pオプションが必要です．

$ docker-compose run --rm -p 1234:8080 vuejs-lecture yarn serve
❯ docker ps
CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS              PORTS                    NAMES
54df9ca7f7fa        vuejs-lecture_vuejs-lecture   "docker-entrypoint.s…"   28 seconds ago      Up 27 seconds       0.0.0.0:1234->8080/tcp   vuejs-lecture_vuejs-lecture_run_823dbcfa3088

と悔しさ半分で紹介しましたが，これだと「何のために docker-compose.yml を用意したんだよ！」って話になるので，おとなしくdocker-compose up (サービス名)またはdocker-compose run --rm --service-ports サービス名と--service-portsオプションをつけて起動するようにします 😇