运行 docker 容器内的 vite 开发服务器

Question

我有一个 Vue-cli 应用程序，我正在尝试将其转换为 vite。我正在使用 Docker 到运行服务器。我查看了一些教程并在开发模式下获得了运行的邀请，没有出现错误。但是，浏览器无法访问该端口。也就是说，当我在我的 macbook 命令行上时（Docker 之外）我不能 curl 它：

$ curl localhost:8080
curl: (52) Empty reply from server

如果我尝试 localhost:8081，我会得到 Failed to connect。此外，如果我运行 webpack 开发服务器正常工作，所以我知道我的容器的端口是公开的。

此外，如果我运行 curl 在与运行连接 vite 服务器的同一台虚拟机中，那么我知道 vite 正在运行。

详情如下：

在package.json中：

...
"dev": "vue-cli-service serve",
"vite": "vite",
...

整个vite.config.ts文件：

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

// https://vitejs.dev/config/
export default defineConfig({
    resolve: { alias: { '@': '/src' } },
    plugins: [vue()],
    server: {
        port: 8080
    }
})

启动容器的命令：

docker-compose run --publish 8080:8080 --rm app bash

docker-compose.yml 文件:

version: '3.7'

services:
  app:
    image: myapp
    build: .
    container_name: myapp
    ports:
      - "8080:8080"

Docker文件：

FROM node:16.10.0

RUN npm install -g npm@8.1.3
RUN npm install -g @vue/cli@4.5.15

RUN mkdir /srv/app && chown node:node /srv/app

USER node

WORKDIR /srv/app

我运行在vite的docker容器中的命令：

npm run vite

我在 vue-cli 的 docker 容器中运行的命令：

npm run dev

所以，总结一下：我的设置在运行连接 vue-cli 开发服务器时有效，但在使用 vite 开发服务器时不起作用。

Answer 1

我明白了。我需要在配置中添加一个“主机”属性，所以现在我的 vite.config.ts 文件是：

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

// https://vitejs.dev/config/
export default defineConfig({
    resolve: { alias: { '@': '/src' } },
    plugins: [vue()],
    server: {
        host: true,
        port: 8080
    }
})

Answer 2

您也可以通过以下方式启动您的 vite 服务器：

$ npm run dev -- --host

这会将 --host 标志传递给 vite 命令行。

您将看到如下输出：

vite v2.7.9 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.168.4.68:3000/

  ready in 237ms.

（我是运行 VirtualBox VM - 但我认为这也适用于此。）

Answer 3

您需要添加主机 0.0.0.0 以允许任何外部访问：

export default defineConfig({
server: {
    host: '0.0.0.0',
    watch: {
        usePolling: true
    }
},})

运行 docker 容器内的 vite 开发服务器

running a vite dev server inside a docker container

docker

vue.js

vite