大佬们的项目,本篇只做 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,大部分步骤应该是相似的。

更新系统

1
2
sudo apt update
sudo apt upgrade

安装依赖

1
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仓库

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

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

1
2
sudo apt update
sudo apt install software-properties-common

安装PHP 8

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

安装 PHP8 的扩展

1
sudo apt install -y php8.1-fpm php8.1-mysql php8.1-gd php8.1-mbstring php8.1-curl

配置Nginx

1
sudo apt install -y nginx
nginx配置文件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
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配置文件:

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

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

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

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

1
2
3
4
5
sudo systemctl start nginx
sudo systemctl enable nginx

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

验证安装

1
php -v

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

1
2
3
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 加载 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替换为对应的版本号即可。