这篇文章主要介绍如何利用docker-compsoe部署前后端分离的项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>开始动手强>
其实我也是才开始了解码头工人的,所以有很多不明白的地方,例如在码头工人里面,是通过形象生成一个容器,那么这个容器,就可以当作是一个独立的系统,这个系统也就有自己独立的端口。那么就像我们刚刚那样的需求,假设我们的前端在,container1里面暴露80端口,同时映射到宿主机的80端口,后端在,container2里面暴露3000端口,同时映射到宿主机的3000端口。那我们反向代理请求的时候,是通过宿主机来反向代理呢,还是通过容器来实现呢?我在网上查阅并学习了很多其他大佬的文章,还有官网的文档。发现直接通过容器就可以实现这种需求。为什么呢?因为docker-compose,会将所有的容器构建在同一网络下,我们要找其他容器,我们只需通过docker-compose里面的,服务名称即可找到。下面先来看看我们的目录:
vueMusic ,├─. ,├─.gitignore ,├─许可证 ,├─README.md ,├─babel.config.js ,├─经销 ,├─docker-compose.yml ,├─文档 ,├─nginx.conf ,├─package-lock.json ,├─package.json ,├─公众 ,├─服务器 ,├─src ,└─vue.config。js
dist是我们的前端项目,服务器是我们的后端项目。下面再来看看我们的,docker-compose。yml:
版本:,& # 39;3 & # 39; ,服务: ,music-web: #前端项目的service 名字 ,,,container_name: & # 39; music-web-container& # 39;, #容器名称 ,,,图片:nginx #指定镜像 ,才能重启:总是 ,,港口: ,,今天早上,80:80 ,,,卷: ,,安康;。/nginx.conf:/etc/nginx/nginx.conf #挂载nginx配置 ,,安康;。/dist:/usr/share/nginx/html/,, #挂载项目 ,,depends_on: ,,今天早上,music-server ,music-server:, #后端项目的service 名字 ,,,container_name: & # 39; music-server-container& # 39; ,才能构建:,。/server #根据服务器目录下面的Dockerfile构建镜像 ,才能重启:总是 ,才能公开: ,,安康;3000
可以看见,我们通过,卷属性将宿主机的,nginx。参看挂载到容器内的nginx配置文件,用来覆盖原有的配置文件,同时也将,dist挂载到容器内。我们将前端项目的容器暴露并映射给宿主机的80端口,我们将后端项目的容器暴露3000端口。那么我们在哪里实现反向代理请求呢?请看nginx。相依:
# user 没有人; ,worker_processes 1; ,events { ,,worker_connections 1024; ,} ,http { ,,include ,,, mime.types; ,,default_type 应用程序/八进制; ,,sendfile ,,,; ,,# tcp_nopush ,,; ,,# keepalive_timeout 0; ,,keepalive_timeout 65; ,,# gzip ; ,,gzip ; ,,gzip_min_length 5 k; ,,gzip_buffers ,, 4, 16 k; ,,# gzip_http_version 1.0; ,,gzip_comp_level 3; ,,gzip_types 文本/plain 应用程序/javascript 应用程序/x-javascript 文本/css 应用程序/xml 文本/javascript 应用程序/x-httpd-php 图像/jpeg 图像/gif 图像/png; ,,gzip_vary ; ,,server { ,,,,listen 80; ,,,,server_name www.xieyezi.com; ,,,,#音乐应用项目 ,,,,的位置/,{ ,,,,index index.html 你可以,,,#添加属性只 ,,,,root /usr/share/nginx/html;,, #站点目录 ,,,,} ,,,,#音乐应用项目设置代理转发 ,,,,的位置/api/, { ,,,,proxy_pass http://music-server: 3000/; ,,,,} ,,,,error_page , 500, 502, 503, 504,/50 x.html; ,,,,的位置=,/50 x.html { ,,,,,,root ,/usr/share/nginx/html; ,,,,} ,,} 以前,}>可以看上面的,proxy_pass http://music-server: 3000/;,其中,music-server是我们后端项目的服务名,我们通过服务名来找到这个容器,这样就实现了反向代理。
以上是“如何利用docker-compsoe部署前后端分离的项目”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
如何利用docker-compsoe部署前后端分离的项目