在 Windows 上运行太鼓Web

“太鼓网是什么?”

我在教授编程课程。听说学生们非常喜欢太鼓达人游戏,并在学习间隙安排时间玩这个游戏。据说他们能创作自己的曲目,而且还有一些需要超强技巧的曲子。这是什么意思?他们能添加自创曲目吗?那是商业游戏吗?咦,太鼓网?难道是由南梦宫公司推出的吗?什么?不是吗?

你不太明白嗎??

因此,在学生们给我带来了一些文化冲击后,作为老师,我有点想要反击一下,所以开始调查Taiko Web。原来是志愿者们制作和运营的啊。许可证呢?虽然有点争议,但总算勉强能够划清界限(这也是我从学生那里得到明确解释的,他很优秀)。嗯,啊,我看到源代码在Github上是公开的啊。粗略看了一下,如果是Linux的话似乎可以很容易地搭建起来。

“要不要試著構築一下?”
“好的好的”

作为老师,我很有面子地展示了兴趣,学生也表现出了兴趣。但是对他来说,Linux是一个高难度的障碍,而且他家里也没有相应的环境,所以即使他学会了搭建方法,在家里也无法实践。不知道能不能用Windows来完成呢?Python、Nginx、MongoDB、Redis之类的应该没有问题。也不用考虑使用Supervisor。问题可能出在gunicorn上吧?会不会在waitress上运行呢?虽然不太愿意遇到麻烦,但不安的因素只有这些吧?于是,我试了试。

总结起来,我已经进行了动作。
以下内容可能不太容易理解,但为了方便起见,我将记录安装过程。

服务器的要素和类型 hé

可以在Taiko Web的GitHub上了解到必要的服务器要素。

    1. Nginx

 

    1. MongoDB

 

    1. Redis

 

    1. WSGI(waitress)

 

    应用程序(Python)

这是一个选项:

这样说吧,1到3的部分是可以通过服务运行的。问题在于4和5。正版启动的Supervisor比较正式。由于我们只是在练习,所以我们会手动操作。这次我们也手动运行了Nginx。首先是安装各个组件。或许可以省略这一步,但为了作为资料我还是会记下来。

各种安装

Pythonのインストール
Microsoft Storeでインストール。我々は3.8を使いました。

gitクライアントのインストール
Github Desktop Downloadからダウンロードしてインストールしました。

Nginxのインストール
Nginx Orgのダウンロードページからダウンロードして展開したところから管理者コンソールで起動しました。サービス化していません。手順は後述します。

MongoDBのインストール
MongoDB Community Server Downloadページからダウンロードしてインストールします。管理者権限でインストールすれば自動的にサービスに加えられ起動します。

MongoDB Toolsのインストール
MongoDB Toolsダウンロードページからダウンロードして展開して実行ファイルを得ます。後に示しますが、太鼓Web用データベースを初期化するのに必要です。

Redisのインストール
RedisのGithubからmsiをダウンロードして管理者権限でインストールすれば自動的にサービスに加えられ起動します。

virtualenvのインストール
Pythonインストール後にpipでインストールします。以下のように実行します。

pip install virtualenv
    • waitressのインストール

 

    Pythonインストール後にpipでインストールします。以下のように実行します。
pip install waitress

构建应用程序的克隆和虚拟环境

在完成各种安装后,接下来从Github克隆太鼓网络应用程序,并构建操作所需的虚拟环境。
在我的用户(bunic)的主目录(C:¥home¥bunic)下创建了一个名为taiko-web的目录,并在其中创建了一个用于服务器环境的目录(srv),然后在该目录下进行了如下克隆操作。以下是从主目录中的操作记录。

cd taiko-web
git clone https://github.com/bui/taiko-web.git .¥srv¥taiko-web

接下来,我们将按照以下方式创建一个虚拟环境。

python -m virtualenv .¥srv¥taiko-web

启用虚拟环境并安装所需软件包。虽然gunicorn也会被安装,但不会使用。

.¥srv¥taiko-web¥Scripts¥activate.bat
pip install -r .¥srv¥taiko-web¥requirements.txt

将示例配置文件复制到配置文件中。

cd .¥srv¥taiko-web
copy config.example.py config.py

创建初期数据库

我們將在MongoDB中創建一個名為”taiko”的初始數據庫。
將MongoDB Tools的執行文件複製到MongoDB主目錄下的bin文件夾中,並在那裡設置執行文件的路徑。
如果已經安裝了MongoDB,則該路徑將自動設置。接下來執行以下操作。

mongoimport --db taiko --collection categories --file .¥taiko-web¥srv¥taiko-web¥tools¥categories.json --jsonArray

Nginx的部署和配置

部署并配置网络服务器Nginx。

ダウンロードしたzipファイルの展開
zipファイルはホームディレクトリ以下のtaiko-webに置き、右クリックで展開します。今回は、1.21.6を使用しています。

設定
taiko-web¥nginx-1.12.6¥conf¥nginx.confを編集して、serverに以下を上書きします。


server {
	listen 80;
	#server_name taiko.example.com;
	
	location / {
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header Host $server_name;
		proxy_pass http://127.0.0.1:34801;
	}
	
	location ~ ^/(assets|songs|src)/ {
		root C:/Users/bunic/taiko-web/srv/taiko-web/public;
		location ~ ^/songs/(\d+)/preview\.mp3$ {
			try_files $uri /api/preview?id=$1;
		}
	}
	
	location /p2 {
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "Upgrade";
		proxy_pass http://127.0.0.1:34802;
	}
}

打开太鼓网页

当达到这一点时,您可以启动太鼓网站。我们假设MongoDB和Redis已经通过服务启动。并且假设您已经关闭了之前使用过的所有控制台窗口。

    • WSGIサーバの起動

 

    • まず、一つ目のコンソールを起動し、WSGIサーバを起動します。

 

    仮想環境を有効化してからwaitressを起動します。以下のようにします。
.¥taiko-web¥srv¥taiko-web¥Scripts¥activate.bat
waitress-serve --listen=127.0.0.1:34801 app:app
    • Applicationサーバの起動

 

    • 二つ目のコンソールを起動し、アプリケーションサーバを起動します。

 

    仮想環境を有効化してからアプリケーションサーバを起動します。以下のようにします。
.¥taiko-web¥srv¥taiko-web¥Scripts¥activate.bat
python .¥taiko-web¥srv¥taiko-web¥server.py 34802
    • Nginxの起動

 

    • MongoDBとRedisはサービスで起動していますのであとはNginxを起動するだけです。

 

    今回は以下にある実行ファイルを管理者権限で実行しました。
C:¥home¥bunic¥taiko-web¥nginx-1.21.6¥nginx.exe

玩耍 shuǎ)

当启动完成后,在浏览器中访问http://localhost/,将显示以下界面。

起動画面.png

背景都是蓝色的图片,可以看出资源的版权考虑做得很好。
虽然在这里无法确认,但启动时发出的声音与原版太鼓达人不同。
太鼓网站的工作人员似乎非常尊重与万代南梦宫公司的关系。

当您进入菜单画面时,会出现如下的内容。

メニュー画面.png

打开设置菜单后会出现以下内容。

設定画面.png

我已经让学生安装了这个应用,并确认他们可以使用现有的tja文件和ogg文件添加曲目。他们对这个功能感到惊讶,并表示希望在家里的电脑上安装。真是太好了。如果他们说想要将其发布到互联网上,我会告诉他们如何做。老师希望他们将来能成为优秀的服务器工程师。

广告
将在 10 秒后关闭
bannerAds