目录
前言
由于 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都可