搭建 live2d api接口详细步骤

梦魇梦狸º

已于 2022-11-04 13:23:48 修改

阅读量2.1k

点赞数 1

分类专栏：个人博客搭建文章标签： vue nginx

于 2022-11-04 11:11:33 首次发布

本文链接：https://blog.csdn.net/RAXCL/article/details/127685261

版权

个人博客搭建专栏收录该内容

9 篇文章 13 订阅

订阅专栏

2. 配置 docker compose（可选）

前言

由于 fghrsh大佬的 live2d_api 接口也用到了 cdn.jsdelivr.net,导致走了这个接口的部分看板娘模型访问失效，且等了5个月也没有要维护的意思，无奈只能自己配置（失去了白嫖的快乐）
配置过程对于萌新不太友好，于是新开章节娓娓道来...

服务器方式教程

前置条件

1. 已掌握nginx相关部署操作

2. 下载一份live2d_api的项目：https://github.com/Raxcl/live2d-static-api

（为了保证项目和我搭建api用到版本的一致性，我将此项目fork下来，这里特别感谢 evgo2017 大神的模板，以及对我搭建api过程的耐心教导）

搭建步骤

1. 将此项目上传至个人服务器

大概步骤就是将项目完整打包，上传到服务器，解压到指定（项目文件名可自定义）

2. 配置 docker compose（可选）

配置docker compose 的目的是将项目映射至nginx内部，这样就可以不用从根目录开始访问，如果你没有用docker compose集成nginx，此步骤可跳过

具体代码：

- /mnt/raxcl/blog_live2d:/raxcl/blog_live2d
# /mnt/raxcl/blog_live2d :项目真实地址
# /raxcl/blog_live2d ： 映射至 nginx的地址（自定义）

3. nginx相关配置

# live2d 模型
     location /live2d {
       alias /raxcl/blog_live2d;
     }

这里指向的是项目主目录

4. 可能会遇到的问题

1. 尝试访问 indexes下的 models.json 报错 404

可能点1：你的访问地址有问题，正确示例: localhost:8080/live2d/indexes/models.json

可能点2：修改了nginx配置，但nginx没重启，记住务必重启，否则不会生效

可能点3：没有真正重启（真的重启和假的重启给的信息是不一样的，建议调试的时候在前台启动）

可能点4：如果有多个location，顺序很重要，会优先访问匹配到的location，这里不过多赘述

2. 跨域问题

在 live2d对应的server中添加如下代码：

# 配置跨域
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
      add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

3. json文件成功访问，但是png、js等静态资源还是404

如果你的server中配置了静态资源的 location ，那么可能走到了别人路径了，如果没有用到，请注释

# location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
    #    root /raxcl/blog_view/;
    #    index index.html;
    #    add_header Access-Control-Allow-Origin *;
    # }

或者降低该 location的匹配范围（疑问：该location放在了最后，可还是会走进去，很奇怪）

5. vue中的live2d

这里不过多赘述，详细可参见 evgo2017的 vue-live2d 或者我的 RBlog 的 blog_view 下的 live2d相关代码