前言

服务器方式教程

前置条件

搭建步骤

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

2. 配置 docker compose（可选）

3. nginx相关配置

4. 可能会遇到的问题

腾讯云 cos 图床方式搭建

前置条件

搭建步骤

1. 上传项目

2. 修改前端 api接口

编辑 3. 配置跨域

3. 访问

前言

由于 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相关代码

腾讯云 cos 图床方式搭建

前置条件

1. 拥有腾讯云 cos存储库并掌握相关基本技巧（其他存储库可类比）

2. 拥有cdn访问方式（可选）

搭建步骤

1. 上传项目

将项目完整上传至cos

2. 修改前端 api接口

3. 配置跨域

如果你是cdn访问就配置cdn的跨越，如果直接cos访问就配置cos的跨域

3. 访问

cos访问或者走cdn都可

搭建 live2d api接口详细步骤相关推荐

thinkphp6搭建后端api接口
这段时间学习了一下简单搭建一个api接口后端服务,现在记录一下. 本文主要内容下载tp6 打开错误调试隐藏入口文件解决跨域问题-(使用全局中间件处理) 路由解决api版本控制 jwt token ...
CDN+COS搭建图床超详细步骤
CDN+COS搭建图床超详细步骤一.前言二.准备工作 1. 域名 2. DNS解析三.原理解析四.COS部署 1. 创建存储桶 2.创建文件夹五.CDN部署 1.基础配置 2.源站配置 3. ...
JSP动态网站环境搭建应用中的详细步骤(Tomcat和Apache/IIS的整合)
链接地址:http://www.cnblogs.com/dartagnan/archive/2011/03/25/2003426.html JSP动态网站环境搭建应用中的详细步骤(Tomcat和Apa ...
对接转账到支付宝账户API接口流程步骤
对接转账到支付宝API接口流程步骤一.技术指导步骤指引 https://opensupport.alipay.com/support/codelab/detail/488/1445?ant_sour ...
新手搭建个人博客--详细步骤
新手搭建个人博客--详细步骤环境一.阿里云ECS 二.域名 1. 购买 2. 备案 3. 域名解析三.服务器端配置 1. Web环境 2. 下载xshell 和xftp 3. Xshell和Xf ...
百度AI学习第一天_调用API接口通用步骤
百度AI学习第一天_调用API接口通用步骤 #第一步获取access_token # client_id 为官网获取的AK, client_secret 为官网获取的SK host = 'https: ...
hexo在github上搭建个人博客详细步骤
hexo搭建个人博客详细步骤本片博文讲详细讲解搭建过程,经历鉴于我搭建托管博客所遇到的错误!为了避免读者重蹈覆辙.我将尽量详细,和一些遇到的错误与大家分享. 第一步 1 首先我们先去准备［githu ...
使用json-server搭建模拟api接口
转载:http://blog.csdn.net/adojayfan/article/details/55011674 作为前端和客户端开发人员,在后端还没有给出对应的api接口时,我们无法做测试. ...
无线网络渗透测试系列学习（二） - 在VMware中搭建Metasploit靶机的详细步骤以及端口的简单了解
引言: 无线网络渗透测试系列学习目录: 无线网络渗透测试系列学习(一) - 在Windows系统下使用虚拟机安装Kali Linux操作系统在上一篇文章中我们讲解了在Windows下如何在VMwar ...

搭建 live2d api接口详细步骤

前言

服务器方式教程

前置条件

搭建步骤

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

2. 配置 docker compose（可选）

3. nginx相关配置

4. 可能会遇到的问题

腾讯云 cos 图床方式搭建

前置条件

搭建步骤

1. 上传项目

2. 修改前端 api接口

3. 配置跨域

3. 访问

搭建 live2d api接口详细步骤相关推荐

最新文章

热门文章