- Webサーバーを構築して静的コンテンツの配信がしたい
- ローカルでのWebアプリ開発環境を構築したい
- リバースプロキシを活用したい
Nginxを上記のように、利用したいと考えているユーザーは多いでしょう。当記事ではMacでのNginxのインストールと初期設定について解説します。
MacでのNginxインストール方法
当記事ではMacで利用できるhomebrewを用いてNginxをインストールし、起動させます。
homebrewのインストール
まずはhomebrewをインストールしましょう。homebrewはDebian系のaptやRedhat系yumと同様にmacで使えるパッケージ管理マネージャーです。
コマンドでインストールすることも可能ですが、最新版を取得したい場合は最新版の.pkgからインストールすることをおすすめします。
インストールの完了まできたら、初期設定とインストールの確認をしましょう。
brewでのNginxのインストール
brewのサブコマンドでapt/yumやsystemctlなどのコマンドと同等の操作が可能です。以下でインストールまでが完了します。
|
1 |
$ brew install nginx<br><br>$ nginx -v<br>nginx version: nginx/1.27.3<br><br>$ brew services<br>Name Status User File<br>colima none <br>nginx none <br><br>$ brew services info nginx<br>nginx (homebrew.mxcl.nginx)<br>Running: ✘<br>Loaded: ✘<br>Schedulable: ✘ |
brewでNginxの起動と確認
以下のコマンドでnginxを起動し、確認をしましょう。
|
1 2 3 4 5 6 7 |
$ brew services start nginx ==> Successfully started `nginx` (label: homebrew.mxcl.nginx) $ brew services info nginx nginx (homebrew.mxcl.nginx) Running: ✔ Loaded: ✔ Schedulable: ✘ |
この状態でブラウザを開き、localhost:8080にアクセスするとnginxのデフォルトページが表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$ curl localhost:8080 <!DOCTYPE html> <html> <head> <title>Welcome to nginx!</title> <style> html { color-scheme: light dark; } body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; } </style> </head> <body> <h1>Welcome to nginx!</h1> <p>If you see this page, the nginx web server is successfully installed and working. Further configuration is required.</p> <p>For online documentation and support please refer to <a href="http://nginx.org/">nginx.org</a>.<br/> Commercial support is available at <a href="http://nginx.com/">nginx.com</a>.</p> <p><em>Thank you for using nginx.</em></p> </body> </html> |
Nginxの初期設定
上記の方法でbrewをインストールした場合、基本的にnginxの設定ファイルは/opt/homebrew/etc/nginx.confです。
見慣れない書き方がされているファイルですが、よく見るべきなのは以下の箇所になります。
serverのブロックにあるlisten 8080が先述したアクセス先のポートが8080になる理由になっています。試しにここを8082に書き換えてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
http { .... server { listen 8082; #8080から書き換える## server_name localhost; .... location / { root html; index index.html index.htm; } ... } |
そうしたらnginxを再起動させてみます。
|
1 2 3 4 |
$ brew services restart nginx Stopping `nginx`... (might take a while) ==> Successfully stopped `nginx` (label: homebrew.mxcl.nginx) ==> Successfully started `nginx` (label: homebrew.mxcl.nginx) |
再起動に成功したので、ブラウザを開き、localhost:8080にアクセスしてみましょう。今度はエラーになって何も表示されないはずです。
一方でlocalhost:8082にアクセスしてみてください。先ほどと同じページが表示されるのではないでしょうか。
設定が反映されたことを確認できました。
Nginxの初心者カスタマイズ
Nginxを使って静的ページを作成し、コンテンツ配信ができるページを作成しましょう。
静的ページを作成する
/opt/homebrew/etc/nginx.confを以下に編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
http { .... server { listen 8082; #8080から書き換える## server_name localhost; .... location / { root /var/www/html; #変更ポイント index index.html index.htm; } ... } |
/var/www/htmlディレクトリに置いたファイルを反映するです。上記の編集をしたら、さらに以下のコマンドを実行してください。
|
1 2 3 |
$ sudo mkdir -p /var/www/html $ echo "Hello nginx!" | sudo tee /var/www/html/index.html $ brew services restart nginx |
上記を実行することでlocalhost:8082にアクセスした際に自分で作ったindex.htmlが表示されます。
もし日本語を入力して文字化けしている場合は、エンコードして確認してみてくださいね。
静的コンテンツを配信できるページを作成する
上記でhtmlファイルを作り込んでいくことも楽しいですが、静的コンテンツ配信ができるページを作成しましょう。
/opt/homebrew/etc/nginx.confを以下に編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
server { listen 8082; #8080から変更 server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root /var/www/html; index index.html index.htm; } location /files/ { root /var/www/html; autoindex on; # ファイル一覧の表示を有効化 autoindex_exact_size off; # ファイルサイズを簡潔に表示 autoindex_localtime on; # ローカルタイムでファイルの日時を表示 |
上記によって/filesのパスにて、/var/www/html/files配下に配置したファイルリストを見れます。編集をしたら、さらに以下のコマンドを実行してください。
|
1 2 |
$ for i in {1..5}; do sudo touch /var/www/html/files/test${i}.txt; done $ brew services restart nginx |
上記を実行することでlocalhost:8082/filesにアクセスした際にfile1.txtなどの具合に5つのファイルが配置されていることを確認できます。
クリック、または右クリックでの「リンク先を別名で保存する」でファイルのダウンロードが可能です。