nginx配置
一. 搭建Http静态服务器环境
1. 安装Nginx
yum install nginx -y
2. 配置静态服务器访问地址
- 打开 Nginx 的默认配置文件 /etc/nginx/nginx.conf ，修改 Nginx 配置，将默认的
root /usr/share/nginx/html
root /data/www
- 重启
nginx -s reload
- 创建www目录
mkdir -p /data/www
- 在www目录下创建index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>第一个静态文件</title>
</head>
<body>
Hello world！
</body>
</html>
- 访问ip地址即可
二. 配置nginx.conf
主要看server的配置
# 前台展示打开的服务代理
server {
listen 80;
server_name localhost;//可以在这个地方配置域名，如果没有域名就使用localhost
location / {
root /home/blog/blog-react/build/; //这个是静态资源的目录
index index.html;
try_files $uri $uri/ @router;
autoindex on;
}
location @router{
rewrite ^.*$ /index.html last; //跳转到首页
}
location /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://47.106.136.114:3000/ ; //设置api代理
}
gzip on;
gzip_buffers 32 4k;
gzip_comp_level 6;
gzip_min_length 200;
gzip_types text/css text/xml application/javascript;
gzip_vary on;
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# HTTPS server
# 管理后台打开的服务代理
server {
listen 4444;
server_name localhost;
location / {
root /home/blog/blog-react-admin/dist/;
index index.html index.htm;
try_files $uri $uri/ @router;
autoindex on;
}
location @router{
rewrite ^.*$ /index.html last;
}
location /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://47.106.136.114:3000/ ;
}
gzip on;
gzip_buffers 32 4k;
gzip_comp_level 6;
gzip_min_length 200;
gzip_types text/css text/xml application/javascript;
gzip_vary on;
error_page 500 502 503 504 /50x.html;
}
- listen：端口
- server_name：访问ip，没有域名就写localhost
- location：匹配规则
- root：静态资源访问目录
-
try_files $uri $uri/ @router;：因为 react-router 设置的路径不是真实存在的路径。
所以这样设置是为了可以刷新还可以打到对应的路径
每次配置完nginx.conf都要使用
nginx -s reload
重启
三. 中间件处理，只显示页面路由
如果前台使用的是history路由，不可避免的会和接口混淆，我们需要加以区分。
app.use((req,res,next)=>{
if(req.url.startsWith('/user/')||req.url.startsWith('/static/')||req.url.startsWith('/cha t/')){
return next()
}
return res.sendFile(path.resolve(__dirname,'build/index.html'))
})
![访问网络共享找不到网络名的解决方案[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)