ダッシュで奪取

ゲーム、読書、人生

トップ > Tech > Docker で Vite 開発サーバーを立てて、ブラウザで表示確認しようとしてつまづいた

Docker で Vite 開発サーバーを立てて、ブラウザで表示確認しようとしてつまづいた

Tech Tech-Vue.js

目次

  1. 前提
  2. 事象
  3. 使用ファイル
  4. 疎通確認
  5. 対処
  6. なぜ
  7. 参考URL
  8. おわりに

1. 前提 ↑

  • node コンテナ内で npm init vue@latest を実行 → hello-vue3 という名前で Vue3 プロジェクトを作成し、npm install & npm run dev

2. 事象 ↑

  • ブラウザで確認すると、「localhost からデータが送信されませんでした。ERR_EMPTY_RESPONSE」画面になる

3. 使用ファイル ↑

Dockerfile
FROM node:18.12.1-bullseye

WORKDIR /app
RUN apt-get update
docker-compose.yml
version: '3.8'
services:
  vue:
    build: .
    command: /bin/sh -c "npm install; npm run dev"
    ports:
      - 5173:5173
    volumes:
      - ./hello-vue3:/app
    stdin_open: true
    tty: true

4. 疎通確認 ↑

コンテナの中から
  • 正しいレスポンスが返ってきた OK
$ docker-compose exec vue bash
/app# curl http://localhost:5173/

<!DOCTYPE html>
<html lang="en">
--- 省略 ---
自分のローカルマシンから
  • だめそう
$ curl http://localhost:5173/
curl: (52) Empty reply from server

5. 対処 ↑

  • vite.config.ts に server.host: true を追加
vite.config.ts
export default defineConfig({
    plugins: [vue()],
    server: {
        host: true,
    },
--- 省略 ---

6. なぜ ↑

  • localhost は同一ホスト内でしか通信できない
  • コンテナと、自分のローカルマシンは別のホスト
  • つまりコンテナ内の localhost でサーバーを立てても、ローカルマシンからはアクセスできない
  • vite.config の server.host に true を設定することで、0.0.0.0 でリクエストを受けるようになる
  • 0.0.0.0 でサーバーを立てると、ホストの全てでリクエストを受けられる = コンテナの外からもアクセスできる

7. 参考 URL ↑

8. おわりに ↑

  • いろいろなところで見かけた --host 0.0.0.0 とか ENV HOST 0.0.0.0 が何をしたいのか、やっと理解できた