【Unity】RPGを作るチュートリアルその124 DockerとApacheでローカルの検証環境を作成

【Unity】RPGを作るチュートリアルその124 DockerとApacheでローカルの検証環境を作成

シンプルなRPGをUnityで作るチュートリアルシリーズの124回目です。

第123回ではタイトル画面で空のセーブ枠をロードできてしまう問題を修正しました。

今回はWebGLの検証のため、DockerとApacheを使ってWebサーバを準備して、ローカルの検証環境を作成します。

 

 

制作環境

MacBook Pro 2023 Apple M2 Max

Unity6 (6000.0.30f1) Silicon

 

作業内容と順序

シンプルなRPGを作る上でどんな作業が必要か、どんな順番で作っていくと良さそうか、別ページで検討しました。基本的にこの流れに沿って進めていきます。

 

チュートリアルの一覧

このシリーズ全体の一覧は以下のページにまとめています。

 

前回の内容

前回はタイトル画面で空のセーブ枠をロードできてしまう問題を修正しました。

 

検証環境の準備

作成したゲームを配布するにあたっては、各OS向けのビルドを用意するのに加えて、お手軽にWebGL向けにビルドするのも良い方法です。自分でWebサーバを用意できる場合はその環境に配置して、持っていない場合はunityroomなどのサイトで公開すると良いかと思います。

公開前に動作を確認するにあたっては、使っているマシンのローカル環境で確認できると便利です。そこで、この回ではDockerを使ってコンテナを使える環境を準備して、そのコンテナ内でWebサーバとしてApacheを使っていきたいと思います。といっても本番環境ではないので、お手軽にApacheのイメージを使う方向で進めましょう。

 

Dockerについて

Docker(ドッカー)はアプリケーションとその依存関係をコンテナと呼ばれるパッケージにまとめて、どこでも同じように実行できるようにする技術です。Docker社が開発しています。アプリケーションを実行するための仮想環境を作れて、それを他の人にも共有できたりするので便利です。

設定ファイルに必要なパッケージや依存関係などを記載しておくことで、Dockerのコンテナを構成する際にアプリケーションに必要な環境が準備できます。自分のPCで必要なパッケージを入れたりすると他のアプリケーションに影響したりもしますが、コンテナの仮想環境内にインストールすることで実環境への影響を減らすことができます。

今回の例だと、DockerはWebサーバを立てるための仮想環境になります。

 

Apacheについて

「Apache(アパッチ)」と略しちゃってましたが、Apache HTTP ServerはオープンソースのWebサーバソフトウェアで、このソフトウェアを使うことでWebでコンテンツを公開できます。UnityでWebGLビルドを作成し、それをWebサーバに配置することで作ったゲームをブラウザで遊ぶことができます。

WebGLのビルドを配置するほかに、Addressablesを使ったリモートからのダウンロードの検証にも便利です。Addressablesのパッケージをサーバからダウンロードする流れを検証する際に、ローカル環境のWebサーバを用意しておくことで、バックエンド環境が整う前からでも作業ができます。

 

Docker Desktopのインストール

Dockerを画面上から管理できるツールとして「Docker Desktop」が提供されているので、こちらをインストールしていきましょう。Docker Desktopは無料から使い始められて、従業員が250人未満かつ年間の収益が1000万米ドル未満の企業または個人なら無料プランで使えます。1000万米ドルといえば15億円くらいですかね? いつか作ったゲームでそれくらい売り上げたいものです(遠い目)

今回は検証用途で個人利用の範囲なので無料プランの機能だけで十分なため、Docker Desktopを使っていきます。インストール方法については公式のドキュメントもご参照ください。

 

また、日本語化されたドキュメントを参照するのも良いかと思います。

 

まずはDocker Desktopのダウンロードページに進み、「Docker Desktopをダウンロードする」のボタンから、対応するアーキテクチャのインストーラをダウンロードします。

 

対応するインストーラをダウンロード
対応するインストーラをダウンロード

 

Macの場合、ダウンロードしたdmgファイルを起動すると以下のように表示されるので、ドラッグ&ドロップでインストールします。

インストールする
インストールする

 

インストール後、LaunchpadなどからDocker Desktopを起動します。起動後はライセンスへの同意画面が表示されると思いますので、そちらに同意して先に進みます。設定画面では「Use recommended settings (Requires password)」を選択した状態で「Finish」を選択します。使っているDocker Desktopをアンインストールするのは怖かったため、この辺りのスクリーンショットは撮れていなくてすみません。

また、Docker Desktopが起動した後にサインインが求められる画面が表示される場合、「Skip」で飛ばしてOKです。サインインしない場合はPersonal版として動作します。

上記の設定が終わると以下のようにDocker Desktopが起動します。私は既にコンテナを作ってあるのでリストで表示されていますが、最初はまだ表示されないかもしれません。

Docker Desktop
Docker Desktop

 

Apache httpdイメージをpullする

続いて公式イメージのApache httpdイメージをpull(ダウンロード)します。httpの後ろに「d」がついていますが、これはデーモンを表すdです。UNIX系のOSで常駐型のプログラムのことをデーモン(daemon)と呼んでいて、Windowsでいうサービスみたいなイメージです。httpのデーモンなので、バックグラウンドでhttpに関する処理を行なってくれます。「このURLのファイル見せて」「いいよ」みたいな感じでhttp(s)リクエストがあった時に応答を返しています。

Dockerのブログではコマンドラインを使った公式イメージのインストール方法が公開されていて、こちらもご参照いただくと良いかと思います。

せっかくDocker Desktopを開いているので、画面からpullする方法も紹介します。Docker Desktopの左側のメニューから「Docker Hub」を選択し、検索バーにて「httpd」と入力して [Search] をクリックします。

公式イメージの検索
公式イメージの検索

 

検索結果から、おそらく一番最初に表示される「httpd」を選択します。名前の横に緑色のリボンがついていますが、これはDockerの公式イメージを表しています。

httpdの選択
httpdの選択

 

httpdの詳細が表示されるので、画面右上にある [pull] をクリックします。

イメージをpull
イメージをpull

 

pullが完了したら、画面左側のメニューから「Images」を選択します。pullしたイメージの一覧が表示されるので、「httpd」がいることを確認しましょう。

イメージの一覧に表示される
イメージの一覧に表示される

 

コンテナの起動

イメージをpullできたら起動してみましょう。Actionの項目にある右向きの三角マークをクリックします。するとコンテナの起動確認の画面が表示されるので、「Optional Settings」の右側にある下向き三角をクリックします。

オプションの設定
オプションの設定

 

設定項目が表示されるので、「Container name」の項目に [apache-local] を、「Host port」の項目に [8080] を設定します。「Container name」は任意の名前に変えていただいて大丈夫です。設定後は右下にある [Run] のボタンをクリックしてコンテナを起動します。

コンテナ名とポートを設定
コンテナ名とポートを設定

 

コンテナ起動後はログが表示されますが、バックエンドで動いているので、任意のブラウザでアクセスできるか確認しましょう。アドレスバーに [http://localhost:8080/] を入力しページを表示して、以下のように「It works!」が表示されることを確認します。

動いてるよ!
動いてるよ!

 

これでDocker+Apacheの環境ができたので、UnityでWebGLビルドを作成した際にローカルで検証できるようになります。

 

コンテナの停止と起動

コンテナを停止する場合は、■のマークの停止ボタンをクリックします。

コンテナの停止
コンテナの停止

 

次回起動する際には、画面左側のメニューから「Containers」を選択して、コンテナの一覧画面から右向き三角マークをクリックすることで、同じ設定で起動できます。

コンテナの起動
コンテナの起動

 

今回のブランチ

今回はゲームのプロジェクト内の変更はありません。

 

まとめ

今回はWebGLの検証のため、DockerとApacheを使ってWebサーバを準備して、ローカルの検証環境を作成しました。こうした検証環境を用意しておくと、WebGLの確認だったり、Addressablesのダウンロードの確認などがしやすくなります。

次回はWebGLのビルドとApacheの構成を行います。

 

     

ゲーム開発の攻略チャートを作りました!

CTA-IMAGE

「ゲームを作ってみたいけど、何から手を付けていいか分からない!」


そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験を中心に、ゲーム作りの手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。


ゲームを作り始めた時にぶつかる壁である「何をしたら良いのか分からない」という悩みを吹き飛ばしましょう!