在 docker 容器中运行 vite 开发服务器答案

【问题标题】：running a vite dev server inside a docker container在 docker 容器中运行 vite 开发服务器
【发布时间】：2021-11-17 23:52:37
【问题描述】：

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

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

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

另外，如果我在运行 vite 服务器的同一虚拟机中运行 curl，它可以工作，所以我知道 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"

Dockerfile：

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

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

npm run vite

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

npm run dev

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

【问题讨论】：

标签： docker vue.js vite

【解决方案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
    }
})

【讨论】：

【解决方案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 - 但我认为这也适用于此。）

【讨论】：

【解决方案3】：

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

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

【讨论】：