服务器上线全攻略（二）——搭建nginx

逃离我推掉我的手 2021-10-18 06:52 265阅读 0赞

# 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`

*  创建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'))
        })