投稿

こな

@nananankona · 2025年8月18日

2009年のYouTubeを再現したOSSを構築してみた話

#再現 #構築 #OSS #yt2009

はじめに

はじめまして、こなです！今回、初めてブログを書いてみます。どうぞよろしくお願いします。　 2009年のYouTubeを再現したOSSプロジェクト「yt2009」を見つけたので、実際にローカル環境で構築してみたので、その手順などをまとめてみます！

検証環境

OS: Windows 11 25H2 Dev
CPU: 13th Gen Intel(R) Core(TM) i5-13400
RAM: 48GB
Nodejs: v20.18.2

前提条件

Git がインストールされていること
Node.js（v18以上推奨）がインストールされていること
ffmpeg にパスが通っていること
ImageMagick がインストールされていること

構築手順

リポジトリをクローン
依存パッケージをインストール
各種設定
起動

　まずは、リポジトリをローカルに落とし、ディレクトリに移動します。

git clone https://github.com/ftde0/yt2009.git && cd yt2009

実行結果

D:\>git clone https://github.com/ftde0/yt2009.git
Cloning into 'yt2009'...
remote: Enumerating objects: 3150, done.
remote: Counting objects: 100% (901/901), done.
remote: Compressing objects: 100% (219/219), done.
remote: Total 3150 (delta 781), reused 701 (delta 678), pack-reused 2249 (from 2)
Receiving objects: 100% (3150/3150), 84.62 MiB | 19.99 MiB/s, done.
Resolving deltas: 100% (2094/2094), done.

　次に、必要な依存関係を次のようにインストールします。今回はpnpmを使います。

pnpm install

実行結果

D:\yt2009>pnpm install
Downloading [email protected]: 14.96 MB/14.96 MB, done
 WARN  3 deprecated subdependencies found: [email protected], [email protected], [email protected]
Packages: +132
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 132, reused 0, downloaded 132, added 132, done

dependencies:
+ express 4.21.2 (5.1.0 is available)
+ google-protobuf 3.21.4
+ maxmind-db-reader 0.2.1
+ node-fetch 2.7.0 (3.3.2 is available)
+ node-html-parser 5.4.2 (7.0.1 is available)
+ readline-sync 1.4.10
+ ws 8.18.3

Done in 6.9s using pnpm v10.8.0

注意

Windows 7を使用している場合はExpressをダウングレードしないとクラッシュするそうです。なので、古いexpressのバージョンをインストールする必要があるらしいです。　 Windows 7のみ実行

pnpm uninstall express
pnpm i [email protected]

　次に、設定ファイルを生成します。

node yt2009setup.js

実行すると、実行するポートを聞かれます。今回は、8801にします

D:\yt2009>node yt2009setup.js
[yt2009] yt2009 setup
what port should yt2009 run on? 8801

enterを押すと、モード実行する聞かれます今回はdevにしてみました

dev:
- logs usage in terminal
- doesn't require access tokens
- no possibility of creating an ssl version
prod:
- doesn't log normal activity
- if enabled, will create a bunch of random tokens users will have to enter to use
- will be possible to create an ssl version on a separate port
environment (dev/prod):dev

次に実行するIPを聞かれます何も入力せず続行します。

what IP should be used where it needs to be coded in?
(eg. the flash player related)
preferably use your IP you will use to connect to yt2009. localhost/127.0.0.1
isn't recommended because it may break as soon as you use a different pc.
IP address:

auto_maintainを有効にするか聞かれるので有効にします

enable auto_maintain?
auto_maintain will automatically clear your instance
to prevent it from becoming unusably slow over time.
use auto_maintain? (y/n):

次にインスタンスが使用するストレージサイズとキャッシュサイズを聞かれるので、指定します。今回はデフォルト(空欄)で続行します。

specify the max size the instance should use in GB. leave empty for default (10):
specify the max size per cache file in MB. leave empty for default (15):

完了すると以下のメッセージが表示されます

writing configuration to back/config.json.
you can always rerun this setup in the future to make changes.


if this is your first time setting up yt2009 in this directory,
make sure to run
======
node post_config_setup.js
=====
for the next part.

　環境設定が完了したので、アセットをダウンロードします。

node post_config_setup.js

実行結果

D:\yt2009>node post_config_setup.js
== checking external tool: ffmpeg
== checking external tool: magick
creating cache files
== generating innertube data
useragent not found in config, using "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0"
if you wish to use your own user agent,add a userAgent entry to config.json.
writing to constants
=== !!! ===
/back/yt2009constants.json was modified to include unique data.
this data may include the used useragent, your ip and others.
=== downloading assets ===

downloading master-vfl121679.png (1/59)
downloading video_bar_arrows-vfl84478.png (2/59)
downloading favicon.ico (3/59)
...
downloading GeoLite2-City.mmdb (58/59)
downloading youtube_logo_small_grey-vfl41206.png (59/59)
file download done!!

コードを見てみると、本物のyoutubeとinternet archiveのwayback machineから持ってきてるっぽいです

// post_config_setup.js:154
let files = [
    {
        "url": "https://web.archive.org/web/20091007050445if_/http://s.ytimg.com/yt/img/master-vfl121679.png",
        "path": "./master-vfl121679.png"
    },
    {
        "url": "https://s.ytimg.com/yt/img/video_bar_arrows-vfl84478.png",
        "path": "./video_bar_arrows-vfl84478.png"
    },
    {
        "url": "http://web.archive.org/web/20091121010820if_/http://www.youtube.com/favicon.ico",
        "path": "./favicon.ico"
    ...

次にバックエンドディレクトリに移動し、サーバーを起動します

cd back
node backend.js

実行結果

D:\yt2009>cd back
D:\yt2009\back>node backend.js
    data api V3 key not set.
    while playback will work,
    not all video data may be accurate.
    recommended to set with config.data_api_key.
    ==========
    yt2009 - dev
    ==========
    1.23, launch time: 22:21

received 6 videos from master
added 21 comments from master

起動出来たら、http://127.0.0.1:8801 (自分で指定したip&port) でアクセスできます。

動画は実際のYoutubeから持ってきてるらしいです。再生タイプが選択できます classicは一度ローカルに動画を保存する必要があります。古いPCとかでアクセスしてる場合はそっちが向いているらしいです。 modemは今のyoutubeと同じくストリーミングで提供されます。すげぇぇ！ログインできるらしい

まとめ

当時のYouTubeをかなり忠実に再現している
古いPC環境でも利用できるよう工夫されている点が面白い

　次回は昔のYouTubeアプリで動かしたり、アカウントにログインできるか試してみる予定です！

投稿

こな

@nananankona · 2025年8月18日

2009年のYouTubeを再現したOSSを構築してみた話

#再現 #構築 #OSS #yt2009

はじめに

検証環境

OS: Windows 11 25H2 Dev
CPU: 13th Gen Intel(R) Core(TM) i5-13400
RAM: 48GB
Nodejs: v20.18.2

前提条件

Git がインストールされていること
Node.js（v18以上推奨）がインストールされていること
ffmpeg にパスが通っていること
ImageMagick がインストールされていること

構築手順

リポジトリをクローン
依存パッケージをインストール
各種設定
起動

　まずは、リポジトリをローカルに落とし、ディレクトリに移動します。

git clone https://github.com/ftde0/yt2009.git && cd yt2009

実行結果

D:\>git clone https://github.com/ftde0/yt2009.git
Cloning into 'yt2009'...
remote: Enumerating objects: 3150, done.
remote: Counting objects: 100% (901/901), done.
remote: Compressing objects: 100% (219/219), done.
remote: Total 3150 (delta 781), reused 701 (delta 678), pack-reused 2249 (from 2)
Receiving objects: 100% (3150/3150), 84.62 MiB | 19.99 MiB/s, done.
Resolving deltas: 100% (2094/2094), done.

　次に、必要な依存関係を次のようにインストールします。今回はpnpmを使います。

pnpm install

実行結果

D:\yt2009>pnpm install
Downloading [email protected]: 14.96 MB/14.96 MB, done
 WARN  3 deprecated subdependencies found: [email protected], [email protected], [email protected]
Packages: +132
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 132, reused 0, downloaded 132, added 132, done

dependencies:
+ express 4.21.2 (5.1.0 is available)
+ google-protobuf 3.21.4
+ maxmind-db-reader 0.2.1
+ node-fetch 2.7.0 (3.3.2 is available)
+ node-html-parser 5.4.2 (7.0.1 is available)
+ readline-sync 1.4.10
+ ws 8.18.3

Done in 6.9s using pnpm v10.8.0

注意

pnpm uninstall express
pnpm i [email protected]

　次に、設定ファイルを生成します。

node yt2009setup.js

実行すると、実行するポートを聞かれます。今回は、8801にします

D:\yt2009>node yt2009setup.js
[yt2009] yt2009 setup
what port should yt2009 run on? 8801

enterを押すと、モード実行する聞かれます今回はdevにしてみました

dev:
- logs usage in terminal
- doesn't require access tokens
- no possibility of creating an ssl version
prod:
- doesn't log normal activity
- if enabled, will create a bunch of random tokens users will have to enter to use
- will be possible to create an ssl version on a separate port
environment (dev/prod):dev

次に実行するIPを聞かれます何も入力せず続行します。

what IP should be used where it needs to be coded in?
(eg. the flash player related)
preferably use your IP you will use to connect to yt2009. localhost/127.0.0.1
isn't recommended because it may break as soon as you use a different pc.
IP address:

auto_maintainを有効にするか聞かれるので有効にします

enable auto_maintain?
auto_maintain will automatically clear your instance
to prevent it from becoming unusably slow over time.
use auto_maintain? (y/n):

次にインスタンスが使用するストレージサイズとキャッシュサイズを聞かれるので、指定します。今回はデフォルト(空欄)で続行します。

specify the max size the instance should use in GB. leave empty for default (10):
specify the max size per cache file in MB. leave empty for default (15):

完了すると以下のメッセージが表示されます

writing configuration to back/config.json.
you can always rerun this setup in the future to make changes.


if this is your first time setting up yt2009 in this directory,
make sure to run
======
node post_config_setup.js
=====
for the next part.

　環境設定が完了したので、アセットをダウンロードします。

node post_config_setup.js

実行結果

D:\yt2009>node post_config_setup.js
== checking external tool: ffmpeg
== checking external tool: magick
creating cache files
== generating innertube data
useragent not found in config, using "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0"
if you wish to use your own user agent,add a userAgent entry to config.json.
writing to constants
=== !!! ===
/back/yt2009constants.json was modified to include unique data.
this data may include the used useragent, your ip and others.
=== downloading assets ===

downloading master-vfl121679.png (1/59)
downloading video_bar_arrows-vfl84478.png (2/59)
downloading favicon.ico (3/59)
...
downloading GeoLite2-City.mmdb (58/59)
downloading youtube_logo_small_grey-vfl41206.png (59/59)
file download done!!

コードを見てみると、本物のyoutubeとinternet archiveのwayback machineから持ってきてるっぽいです

// post_config_setup.js:154
let files = [
    {
        "url": "https://web.archive.org/web/20091007050445if_/http://s.ytimg.com/yt/img/master-vfl121679.png",
        "path": "./master-vfl121679.png"
    },
    {
        "url": "https://s.ytimg.com/yt/img/video_bar_arrows-vfl84478.png",
        "path": "./video_bar_arrows-vfl84478.png"
    },
    {
        "url": "http://web.archive.org/web/20091121010820if_/http://www.youtube.com/favicon.ico",
        "path": "./favicon.ico"
    ...

次にバックエンドディレクトリに移動し、サーバーを起動します

cd back
node backend.js

実行結果

D:\yt2009>cd back
D:\yt2009\back>node backend.js
    data api V3 key not set.
    while playback will work,
    not all video data may be accurate.
    recommended to set with config.data_api_key.
    ==========
    yt2009 - dev
    ==========
    1.23, launch time: 22:21

received 6 videos from master
added 21 comments from master

起動出来たら、http://127.0.0.1:8801 (自分で指定したip&port) でアクセスできます。

まとめ

当時のYouTubeをかなり忠実に再現している
古いPC環境でも利用できるよう工夫されている点が面白い

　次回は昔のYouTubeアプリで動かしたり、アカウントにログインできるか試してみる予定です！