目录
- 启动web应用
- 拉取nginx镜像
- 创建nginx挂载目录
- 创建nginx容器
- 部署前端到nginx中
启动web应用
首先在windows上把应用启动起来，我的应用是前后端分离的，前端是vue应用，后端是spring cloud项目。
使用yarn run serve启动前端：
直接在IDEA中启动项目：
使用浏览器直接访问http://localhost:8000成功，如下：
这里的登录验证码就是前端调用后端接口获取的，说明前端和后端已经调通了，下面我在docker 中创建一个nginx容器，我这里通过调用nginx来访问该项目，那么我把前端打包部署到nginx中，前端调用后端接口通过nginx来转发请求，将来如果后端部署成集群模式，还可以使用nginx的负载均衡功能。
拉取nginx镜像
我这里使用的的docker desktop for windows，它可以在windows操作系统上使用docker，底层就是利用hyper-V虚拟机技术创建了一个linux虚拟机，然后在虚拟机上安装了docker，接下来打开docker desktop，执行如下命令，拉取nginx镜像
docker pull nginx创建nginx挂载目录
在windows的目录下创建配置文件、日志文件及应用的挂载目录，
主要是方便查看、修改及部署
conf :挂载nginx的配置文件
logs :挂载nginx的错误日志及访问日志
www :挂载应用文件
在conf目录下创建了nginx.conf，该文件我是先在docker中创建了一个nginx容器，然后从容器中拷贝过来的，我没有对它进行什么改动，然后还有一个custom目录，用来存放自定义的一些配置文件
在custom目录下，创建了一个gateway.conf配置文件，该文件主要是配置后端请求的转发
gateway.conf内容如下：
server {
listen 80 default_server;
server_name localhost;
root /usr/share/nginx/html;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
index index.html index.htm;
#这里就是后端api接口的代理配置
location ^~ /api/ {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
proxy_pass http://10.0.75.1:9527/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}上面配置中的proxy_pass配置的IP是10.0.75.1这个是因为docker desktop中配置了subnet为10.0.75.0的关系，如下图，它会在windows中分配一个IP地址为10.0.75.1，然后hyper-V上创建的虚拟机分配一个IP为10.0.75.2，然后该虚拟机中创建的容器会使用另一个网段172.17.0.0。
我们可以在docker中创建一个nginx，查看一下它的IP，发现是172.17.0.4，因为我创建了四个容器，它的IP就是172.17.0.1到172.17.0.4。如下图所示：
然后问题来了，就是我在windows上ping 172.17.0.4，发现是ping不通的，这是因为这里有这么个关系，windows和hyper-V上创建的虚拟机之间是通的，然后hyper-V上创建的虚拟机和docker 中创建的容器之间是通的，但windows和docker中创建的容器之间是不通的。如果我要使用nginx转发请求到windows上启动着的后端应用，必然是需要ping的通的，所以我在windows上创建了一个路由：
使用管理员打开powerShell
在powershell中执行如下命令，添加一段路由：
route add 172.17.0.0 MASK 255.255.255.0 10.0.75.2执行之后 ，在windows上ping 172.17.0.4，就能够ping通了
意思是windows通过10.0.75.2就可以连到172.17.0.0网段了
10.0.75.2就是hyper-V上创建的虚拟机,关系如下：
windows(10.0.75.1) <-----> hyper-V虚拟机(10.0.75.2) <-----> nginx容器(172.17.0.4)
创建nginx容器
我们重新创建一个nginx容器，把该挂载的都挂载上，把之前的nginx容器也都可以删除掉了。
创建容器命令如下：
docker run --name nginx -p 8002:80 -v /e/docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /e/docker/nginx/conf/custom:/etc/nginx/conf.d/ -v /e/docker/nginx/logs:/var/log/nginx/ -v /e/docker/nginx/www:/usr/share/nginx/html/ -d nginx注意，我这里使用8002端口映射到了nginx的80端口
部署前端到nginx中
使用yarn run build命令就可以编译打包vue项目，把生成的dist目录下的文件拷贝到www目录下（该www已经挂载到nginx容器的/usr/share/nginx/html/目录），如图示：
我们重新启动一下nginx容器，命令如下：
docker restart nginx最后，我们在windows上访问http://localhost:8002，发现也是可以访问了，验证码也显示出来了，说明能够通过nginx容器访问到windows上的后端接口了。
