nginx 前后端项目

偏执的太偏执、 2021-09-04 03:03 407阅读 0赞

**实现前后端分离，可以让前后端独立开发、独立部署、独立单测，双方通过JSON进行数据交互。  
对于前端开发人员来说，不用每次调试都需要启动运行环境；对于后端开发人员来说 ，也不用在需要往JSP页面注入数据。  
通过nginx来部署前端代码，可以帮助前端实现以下基本需求：**

*  **保证系统安装nginx的前提条件下**
 *  **将前端代码打包上传至服务器**

![20201225150510974.png][]

*  **后端代码打包上传至服务器，端口指定8080**

![20201225150411983.png][]

*  **编辑nginx的配置文件nginx.conf**

![2020122515033237.png][]

location / {
        root   /home/admin/test/dist;#前端代码绝对路径
        index  index.html index.htm;
    }
    
    location /prod-api/{ #/prod-api为访问后端服务统一前缀
        proxy_pass http://127.0.0.1:8080/; #后端服务地址
        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;
        client_max_body_size    100m;
    }

*  **访问测试**
 *  **nginx开启gzip压缩：网站开启gzip压缩，不仅能够节省带宽，也能够快速响应用户的访问**
    
        #启用或禁用gzipping响应。
        gzip on;
        #设置用于压缩响应的缓冲区number和size。默认情况下，缓冲区大小等于一个内存页面。这是4K或8K，具体取决于平台。
        gzip_static on;
        #启用或禁用gzipping响应。
        gzip_buffers 4 16k;
        #设置level响应的gzip压缩。可接受的值范围为1到9。
        gzip_comp_level 5;
        #置将被gzip压缩的响应的最小长度。长度仅由“Content-Length”响应头字段确定。
        gzip_min_length 100;
        #匹配MIME类型进行压缩，text/html默认被压缩。        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        				  '$status $body_bytes_sent "$http_referer" '
        				  '"$http_user_agent" "$http_x_forwarded_for"';
        #引入/usr/local/nginx/conf.d下面的所有配置文件
        include /usr/local/nginx/conf.d/*.conf;

## **问题描述** ##

1.  **403 Forbidden问题**
    
        查看nginx日志: cat /var/log/nginx/error.log
    
    **通过日志可以发现是没有权限，我们看下nginx的配置文件，可以看到箭头所指的位置是nginx用户，我们修改成root用户就可以啦！**

![20201225145844330.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDQ3MDQ5Nw_size_16_color_FFFFFF_t_70][]

[20201225150510974.png]: /images/20210813/143c21945a224e2e8f0a25b253cc37bc.png
[20201225150411983.png]: /images/20210813/0e460fad88854ea280e3d193fc170835.png
[2020122515033237.png]: /images/20210813/6fe818a262774f74b629ae2784e78580.png
[20201225145844330.png]: https://img-blog.csdnimg.cn/20201225145844330.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDQ3MDQ5Nw_size_16_color_FFFFFF_t_70]: /images/20210813/13198b5279bf424882792e164068c7a2.png