利用docker-compsoe部署前后端分离的项目方法
说在前面
我们都知道，docker可以实现很简便的部署环境。现在我们有一个前后端分离的项目，前端基于Vue开发、利用Webpakc打包为dist文件夹。后端则是一个Node.js服务，提供API接口，前端和后端是分离的。所以我们肯定是前端项目一个container,后台项目也是一个container。那么如果是在生产环境，就会产生跨域问题。前端的请求要反向代理到后台。大家肯定首先想到的就是使用Nginx设置 proxy_pass。是的没有错。那么我们有了这些想法。我们如何通过 docker-compose来实现呢？
开始动手
其实我也是才开始了解docker的。所以有很多不明白的地方，例如在docker里面，是通过image生成一个container,那么这个container，就可以当作是一个独立的系统，这个系统也就有自己独立的端口。那么就像我们刚刚那样的需求，假设我们的前端在 container1里面暴露80端口，同时映射到宿主机的80端口，后端在 container2里面暴露3000端口，同时映射到宿主机的3000端口。那我们反向代理请求的时候，是通过宿主机来反向代理呢，还是通过container来实现呢？我在网上查阅并学习了很多其他大佬的文章，还有官网的文档。发现直接通过container就可以实现这种需求。为什么呢？因为docker-compose，会将所有的container构建在同一网络下，我们要找其他container，我们只需通过docker-compose里面的 servicename即可找到。下面先来看看我们的目录:
vueMusic ├─.git ├─.gitignore ├─LICENSE ├─README.md ├─babel.config.js ├─dist ├─docker-compose.yml ├─docs ├─nginx.conf ├─package-lock.json ├─package.json ├─public ├─server ├─src └─vue.config.js
dist是我们的前端项目，server是我们的后端项目。下面再来看看我们的 docker-compose.yml:
version:'3' services: music-web:#前端项目的servicename container_name:'music-web-container'#容器名称 image:nginx#指定镜像 restart:always ports: -80:80 volumes: -./nginx.conf:/etc/nginx/nginx.conf#挂载nginx配置 -./dist:/usr/share/nginx/html/#挂载项目 depends_on: -music-server music-server:#后端项目的servicename container_name:'music-server-container' build:./server#根据server目录下面的Dockerfile构建镜像 restart:always expose: -3000
可以看见，我们通过 volumes属性将宿主机的 nginx.conf挂载到容器内的nginx配置文件，用来覆盖原有的配置文件,同时也将 dist挂载到容器内。我们将前端项目的容器暴露并映射给宿主机的80端口，我们将后端项目的容器暴露3000端口。那么我们在哪里实现反向代理请求呢？请看nginx.conf:
#usernobody;
worker_processes1;
events{
worker_connections1024;
}
http{
includemime.types;
default_typeapplication/octet-stream;
sendfileon;
#tcp_nopushon;
#keepalive_timeout0;
keepalive_timeout65;
#gzipon;
gzipon;
gzip_min_length5k;
gzip_buffers416k;
#gzip_http_version1.0;
gzip_comp_level3;
gzip_typestext/plainapplication/javascriptapplication/x-javascripttext/cssapplication/xmltext/javascriptapplication/x-httpd-phpimage/jpegimage/gifimage/png;
gzip_varyon;
server{
listen80;
server_namewww.xieyezi.com;
#音乐app项目
location/{
indexindex.htmlindex.htm;#添加属性。
root/usr/share/nginx/html;#站点目录
}
#音乐app项目设置代理转发
location/api/{
proxy_passhttp://music-server:3000/;
}
error_page500502503504/50x.html;
location=/50x.html{
root/usr/share/nginx/html;
}
}
}
可以看上面的 proxy_passhttp://music-server:3000/;。其中 music-server是我们后端项目的服务名，我们通过服务名来找到这个容器，这样就实现了反向代理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。