Nginx部署前后端分离服务

Posted 李建明180

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Nginx部署前后端分离服务相关的知识,希望对你有一定的参考价值。

飘过。。。

二,配置nginx

一般nginx配置文件在etc目录下

cd /etc/nginx
sudo vi nginx.conf

另,如何找nginx.conf配置文件:

sudo find /etc -name nginx.conf  //在 /etc 目录下查找 nginx.conf 配置文件

sudo locate nginx.conf  //locate 是在后台数据库中按文件名搜索 , 搜索速度比 find 更快 , 但对于刚建立的文件 , 使用该命令进行查找将会搜索不到所创建的文件 , 如果想使刚创建的文件被 locate 命令搜索到 , 可以使用 updatedb 命令 , 更新 mlocate 数据库

在前后端分离端项目里,前端的代码会被打包成为纯静态文件。使用 Nginx的目的就是让静态文件运行起服务,由于后端的接口也是分离的,直接请求可能会产生跨域问题,此时就需要Nginx转发代理后端接口

nginx配置:

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto; #启动进程
error_log /var/log/nginx/error.log; #全局错误日志
pid /run/nginx.pid; #PID文件

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024; #单个后台worker process进程的最大并发链接数 
}

http {
    gzip on; #开启gzip压缩
    gzip_min_length 1k; #设置对数据启用压缩的最少字节数
    gzip_buffers    4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 6; #设置数据的压缩等级,等级为1-9,压缩比从小到大
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; #设置需要压缩的数据格式
    gzip_vary on;

    #虚拟主机配置
    server {
        listen       80;< 大专栏  Nginx部署前后端分离服务/span>
        server_name  mark.binlive.cn;
        root /home/spa-project/dist; #定义服务器的默认网站根目录位置
        index index.html; #定义index页面
        error_page    404         /index.html; #将404错误页面重定向到index.html可以解决history模式访问不到页面问题
        location ^~ /api/{
            proxy_pass http://127.0.0.1:7000;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade"; 
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
        }
        location ^~ /auth/{
            proxy_pass http://127.0.0.1:7000;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade"; 
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
        }
    }    
}

起到的作用有

  • 将前端代码打包后的dist文件放入指定服务目录

  • 将服务目录指定到spa-project/dist目录下即可代理静态服务

  • 配置里开启了gzip压缩,可以很大程度上减小文件体积大小

  • 将404错误页面重定向到index.html,可以解决前端history路由模式由于刷新页面访问不到服务出现404的问题

  • location为代理接口,可以转发代理后端的请求接口域名或者ip,即可解决接口跨域问题

三,启动Nginx服务

nginx -t  //测试Nginx的配置是否正确
nginx  //在配置文件正确的情况下即可启动nginx服务
nginx -s reload

四,问题

在执行 nginx -t 时出现如下了报错:

nginx: [emerg] getpwnam("nginx") failed in /etc/nginx/nginx.conf:1
nginx: configuration file /etc/nginx/nginx.conf test failed

谷歌得到解答,将 user nginx; 替换成 user nobody nogroup; 然后再次执行 nginx -t 就没有报错了。

END

Thanks!

https://segmentfault.com/a/1190000014972747

https://serverfault.com/questions/581145/getpwnamwww-failed-in-etc-nginx-nginx-conf

https://blog.csdn.net/tojohnonly/article/details/70160388

以上是关于Nginx部署前后端分离服务的主要内容,如果未能解决你的问题,请参考以下文章

无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离

使用 Nginx 部署前后端分离项目,解决跨域问题

将前后端分离项目部署至远程服务器

vue 前后端分离nginx部署

教你在 centos 中配置 nginx 实现前后端分离

若依配置教程若依前后端分离版部署到服务器Nginx(Windows版)