Macでnginx使ってp5jsを試す

クリエイティブコーディングができる p5.js Web Editor からファイルをローカルにダウンロードして、htmlファイルをブラウザから開こうとしたができなかったので、nginxで試すことにした。そして、その備忘録。

• 開発環境

  • macOS Monterey: version 12.4

  • MacBook Air (M1, 2020)

1. インストールと必要ファイルの作成

Homebrew で nginxインストール後、関連ファイル・フォルダは /opt/homebrew/etc/nginx に保存される。sites-available と sites-enabledを作ることで、設定ファイルを有効にするものと無効にするものを分離して管理できるようになる。今回は1ファイルしか作らないんだけど。

% brew install nginx # nginxのインストール
% nginx              # nginxの起動
% nginx -version     # バージョンの確認、今回は1.23.0だった。
nginx version: nginx/1.23.0

% mkdir /opt/homebrew/etc/nginx/sites-available #ルーティング設定ファイル用のフォルダ
% mkdir /opt/homebrew/etc/nginx/sites-enabled   #ルーティング設定ファイルのリンク用のフォルダ

nginxに関するコマンド一覧
・起動　　　： nginx
・リロード　： nginx -s reload　#リロードで変更を反映
・終了　　　： nginx -s stop
・ポート確認： lsof -c nginx -P | grep LISTEN　#ポート開けてるか確認

また、/opt/homebrew/etc/nginx/nginx.conf に読み込ませる設定フォルダを追記しておくこと。

2. 設定ファイルをつくって、試してみる

試しに、/Users/hibinatsuki/Docs/Programs/p5js に以下のフォルダを置いているので、この index.html を読み込ませるようにしたい。

/Users/hibinatsuki/Docs/Programs/p5js/scrollSound_2022_07_01

/opt/homebrew/etc/nginx/sites-available/p5js_test.conf というファイルを作って、以下のように書き換え、そのシンボリックリンクをsites-enabledに作成する。ポートは8088にしておく

server {
	listen       8088;
	server_name  localhost;

	location / {
		root   /Users/hibinatsuki/Docs/Programs/p5js/scrollSound_2022_07_01;
		index  index.html;
	}
}

# このコマンドでシンボリックリンク作成
% ln -s /opt/homebrew/etc/nginx/sites-available/p5js_test.conf /opt/homebrew/etc/nginx/sites-enabled/p5js_test.conf

# これでnginx再起動して、設定ファイルを読み込ませる。
% nginx -s reload 

これで、無事にlocalhost:8088にアクセスするとp5jsのデータを出力させることができました。