新建一个nginx server
在nginx的配置文件中新建一个server监听前端部署的端口
server
{
#监听端口
listen 80;
server_name 网站名称;
}
使用Nginx代理前端页面
然后在server中添加一个location,就是把访问路径指向前端项目打包后的地址
location / {
root 前端项目打包后的地址;
index index.html index.htm;
}
nginx请求转发到后端
在部署前后端分离项目时,通常都要使用nginx把前端的请求转发到后端的接口上去,这就要配置nginx的proxy_pass功能。
# 转发请求到后端
location /api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_redirect off;
# proxy_set_header X-NginX-Proxy true;
proxy_pass 后端接口地址;
}
代理转发需要注意的事儿
在nginx中配置proxy_pass代理转发时,如果在proxy_pass后面的url加/,表示绝对根路径;如果没有/,表示相对路径,把匹配的路径部分也给代理走。
第一种
代理至地址,proxy_pass 后面没有 “ / ”
location /api {
proxy_pass http://localhost:9898;
}
- 访问:http://localhost/api/xxx
- 转至:http://localhost:9898/xxx
第二种
代理至地址,proxy_pass 后面有 “ / ”
location /api {
proxy_pass http://localhost:9898/;
}
- 访问:http://localhost/api/xxx
- 转至:http://localhost:9898/api/xxx
第三种
代理本地静态页面
location /page {
alias /usr/share/nginx/html/page/;
index index.html index.html;
}
server其他的配置
#一键申请SSL证书验证目录相关设置
location ~ \.well-known{
allow all;
}
#代理网站图标,可以注释
location = /favicon.ico {
root /**/assets/;
}
#禁止访问的文件或目录
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
{
return 404;
}
#访问日志
access_log /**/日志名;
#错误日志
error_log /**/日志名;