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;
}