nginx配置

 使用vue脚手架打包的dist文件夹，尝试用nginx部署

参考资料（了解一点原理，配置起来会顺手些）：

nginx中try_files $uri $uri/ /index.html的作用 $uri代表什么

nginx常用命令

Nginx 的 sites-available 和 sites-enbled 的区别

nginx前端配置、后端配置、前后端分离配置、https支持（ssl配置）、负载均衡配置、nginx location详解_前后端配置与nginx

如何在 Ubuntu 22.04 上安装、配置、使用 Nginx？

1.配置server

我们一般都是配置server项（被称作“虚拟主机”）

nginx启动时加载 /etc/nginx/nginx.conf 文件，作为配置。

而nginx.conf中有event{}和http{}两部分。

server项在http{}中，默认不是直接给出的。

而是通过加载外部的文件。

event{
        *************省略*************
}

http {

        ##
        # Basic Settings
        ##

        *************省略*************

        ##
        # SSL Settings
        ##

        *************省略*************

        ##
        # Logging Settings
        ##

        *************省略*************

        ##
        # Gzip Settings
        ##

        *************省略*************
        ##
        # Virtual Host Configs
        ##

          include /etc/nginx/conf.d/*.conf;
          include /etc/nginx/sites-enabled/*;
}

在外部文件中，只要写server项就好了。

根据上面的Include，可以得知，只要把server配置文件放在sites-enabled文件夹下就好了

####代码段001###

server {
	listen       80;
    server_name  域名; #例如:map.venny.cn;
    
    # 前端匹配
 	location / {
  				proxy_set_header Host $host;
                root /web/front;
                index /index.html;
                try_files $uri $uri/ /index.html;
    }
    
    # 后端匹配
    location  /api/ {
            proxy_set_header Host $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;
			add_header Access-Control-Allow-Methods *;
			add_header Access-Control-Allow-Origin $http_origin;
            proxy_pass http://127.0.0.1:8010/;
    }
}

关于site-enable和site-available文件夹的关系，看看文章开头的参考资料

2.关于反向代理（后端API）

我的前后端是在同一个服务器上。

根据上面的server配置

a.当浏览器访问http://map.venny.cn/时，nginx匹配了 location / ，把vue页面交给浏览器。

b.当前端提交表单时，浏览器会向http://map.venny.cn/api/update/发送POST请求

   此时，nginx匹配了 location /api ，将请求转发给运行在8081端口的后端服务器（我用的flask）

   而flask会接收到 '/update' ！

   也就是匹配 @app.route('/update', methods=['POST'])

c. 前端发起请求的方式如下（示例）

const service = axios.create({
    baseURL: 'http://map.venny.cn/api',
    timeout: 5000
   });

service.post('/update',fdata); // 点击提交按钮，发起post请求，请求url是http://map.venny.cn/api/update

d.如果是在本地调试，没有nginx中转，那么/api显然是有影响

小结：反向代理（转发）的核心在于，/api会被吞~ 掉~ 呢~ ，影响不了后端路由的路径

n.小错误

错误如下，13: permission denien

stat() "/root/www/tools/index.html" failed (13: Permission denied), client: x, server: x, request: "GET / HTTP/1.1", host: "x"

我把静态网页文件放在了用户目录下(~/www/)，导致“启动用户和工作用户不一致”

把静态网页文件放在根目录下的某个地方就行

重定向出错

一般是你的root路径写错了，检查一下。。