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 をインストールする方法

推薦する

Docker インストール tomcat dubbo-admin インスタンス スキル

1. tomcatイメージをダウンロードする docker pull tomcat:8.5.29 2...

オブジェクトのプロパティを反復処理する際の TypeScript の問題

目次1. 問題2. 解決策1. オブジェクトをanyとして宣言する2. オブジェクトのインターフェー...

Docker コンテナの uid と gid の詳細な理解

デフォルトでは、コンテナ内のプロセスは root ユーザー権限で実行され、この root ユーザーは...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...

開発者がデータベースロックを詳細に理解する必要がある理由

1.ロックしますか? 1.1 ロックとは何ですか?ロックの本当の意味は、鍵またはコードで開くことがで...

MySQL インデックス プッシュダウン (ICP) の簡単な理解と例

序文Index Condition Pushdown (ICP) は、MySQL 5.6 の新機能で...

単純なCSSの詳細に惚れ込むと、重要ではないものの、効率性が向上する可能性がある

CSS の将来は非常に楽しみです。一方では、まったく新しいページ レイアウト方法であり、他方では、ク...

大量のデータをMySQLにインポートする際に発生する問題と解決策の分析

プロジェクトでは、SQL を使用してデータ分析を実行するために、大量のデータをデータベースにインポー...

MySQL の日付と時刻の加算と減算のサンプル コード

目次1.MySQLは時間間隔を加算または減算します2. 日付を減算する最近、MySQL を見直してい...

HTML CSS に基づく検索アイコン付き検索ボックス機能を実装する

序文フロントエンドで非常に便利な、小さなアイコン付きの検索ボックスを作成する方法をご紹介します。エフ...

MySQL 5.7.31 64 ビット無料インストール版チュートリアル図

1. ダウンロードダウンロードアドレス: https://dev.mysql.com/get/Dow...

Nginx 設定場所のマッチング優先順位の簡単な分析

序文Nginx 構成のサーバー ブロック内の場所は、リクエスト URI を一致させるために使用され、...

学生情報管理システムを実装するためのJavaScript+HTML

目次1. はじめに2. レンダリング3. コード4. 学生情報管理システムのメインインターフェース1...

MySQL InnoDB ロック メカニズムの詳細な例

1. InnoDBのロック機構InnoDB ストレージ エンジンは、行レベルのロックとトランザクショ...

MySQL分離の使用手順を読む

現在のトランザクションはどの履歴バージョンを読み取ることができますか?読み取りビューは、トランザクシ...