Vue.js - Vue 项目 dist 利用 Docker 一键部署方案

如果你想利用 Docker 和 Nginx 来部署你的 Vue.js 项目，但又不想通过创建 Docker 镜像的方式来做，你可以直接将你的 dist 目录挂载到 Nginx 容器中的相应目录，然后让 Nginx 服务这些静态文件。

具体步骤

1. 确保你的 Vue 项目已经构建完成

在你的本地开发环境中，运行 npm run build 命令来生成 dist 目录。这个目录包含了所有构建后的静态文件，通常是用于生产环境的文件。

2. 将 dist 目录上传到你的 Linux 服务器

使用 FTP、SCP 或其他文件传输方法将 dist 目录上传到你的 Linux 服务器上。你可以将这个目录放在任何你有权限访问的位置，例如 /var/www/vue-app。

3. 启动 Nginx 容器并挂载 dist 目录

使用以下 Docker 命令来启动一个 Nginx 容器，并将你的 dist 目录挂载到容器内的 /usr/share/nginx/html 目录（Nginx 默认的静态文件根目录）：

docker run -d --name vue-nginx-server -p 8080:80 -v /var/www/vue-app/dist:/usr/share/nginx/html nginx

这里的参数解释如下：

• -d: 后台运行容器。
• --name vue-nginx-server: 给容器命名为 vue-nginx-server。
• -p 8080:80: 将容器的 80 端口映射到宿主机的 8080 端口。
• -v /var/www/vue-app/dist:/usr/share/nginx/html: 将宿主机的 /var/www/vue-app/dist 目录挂载到容器的 /usr/share/nginx/html 目录。
• nginx: 使用官方的 Nginx Docker 镜像。

4. 验证部署

打开你的浏览器，访问 http://<your-server-ip>:8080，你应该能够看到你的 Vue 应用已经成功部署。

5. (可选) 自定义 Nginx 配置

如果你需要自定义 Nginx 的配置（例如，修改日志路径、添加 SSL 支持等），你可以创建自己的 Nginx 配置文件，并将其挂载到容器中：

docker run -d --name vue-nginx-server -p 8080:80 -v /var/www/vue-app/dist:/usr/share/nginx/html -v /path/to/your/nginx.conf:/etc/nginx/nginx.conf nginx

在这里，-v /path/to/your/nginx.conf:/etc/nginx/nginx.conf 会将你的自定义 Nginx 配置文件挂载到容器的 Nginx 配置目录。

通过以上步骤，你可以利用 Docker 和 Nginx 来部署你的 Vue.js 应用，而无需创建自定义的 Docker 镜像。这种方式非常适合快速部署和测试新的前端构建。