2023.01.28  

【Vue.js】Dockerでlocalhost:8080に接続できない

Vue    

Vue.js アプリケーションを docker-compose経由でDockerfileを読み込み実行した際はlocalhost:8080で接続できたのに、Dockerfile単体でdocker build ``docker runした際はうまく接続できず困ったので、解決方法をメモ書きします。

下記はブラウザとコンソールの状態です。

・ブラウザ

・コンソール

結論

マニュアル通りに設定したら上手くいきました。

https://jp.vuejs.org/v2/cookbook/dockerize-vuejs-app.html

あと、docker runコマンドも間違っていました。

原因

原因1は下記DockerfileRUN npm run buildの設定が抜けていたことです。
docker-compose使用時はnpm run buildなしで実行できていたのでなかなか気づけませんでした。

# Dockerfile

FROM node:19-bullseye

# 静的コンテンツを配信するシンプルな http サーバをインストールする
RUN npm install -g http-server

# カレントワーキングディレクトリとして 'app' フォルダを指定する
WORKDIR /app

# `package.json` と `package-lock.json` (あれば)を両方コピーする
COPY package*.json ./

# プロジェクトの依存ライブラリをインストールする
RUN npm install

# カレントワーキングディレクトリ(つまり 'app' フォルダ)にプロジェクトのファイルやフォルダをコピーする
COPY . .

# 本番向けに圧縮しながらアプリケーションをビルドする(ここが足りていなかった)
RUN npm run build

EXPOSE 8080
ENV HOST 0.0.0.0
CMD [ "http-server", "dist" ]

原因2docker runの仕方に誤りがあったことです。
ポート番号を明示するのを忘れていました。

# 誤
docker build -t test -f ./docker/Dockerfile . 
docker run -it test
# 正
docker build -t test -f ./docker/Dockerfile . 
docker run -it -p 8080:8080 test
コメント
現在コメントはありません。
コメントする
コメント入力

名前 (※ 必須)

メールアドレス (※ 必須 画面には表示されません)

送信