nginx 多前端项目部署

多前端项目部署方式有很多，这里只说同一个 server下的部署。

    server {
        listen       80;
        server_name  localhost;
        #access_log  logs/host.access.log  main;
        location / {
            root   html/giant;
            index  index.html index.htm;
        }
        location /admin {
            alias /home/nginx-1.18.0/html/admin/;
            try_files $uri $uri/ /admin/index.html;
        }
        location /api {
            rewrite  ^/api/(.*)$ /$1 break;
            proxy_pass   http://192.168.200.67:8888;
        }
    }

描述

这里我第一个前端项目是公司官网，第二个项目是vue项目。我的vue输出文件夹的名称为admin，和 location /admin 保持一致，具体原因可以见 try_files 讲解，如果不保持一直，刷新会404。

root 和 alias的区别

在于nginx如何解释location后面的uri，这会使两者分别以不同的方式将请求映射到服务器文件上。
root的处理结果是：root路径 ＋ location路径
alias的处理结果是：使用alias路径替换location路径
alias是一个目录别名的定义，root则是最上层目录的定义。

# 如果一个请求的URI是 http://127.0.0.1:8080/t/a.html 时，web服务器将会返回服务器上的 html/giant/t/a.html的文件。
location /t {
    root html/giant;
}

# 如果一个请求的URI是 http://127.0.0.1:8080/t/a.html 时，web服务器将会返回服务器上的 /home/nginx-1.18.0/html/admin/a.html的文件。
# 注意这里是 /admin/a.html，因为alias会把location后面配置的路径丢弃掉，把当前匹配到的目录指向到指定的目录。
location ^~ /t/ {
    alias /home/nginx-1.18.0/html/admin/;
}

try_files 讲解

try_files的语法解释

• 按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理
• 查找路径是按照给定的root或alias为根路径来查找的
• 如果给出的file都没有匹配到，则重新请求最后一个参数给定的uri，就是新的location匹配
• 如果是格式2，如果最后一个参数是 = 404 ，若给出的file都没有匹配到，则最后返回404的响应码

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

当用户请求 http://localhost/example 时，这里的 $uri (第一个) 就是 /example。 
try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/example（其中 $root 是项目代码安装目录）的文件，就直接把这个文件的内容发送给用户。 
显然，目录中没有叫 example 的文件。然后就看 $uri/，增加了一个 /，也就是看有没有名为 /$root/example/ 的目录。 
又找不到，就会 fall back 到 try_files 的最后一个选项 /index.php，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.php。

rewrite 详解

为什么要使用 rewrite，因为在上面示例中，代理会带着 /api 一起发向 service服务，导致调用api接口异常，所以我们要去掉 /api 这个前缀，如代理请求的是 http://127.0.0.1:8080/api/user/login，实际我们要的是 http://127.0.0.1:8080/user/login
针对 rewrite 的方式还有更好的解决方案 nginx location 中 proxy_pass 末尾带/ 和 不带/