我有一个小项目,我们假定它叫 up,是用 PHP 写的私人图床,部署在服务器上,域名是 up.meathill.com。因为是 PHP,不需要编译,直接 `git clone` 仓库然后配置 nginx 指过去就好。
后来想做一个在线预览的功能,是个单页应用,也放在这个仓库里,目录是 `up/fe`,项目用 Vue + Webpack 来做,源码放在 `up/fe/src`,生成的文件放在 `up/fe/dist`。
这样一来,我就需要在原本的 nginx 里配置一个虚拟目录 `/admin`,指向生成的文件。预览的文件路径就是 `/admin/${file}`,所以我还要把未命中的文件重定向到 `index.html
经过反复摸索,最终的配置如下:
{
location / {
# 未直接命中的请求都交给根目录里的 index.php 处理
try_files $uri $uri/ /index.php$args;
}
# 默认的 nginx 1.14 + PHP 7.1 + php-fpm 配置
location ~ .php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.1-fpm.sock;
}
# /admin 的访问指向编译后的前端资源
location /admin {
alias /mnt/www/uploader/fe/dist;
}
# 直接访问的地址解析,正则其实不必要
location ~ "/admin/(?<page>d{8}-d{6})$" {
alias /mnt/www/uploader/fe/dist/index.html;
# 这里的定义很重要,默认是 application/octet-stream 会启动下载
default_type text/html;
}
# 把不希望看到的请求屏蔽掉
location /fe {
return 404;
}
}
欢迎吐槽,共同进步