如何将 React 或 Vue 与 Vite 和 Docker 结合使用

2025-06-07

如何将 React 或 Vue 与 Vite 和 Docker 结合使用

介绍

各位开发者大家好！

通过本指南，我们将创建一个包含 React 或 Vue 作为前端框架、Vite 作为服务器以及 Docker 作为开发环境的项目。

[2024年8月16日更新]

添加了资源部分

先决条件

这些应该在主机上可用

  • 节点
  • Docker、Docker Compose（以任何形式的 CLI/桌面客户端）

基础知识

  • 反应
  • 维特
  • Docker
  • Makefile（非强制性的，只是为了让生活更轻松）

这些定义将在文章的参考文献中提供，并能帮助您大致了解这些术语。如需了解更多信息，请使用定义提供的链接。

Vite 是什么？

Vite是一款革命性的前端开发工具，与现有解决方案相比，它为开发人员提供了更快速的开发环境。

Vite 使用源代码而非原生 ESM。通过在底层使用 ES 构建和 ESM，Vite 的启动速度提高了 10 到 100 倍。

这支持几乎所有的前端框架，react、vue 等等。

我建议你继续看看他们的网站，特别是这个

什么是 Docker？

无论采用何种技术， Docker都是您的应用程序的环境提供商，它将应用程序与主机分开（根据您的选择）。

尽管它做了很多事情，让开发和运维的工作变得非常轻松，但这些事情还是留给你去做吧。

什么是 Makefile？

Make是一个 Linux 实用程序，它允许我们将多个 Shell 命令绑定到单个命令。 它Makefile用于实现这一点。

我们package.json > scripts也可以使用它，但我更喜欢使用它，因为它也适用于非节点项目。

让我们开始吧。

步骤 1：创建项目

首先，我们将使用此命令创建一个 Vite 项目

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

在此步骤中，它会问你这些问题

  • 应用程序名称
  • Js 框架 - React / Vue ..
  • 框架变体 - Javascript / TypeScript

框架

js

根据需要选择。我目前选择了 React。

注意：我使用的是节点版本 v17.8.0

步骤 2：更新 Vite 配置

为了与 Docker 一起工作，我们需要指定host和。portvite.config.js

export default defineConfig({
 plugins: [react()],
 server: {
   host: true,
   port: 8000, // This is the port which we will use in docker
   // Thanks @sergiomoura for the window fix
   // add the next lines if you're using windows and hot reload doesn't work
    watch: {
      usePolling: true
    }
 }
})
Enter fullscreen mode Exit fullscreen mode

步骤3：设置Docker

我打算使用docker-composer它，因为与依赖 Dockerfile 相比，它更容易扩展。

首先，我们将docker-compose.yml在项目的根目录中添加。

version: "3.4"
services:
 vite_docker:
   image: node:alpine
   container_name: vite_docker
   entrypoint: /bin/sh
   ports:
     - 8000:8000
   working_dir: /srv/app
   volumes:
     - type: bind
       source: ./
       target: /srv/app
   tty: true
Enter fullscreen mode Exit fullscreen mode

从标签上看，这很直观。我又加了一遍含义。

image: node:alpine
Enter fullscreen mode Exit fullscreen mode

Docker 将选择node:alpine用于构建此环境的镜像。您可以选择node:lts，node:latest但我更喜欢 ，alpine因为它体积小，也适合生产环境。

container_name: vite_docker
Enter fullscreen mode Exit fullscreen mode

我们将使用容器名称vite_docker来执行未来的命令并引用该应用程序。

entrypoint: /bin/sh
Enter fullscreen mode Exit fullscreen mode

入口点是指进入容器时将执行的应用程序。可以是/bin/bash其他，但由于我使用的是 Alpine 镜像，因此必须添加这些依赖项。

ports
Enter fullscreen mode Exit fullscreen mode

在我们的例子中，应用程序将在其上运行的端口8000，通过此映射，我们将能够使用相同的端口访问主机。

working_dir
Enter fullscreen mode Exit fullscreen mode

working_dir 是容器内项目的目录。当你登录容器时，你将进入此目录。

volumes
Enter fullscreen mode Exit fullscreen mode

这里的关键配置是卷。这将允许我们在容器中使用主机文件，并且我们可以通过构建或重启容器来对其进行操作。

在这里我使用type: bind它来让我们做到这一点，并在我们更新/添加主机中的任何内容时更新容器内的文件，反之亦然。

此外，由于您将修改主机，因此每次您都需要构建并运行它。

   volumes:
     ./: /srv/app
Enter fullscreen mode Exit fullscreen mode

它在其他情况下很有用，但避免了主机和容器之间的同步。

tty
Enter fullscreen mode Exit fullscreen mode

tty 用于持续运行容器。

步骤4：构建Docker容器

到目前为止，我们已经添加了脚本来构建我们的环境并在我们的项目中拥有这些文件。

文件

运行此命令在本地机器上构建镜像并启动容器。您只需在第一次运行此命令，以及每次对 进行更改时运行此命令docker-compose.yml。

docker-compose up --build --no-recreate -d
Enter fullscreen mode Exit fullscreen mode

从第二次开始，我们可以使用

docker-compose up -d
Enter fullscreen mode Exit fullscreen mode

现在我们的容器已启动，您应该能够使用以下命令对其进行测试。

docker-compose ps
Enter fullscreen mode Exit fullscreen mode

它应该是这样的

docker-up

步骤 5：构建并启动应用程序

需要澄清的是，我们有一个正在运行的容器，但没有安装或正在运行的 React 应用。为此，我们需要登录到容器，然后执行命令。

docker exec -it vite_docker sh
Enter fullscreen mode Exit fullscreen mode

我们已经进入容器，现在需要运行命令来安装 Node 包并启动应用程序。

npm i && npm run dev
Enter fullscreen mode Exit fullscreen mode

它将安装软件包并且应用程序将在定义的端口上运行。

npm i

我已经有了这些包，所以它没有显示与这些包相关的日志。

这些将是项目中的文件。请忽略Makefile（这对以后来说是个奖励 :)）

安装后的文件

以及正在运行的应用程序

应用程序

步骤 6：修改项目文件

到目前为止，一切都运行顺利。创建 Docker 容器并安装应用程序包后，我们就可以通过浏览器从主机访问该项目了。

但这还不是全部，对吧？

那么，如果要更改标题Vite + React、添加新组件和不同的布局呢？另外，我们不想每次更改后都重建容器，这样做是为了让事情变得更轻松，而不是更麻烦 :)

我们开始做吧。

视频

应用程序正在运行

通过这种方式，我们可以看到主机的更改反映在容器中（due to volumes > bind），并且我们可以在浏览器中看到这些更改，而无需构建或重新启动容器，并且 Vite 完美地完成了它的工作。

资源

重要的文件，你将完成剩余的工作并学习

文件的 GitHub 链接

像我一样懒惰 :) 使用更新的 docker compose 配置进行工作项目

您可以使用此工具克隆项目并直接开始工作。该项目依赖于以下实用程序

这些是您需要执行的命令

如果你有make实用程序

// Only first time 
make first

// All the time
make start
Enter fullscreen mode Exit fullscreen mode

如果你node在主机上安装了。这也会运行docker命令

// Only first time 
npm run first

// All the time
npm run start
Enter fullscreen mode Exit fullscreen mode

分支的 GitHub 链接

奖金

在所有步骤中，我们学习了各种命令。如果您熟悉 Docker，那就太好了。否则，一开始可能会觉得不知所措。

因此，我总是喜欢使用一些可以让我将这些命令组合成一个命令的东西，并使用更有意义的名称或任何我喜欢的名称。

Makefile

Makefile 文件来了，你需要在操作系统上安装一个额外的工具，但它会非常有帮助。Make 工具用于将各种 Shell 命令合并成一个。使用我们在步骤 4 和步骤 5 中创建的方法，我们可以将所有内容合并成一个命令。

要安装并运行开发服务器，我们可以这样做

make first
// make is the utility
// first is command from the Makefile
Enter fullscreen mode Exit fullscreen mode

下次我们就可以随时使用

make start
Enter fullscreen mode Exit fullscreen mode

还有各种与重启、清除、停止相关的其他命令，我们可以使用这些命令一次简单地执行多个命令。

并且命令位于Makefile

CURRENT_DIR=$(patsubst %/,%,$(dir $(realpath $(firstword $(MAKEFILE_LIST)))))
ROOT_DIR=$(CURRENT_DIR)
CURRENT_USER=
DOCKER_NAME=vite_docker
DOCKER_COMPOSE?=docker-compose
DOCKER_EXEC_TOOLS_APP=$(CURRENT_USER) docker exec -it $(DOCKER_NAME) sh
NODE_INSTALL="npm i"
SERVER_RUN="npm run dev"


.PHONY: build install dev up start first stop restart clear


build:
 $(DOCKER_COMPOSE) up --build --no-recreate -d


install:
 $(DOCKER_EXEC_TOOLS_APP) -c $(NODE_INSTALL)


dev:
 $(DOCKER_EXEC_TOOLS_APP) -c $(SERVER_RUN)


up:
 $(DOCKER_COMPOSE) up -d


start: up dev
// this will up the docker env and run the npm run dev it to


first: build install dev
// this will build the env, up it and run the npm install and then run npm run dev it to


stop: $(ROOT_DIR)/docker-compose.yml
 $(DOCKER_COMPOSE) kill || true
 $(DOCKER_COMPOSE) rm --force || true


restart: stop start dev


clear: stop $(ROOT_DIR)/docker-compose.yml
 $(DOCKER_COMPOSE) down -v --remove-orphans || true
Enter fullscreen mode Exit fullscreen mode

注意：您始终可以将其用作package.json > scriptsMake 的完整/部分替代品。

最后说明

感谢您抽出时间阅读这篇文章！如有任何疑问，欢迎随时留言。

我很高兴在LinkedIn上与您联系

文章来源：https://dev.to/nekhilmalik/how-to-build-with-react-or-vue-with-vite-and-docker-1a3l
Devto 翻译
PREV
分布式系统中的容错：策略和案例研究
NEXT
JavaScript 中 console.table() 的威力💪🏻😎