道招

spa前端 + wordpress后台项目配置nginx实战和静态资源配置难点

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

spa前端 + wordpress后台项目配置nginx实战和静态资源配置难点

现在将wordpress作为后台项目,自己用vue或者react做自己的前端的项目越来越多,虽然作为同一个对外的项目,实际上是有两个项目组成,那怎么去分配这两个项目的路由呢?哪部分走spa,哪部分走wordpress呢?

链接分析

.php链接

wordpress是一个php项目,所有php的路由必然需要交由wordpress(php)处理

location ~* \.php$ {
        root           /home/website/wordpress;
        fastcgi_pass   unix:/usr/local/php/var/run/www.sock;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;

        index index.html index.php;
        if (-f $request_filename/index.html){
            rewrite (.*) $1/index.html break;
        }
        if (-f $request_filename/index.php){
            rewrite (.*) $1/index.php;
        }
        if (!-f $request_filename){
            rewrite (.*) /index.php;
        }
 }
内容相关链接

这部分是spa项目实现的核心部分了,一般是首页,列表页(分页、标签、日期等),内容详情页

location ~* ^\/($|(category|tag|date|page)\/|\d+\.html$) {

        proxy_pass      http://localhost:8800;
        if ($http_user_agent ~* (SemrushBot|Semrush) ) {
            return 410;
        }
}

自己用spa实现了多少,自己最清楚,实现了的走spa路由。

虚拟链接

根据链接的来源,可以分成以下几类:

  • 自己创建的 wordpress里面还有需求虚拟链接,比如在后台添加的“页面”,类似https://abc.com/guestbook这样的,根目录下并不存在guestbook这样的文件,而是通过需要wordpress虚拟链接实现的。

    如果这部分spa也实现了的话,就需要交个spa项目,否则需要继续走wordpress

  • 插件创建的 比如sitemap,这种一般是有插件创建的,很可能spa中并未实现,那就需要走wordpress

location / {
        index index.html index.php;
        root           /home/website/wordpress;

        try_files $uri $uri/ /index.php;
}
rewrite /wp-admin$ $scheme://$host$uri/ permanent;
静态资源
  1. 如果是wordpress后台系统需要的,就继续走wordpress了,
  2. 如果是spa里面自己就需要的资源,比如首页对外公布的微信群二维码https://abc.com/wechat.png。这类资源建议放统一的文件夹内,方便在nginx里面配置,比如换成https://abc.com/res/wechat.png
  3. 必须以根路径对外的资源链接,比如一些平台里面站长认证资源,https://abc.com/baidu_verify_9T2XP6KRil.html,这里自己没法调整访问url的,在配置nginx的时候就很麻烦了,总不能一个一个设置吧。。。这个值得作为难点仔细讲一讲。

静态资源配置难点

这里我们主要将上面提到的必须以根路径对外的资源链接,主要是一些站长认证资源,因为其它能让我们自主调整访问url的,都已经归到静态资源的第2点了,对于难搞的第3点,我们可以将这些认证文件(比如baidu_verify_9T2XP6KRil.html)直接放到wordpress项目根目录,但是既然用了spa,我们一般是希望由更多的部分由spa还处理的。

我们可以让nginx先在spa的静态资源里面找,找不到了在交由wordpress处理。

# /xxx 或者 /xxx.yyy
location ~* ^\/\w+\.?\w+$ {
        root           /home/website/spa/static;
        try_files $uri @wordpress;
}

location @wordpress {
        index index.html index.php;
        root           /home/website/wordpress;
        try_files $uri $uri/ /index.php;
}

我们可以在nginx官网看看try_files的用法

Checks the existence of files in the specified order and uses the first found file for request processing; the processing is performed in the current context. The path to a file is constructed from the file parameter according to the root and alias directives. It is possible to check directory’s existence by specifying a slash at the end of a name, e.g. “$uri/”. If none of the files were found, an internal redirect to the uri specified in the last parameter is made. For example:

location /images/ {
try_files $uri /images/default.gif;
}
location = /images/default.gif {
expires 30s;
}

The last parameter can also point to a named location, as shown in examples below. Starting from version 0.7.51, the last parameter can also be a code:

location / {
try_files $uri $uri/index.html $uri.html =404;
}

Example in proxying Mongrel:

location / {
try_files /system/maintenance.html
$uri $uri/index.html $uri.html
@mongrel;
}
location @mongrel {
proxy_pass http://mongrel;
}

完整配置

# wordpress php
location ~* \.php$ {
        root           /home/website/wordpress;
        fastcgi_pass   unix:/usr/local/php/var/run/www.sock;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;

        index index.html index.php;
        if (-f $request_filename/index.html){
            rewrite (.*) $1/index.html break;
        }
        if (-f $request_filename/index.php){
            rewrite (.*) $1/index.php;
        }
        if (!-f $request_filename){
            rewrite (.*) /index.php;
        }
 }
 # spa
 location ~* ^\/($|(category|tag|date|page)\/|\d+\.html$) {

        proxy_pass      http://localhost:8800;
        if ($http_user_agent ~* (SemrushBot|Semrush) ) {
            return 410;
        }
}
# wordpress
location / {
        index index.html index.php;
        root           /home/website/wordpress;

        try_files $uri $uri/ /index.php;
}
rewrite /wp-admin$ $scheme://$host$uri/ permanent;

# /xxx 或者 /xxx.yyy
location ~* ^\/\w+\.?\w+$ {
        root           /home/website/spa/static;
        try_files $uri @wordpress;
}

location @wordpress {
        index index.html index.php;
        root           /home/website/wordpress;
        try_files $uri $uri/ /index.php;
}
更新时间:
上一篇:Google Adsense,回来了下一篇:回顾下跨域解决方案http-proxy-middleware

相关文章

WordPress项目做vue的后台管理系统

鉴于最近很多朋友想利用手上的wordpress博客来做后台系统,前端页面想使用自己更加上手的vue或者react来开发。 这个想法和我当时差不多啊,我当时就是不想继续使用自己的WordPress做前 阅读更多…

前端框架vue+wordpress做后端

目前正在利用闲暇时捯饬一下自己的博客,毕竟这么久没有维护了,wordpress是可以用restful API来获取数据的,决定前端用vue实现,目前正在尝试中,今天做了其中很小的一部分,就是博客目录 阅读更多…

wordpress上传图片失败解决方案

问题一:博客将 WordPress 升级后, 发现上传图片失败. 报错信息的大概意思是不能创建目录和上传文件, 因为上层目录没有写权限。 以下相关问题截图. 我的第一反应是修改目录的权限 阅读更多…

docker运行WordPress报MySQL server has gong away

前几天在用docker安装wordpress,之前已经安装的有mysql,准备使用--link的方式让wordpress的容器访问之前的mysql的容器,但是总是一启动在浏览器里面访问就把容器给搞挂了 阅读更多…

关注道招网公众帐号
联系博主