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は下記DockerfileにRUN 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" ]
原因2はdocker 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
