　やあやあ、wsn0672だよ
この記事ではTurboWarpで使えるクラウド変数サーバーをRaspberry Piで建てる手順を紹介するよ
自分のクラウド変数サーバーが欲しい方はぜひ

@wsn0672

クラウド変数とは

プログラミング初心者が簡単に使うことができるプログラミング言語であるScratchですが、プロが本気を出せば素晴らしい作品も出来上がります
Scratchのクラウド変数とは、Scratch上の変数をScratch上のサーバーに保存しておける機能のことです
よく世界記録の表示やオンラインゲームなどで使われています

クラウド変数は変数の名前の前に"☁︎"が表示されます

Scratchのサーバーの制限で、通常のScratchでは数字のみ、最大256文字、最大10回/秒のレート制限などといった制限があります

自分のサーバーにクラウド変数を保存できれば、このような制限もお好みで変更できます

ですが、通常のScratchではクラウド変数の保存先のサーバーはScratchのサーバーで固定されていて、変更はできません
そこで使うのがTurboWarp Packagerです

TurboWarp Packagerとは

TurboWarpは、ScratchのスクリプトをJavaScriptに変換して高速に実行するためのツールです。ほかにも、"高度な設定"から実行フレームレートを変えたり(通常では30fps)、Scratchの最大クローン制限や大きさの制限などを解除したりできます
要はScratchでもっと高度なことをしたい人向けのツールです

これの機能のひとつに、ScratchのプロジェクトをHTMLのファイルにパッケージ化することができるというのがあるんですが
それがTurboWarp Packagerです

TurboWarp Packagerのクラウド変数

そんなTurboWarp Packagerですが、ちょっと進化したクラウド変数機能もあります
なにが進化したかというと、クラウド変数の保存先サーバーを指定できるんです

パッケージ化してHTMLとしてどこかのサイトに載せるときに、TurboWarpの標準クラウドサーバーのほかに、サーバーのアドレスを指定することができるんです

プロトコル

ここで使われる通信プロトコルがwssというものです。これはWebSocket Secureの略で、WebSocket通信をSSL/TLSで暗号化したものです。
httpsはhttp通信をSSL/TLSで暗号化したものです。httpとwsは何が違うか簡単に説明すると
httpは通信をしたあと接続が閉じられるのに対し、wsは通信が終わってもお互いに接続を確立し続けます
なのでhttpに比べるとwsの方がリアルタイム性に優れるという特性があり、Scratchのクラウド変数にも採用されています
~~Scratchのサーバーは結構遅延があってwsでもあまりリアルタイム性を感じられませんが~~

今回僕はwssを使いますが、wsでのやり方も解説します
というかwsで構成してSSL証明書さえ取得すればwssにできます

サーバーを構成する

おまたせしました
サーバーを構成していきます

今回僕はRasberry Pi 5でRaspberry Pi OS Liteを動かしてそれにMacからsshで接続して操作します

今回の構成

今回は、ApacheでWebサーバーを建て、そこに来た情報をApacheがローカル内のクラウド変数サーバーに転送するという構成になります

つまりこういうことです

なのでApacheで、/cloud/に来たアクセスをlocalhost:8090にプロキシするように設定します

手順

⓪Webサーバーを構成
①必要な環境のインストール
②サーバー構築
・クラウド変数サーバーのインストール
・クラウド変数サーバーの起動・動作確認
・クラウド変数サーバー自動起動の設定
・Apacheのプロキシ設定
③動作確認

Webサーバーを準備

今回はApacheでWebサーバーとしての設定を完了していることを前提として解説するので、Apacheのインストールと構成の説明は省きます
まだの人は頑張ってWebサーバーを立ててください

重ねて(ﾄ)、ローカルネットワーク外でも使いたい方はポート解放とかも済ませておいてください
ドメインの取得とDNS設定も済んでいる前提です
ポート解放は、クラウド変数サーバーは8090番ポートを使いますが、今回はApacheのプロキシを使うので80番ポートと443番ポート(wssにするなら)を解放しておいてください

必要な環境のインストール

インストールが済んでる人は飛ばしてください

Node.jsをインストール

今回使うサーバーはNode.jsで動くので入れます
以下のコマンドを実行してインストール

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

サーバーを建てていく

①クラウド変数サーバーをダウンロード

TurboWarpのクラウド変数用サーバーをダウンロードします
どこでもいいけど適当なとこに

git clone https://github.com/TurboWarp/cloud-server

でクローン

ちゃんとクローンできてるか確認

cd cloud-server/
ls

で中身を確認

user@host:~/cloud-server $ ls
doc      logs          package.json       public     src
LICENSE  node_modules  package-lock.json  README.md  tsconfig.json

こんな感じで入ってれば成功です

②クラウド変数サーバーの起動・動作確認

サーバーのインストールは終わりました
一旦起動してみましょう

依存関係をインストール

npm install

サーバー起動

npm start

もうこれだけでクラウド変数サーバーとして使えます
試しにラズパイと同じローカルネットワークに入ってブラウザで
http://ラズパイのIPアドレス:9080にアクセスしてみてください

こんなのが出れば成功です
僕の場合はこれが出なかったんですがこの先の設定を進めていったら普通にクラウド変数サーバーとして使えたのでこれで出なかった人もとりあえず気にしなくていいと思います
知らんけど

サーバー自動起動設定

せっかくサーバーが動いても、ラズパイを再起動したら止まっちゃう
なのでsystemdを使って、自動起動できるように設定していきます

①サービスファイルを作成

sudo nano /etc/systemd/system/turbowarp-cloud.service

中身はこんな感じで
ユーザー名のところは自分のユーザー名に変えてください

[Unit]
Description=TurboWarp Cloud Server
After=network.target

[Service]
ExecStart=/usr/bin/npm start
WorkingDirectory=/home/ユーザー名/cloud-server
Restart=always
User=ユーザー名
Environment=NODE_ENV=production

[Install]
WantedBy=multi-user.target

② systemdに登録して起動

sudo systemctl daemon-reload
sudo systemctl enable turbowarp-cloud.service
sudo systemctl start turbowarp-cloud.service

起動してるか確認

sudo systemctl status turbowarp-cloud.service

これでOK！ラズパイを再起動してもクラウド変数サーバーが自動で起動するようになリました

Apacheのプロキシ設定

次に、Apacheで外部からアクセスできるようにする設定
上に書いた通り、/cloud/に来たアクセスを内部のクラウドサーバーに転送する設定を入れる
/etc/apache2/sites-available/your-site.conf のSSL設定の中に追加

ProxyPreserveHost On
ProxyPass "/cloud/" "ws://localhost:9080/"
ProxyPassReverse "/cloud/" "ws://localhost:9080/"

その後、Apacheを再起動

sudo systemctl restart apache2

これで設定は完了！

ラズパイでクラウド変数サーバーを立てることに成功しました!!

動作確認

ブラウザから以下にアクセスしてみる
http://自分のドメイン/cloud/

こんなのが表示されれば成功です!

注意

http://自分のドメイン/cloudではなく
http://自分のドメイン/cloud/にアクセスしないと動きません

TurboWarp Packagerから設定

こんな感じに設定

これだけでクラウド変数に自分のサーバーを使うことができます

補足

このサーバーはメモリ保存型なので、誰も接続しなくなると変数のデータは削除されます。もし永続的に保存したい場合はサーバー改造するか、定期的にバックアップを取る仕組みを自作する必要があります

終わりに

いかがだったでしょうか
この記事を読んでわからないこととかあったらぜひコメントで教えてください
答えられる範囲で答えます

最後まで読んでいただきありがとうございました
では。