部署看板娘到vue项目（前后端整合）

        看板娘优秀的页面互动可以让页面更加活泼可爱，在个人博客或者项目中引用看板娘可以让项目更加美观、大气、活灵活现。今天我们就来引用一个看板娘到自己的前端项目中来。因为看板娘的后端API是用PHP写的，网上的CDN极不稳定，十分容易断掉。因此我们需要把后端也实例化一份到自己项目中来。

        所需资源：

linux服务器（可联网）、vue项目

首先要在服务器上安装一个docker，使用docker可以轻量化的部署PHP的服务。

#拉取nginx和php的基础镜像
docker pull nginx
docker pull php:5.6-fpm

conf用来存储nginx的配置文件 www存储php的发布目录和nginx的html代理目录

cd /home
mkdir kbn
cd kbn
mkdir conf www

 然后在conf文件夹新建default.conf文件，文件内容如下

server {
    listen       80;
    server_name  localhost;
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm index.php;
    }
 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
 
    location ~ .php$ {
        fastcgi_pass   php:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  /www/$fastcgi_script_name;
        include        fastcgi_params;
    }
}

docker run --name  kbnphp-fpm -v /home/kbn/nginx/www:/www  -d php:5.6-fpm

docker run --name runoob-php-nginx -p 8090:80 -d   -v /home/kbn/nginx/www:/usr/share/nginx/html     -v /home/kbn/nginx/conf/default.conf:/etc/nginx/conf.d/default.conf    --link myphp-fpm:php     nginx

这里把nginx端口映射为8090

 http://xx.xx.xx.xx:8090/kbn/add/

页面正常返回如下

你的项目可能部署在https 或者另一个http80 中，直接在这个nginx配置php解析有问题，调了半天没有调好，就使用主项目的nginx做了一层跳转避免跨域出现

在主项目的nginx的配置文件中加入

 location /kbn/ {
                proxy_pass http://xx.xx.xx.xx:8090/kbn/;
        }

集成demo 参考这个demo https://gitee.com/rederic/kbndemo.git

把kbndemo/src/assets/live2d文件夹复制到自己的项目的同级文件夹

把kbndemo/src/components/Live2D文件夹复制到自己的项目同级文件夹

修改kbndemo/src/assets/live2d/waifu-tips.js文件中的

live2d_settings['modelAPI'] 为自己的API地址

这里为了防止跨域产生所以在vue.config.js中配置了devServer做跨域处理