Docker + Nginx 部署 Vue 项目

发布网友发布时间：2024-09-30 10:36

共1个回答

热心网友时间：2024-10-06 04:18

本文将引导你通过Docker和Nginx部署Vue项目，提供详细实现步骤和关键注意事项。首先，理解Docker作为轻量级虚拟化技术带来的优势，如持续集成、版本控制、可移植性、隔离性和安全性。Docker提供了一种方便快速的自动化部署方式，确保应用程序在不同环境中稳定运行。

在运行环境为macOS的情况下，假设已经安装了docker和@vue/cli。默认版本适应多数情况，若与你的操作系统存在差异，请自行调整。

接下来，创建Vue应用并进行初步配置。使用vue cli创建项目`vue create vueclidemo`，通过`yarn serve`命令启动应用，访问`http://localhost:8081`查看项目界面。在`App.vue`中修改页面，将`HelloWorld`组件中的`msg`参数改为`Hello Docker`，同时在`created`生命周期中加入接口请求。此时页面会显示报错信息，因为`/api/json`接口尚未实现，这里暂时留白，后续将加入接口服务。

构建Vue项目后，项目根目录下会新增`dist`文件夹。将`dist`目录及其内容上传至服务器，作为静态资源站点，可直接访问项目。

为了将Vue应用与静态资源站点整合，选用Nginx作为反向代理服务器。首先获取并构建Nginx镜像，创建配置文件`default.conf`，定义首页指向为`/usr/share/nginx/html/index.html`。构建Vue应用镜像时，基于Nginx镜像创建包含Vue应用的镜像，并启动容器。此时，通过访问`http://localhost:3000`即可访问Vue应用。

为了实现接口服务，部署一个Node容器来提供API。使用Node.js框架Express构建服务，注册返回JSON格式的路由。构建Node服务镜像，启动容器`nodeserver`，提供接口服务在端口`8080`，并通过宿主机端口`5000`映射。访问`localhost:5000/json`可以获取接口数据。

为了解决Vue应用请求转发到Node接口服务的问题，需要修改Nginx配置文件以实现跨域转发。首先查看Node服务容器的IP地址和端口，将接口请求转发到Node服务。若修改配置文件后，需确保每次更改后仅重启容器即可生效，避免重新构建镜像。为此，修改Dockerfile，将Nginx配置文件挂载至宿主机，实现动态更新。

部署后端服务时，考虑负载均衡以提升资源利用率、减少延迟和确保容错配置。启动额外的后端服务容器，并调整Nginx配置文件以优化部署。

最后，建议使用Kitematic等可视化工具管理Docker容器，提高操作便捷性。通过定期推送高质量文章，欢迎关注与点赞。本文旨在提供Vue项目使用Docker部署的完整步骤，希望对探索Docker的同学有所帮助。