在网页上部署live2d

基于fghrsh/live2d_api与fghrsh/live2d_demo可自建api与托管静态文件。

目前部署在www.dogcraft.top/wfq/进行测试。

API后端服务部署方法

通过观察发现，fghrsh/live2d_api是基于PHP的开箱即用型的api服务，在一般的基于php的动态博客里一般都会有已经安装配置好了的nginx+php环境，这里只需要将nginx配置文件写好就行了。

首先将github上的repo弄到本地

git clone https://github.com/fghrsh/live2d_api.git

这个repo比较大，如果网络不好要下载好一会，可以趁下载时间搞一下静态的html与JavaScript资源。

下载完成之后，配置一下nginx

 server {
        listen          80;
    listen 443 ssl http2;
    ssl_certificate /root/key/dog.pem;
    ssl_certificate_key /root/key/dog.key;
        server_name     live2dapi.dogcraft.top; #域名
        root            /var/www/live2dapi/live2d/;  #live2d_api的路径，确保不会出现权限问题
        index           index.html index.htm index.php;
        add_header 'Access-Control-Allow-Origin' '*'; #允许跨域，这点很重要
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Content-Type';
 
        if (!-e $request_filename) {
            rewrite ^(.*)$ /index.php$1 last;
        }
 #下面是php的相关设置
        location ~ .*\.php(\/.*)*$ {
    root           /var/www/live2dapi/live2d/;
        fastcgi_pass   unix:/run/php/php7.2-fpm.sock;
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
        }
    }

需要注意的跨域问题，如果要在其他域名下使用live2d，或采用前后端分离，在nginx的配置里面要有

        add_header 'Access-Control-Allow-Origin' '*'; 
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Content-Type';

如果配置正常就可以进行下一步了。

前端html配置

通过阅读fghrsh/live2d_demo的readme.md可以通过autoload.js的方式进行使用，只需要在相关页面添加一行JavaScript即可快速部署。但经过实践直接拿下来的源代码并不能直接使用，需要做出一系列的修改。release里的可以直接拿来用，我一开始没看见……

首先将github上的repo弄到本地

git clone https://github.com/fghrsh/live2d_demo.git

这个操作就快很多了

然后配置nginx

先配置nginx是为了能够方便调试，这些文件主要都是静态文件，nginx配置很简单，不要忘了加入跨域相关的配置

server {
        listen          80;
    listen 443 ssl http2;
    ssl_certificate /root/key/dog.pem;
    ssl_certificate_key /root/key/dog.key;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Content-Type';
        server_name     live2d.dogcraft.top;
        root            /var/www/live2dhtml/live2d/;
        index           index.html index.htm index.php;
        }

对相关的js文件进行本地化修改

通过对原版的JavaScript观察，发现在调用js与css时，调用的*.min.js和*.min.css但repo里面没有这些东西，应该去掉min。为了防止写相对路径在其他url下使用失效，把相关路径改为绝对的url，改完之后的autoload.js:

try {
    $("<link>").attr({href: "https://live2d.dogcraft.top/assets/waifu.css?v=1.4.2", rel: "stylesheet", type: "text/css"}).appendTo('head');
    $('body').append('<div class="waifu"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span></div></div>');
    $.ajax({url: "https://live2d.dogcraft.top/assets/waifu-tips.js", dataType:"script", cache: true, success: function() {
        $.ajax({url: "https://live2d.dogcraft.top/assets/live2d.js", dataType:"script", cache: true, success: function() {
            /* 可直接修改部分参数 */
            live2d_settings['hitokotoAPI'] = "hitokoto.cn";  // 一言 API
            live2d_settings['modelId'] = 1;                  // 默认模型 ID
            live2d_settings['modelTexturesId'] = 0;          // 默认材质 ID
            live2d_settings['modelStorage'] = false;         // 不储存模型 ID
            /* 在 initModel 前添加 */
            initModel("https://live2d.dogcraft.top/assets/waifu-tips.json");
        }});
    }});
} catch(err) { console.log("[Error] JQuery is not defined.") }

其他的js也可以进行一样的修改。

最后修改waifu-tips.js里面的后端api，改成刚刚自建的那一个就行了，其他的可以酌情修改。

测试与部署

找一个合适的网页，在</body>标签加入

<script src="https://live2d.dogcraft.top/assets/autoload.js"></script>

就可以了，如果提示没有jQuery，则在网页</head>前方加上

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

从cdn处导入jQuery

对服务器的影响

通过后期观测，发现每加载一个live2d模型需要多加载1-2MB的静态资源，可以采用cdn等方式进行进行加速，这个基于php的api也可以进行资源的动静分离，可以把相关的静态资源转移到cdn的云存储上，让api服务仅仅起到一个301跳转的作用。同样静态文件也可以通过github使用jsdeliver的cdn进行加速。不过我的网页好几周都不会有一个人来看，多这1-2MB的静态资源也无所谓……