Ubuntu 搭建《太鼓達人》在線模擬器Taiko Web

Ubuntu 搭建《太鼓達人》在線模擬器Taiko Web

Comments 0 Comment

基礎環境安裝

任務時間：5min~10min

首先，我們先來安裝Taiko Web 所需要的基本環境。

安裝本項目的apt 包

本項目所需要的apt 包，包含後端運行所需要的Python 環境，網頁託管所必需的Nginx，音頻轉碼所需要的ffmpeg，歌曲數據庫讀取所需要的sqlite3，以及後台運行進程所需要的pm2 。

使用以下的命令安裝本項目所需要的apt 包。

sudo apt update
sudo apt -y install git sqlite3 python2.7 python-pip python3.5 python3-pip ffmpeg nginx npm

安裝pm2

使用以下命令通過npm安裝進程託管服務pm2。pm2將會在之後的步驟中用來託管Python後端。

sudo npm -g install pm2

安裝本項目所需pip 包。

本項目使用了若干個Pip包依賴來保證後端正常運行。本項目由於依賴的原因，同時使用Python 2和Python 3版本。因此依賴分為兩部分。其中一部分需要使用pip安裝，另一部分需要使用pip3安裝。

使用以下命令來安裝這些Pip 包。

pip install Flask Flask-Caching ffmpy gunicorn
pip3 install websockets

至此，Taiko Web 所需要的運行環境已經搭建完畢。

配置Taiko Web 應用

任務時間：30min~45min

前面的步驟中，我們已經配置好了Taiko Web 所需要的環境。接下來，我們要獲取Taiko Web 項目的源代碼，並完成配置工作。

獲取Taiko Web 源代碼

Taiko Web項目託管在騰訊雲開發者平台，我們可以用git來獲取該項目的源代碼。

使用以下命令從騰訊雲開發者平台拉取源代碼。

git clone https://git.dev.tencent.com/purerosefallen/taiko-web.git

配置Nginx

Taiko Web 需要使用Nginx 託管網頁內容。我們需要配置Nginx 使其能託管Taiko Web。

  • 刪除Nginx 的默認配置文件
sudo rm -rf /etc/nginx/sites-enabled/*
  • 編寫Taiko Web 所需的Nginx 配置文件

若實驗者有域名，可以解析到<您的 CVM IP 地址>上，來使用自己的域名來訪問Taiko Web。

點擊這裡編輯taiko-web.conf文件。具體參考配置如下。

若讀者配置了域名，本文件的server_name _;可以替換為實驗者自己的域名，如taiko.example.com。

示例代碼：/home/<您的CVM 登錄用戶名>/taiko-web.conf
server {
    listen 80;
    server_name _;

    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   /home/<您的 CVM 登录用户名>/taiko-web/public;
        location ~ ^/songs/([0-9]+)/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;
    }
}

完成編輯後，使用以下命令複製到/etc/nginx/conf.d目錄，並測試文件的正確性。

sudo cp -rf ~/taiko-web.conf /etc/nginx/conf.d/
sudo nginx -t
  • 重新加載Nginx

確認無誤後，使用以下命令重新加載Nginx，讓配置文件生效。

sudo nginx -s reload

至此Taiko Web 的Nginx 部分已經配置完畢。

由於Taiko Web的後端還未配置完全，現直接在瀏覽器內訪問http://<您的CVM IP地址>會出現502 Bad Gateway錯誤。下一個環節我們將會對Taiko Web做進一步的配置。

獲取歌曲

Taiko Web支持ogg格式的音樂文件，和tja或osu格式的譜面文件，並需要一個taiko.db的歌曲數據庫文件。這些文件的目錄結構如下。

  • ./taiko.db
  • ./public/songs/ID/main.ogg

以及

  • ./public/songs/ID/main.tja

或

  • ./public/songs/ID/easy.osu
  • ./public/songs/ID/normal.osu
  • ./public/songs/ID/hard.osu
  • ./public/songs/ID/oni.osu
  • ./public/songs/ID/ura.osu

幾個難度之中的一個或多個。其中ID為歌曲ID，為正整數。

整理taiko.db數據庫文件的步驟比較複雜，實驗者可以參考https://github.com/purerosefallen/taiko-db-writer這個項目來通過tja譜面文件自動生成數據庫文件，或者https://github.com/purerosefallen/ taiko-grabber從其他Taiko Web網站上面自動抓取歌曲譜面文件。

本實驗中，我們將使用一個已經整理好的Taiko Web 歌曲包來搭建平台。該歌曲包由Nanahira，LuiCat 等譜面作者製作。

使用以下命令拉取歌曲包。

cd ~/taiko-web
git clone https://git.dev.tencent.com/purerosefallen/songs.git ./public/songs

之後，將taiko.db文件鏈接至項目目錄。

ln -s ./public/songs/taiko.db .

編寫Taiko Web 的配置文件

最後，Taiko Web 本身也有幾個配置文件。我們在這裡完成Taiko Web 的最後配置。

  • config.json

config.json的內容主要包括歌曲等資源文件加載的網址。一般情況下，可以設置為本機。但是若要用CDN 來加速網站，則需要配置為CDN 的地址。

點擊這裡來編輯config.json文件。參考配置如下。

若實驗者在之前的配置Nginx的步驟中配置了域名，則本配置文件的<您的 CVM IP 地址>需要改為自己的域名。

示例代碼：/home/<您的CVM 登錄用戶名>/taiko-web/config.json
{
    "songs_baseurl": "http://<您的 CVM IP 地址>/songs/",
    "assets_baseurl": "http://<您的 CVM IP 地址>/assets/"
}
  • version.json

version.json為Taiko Web頁面右下角顯示的版本號信息。用以下命令直接生成即可。其中TencentYun可以換成實驗者自定義的版本號。

export TAIKO_VERSION=TencentYun
echo "{\"commit\":\"$(git log --pretty=%H -1)\",\"commit_short\":\"$(git log --pretty=%h -1)\",\"version\": \"$TAIKO_VERSION\"}" | tee ./version.json
  • index.html

一般情況下，首頁文件無需進行修改。直接從模板文件夾創建符號鏈接即可。

ln -s $PWD/templates/index.html ./public/index.html

至此，Taiko Web 的所有配置工作已經完成。

啟動Taiko Web

任務時間：10min~20min

經過前面環節的配置工作，Taiko Web 馬上就要完成了。接下來，讓我們開始運行Taiko Web 來享受太鼓的樂趣吧。

啟動後端

在上一節中，我們已經啟動了Nginx，不過因為沒有啟動後端，得到了502 Bad Gateway的錯誤。在這一節啟動了後端之後，就可以正式運行了。

Taiko Web有兩個後端程序，app.py負責API的請求處理，server.py負責聯機對戰服務，分別使用Python 2和Python 3運行。

使用以下命令通過pm2啟動這兩個後端程序。

pm2 start $HOME/.local/bin/gunicorn --name taiko-web --interpreter /usr/bin/python2 -- -b 127.0.0.1:34801 app:app
pm2 start server.py --name taiko-web-server --interpreter /usr/bin/python3 -- 34802

之後，使用以下命令讓服務器開機自動啟動Taiko Web後端。運行完pm2 startup後，還需要復制終端中出現的命令來創建系統服務。

pm2 save
pm2 startup

至此，Taiko Web 平台已經搭建完畢。

體驗Taiko Web

用瀏覽器訪問http://<您的CVM IP地址>或實驗者自己的域名，即可體驗Taiko Web。

Taiko Web的操作方法大體和《太鼓達人》一致。F和J是鼓面，D和K是鼓邊。對應顏色音符到達判定點時敲打鼓面或鼓邊即可。初學者建議從普通難度開始練習，之後可以慢慢挑戰困難和魔王難度。

關於添加歌曲的方法，需要把譜面和歌曲文件放在./public/songs文件夾內，並且在taiko.db數據庫文件內新增記錄。具體方法可以參照https://github.com/bui/taiko-web/wiki/Adding-songs。

此外，除了使用本教程的方法搭建Taiko Web，還可以使用現成的Docker鏡像，地址在https://hub.docker.com/r/nanahira/taiko-web。具體方法請參考項目和其他Docker教程。

感謝參與本次實驗。

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。