服务器上线全攻略（二）——搭建nginx-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44003190/article/details/99288576

nginx配置

一. 搭建Http静态服务器环境

1. 安装Nginx

yum install nginx -y

2. 配置静态服务器访问地址

打开 Nginx 的默认配置文件 /etc/nginx/nginx.conf ，修改 Nginx 配置，将默认的 root /usr/share/nginx/html; 修改为:root /data/www，这样www就作为静态资源目录，和以前的集成服务器wamp，xampp都是一个道理
重启

nginx -s reload

mkdir -p /data/www

<!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'))
    })