给自己的博客网站加上酷炫的初音未来音乐游戏？

共计 7341 个字符，预计需要花费 19 分钟才能阅读完成。

先前在某个 Q 群里有位网友发了个链接，一点进去，发现是个极度让人耳目一新的初音未来音乐网页游戏。为了让有幸看到这篇文章的看官也来体会下本人第一次玩时的激动，抛个链接——乐柔嘴巴。链接的具体地址是 blog.eunji.cn/music/music.html。尽管这个页面实在让人上瘾，但是自己同样是个喜欢折腾博客网站的家伙，而这位仁兄是在一个博客网站下放的这个网页。自己就开始思量，可不可以在自己的的博客下 www.lesliewong.cn 也放个这样的游戏呢？这也很彰显自己的品格 <(~︶~)>
于是自己也就开始开展 A 计划了。。。
A 计划：无耻地直接盗链
鉴于乐柔嘴巴的链接就是一个静态地址，盗链真的是直接就手到擒来、屡试不爽的了。
将自己的博客主页上的“相册”字段对应的链接改成 https://blog.eunji.cn/music/m…。
<a href=”https://blog.eunji.cn/music/music.html”> 相册 </a>
效果如下：

看！访问我的网站 www.leslieowng.cn 可以玩到如此新颖的游戏——
不过，过了不久，还是觉得有些不爽。自己还是有点控制欲的念头的，为什么自己的博客网站要跳转到人家的博客上去玩初音未来的音乐游戏，自己家里就不能玩吗？说白了——看见这个音乐游戏上头的地址栏的域名不是自己的就真心让人不爽。
不行！我要做到点我博客主页链接的时候仍然跳转到我的域名下——
于是，灵机一动下，有了 B 计划。

B 计划：无耻地反向代理盗链
Nginx 服务器具有很强的反向代理功能。通常那些大流量网站都借助 Nginx 服务器的反向代理功能将访问请求均匀地分配到内网的其他业务服务器进行处理，实现负载均衡功能，业务处理完毕后再通过 Nginx 服务器返送回去给请求者。
换个方向思考，如果我转发的不是自己内网的业务服务器，而是外网上别人的网站呢？请求者访问我的网站，我将这个请求转发到外网上别人的网站上，然后将他们返回的数据反馈给我的请求者。那么，对于我的请求者而言，他从头到尾都是访问我的网站，而不知道自己收到的数据其实是从另外的网站转发过来的。
在这样的逻辑下，结合这篇文章的指导——利用 Nginx 的反向代理克隆生成镜像网站——中间人攻击。自己也就在自己的一台架设了 Nginx 的服务器上捣弄了。用 <u>music.lesliewong.cn</u> 这个域名来转发那位仁兄的网页。配置文件如下：
server {
listen 80;
server_name music.lesliewong.cn;
root /webser/www/musiz;
index index.php index.html index.htm;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}

location / {
proxy_pass https://blog.eunji.cn/music/music.html;
}

location ~ \.php$ {
fastcgi_pass php7-fpm:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}

}
然后重启自己的服务器，心想这下该大功告成了吧! 去地址栏里满心欢喜地输入 <u>music.lesliewong.cn</u>。然而结果却是——

吖！自己顿时有点摸不着脑袋，然后回去看那篇利用 Nginx 的反向代理克隆生成镜像网站——中间人攻击，最后面作者提示道，“网站全站 HTTPS 之后，如果网站被克隆了，里面的域名被替换，那么将会因为域名与预期不符从而导致网站显示异常”，也就像上面的炮灰例子一样。自己代理的是一个 https 的页面，是搞不了 Nginx 反向代理中间人攻击的。。。话说这也让自己更理解到——Nginx 反向代理用的最多的地方还是内网负载均衡，因为内网大都是用 http 来转发吧？！
自己折腾了这么久，得到的却是这样一个结果，是有几分泄气的。难道就没有办法了吗？难不成自己要一砖一瓦地仿照着写个这样的页面，那有多么可怕啊！难道就没有源码吗？自己可以直接拿来用——
接着，C 计划开始筹划。。。

C 计划：原作者源码魔改
自己发现在发这个乐柔嘴巴的 Q 群里有位网友还另外发了个同样的实例网站 http://miku.iysheng.com/。界面如下：

现在总算找到了原作者了，原来是彩虹猫歌曲的作者写的，浏览了下他的网站，发现他还弄了好多很有趣的东西——（内心忽然鄙视自己这种可恶的伸手党）

另外，自己也把失败折腾过程和 Q 友执着的少年谈了谈，汗颜的是，没过不久他就把 github 上的开源镜像给我找到了（好吧，自己当时没想到去 github 搜一搜）链接如下：
https://github.com/HFIProgram…

自己真的是喜出望外，立马把上面的代码都给 fork 了下来。然而，使用这些源码发现，出来的效果是这样地。。。

而不是我想要的上面乐柔嘴巴的样子——

不过，既然自己都有了源码，照着人家乐柔嘴巴的样子依葫芦画瓢也就不是什么难事了。自己把源码研究了下，偷梁换柱一番终于实现了自己希冀的效果，配置前后对比如下：

github 源码的 index 文件：
<!– index.html –>

<!DOCTYPE html>

<head>

<title>Mikutap</title>

</head>

<body>

<h1>Mikutap</h1>

<p class=”atten”> 十分抱歉 <br> 您的浏览器并不支持本页面需要的特性 </p>

</div>

</div>

<p class=”attention”>※请打开声音并享受。</p>

</div>

<p class=”tit”><strong> 注意！搬运内容，原页面(Origin Site): <a href=”https://aidn.jp/mikutap”>https://aidn.jp/mikutap</a></strong></p>

</div>

<p class=”attention”> 点击 & 拖动或者按任意键!</p>

</div>

<p class=”con”> 声音来源 <a href=”https://ec.crypton.co.jp/pages/prod/vocaloid/mikuv4x” target=”_blank”>Hatsune Miku</a> </p>

<p class=”con”> 作者 <a href=”https://aidn.jp” target=”_blank”>daniwell</a> (<a href=”https://twitter.com/daniwell_aidn” target=”_blank”>twitter</a>) </p>

<p class=”link”> 灵感来源 <a href=”http://patatap.com/” target=”_blank”>Patatap</a><br>(令人赞叹的网页!)</p>

</div>

</body>

</html>

自己魔改后的 music.html 文件：
<!– music.html –>

<!DOCTYPE html>

<title>MUSIC – 马树菌的博客驿站 </title>

</head>

<body>

<h1>MUSIC</h1>

<p class=”atten” style=”font-weight: bold;”> 十分抱歉 <br> 您的浏览器并不支持本页面面需要的特性 </p>

</div>

</div>

<!– <p id=”bt_about”><a href=””>* 关于 *</a></p> –>

<p style=”padding-top: 10px;font-weight: bold;”> 乐柔要唱歌啦 </p>

<p class=”attention” style=”font-weight: bold;”>※请打开声音并享受。</p>

</div>

<!– <div class=”ok”>

<p class=”tit”><strong> 注意！搬运内容，原页面(Origin Site): <a href=”https://aidn.jp/mikutap”>https://aidn.jp/mikutap</a></strong></p>

</div> –>

</div>

<p class=”attention” style=”font-weight: bold;”> 点击 & 拖动或者按任意键!</p>

<p id=”bt_backtrack” style=”font-weight: bold;”><a href=””> 乐柔的嘴巴: 开启 </a></p>

</div>

<!– <div id=”about_cover”></div>

<p class=”con”> 声音来源 <a href=”https://ec.crypton.co.jp/pages/prod/vocaloid/mikuv4x” target=”_blank”>Hatsune Miku</a> </p>

<p class=”con”> 作者 <a href=”https://aidn.jp” target=”_blank”>daniwell</a> (<a href=”https://twitter.com/daniwell_aidn” target=”_blank”>twitter</a>) </p>

<p class=”link”> 灵感来源 <a href=”http://patatap.com/” target=”_blank”>Patatap</a><br>(令人赞叹的网页!)</p>

</div>

</div> –>

</body>

</html>

具体说来后者的区别就是注释掉了不少内容，换了下一些用词——但，奏效就行 (~▽~) ブ
（另外，相应的 JS 文件也进行同样偷梁换柱的操作）
接着就把这一摞子的源码都放在了自己的 hexo 博客后台一个命名为 MUISIC 的文件夹里，并把自己博客主页的“相册”字段改为“音乐”字段且映射到 MUSIC 文件夹里，最终再 git 到自己在 github 上的博客代码仓库。
(^__^) 嘻嘻……
大功告成！C 计划完美实现——

参考文献：

乐柔嘴巴 Nginx 反向代理学习及实例笔记
利用 Nginx 的反向代理克隆生成镜像网站——中间人攻击
原作者 daniwell 的 mikutap 原始游戏页面
github 上国人搬运的 mikutap 开源镜像

特别致谢：
执着的少年

给自己的博客网站加上酷炫的初音未来音乐游戏？

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）