构建一个无忧无虑的静态网站：使用 Nginx 和 Docker 在 Web 上部署 Vue 项目

2023-09-27 23:25:37

在上一期的文章中，我们探讨了使用 Docker 部署开发 WordPress。在本期中，我们将深入了解 Docker 在前端开发中的应用，重点介绍如何使用 Nginx 和 Docker 在 Web 上部署 Vue 项目。对于有志于提升部署效率的前端开发人员来说，本文将提供宝贵的见解和实用的分步指南。

Docker 入门：创建镜像和容器

首先，让我们从创建 Docker 镜像开始。镜像就像应用程序的蓝图，它包含构建和运行应用程序所需的所有代码和依赖项。对于 Vue 项目，我们可以使用以下命令创建镜像：

docker build -t my-vue-app .

接下来，我们使用该镜像创建容器。容器是镜像的可运行实例，它提供了一个独立的隔离环境来运行我们的应用程序：

docker run -d -p 80:80 my-vue-app

此命令将启动一个容器，它将我们的 Vue 应用程序公开在端口 80 上。

引入 Nginx：优化 Web 性能

为了进一步提升我们的部署，我们引入 Nginx，这是一款轻量级且高效的 Web 服务器。Nginx 将作为反向代理，负责处理传入的 HTTP 请求并将其转发到我们的 Vue 应用程序容器。

为了配置 Nginx，我们需要创建一个配置文件并将其保存到 /etc/nginx/conf.d 目录中：

server {
  listen 80;
  server_name my-vue-app.example.com;
  location / {
    proxy_pass http://localhost:8080;
  }
}

现在，我们可以使用以下命令重新加载 Nginx 配置：

nginx -s reload

扩展部署：使用 Docker Compose

随着项目的不断发展，管理多个容器可能变得具有挑战性。为了简化这一过程，我们可以使用 Docker Compose。Docker Compose 允许我们使用一个YAML文件定义和管理多个容器。

对于我们的 Vue 项目，我们可以创建以下 docker-compose.yml 文件：

version: '3'
services:
  vue-app:
    build: .
    ports:
      - "8080:8080"
  nginx:
    image: nginx:latest
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    ports:
      - "80:80"