やあやあ、wsn0672だよ
この記事ではTurboWarpで使えるクラウド変数サーバーをRaspberry Piで建てる手順を紹介するよ
自分のクラウド変数サーバーが欲しい方はぜひ
クラウド変数とは
プログラミング初心者が簡単に使うことができるプログラミング言語である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から設定
こんな感じに設定
これだけでクラウド変数に自分のサーバーを使うことができます
補足
このサーバーはメモリ保存型なので、誰も接続しなくなると変数のデータは削除されます。もし永続的に保存したい場合はサーバー改造するか、定期的にバックアップを取る仕組みを自作する必要があります
終わりに
いかがだったでしょうか
この記事を読んでわからないこととかあったらぜひコメントで教えてください
答えられる範囲で答えます
最後まで読んでいただきありがとうございました
では。