热重载在 vite+vue3 dockerized 应用程序中不起作用

Question

我有一个

vite+vue3

项目，我正在尝试对其进行 docker 化。当我运行

docker-compose up -d

时，一切都正确，除了更改后的热重载。有什么问题吗？

vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"

import tailwind from "tailwindcss"
import autoprefixer from "autoprefixer"

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwind(), autoprefixer()],
    },
  },
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  }
})

Dockerfile：

FROM node:16-alpine as builder
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine as production-build
COPY nginx.conf /etc/nginx/nginx.conf

RUN rm -rf /usr/share/nginx/html/*

COPY --from=builder /dist /usr/share/nginx/html
EXPOSE 7040
ENTRYPOINT ["nginx", "-g", "daemon off;"]

docker-compose.yml：

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "7040:7040"

Answer 1

如果您想进行热重载，那么您有（至少！！）两个选择。

假设项目布局如下所示：

├── app
│   ├── Dockerfile
│   ├── index.html
│   ├── package.json
│   ├── package-lock.json
│   ├── public
│   │   └── vite.svg
│   ├── README.md
│   ├── src
│   │   ├── App.vue
│   │   ├── assets
│   │   │   └── vue.svg
│   │   ├── components
│   │   │   └── HelloWorld.vue
│   │   ├── main.js
│   │   └── style.css
│   └── vite.config.js
├── docker-compose.yml
├── layout.txt
└── nginx.conf

在这两种情况下，这都是

app/Dockerfile

的样子：

FROM node:16

WORKDIR /app

COPY package*.json ./
RUN npm install

CMD ["npm", "run", "dev"]

由于您想要热重载，Docker 容器将运行开发服务器。

选项1：

services:
  web:
    build:
      context: app
    ports:
      - "3000:5173"
    volumes:
      - ./app:/app

这将简单地构建并运行容器，将容器端口 5173 映射到主机上的端口 3000。在浏览器中打开 http://127.0.0.1:3000/。这将为您提供真正的热重载，因为对代码的修改将立即反映在浏览器中。

选项2

如果您想在其之上放置 NGINX（对于开发设置来说可能不是必需的？）：

services:
  web:
    build:
      context: app
    volumes:
      - ./app:/app

  nginx:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - web

具有以下

nginx.conf

：

server {
    listen 80;

    location / {
        proxy_pass http://web:5173;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

这将为网站提供服务：http://127.0.0.1/。您还需要 NGINX 将 Web Socket 连接中继到应用程序，以确保内容更改时浏览器自动刷新。