记:使用Nginx 部署前后端分离项目
前言
前后端分离,是指前端html页面与后端开发独立、运行(部署)独立。
物料准备
部署物料
- 编译好的前端代码
- 打包好的后端java程序
- 稳定版的 Ngnix 前往下载
安装Ngnix(windows)
将下载好的nginx-1.22.1.zip 解压进行双击 nginx.exe 进行安装:
验证Nginx 安装,访问:http://localhost
表示安装成功,在Windows环境安装,需要注意,安装目录不能有中文。
部署应用
发布规划
- 通过 example.org 能够访问到页面
- 启动2个后端节点做负载均衡
配置代理
为了后面更好的维护代理的配置文件,在 conf 目录下新建一个conf.d的目录,用于存放后续扩展的配置。然后通过 include conf.d/*.conf 引入到nginx.conf主配置文件中。
注:includ 子配置文件的路径是相对路径,基于 conf目录;当然也可以用绝对路径。
配置前端静态代理
创建conf.d/example.conf配置文件,并配置前端代理。
server {
listen 80;
server_name example.org;
location / {
# 存放静态资源的路径,此处是相对路径,以 Nginx 根路径为基础,也可以用绝对路径
root www/html;
}
}
配置后端反向代理
首先,跟前端开发进行约定,通过/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 访问
至此,项目部署完成。
总结
- Nginx 安装目录不能有中文
- Nginx 静态目录的相对路径是基于Nginx安装的根目录
- Nginx 子配置文件的相对路径是基于conf 目录
请先 后发表评论~