一台服务器docker 部署多个vue

原创

mob64ca12ebf2cc 2024-10-27 03:33:46 ©著作权

文章标签 Vue Docker docker 文章分类 Docker 云计算

©著作权归作者所有：来自51CTO博客作者mob64ca12ebf2cc的原创作品，请联系作者获取转载授权，否则将追究法律责任

一台服务器Docker部署多个Vue应用的全流程指南

随着现代Web开发的日益发展，Vue.js作为一种流行的前端框架，受到广泛关注。在实际应用中，很多开发者会需要在一个服务器上部署多个Vue应用。借助Docker技术，我们可以轻松地实现这一目标。本文将通过一个逐步的教程，带你了解如何使用Docker在一台服务器上进行多个Vue应用的部署。

一、准备工作

在开始之前，请确保你已经完成了以下准备工作：

安装Docker：如果你还没有安装Docker，可以参考[官方文档](
Vue应用：你需要有几个已构建好的Vue应用。如果你需要创建一个简单的Vue应用，可以使用 Vue CLI：
```
npm install -g @vue/cli
vue create my-app
cd my-app
npm run build
```

Dockerfile：在每个Vue应用的根目录中，创建一个 Dockerfile 文件，内容如下：

# 选择基础镜像
FROM nginx:alpine

# 将打包后的文件复制到nginx的html目录中
COPY ./dist /usr/share/nginx/html

# 暴露端口
EXPOSE 80

二、构建Docker镜像

在每个Vue应用的根目录中，使用以下命令构建Docker镜像：

docker build -t my-vue-app:latest .

这里我们使用 my-vue-app 作为镜像的名称，latest 是我们为该镜像指定的标签。对于多个Vue应用，建议为每个应用使用不同的名称。

三、编写docker-compose.yml

为了便于管理多个容器，我们可以使用Docker Compose。创建一个 docker-compose.yml 文件，内容如下：

version: '3'

services:
  vue-app-1:
    image: my-vue-app-1:latest
    build:
      context: ./app1
    ports:
      - "8081:80"

  vue-app-2:
    image: my-vue-app-2:latest
    build:
      context: ./app2
    ports:
      - "8082:80"

  vue-app-3:
    image: my-vue-app-3:latest
    build:
      context: ./app3
    ports:
      - "8083:80"

这里配置了三个服务，每个服务对应一个Vue应用。在 ports 字段中，左侧是宿主机的端口（例如，8081、8082、8083），右侧是容器内的端口（通常为80）。

四、启动容器

执行以下命令来启动所有的Vue应用：

docker-compose up --build

这将构建所有的镜像，并启动相应的容器。你可以在浏览器中访问 http://localhost:8081、http://localhost:8082 和 http://localhost:8083 来查看各个Vue应用。

五、监控与管理

为了让整个过程更清晰，我们可以使用甘特图来展示各个步骤的时间安排。

gantt
    title 部署多个Vue应用流程
    dateFormat  YYYY-MM-DD
    section 准备工作
    安装Docker            :done,    des1, 2023-10-01, 1d
    构建Vue应用          :done,    des2, 2023-10-02, 2d
    section Docker配置
    编写Dockerfile      :done,    des3, 2023-10-04, 1d
    编写docker-compose   :done,    des4, 2023-10-05, 1d
    section 启动及管理
    启动容器            :active,  des5, 2023-10-06, 1d
    访问应用            :         des6, 2023-10-07, 1d

六、序列图示例

在多个Vue应用的运行中，各个组件之间是如何交互的呢？下面用序列图来展示应用启动的过程：

sequenceDiagram
    participant Client
    participant App1
    participant App2
    participant App3

    Client->>App1: GET /
    App1-->>Client: 200 OK
    Client->>App2: GET /
    App2-->>Client: 200 OK
    Client->>App3: GET /
    App3-->>Client: 200 OK

这个序列图展示了客户端相应请求到不同的Vue应用，并返回成功的HTTP状态。

七、总结

通过Docker，我们可以在一台服务器上灵活地部署多个Vue应用，使得开发、测试和发布流程更加高效。这种方法不仅提高了资源的利用率，还可以易于管理和扩展未来的应用。希望本教程能够帮助你更好地理解和运用Docker来部署多个Vue应用，开启高效的开发之旅！如果你有任何疑问或需要进一步探索的地方，欢迎在评论区留言。