MacでNginxを利用するには？簡易的な設定方法を解説

Webサーバーを構築して静的コンテンツの配信がしたい
ローカルでのWebアプリ開発環境を構築したい
リバースプロキシを活用したい

Nginxを上記のように、利用したいと考えているユーザーは多いでしょう。当記事ではMacでのNginxのインストールと初期設定について解説します。

Table of Contents

MacでのNginxインストール方法

当記事ではMacで利用できるhomebrewを用いてNginxをインストールし、起動させます。

homebrewのインストール

まずはhomebrewをインストールしましょう。homebrewはDebian系のaptやRedhat系yumと同様にmacで使えるパッケージ管理マネージャーです。

コマンドでインストールすることも可能ですが、最新版を取得したい場合は最新版の.pkgからインストールすることをおすすめします。

手順

https://github.com/Homebrew/brew/releasesにアクセス
一番上にある最新版のAssetの中からHomebrew-x.x.x.pkgをダウンロード
ダウンロードした.pkgを開く
インストーラーが起動するので規約同意などをしながらインストールに進む
インストールが完了

インストールの完了まできたら、初期設定とインストールの確認をしましょう。

brewでのNginxのインストール

brewのサブコマンドでapt/yumやsystemctlなどのコマンドと同等の操作が可能です。以下でインストールまでが完了します。

$ brew install nginx

$ nginx -v
nginx version: nginx/1.27.3

$ brew services
Name   Status User File
colima none        
nginx  none        

$ brew services info nginx
nginx (homebrew.mxcl.nginx)
Running: ✘
Loaded: ✘
Schedulable: ✘

brewでNginxの起動と確認

以下のコマンドでnginxを起動し、確認をしましょう。

$ 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のデフォルトページが表示されます。

$ 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>

$ 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に書き換えてみましょう。

http {
    ....

    server {
        listen       8082; #8080から書き換える##
        server_name  localhost;

        ....

        location / {
            root   html;
            index  index.html index.htm;
        }
   ...

}

http {

....

server {

listen 8082; #8080から書き換える##

server_name localhost;

....

location / {

root html;

index index.html index.htm;

}

...

}

そうしたらnginxを再起動させてみます。

$ 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を以下に編集します。

http {
    ....

    server {
        listen       8082; #8080から書き換える##
        server_name  localhost;

        ....

        location / {
            root   /var/www/html; #変更ポイント
            index  index.html index.htm;
        }
   ...

}

http {

....

server {

listen 8082; #8080から書き換える##

server_name localhost;

....

location / {

root /var/www/html; #変更ポイント

index index.html index.htm;

}

...

}

/var/www/htmlディレクトリに置いたファイルを反映するです。上記の編集をしたら、さらに以下のコマンドを実行してください。

$ sudo mkdir -p /var/www/html
$ echo "Hello nginx!" | sudo tee /var/www/html/index.html
$ brew services restart nginx

$ 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を以下に編集します。

    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配下に配置したファイルリストを見れます。編集をしたら、さらに以下のコマンドを実行してください。

$ 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つのファイルが配置されていることを確認できます。

クリック、または右クリックでの「リンク先を別名で保存する」でファイルのダウンロードが可能です。