通过nginx反向代理vue项目实践分享

需求场景：后端需要访问前端本地服务 进行开发调试

痛点：前端同学电脑睡眠或关机之后 本地服务无法继续被访问

解决方案：

• 思路：将前端服务打包之后 上传到测试服务器 配置测试服务器上的nginx 实现服务持续被访问
• 实践：
  • 测试服务器地址： 172.100.101.137 系统：centos7
  • 本地package.json中添加命令 ："build_dev": "node build/build.js development"
  • 执行打包命令：npm run build_dev
  • 将打包好的文件上传服务器：scp -r dist/ [email protected]:/root
  • 配置服务器上nginx.conf：
    1. 改user nginx 为 user root（服务器账号名）
    2. 在server下设置：

            location / {

            root /root/dist; （静态文件目录地址）

            index index.html;

                    }

            location /api/ {   （这里有坑 一定要/api/ 不能是/api）

                        proxy_pass http://172.100.113.34:3904/;

            proxy_pass_request_headers on;

                proxy_set_header Connection "";

                client_max_body_size    30m;

                client_body_buffer_size 128k;

                proxy_redirect off;

                proxy_connect_timeout   300;

                proxy_send_timeout      300;

                proxy_read_timeout      300;

                proxy_buffer_size       4k;

                proxy_buffers           4 32k;

                proxy_busy_buffers_size 64k;

                proxy_temp_file_write_size 64k;

                proxy_next_upstream http_502 http_504 error invalid_header;

                    }

    3.  配置之后重启服务器的nginx 打开http://172.100.101.137/  就可以看到页面了