技术交流
当前位置: 首页 > 新闻动态 > 技术交流
两个vue的项目要部署在docker上的nginx上应该如何部署
发布日期:2023-08-14 阅读次数:

要将两个Vue项目部署在Docker上的Nginx上,你可以按照下面的步骤进行操作:

创建一个Nginx配置文件,比如命名为 vue.conf。你可以使用任何文本编辑器来创建该文件。下面是一个基本的示例配置:nginx复制代码server {    listen 80;    server_name fronter;    location / {        root /usr/share/nginx/html/fronter;        index index.html;        try_files $uri $uri/ /index.html;
   }
}server {    listen 80;    server_name backer;    location / {        root /usr/share/nginx/html/backer;        index index.html;        try_files $uri $uri/ /index.html;
   }
}

在上面的配置中,我们创建了两个Nginx server块,分别代表前端项目和后端项目。fronter和backer是分别对应两个项目的域名或者子域名。/usr/share/nginx/html/fronter和/usr/share/nginx/html/backer 是两个项目的静态文件所在的路径。

运行Nginx容器并将配置文件挂载到容器内部。首先,使用下面的命令创建一个Nginx容器:bash复制代码docker run -d -p 80:80 --name my-nginx -v /path/to/vue.conf:/etc/nginx/conf.d/default.conf -v /path/to/fronter/dist:/usr/share/nginx/html/fronter -v /path/to/backer/dist:/usr/share/nginx/html/backer nginx

请将 /path/to/vue.conf 替换为保存了配置文件的路径,/path/to/fronter/dist 和 /path/to/backer/dist 分别为两个构建成功的Vue项目的dist文件夹路径。

上述命令中,我们使用了 -v 参数来将本地的配置文件和两个项目的静态文件目录挂载到了容器内部对应的路径。

确保Docker宿主机的80端口没有被占用。如果80端口已被占用,可以修改 -p 参数指定将容器的80端口映射到宿主机的其他端口。

运行了上述命令后,你的两个Vue项目将会被分别部署在 fronter 和 backer 两个域名下。你可以在浏览器中输入对应的域名来访问项目。

注意:在运行以上命令之前,请确保你已正确安装了Docker,并具备相应的权限。


在线咨询
咨询电话

客服微信