Mac 環境での Nginx 構成とローカル静的リソースへのアクセスの実装

Mac 環境での Nginx 構成とローカル静的リソースへのアクセスの実装

ローカル開発では、直接アクセスできない静的ファイル リソースのデバッグが必要になる場合があります。これは、ローカル Nginx サービスを構成することで実行できます。ちなみに、Nginx の構成手順は記録されています。

インストール

<!--Brew 経由でインストール: -->
nginx をインストール
<!--開始: -->
brew サービスが nginx を起動します
<!-- 設定を表示: -->
usr/local/etc/nginx/nginx.conf をcatします。
<!--設定を編集: -->
vi usr/local/etc/nginx/nginx.conf

Nginx コマンド:

<!--開始: -->
nginx

<!--停止/再起動-->
nginx -s 停止/開始/再起動

設定ファイル

ファイルアドレス: usr/local/etc/nginx/nginx.conf

# ルートの静的ファイルにアクセスできるのはルート所有者のみで、それ以外の場合は 403 が報告されます
ユーザー ルート 所有者;
ワーカープロセス 1;

#error_log ログ/error.log;
#error_log ログ/error.log 通知;
#error_log ログ/error.log 情報;

#pid ログ/nginx.pid;


イベント {
  ワーカー接続 1024;
}


http {
  mime.types を含めます。
  デフォルトタイプ アプリケーション/オクテットストリーム;

  #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
  # '$status $body_bytes_sent "$http_referer" '
  # '"$http_user_agent" "$http_x_forwarded_for"';

  #access_log ログ/access.log メイン;

  ファイル送信オン;
  #tcp_nopush オン;

  #キープアライブタイムアウト 0;
  キープアライブタイムアウト65;

  #gzip オン;

  サーバー{
    # listen ポート listen 8080;
    # ドメイン名 server_name local.XXX.com をバインドします。

    #文字セット koi8-r;

    #access_log ログ/host.access.log メイン;
    
    #ファイルパスとエントリファイルの場所 / {
      ルート /usr/local/var/www;
      インデックス index.html index.htm;
    }
    
    # インターフェースリソース 1
    場所 /XXXapi/ {
      proxy_pass https://api.XXX.com; 
    }
    # インターフェースリソース 2
    場所 /apiXXX/ {
      proxy_pass https://api.XXX.com; 
    }

    #エラーページ 404 /404.html;

    # サーバーのエラーページを静的ページ /50x.html にリダイレクトします
    #
    エラーページ 500 502 503 504 /50x.html;
    場所 = /50x.html {
      ルートhtml;
    }
  }

  サーバーをインクルードします/*;
}

設定手順

  • Nginxをインストールする
  • SwitchHost 経由でホストをバインド (127.0.0.1 local.XXX.com)
  • ポートとドメイン名を設定する
# listen ポート listen 8080;
# ドメイン名 server_name local.XXX.com をバインドします。
エントリファイルと静的ファイルのパスを指定します#ファイルパスとエントリファイルの場所 / {      
 ルート /usr/local/var/www;      
 インデックス index.html index.htm;    
}
追加のAPIリソースがある場合は、proxy_pass#インターフェースリソース1を介して対応するAPIリソースアドレスをバインドします。
場所 /XXXapi/ {
  proxy_pass https://api.XXX.com; 
}
# インターフェースリソース 2
場所 /apiXXX/ {
  proxy_pass https://api.XXX.com; 
}
  1. 静的ファイルをNginx設定のファイルパスに配置する
  2. 完了。ローカルは静的ウェブサイトのリソースを開き、対応するホストを介してアクセスできます。

Mac 環境での Nginx 設定とローカルの静的リソースへのアクセスの実装に関するこの記事はこれで終わりです。Nginx 設定とローカルの静的リソースへのアクセスに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Linux サーバー上のローカル静的リソースにアクセスするために nginx を使用する方法

<<:  Web プロジェクト開発 JS 機能の手ぶれ補正とスロットリングのサンプル コード

>>:  シェル スクリプトを使用してワンクリックで MySQL 5.7.29 をインストールする方法

推薦する

XHTML CSSを使用して正式なブログを書く

ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...

Reactのコンテキストとプロパティの説明

目次1. 文脈1. 使用シナリオ2. 使用手順3. 結論2. 小道具の詳細1. 子供の財産2. 小道...

JS ES6 スプレッド演算子の魔法のような使い方

目次1. 属性を追加する2. 複数のオブジェクトを結合する3. オブジェクトのプロパティを削除する4...

Windows Server 2008R2、2012、2016、2019 の違い

目次共通バージョンの紹介共通バージョンのダウンロードアドレスとインストール以下に簡単な違いを示します...

MySQLでカーソルトリガーを使用する方法

カーソル選択クエリによって返される行のセットは、結果セットと呼ばれます。結果セット内の行は、入力した...

Docker で複数の MySQL コンテナを作成して実行する方法の例

1. mysql/mysql-server:latestイメージを使用してMySQLインスタンスを素...

MySQL ALTERコマンドの知識ポイントのまとめ

テーブル名を変更したり、テーブル フィールドを変更したりする必要がある場合は、 MySQL ALTE...

MySQL スケジュール バックアップ ソリューション (Linux crontab を使用)

序文この世の愛には値段のつくものもありますが、データには値段のつけられないものがあります。将来、誤っ...

ウェブ開発で遭遇した問題と経験

<br />以下は開発中に遭遇した問題と、そこから得た経験です。デバッグに時間がかかりま...

Linux でシステム ディスクを初期化した後にデータ ディスクを再マウントする方法

Linuxインスタンスでシステムディスクを初期化した後、データディスクを再マウントするLinux イ...

CSSはリストのスタイルを設定し、ナビゲーションメニューの実装コードを作成します。

1. リストシンボルを設定するlist-style-type: attribute; //リストの...

MySQL パフォーマンス チューニングについて知っておくべき 15 個の重要な変数 (要約)

序文: MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...

MySQL パフォーマンス最適化のための魔法のツール、Explain の基本的な使用分析

導入MySQL には、SELECT ステートメントを分析し、開発者が最適化できるように SELECT...

MySQL 8.0.17 解凍版のインストールと設定方法のグラフィックチュートリアル

インストール中に遭遇した問題を記録しておきますので、皆様のお役に立てれば幸いです。 1. ダウンロー...

Linuxはシェルスクリプトを使用して履歴ログファイルを定期的に削除します

1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...