使用docker for windows创建的nginx来请求windows中启动的web应用

以你之姓@ 2023-06-29 11:00 4阅读 0赞

### 目录 ###

*  启动web应用
 *  拉取nginx镜像
 *  创建nginx挂载目录
 *  创建nginx容器
 *  部署前端到nginx中

# 启动web应用 #

首先在windows上把应用启动起来，我的应用是前后端分离的，前端是vue应用，后端是spring cloud项目。  
使用yarn run serve启动前端：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70]  
直接在IDEA中启动项目：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 1]  
使用浏览器直接访问http://localhost:8000成功，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 2]  
这里的登录验证码就是前端调用后端接口获取的，说明前端和后端已经调通了，下面我在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 :挂载应用文件  
![在这里插入图片描述][20200112202537428.png]  
在conf目录下创建了nginx.conf，该文件我是先在docker中创建了一个nginx容器，然后从容器中拷贝过来的，我没有对它进行什么改动，然后还有一个custom目录，用来存放自定义的一些配置文件  
![在这里插入图片描述][20200112202609216.png]  
在custom目录下，创建了一个gateway.conf配置文件，该文件主要是配置后端请求的转发  
![在这里插入图片描述][20200112202621170.png]  
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。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 3]  
我们可以在docker中创建一个nginx，查看一下它的IP，发现是172.17.0.4，因为我创建了四个容器，它的IP就是172.17.0.1到172.17.0.4。如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 4]  
然后问题来了，就是我在windows上ping 172.17.0.4，发现是ping不通的，这是因为这里有这么个关系，windows和hyper-V上创建的虚拟机之间是通的，然后hyper-V上创建的虚拟机和docker 中创建的容器之间是通的，但windows和docker中创建的容器之间是不通的。如果我要使用nginx转发请求到windows上启动着的后端应用，必然是需要ping的通的，所以我在windows上创建了一个路由：  
使用管理员打开powerShell  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 5]  
在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/目录），如图示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 6]  
我们重新启动一下nginx容器，命令如下：

docker restart nginx

最后，我们在windows上访问http://localhost:8002，发现也是可以访问了，验证码也显示出来了，说明能够通过nginx容器访问到windows上的后端接口了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200112202908126.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200112202957192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200112203112707.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu,size_16,color_FFFFFF,t_70
[20200112202537428.png]: https://img-blog.csdnimg.cn/20200112202537428.png
[20200112202609216.png]: https://img-blog.csdnimg.cn/20200112202609216.png
[20200112202621170.png]: https://img-blog.csdnimg.cn/20200112202621170.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200112205002491.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200112205435845.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200112210009950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200112211747133.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200112212216770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhb3l1bmNu,size_16,color_FFFFFF,t_70