この記事はtakahiro(John Smith)さんのTiny Web Metaverseのローカル環境構築のメモです。

github

ステップ1: Node.jsのインストール

1. Node.jsの公式ウェブサイトにアクセスし、LTSバージョンをダウンロードしてインストールします。

2. インストールが完了したら、コマンドプロンプトまたはターミナルを開き、以下のコマンドを実行してNode.jsとnpmのバージョンを確認します。

node -v
npm -v

ステップ2: プロジェクトディレクトリの作成

1. 作業ディレクトリ（例：D:\Application）を作成します。

2. コマンドプロンプトまたはターミナルを開き、以下のコマンドを実行して作業ディレクトリに移動します。

cd D:\Application

ステップ3: Tiny Web Metaverseプロジェクトのクローン

1. 以下のコマンドを実行してプロジェクトをクローンします。

git clone https://github.com/takahirox/tiny-web-metaverse.git
cd tiny-web-metaverse

クローンが完了したら、以下のコマンドを実行して依存関係をインストールします。

npm run install:all
npm run build:all

ステップ4: PostgreSQLのインストール

1. PostgreSQLの公式ウェブサイトからインストーラをダウンロードし、インストールします。

2. インストール中にデータベースのユーザー名とパスワードを設定します。この情報は後で必要になりますので、メモしておきます。

3. インストール後に表示されるStack Builderは必要ないので、閉じてもかまいません。

4. インストールが完了したら、コマンドプロンプトを開き、以下のコマンドを実行してPostgreSQLのバージョンを確認します。

psql -U postgres -c "SELECT version();"

ステップ5: Elixirのインストール

1. Elixirの公式ウェブサイトからインストーラをダウンロードし、インストールします。

2. インストールが完了したら、コマンドプロンプトを開き、以下のコマンドを実行してElixirのバージョンを確認します。

elixir -v

ステップ6: プロジェクトの依存関係のインストール

1. コマンドプロンプトでプロジェクトのstate_serverディレクトリに移動し、以下のコマンドを実行します。

cd packages/state_server
mix deps.get
mix deps.compile

エラーと対処法:

• mixコマンドが見つからない場合、Elixirのインストールが正しく行われていない可能性があります。または、パスが正しく設定されていない可能性があります。

• Hexやrebar3のインストールを求められる場合、指示に従ってインストールします。

ステップ7: データベースのセットアップ

1. まず、state_serverディレクトリ内のconfigディレクトリに移動し、dev.exsファイルをエディタで開きます。

2. このファイル内にデータベースの接続情報を設定します。特にusername, password, hostname, databaseの値を確認し、必要に応じて変更します。デフォルトでは以下のようになっているでしょう。

config :server, Server.Repo,
username: System.get_env("DATABASE_USERNAME") || "postgres",
password: System.get_env("DATABASE_PASSWORD") || "postgres",
hostname: System.get_env("DATABASE_HOSTNAME") || "localhost",
database: System.get_env("DATABASE_NAME") || "server_dev",
...

この設定を変更した後、再度コマンドプロンプトでmix ecto.createとmix ecto.migrateコマンドを実行します。

mix ecto.create
mix ecto.migrate

エラーと対処法:

• invalid_catalog_nameエラーは、指定されたデータベースが存在しないことを示します。データベース名が正しいことを確認し、存在しない場合はmix ecto.createでデータベースを作成します。

ステップ8: サーバーをローカルで実行

1. 新しいターミナルウィンドウを開き、stream_server ディレクトリに移動します。次に、以下のコマンドを実行してください。

cd packages/stream_server
npm run server

2つ目の新しいターミナルウィンドウを開き、state_server ディレクトリに移動します。以下のコマンドを実行してください。

cd packages/state_server
mix phx.server

3つ目の新しいターミナルウィンドウを開き、examples ディレクトリに移動します。以下のコマンドを実行してください。

cd packages/examples
npm run server

これで、それぞれのサーバーがそれぞれのターミナルウィンドウで実行されるようになりました。最後に、お使いのウェブブラウザで http://localhost:8080 を開いて、ローカルでのデモを確認します。

ステップ9: ローカルサーバーのIPアドレスを確認し、Questで表示する

1. コマンドプロンプトまたはターミナルを開き、ipconfig(Windows) または ifconfig(Mac/Linux) コマンドを実行してローカルサーバーのIPアドレスを確認します。

2. 確認したIPアドレスと、サーバーがリッスンしているポート番号(この場合は8080)を使って、URLを作成します。例: http://192.168.3.5:8080

3. Questのブラウザを開き、作成したURLを入力して、tiny web metaverseにアクセスします。

これでQuestからもtiny web metaverseのローカルサーバーにアクセスできるようになりました。