使用Docker部署多个vue(前端/nginx)项目

环境准备

本教程适合Java开发人员，尤其是那些既要开发后端又要开发前端的人员使用，对于小型项目一样适用。

首先你的服务器要安装docker，你的宿主机需要再安装一个nginx，用来转发。

（1）下载nginx最新版

docker pull nginx

（2）编写Dockerfile

FROM nginx:latest
COPY dist/ /usr/share/nginx/html/

（3）修改宿主机的nginx配置文件

我这里是新开了个端口，没有使用80端口，因为我的80端口是对外服务的。

server {
    listen       9090;
    server_name  localhost;

	location /match/ {
		proxy_pass http://172.19.0.2/;
	}

	location /patent/ {
		proxy_pass http://172.19.0.3/;
	}

	location /openadmin/ {
		proxy_pass http://172.19.0.4/;
	}
}

项目配置

（1）vue项目配置

一定要记住！ 需要添加发布路径，请查看博客如何在vue项目添加发布路径

（2）运行docker

1. 添加指定ip
2. 添加时区

使用固定ip对我们部署项目很有必要！首先我们需要创建一个网络。

列出所有网络

docker network ls

创建自定义网络mynet

docker network create --driver bridge mynet
docker network list
docker network inspect mynet

提示错误

user specified IP address is supported only when connecting to networks with user configured subnets

重新新建网络

docker network rm mynet
docker network create --driver bridge --subnet 172.19.0.0/24 --gateway 172.19.0.1 mynet

运行参数需要添加

--ip 172.19.0.2 --network=mynet -e TZ="Asia/Shanghai"

查看所有docker的ip的脚本

docker inspect --format='{{.Name}} - {{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' $(docker ps -aq)

运行后你可以使用宿主机的ip加端口再加代理路径即可访问，这样加快了开发和访问速度。