live2d-wiget 看板娘后台本地化部署 使用nginx 加 php 部署

最新推荐文章于 2024-08-09 17:50:34 发布
最新推荐文章于 2024-08-09 17:50:34 发布
阅读量402 收藏 4
点赞数 4
分类专栏： live2d 看板娘 文章标签： nginx php 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ling_zhi_xin/article/details/140730164
版权

大佬们的项目，本篇只做 live2d 本地化api 的 项目部署记录
live2d 看板娘 ：https://github.com/Ylanw/live2d-widget
live2d 本地化api: https://github.com/fghrsh/live2d_api

以下采用ubuntu 系统 做 环境部署， 使用 nginx、 php8、 php-fpm 用来搭建环境

要在Linux系统上安装PHP 8并支持Nginx部署，你可以按照以下步骤进行操作。这里以Ubuntu 22.04为例进行说明。如果你使用的是其他版本的Ubuntu或Debian，大部分步骤应该是相似的。

更新系统

sudo apt update
sudo apt upgrade

安装依赖

sudo apt install -y build-essential zlib1g-dev libssl-dev libxml2-dev libbz2-dev libjpeg-dev libpng-dev libonig-dev libfreetype6-dev libwebp-dev libzip-dev

添加PPA仓库

sudo add-apt-repository ppa:ondrej/php
sudo apt update
add-apt-repository 如无报错请忽视

add-apt-repository 命令在 Ubuntu 和其衍生版本中用于添加新的 PPA（个人包文件档案）到系统。如果你在使用这个命令时遇到“找不到命令”的错误，那么可能是因为 software-properties-common 包没有安装，或者你正在使用的系统中这个命令不可用。

sudo apt update
sudo apt install software-properties-common

安装PHP 8

sudo apt install -y php8.1-cli php8.1-common

安装 PHP8 的扩展

sudo apt install -y php8.1-fpm php8.1-mysql php8.1-gd php8.1-mbstring php8.1-curl
配置Nginx
sudo apt install -y nginx
nginx配置文件

查看对应 nginx资源目录
ubuntu 大多在 /etc/nginx/conf.d/ 创建 xxxx.conf 将以下信息放入
nginx 整个配置文件 可以直接丢进到 nginx/conf.d 里面，上面 server块可以忽视以及站点配置文件可以忽视

server {
        listen 82;
        server_name localhost;
        # 采用 https 可以启用
        # rewrite ^(.*)$ https://${server_name}$1 permanent;
        
        location /{
					# 开启CORS支持
					add_header 'Access-Control-Allow-Origin' '*' always;
					add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
					add_header 'Access-Control-Max-Age' 1728000 always;
					add_header 'Access-Control-Allow-Credentials' 'true' always;
					add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' always;

					# 针对预检请求的特殊处理
					if ($request_method = 'OPTIONS') {
							add_header 'Content-Type' 'text/plain charset=UTF-8';
							add_header 'Content-Length' 0;
							 return 204;
					}
					# 指定静态资源的根目录，root后可设置相对路径，也可以设置绝对路径，根据需求设定
				root   /etc/nginx/html/live2d;

        
		}

		location ~* ^/(get|add|rand|rand_textures|switch|switch_textures|tools)(/?.*)$ {
			# 开启CORS支持
			add_header 'Access-Control-Allow-Origin' '*' always;
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
			add_header 'Access-Control-Max-Age' 1728000 always;
			add_header 'Access-Control-Allow-Credentials' 'true' always;
			add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' always;

			# 针对预检请求的特殊处理
			if ($request_method = 'OPTIONS') {
					add_header 'Content-Type' 'text/plain charset=UTF-8';
					add_header 'Content-Length' 0;
				 return 204;
			}
			# 跟上面 php-fpm 对应
			fastcgi_pass unix:/run/php/php-fpm.sock;
			fastcgi_index index.php;
			# 修改自己项目的对应目录， 项目存放在/etc/nginx/html/live2d/ 下面
			fastcgi_param SCRIPT_FILENAME /etc/nginx/html/live2d/$fastcgi_script_name;
			include fastcgi_params;			
		}
		
		

        error_page   500 502 503 504  /50x.html;  # 指定报错页面

        location = /50x.html {
            root   html;
        }
}
server {
       listen  446 ssl; #监听端口
       server_name  localhost; #请求域名
       ssl on; #开启ssl
       ssl_certificate      /etc/nginx/conf.d/cert/example.com.pem; #pem证书路径
       ssl_certificate_key  /etc/nginx/conf.d/cert/example.com.key; #pem证书key路径
       ssl_session_timeout     5m; #会话超时时间
       ssl_ciphers     ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; #加密算法
       ssl_protocols   TLSv1 TLSv1.1 TLSv1.2; #SSL协议

     location /{
					# 开启CORS支持
					add_header 'Access-Control-Allow-Origin' '*' always;
					add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
					add_header 'Access-Control-Max-Age' 1728000 always;
					add_header 'Access-Control-Allow-Credentials' 'true' always;
					add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' always;

					# 针对预检请求的特殊处理
					if ($request_method = 'OPTIONS') {
							add_header 'Content-Type' 'text/plain charset=UTF-8';
							add_header 'Content-Length' 0;
							 return 204;
					}
					# 指定静态资源的根目录，root后可设置相对路径，也可以设置绝对路径，根据需求设定
				root   /etc/nginx/html/live2d;

        
		}

		location ~* ^/(get|add|rand|rand_textures|switch|switch_textures|tools)(/?.*)$ {
			# 开启CORS支持
			add_header 'Access-Control-Allow-Origin' '*' always;
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
			add_header 'Access-Control-Max-Age' 1728000 always;
			add_header 'Access-Control-Allow-Credentials' 'true' always;
			add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' always;

			# 针对预检请求的特殊处理
			if ($request_method = 'OPTIONS') {
					add_header 'Content-Type' 'text/plain charset=UTF-8';
					add_header 'Content-Length' 0;
				 return 204;
			}
			# 跟上面 php-fpm 对应
			fastcgi_pass unix:/run/php/php-fpm.sock;
			fastcgi_index index.php;
			# 修改自己项目的对应目录， 项目存放在/etc/nginx/html/live2d/ 下面
			fastcgi_param SCRIPT_FILENAME /etc/nginx/html/live2d/$fastcgi_script_name;
			include fastcgi_params;			
		}

       error_page   500 502 503 504  /50x.html;  # 指定报错页面

        location = /50x.html {
            root   html;
        }


}
配置PHP-FPM

配置对应文件
编辑PHP-FPM配置文件：

sudo vim /etc/php/8.1/fpm/pool.d/www.conf

编辑PHP-FPM的主配置文件 www.conf

listen = /run/php/php-fpm.sock
// 放开权限, 常用文件 报安全验证 Access denied 在这里面添加对应文件的后缀
security.limit_extensions = .php .php3 .php4 .php5 .php7 .json .moc .min .png .mtn

启动并启用Nginx和PHP-FPM，并加入系统自启动

sudo systemctl start nginx
sudo systemctl enable nginx

sudo systemctl start php8.1-fpm
sudo systemctl enable php8.1-fpm

验证安装

php -v

你应该看到类似以下输出：

PHP 8.1.12 (cli) (built: Jul  1 2023 16:47:22) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.12, Copyright (c) Zend Technologies

此时就可以将此地址做为 live2d 后台api 提供给前端使用, 修改前端对应的autoload.js

// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
	Promise.all([
		loadExternalResource(live2d_path + "waifu.css", "css"),
		loadExternalResource(live2d_path + "live2d.min.js", "js"),
		loadExternalResource(live2d_path + "waifu-tips.js", "js")
	]).then(() => {
		// 配置选项的具体用法见 README.md
		// D
		initWidget({
			waifuPath: live2d_path + "waifu-tips.json",
			// localhost 改成自己服务器的ip地址
			apiPath: "http://localhost:82/",
			// 官方提供 cdn 直接使用
			// cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",
			tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
		});
	});
}

保存并关闭文件。
注意事项

  • 安全性：确保你的服务器防火墙设置允许HTTP和HTTPS流量。
  • 配置文件：根据你的具体需求，可能需要调整Nginx的配置文件。
  • 版本选择：如果你需要使用PHP 8.2或更高版本，只需将php8.1替换为对应的版本号即可。
心之语歌
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
search-login-wiget
05-01
自动格式化代码 更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） 添加图像，字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时...
使用AlarmManager,双进程守护,MarsDaemon第三方库,AppWiget保活
03-15
最后，部署AppWidget，为用户提供交互界面，同时也作为应用在后台运行的一个触点。 然而，需要注意的是，谷歌对后台应用的保活策略有严格的限制，以优化系统资源使用和电池寿命。因此，在实际应用中，开发者应尊重...
live2d-wiget 看板娘后台本地化部署 使用nginx 加 php 部署 使用 live2d_api
ling_zhi_xin的博客
07-27 390
live2d 看板娘 ： https://github.com/Ylanw/live2d-widgetlive2d 本地化api: https://github.com/fghrsh/live2d_api。
live2d-widget 组件使用指南
m0_73604563的博客
07-16 1108
最近正在做学校实训的项目，在进行前端优化工作的时候，突发奇想想给网页端加一点二次元元素，想着来个看板娘好像挺不错的，遂在网上搜，发现了这个组件，刚开始使用的时候发现非常简单，觉得十分不错，但是想要更加契合自己网页做个性化修改的时候发现github中的使用文档写的比较含糊不清，网上也没有很多相关的资料参考，遂把自己琢磨过的结果整理成文档。包括：个性化对话，添加工具接入大语言模型，vue中实现某些界面隐藏，更多配置。本文章建立在使用vue3+vite构建的项目上，若为其他类型的项目，可能需要稍作修改。
Django进阶教程--自定义wiget markdown编辑器
a582816317的博客
01-08 3110
Django进阶教程–自定义wiget markdown编辑器 django提供widget机制可以将重复使用的html封装起来，实现html代码的复用，同时内置了很多基础widget，方便我们使用。但是内置的widget并不能满足我们个性化开发需求，这时候就需要自定义widget，本节借着实现一个markdown编辑器来向大家讲解如何实现一个自定义组件。 markdown js插件edi
PCL教程-可视化深度（距离）图像（range image）
DayDayUp
05-31 7864
原文链接：https://pcl.readthedocs.io/projects/tutorials/en/latest/range_image_visualization.html#range-image-visualization
Studio之widget类型及继承于Wiget类型控件的事件-----监听各个GUI控件的交互事件。
Darin-LoveStory
09-09 439
【教程】监听各个GUI控件的交互事件。    现在的Studio支持同时创建widget和非Widget类型的节点。  但是——基于偷懒的原则，这里只介绍widget类型及继承于Wiget类型控件的事件（即GUI相关控件）。    ----------------------------------------------------------------
App Wiget(Android窗体挂件)
细心程度决定你的成败
03-08 2060
App Widget 了解AppWidget前可以先看几个不错的Blog: 传送门： 1. Google App Widget介绍 2. App Widget初探每个AppWidget都有一个AppWidgetProviderInfo对象，该对象描述了每个AppWidget的基本数据(meta-data)信息 ，其定义在<appwidget-provider
cocos2dx3.12 CCTableView优化和使用
LionSheep
03-13 3460
cocos2dx3.12 CCTableView
qt-项目部署(某些情况下编译器中运行异常的话可以使用命令windeployqt 程序名在安装的qt dos命令下补全部分依赖库在运行项目或发布)
u011555996的博客
01-11 734
Qt5Cored.dll和Qt5Core.dll文件分别用于Qt软件的Debug版和Release版。 通常会有两个Qt5Core.dll文件，分别位于Qti安装目录下的“Qt5.1.0\5.1.0\mingw48_32\bin”和“\Qt5.1.0\Tools\QtCreator\bin”两个目录中。其中“Qt5.1.0\5.1.0\mingw48_32\bin”目录下才是Qt项目运行时所需的库。 但是，有时候在运行Release版项目时，却提示没哟找到Qt5Cored.dll。这是由于在编译R..
kiss-rpc IDL协议编写和使用方式
Jason's.Alex c++编程的博客
07-10 1049
什么是IDL1. IDL是kiss rpc接口代码生成协议, 编写IDL协议, 可以生成对应的服务端和客户端通用的RPC代码调用接口. 2. 规范统一化, 接口统一化, 使用简单. IDL使用方式1. [idl文件路径] [输出名字] [输出路径，默认为当前目录]. 2. 同时输出client和server文件代码，只需要拷贝到对应的客户端和服务端目录就行了. IDL代码使用方式1. 服
Android wiget Test
03-12
"Android wiget Test"是针对Android小部件（Widget）的一个示例项目，旨在帮助开发者更好地理解和使用这类组件。 首先，让我们了解Android小部件的基础知识。Android小部件是桌面快捷方式的扩展，可以显示动态信息...
QT 基于Wiget
01-19
在本项目中，"QT 基于Wiget"描述了一个使用QT5版本实现的单机版斗地主游戏。斗地主是一种流行的扑克牌游戏，这个应用允许用户在本地计算机上单独玩这个游戏。"窗口可以调节"意味着用户可以根据自己的偏好调整游戏...
LNMP环境搭建论坛
qq_63652578的博客
08-07 989
root@Rocky8-node1 ~]# mv upload/* /usr/share/nginx/html/ #把upload下的所有内容移动到/usr/share/nginx/html/[root@Rocky8-node1 ~]# sed -i '/^group =/ c \group = nginx' /etc/php-fpm.d/www.conf #将组改为nginx。
[FSCTF 2023]细狗2.0
最新发布
2301_81462177的博客
08-09 277
cmd=ls${lFS}-1剁FSS9-后面加个$与{类似，起截断作用，$9是当前系统shel进程第九个参数持有者始终为空字符串。cmd=lsSlFS-l单纯$IFS2,IFS2被bash解释器当做变量名，输不出来结果，加一个{}就固定了变量名。ca\t/*123*/f* 发现不可以，看题解后发现使用${IFS}绕过。cmd=ls$lFs$9-1 (这里1到9应该都可以)ca\t$IFS/f* 可得flag。尝试输入cat /f*
Linux安全与高级应用（四）深入探索MySQL数据库：安装、管理与安全实践
洛秋的博客
08-07 1405
Linux：作为操作系统，提供稳定的运行环境。Apache：作为Web服务器，处理HTTP请求。MySQL：作为数据库管理系统，存储和管理数据。：作为脚本语言，生成动态网页。LAMP平台的优势在于其成本低廉、可定制性强、易于开发、方便易用且安全稳定。这使得LAMP成为许多企业和开发者的首选平台。通过以上步骤，我们完成了LAMP平台的部署及其主要组件的配置和测试。LAMP平台的搭建不仅为Web开发提供了一个强大的环境，同时也展现了其在成本和效率上的优势。
ctfhub文件包含
a666666688的博客
08-07 497
文件的内容，通常这个文件包含一些敏感信息，比如CTF比赛中的flag。这样就可以通过浏览器或其他HTTP客户端看到。，直接访问这个URL将导致服务器读取并返回。
QT 实现wiget打开网页
07-23
在 Qt 中，你可以使用 QWebView 类来实现在 QWidget 上打开网页的功能。下面是一个简单的示例代码： ```cpp #include <QtWidgets/QApplication> #include <QtWebKitWidgets/QWebView> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWebView *webView = new QWebView(); webView->load(QUrl("https://www.example.com")); webView->show(); return app.exec(); } ``` 这段代码创建了一个 QWebView 对象，加载了指定的网页，并将其显示在一个窗口上。 请注意，Qt 5.6 版本之后，QtWebKit 已经被标记为过时，建议使用 QtWebEngine 替代。如果你使用的是较新的 Qt 版本，可以将 `#include <QtWebKitWidgets/QWebView>` 替换为 `#include <QtWebEngineWidgets/QWebEngineView>`，并将 `QWebView` 替换为 `QWebEngineView`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值