html5 + nginx + ngrok で一時的にゲームを共有する方法

この記事のきっかけ

Unityとかでゲームを作ると出来上がる、ゲームのプログラム。

自分で確認する分にはいいのですが、他の人に確認してもらいたいとき、結構面倒だなぁと感じることが多いです。 これ、「もっと簡単にできないかな？」と考えてみました。

そこで…

• html5ならウェブブラウザがあれば確認できる見える。
• ならばそれをnginxに載せれば、localhostから確認できるはず
• さらに、localhostはngrokで一時的に公開できるので、結構簡単に確認できるのでは？？？

…試してみることにしました。

注意

セキュリティは全く考慮していませんので、
試す際は自己責任でお願いいたします。

準備するもの

• nginx : dockerのコンテナを使うことにしました。
• ngrok : 詳細はこちら 無料ですが登録が必要です
• html5 : 今回は公開されているサンプルゲームのソースをお借りすることにしました。 ソース元や作りについてはこちらからご覧ください。

実施したこと

• 以下のような階層で準備しました。

.
|-- docker-compose.yml
`-- web
    |-- 8puzzle.html
    |-- layout.css
    `-- puzzle.js

• docker-compose.ymlの中身は下記の通りです。

version: "3.7"

services: 
  nginx:
    image: nginx
    ports:
      - "8080:80"
    volumes:
      - ./web:/usr/share/nginx/html

• docker-compose up -d を実行して、nginxのコンテナを立ち上げます。

• ngrokのターミナルを開き、ngrok http 8080を実行。localhostの8080番が公開されます。

• 5d160aeceb0e.ngrok.io のようなURLが割り振られるので、 5d160aeceb0e.ngrok.io/8puzzle.htmlをブラウザで閲覧する

• サンプルのゲームが遊べる。 ホストPC以外にも接続できる事は確認しました。

終わりに

html5限定ですが、一時的にパブリックな場所に公開するやり方をすることが出来ました。
リモートなどで動作確認をお願いしたいときとかに良いかもしれません。

ただし、セキュリティに関しては全く考慮していない事、
ngrokを利用するのに登録が必要など、ちょっと手間はあるので、
もっと良いやり方は考えていかないと行けなさそうです。

上記の懸念がある程度解消できるなら、ngrokは使わずクラウドサーバーを借りて、
ミニゲーム置き場として運用しても面白いかもしれませんね。