记:怎么部署前后端分离项目 |
您所在的位置:网站首页 › vuedjango部署云服务器 › 记:怎么部署前后端分离项目 |
前言
前后端分离,是指前端html页面与后端开发独立、运行(部署)独立。 物料准备部署物料 编译好的前端代码 打包好的后端java程序 稳定版的 Ngnix 前往下载 图1:物料清单 安装Ngnix(windows)将下载好的nginx-1.22.1.zip 解压进行双击 nginx.exe 进行安装: 图2:安装Nginx验证Nginx 安装,访问:http://localhost 图2:安装Nginx表示安装成功,在Windows环境安装,需要注意,安装目录不能有中文。 部署应用发布规划 通过 example.org 能够访问到页面 启动2个后端节点做负载均衡 配置代理为了后面更好的维护代理的配置文件,在 conf 目录下新建一个conf.d的目录,用于存放后续扩展的配置。然后通过 include conf.d/*.conf 引入到nginx.conf主配置文件中。 图3:Nginx配置目录 图4:引入子配置文件目录注:includ 子配置文件的路径是相对路径,基于 conf目录;当然也可以用绝对路径。 配置前端静态代理 创建conf.d/example.conf配置文件,并配置前端代理。 server { listen 80; server_name example.org; location / { # 存放静态资源的路径,此处是相对路径,以 Nginx 根路径为基础,也可以用绝对路径 root www/html; } } 图5:静态资源存放路径配置后端反向代理 首先,跟前端开发进行约定,通过/api前缀访问后端接口,在Nginx就可以通过/api的代理路径,反向代理到后端接口。同时,按照我们的发布规划,后端需要做负载。 去到conf.d/example.conf配置文件中,配置后端的方向代理,并做负载。 upstream backend { # 因为在本地部署,所以是localhost,可以是不同的服务器IP或者域名 server localhost:8080; server localhost:8081; } server { listen 80; server_name example.org; location / { # 存放静态资源的路径,此处是相对路径,以 Nginx 根路径为基础,也可以用绝对路径 root www/html; } location /api/ { proxy_pass http://backend/; } }提示:完成上面配置之后,确保后端应用程序启动的2个节点的端口是 8080 和8081。 更新Nginx 配置,使其生效: ./nginx.exe -s reload 验证部署添加 hosts 127.0.0.1 example.org浏览器输入:http://example.org 访问 图6:部署验证至此,项目部署完成。 总结 Nginx 安装目录不能有中文 Nginx 静态目录的相对路径是基于Nginx安装的根目录 Nginx 子配置文件的相对路径是基于conf 目录 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |