MacにNginxをインストールする方法｜ローカル環境でWebサーバー構築！

Mac

ウェブアプリやサイト開発を行う際、ローカル環境での動作確認に欠かせないのがWebサーバーの存在です。

その中でも「軽量で高速」「設定がシンプル」で人気なのが**Nginx（エンジンエックス）**です。

Nginxを使う理由：

  • 静的ファイル（HTML、CSS、JS）の配信が非常に高速
  • メモリ使用量が少なく、軽量
  • 設定ファイルがシンプルで理解しやすい
  • 本番環境でもよく使われているため、実践的

ローカル環境での活用場面：

  • HTML/CSS/JavaScriptの動作確認
  • Laravel や WordPress などのPHPアプリケーション開発
  • API開発時のテスト環境
  • 静的サイトジェネレーター（Gatsby、Next.js等）の表示確認

この記事では、MacでNginxをインストールし、ローカルで起動・動作確認を行うまでの手順を、初心者向けに分かりやすく解説します。

Homebrewを使った方法を中心に、設定やトラブル対策も丁寧にご紹介します。

スポンサーリンク

第1章：Nginxとは？基本的な特徴を理解しよう

Nginxの主な特徴

1. 軽量で高速

  • 軽いプロセスで多くのリクエストを処理
  • 静的ファイルの配信に特化した最適化

2. 多機能

  • Webサーバー
  • 逆プロキシサーバー
  • ロードバランサー
  • APIゲートウェイ

3. 設定のシンプルさ

  • 設定ファイルが読みやすい
  • モジュラー構造で必要な機能だけを有効化

ApacheとNginxの違い

項目ApacheNginx
メモリ使用量やや多い軽量
静的ファイル配信普通高速
設定ファイル.htaccess等分散中央集権的
学習コスト高め低め
モジュール豊富厳選された機能

ローカル開発での具体的なメリット

開発効率の向上：

  • ファイル変更が即座に反映される
  • 再起動が高速
  • 設定変更が簡単

本番環境との一致：

  • 本番でNginxを使用する場合の環境統一
  • デプロイ時のトラブル削減

第2章：HomebrewでNginxをインストールする手順

Step 1：Homebrewのインストール確認

現在の状態を確認：

brew --version

正常な場合の出力例：

Homebrew 4.2.15

Homebrewがインストールされていない場合：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Apple Silicon（M1/M2）Macの場合の追加設定：

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
source ~/.zprofile

Step 2：Nginxのインストール

基本的なインストールコマンド：

brew install nginx

インストール中の表示例：

==> Downloading https://ghcr.io/v2/homebrew/core/nginx/...
==> Installing nginx
==> Summary
🍺  /opt/homebrew/Cellar/nginx/1.25.2: 26 files, 2.4MB

Step 3：インストールの確認

バージョン確認：

nginx -v

正常な場合の出力例：

nginx version: nginx/1.25.2

インストール場所の確認：

which nginx
brew --prefix nginx

詳細な情報確認：

brew info nginx

Step 4：Nginxの基本ファイル構成確認

重要なファイル・ディレクトリの場所：

Intel Macの場合：

# 設定ファイル
/usr/local/etc/nginx/nginx.conf

# ドキュメントルート
/usr/local/var/www

# ログファイル
/usr/local/var/log/nginx/

Apple Silicon（M1/M2）Macの場合：

# 設定ファイル
/opt/homebrew/etc/nginx/nginx.conf

# ドキュメントルート
/opt/homebrew/var/www

# ログファイル
/opt/homebrew/var/log/nginx/

第3章：Nginxを起動・停止してローカルサーバーを立ち上げる

基本的な起動方法

サービスとして起動（推奨）：

brew services start nginx

一時的な起動：

nginx

起動状態の確認：

brew services list | grep nginx

プロセスの確認：

ps aux | grep nginx

ブラウザでの動作確認

アクセスURL：

http://localhost:8080

正常な場合の表示：

  • “Welcome to nginx!” のページが表示される
  • または Nginx のデフォルトページ

停止・再起動コマンド

停止：

brew services stop nginx

再起動：

brew services restart nginx

設定再読み込み（停止せずに）：

nginx -s reload

強制停止：

nginx -s quit

起動状態の詳細確認

ポートの使用状況確認：

lsof -i :8080

Nginxのプロセス確認：

ps aux | grep nginx

サービス状態の確認：

brew services info nginx

第4章：Nginxの設定ファイルをカスタマイズする

設定ファイルの基本構造

メイン設定ファイルの場所：

# Apple Silicon
/opt/homebrew/etc/nginx/nginx.conf

# Intel Mac
/usr/local/etc/nginx/nginx.conf

設定ファイルの基本構造：

# グローバル設定
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    
    server {
        listen       8080;
        server_name  localhost;
        root         /opt/homebrew/var/www;
        index        index.html index.htm;
        
        location / {
            try_files $uri $uri/ =404;
        }
    }
}

よく行うカスタマイズ例

1. ドキュメントルートの変更：

server {
    listen       8080;
    server_name  localhost;
    root         /Users/yourusername/Sites;  # 任意のディレクトリに変更
    index        index.html index.htm;
}

2. ポート番号の変更：

server {
    listen       3000;  # 8080から3000に変更
    server_name  localhost;
    # ...
}

3. 複数のサイトを管理（バーチャルホスト）：

http {
    # サイト1
    server {
        listen       8080;
        server_name  site1.local;
        root         /Users/yourusername/site1;
        index        index.html;
    }
    
    # サイト2
    server {
        listen       8081;
        server_name  site2.local;
        root         /Users/yourusername/site2;
        index        index.html;
    }
}

設定ファイルの編集方法

VS Codeで編集：

code /opt/homebrew/etc/nginx/nginx.conf

nanoエディタで編集：

nano /opt/homebrew/etc/nginx/nginx.conf

vimで編集：

vim /opt/homebrew/etc/nginx/nginx.conf

設定変更後の反映手順

1. 設定ファイルの文法チェック：

nginx -t

正常な場合の出力：

nginx: the configuration file /opt/homebrew/etc/nginx/nginx.conf syntax is ok
nginx: configuration file /opt/homebrew/etc/nginx/nginx.conf test is successful

2. 設定の再読み込み：

nginx -s reload

または：

brew services restart nginx

第5章：よくあるトラブルとその解決方法

よくあるエラーパターン

1. ポートが使用中のエラー

エラーメッセージ：

nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use)

原因： ポート8080が他のアプリケーションで使用されている

解決方法：

# 使用中のプロセス確認
lsof -i :8080

# 他のプロセスを停止するか、nginx.confでポート番号を変更
listen 8081;  # 8080 → 8081に変更

2. 設定ファイルの文法エラー

エラーメッセージ：

nginx: [emerg] unexpected "}" in /opt/homebrew/etc/nginx/nginx.conf:25

解決方法：

# 設定ファイルの文法チェック
nginx -t

# エディタで該当行を確認・修正
# セミコロン(;)の抜けや括弧の対応をチェック

3. ページが表示されない（404 Not Found）

考えられる原因と対処法：

ファイルパスの問題：

# ドキュメントルートの確認
grep -n "root" /opt/homebrew/etc/nginx/nginx.conf

# ファイルの存在確認
ls -la /opt/homebrew/var/www/

ファイルの権限問題：

# 権限確認
ls -la /path/to/your/site/

# 権限修正（必要に応じて）
chmod 644 /path/to/your/site/index.html
chmod 755 /path/to/your/site/

4. Nginxが起動しない

対処手順：

# エラーログの確認
tail -f /opt/homebrew/var/log/nginx/error.log

# Nginxプロセスの強制終了
pkill nginx

# 再起動
brew services restart nginx

設定のバックアップと復旧

設定ファイルのバックアップ：

cp /opt/homebrew/etc/nginx/nginx.conf /opt/homebrew/etc/nginx/nginx.conf.backup

デフォルト設定への復旧：

brew reinstall nginx

ログファイルの確認方法

アクセスログ：

tail -f /opt/homebrew/var/log/nginx/access.log

エラーログ：

tail -f /opt/homebrew/var/log/nginx/error.log

リアルタイム監視：

# 複数ログを同時監視
tail -f /opt/homebrew/var/log/nginx/*.log

第6章：実践的な使用例とTips

HTMLサイトの配信

1. プロジェクトディレクトリの作成：

mkdir ~/my-website
cd ~/my-website
echo "<h1>Hello, Nginx!</h1>" > index.html

2. nginx.confの設定：

server {
    listen       8080;
    server_name  localhost;
    root         /Users/yourusername/my-website;
    index        index.html;
}

PHPとの連携設定

PHP-FPMのインストール：

brew install php

nginx.confにPHP設定を追加：

server {
    listen       8080;
    server_name  localhost;
    root         /Users/yourusername/my-php-site;
    index        index.php index.html;
    
    location ~ \.php$ {
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}

開発用の便利設定

自動リロード設定：

location / {
    try_files $uri $uri/ =404;
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

CORS設定（API開発用）：

location /api/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Origin, Content-Type, Accept";
}

まとめ

NginxはMacでも手軽に導入でき、HTML/CSS/JavaScriptの確認から、APIの開発、PHP連携まで幅広く対応できます。

本記事を参考にすれば、迷うことなく導入・起動・設定変更まで進められます。

重要なポイントまとめ

インストールから起動まで：

  1. Homebrewでインストール：brew install nginx
  2. サービス起動：brew services start nginx
  3. 動作確認：http://localhost:8080 にアクセス
  4. 設定変更後：nginx -t で確認 → nginx -s reload で反映

覚えておきたいコマンド：

# 基本操作
brew services start nginx    # 起動
brew services stop nginx     # 停止
brew services restart nginx  # 再起動
nginx -s reload              # 設定再読み込み
nginx -t                     # 設定ファイル確認

# トラブル時
lsof -i :8080               # ポート使用状況確認
tail -f /opt/homebrew/var/log/nginx/error.log  # エラーログ確認

設定のTips：

  • 設定変更前は必ずバックアップを作成
  • nginx -t で文法チェックを必ず実行
  • ログファイルを定期的に確認
  • 開発用と本番用で設定を分ける

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました