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

推薦する

JavaScriptはキャンバスを使用して座標と線を描画します

この記事では、JavaScriptでキャンバスを使用して座標と線を描く具体的なコードを参考までに紹介...

Windows で Nginx を使用して https サーバーとリバース プロキシを構成する際の問題

リクエストロジックフロントエンド --> https経由でnginxをリクエストnginx -...

Reactでカスタムフックを作成する方法を教えます

1. カスタムフックとは何かロジックの再利用簡単に言えば、カスタム フックを使用すると、特定のコンポ...

MySQL 8.0 における非同期レプリケーションの 3 つの方法について簡単に説明します。

この実験では、空のデータベース、オフライン、オンラインの 3 つのモードで、1 つのマスターと 2 ...

Dreamweaver8を使用してウェブサイトのファイルをチェックして整理する方法

Dreamweaver8 を使用して独自の Web サイトを作成する目的は何ですか?インターネットに...

Nginx10m+の高並列カーネル最適化に関する簡単な説明

高い同時実行性とは何ですか?デフォルトの Linux カーネル パラメータは、最も一般的なシナリオ向...

Keepalived を使用して Nginx の自動再起動とデュアルアクティブ ホットスタンバイの高可用性を実現する方法について

目次1. 概要2. Keepalivedを使用してNginxを自動的に再起動する2.1 シェルスクリ...

HTML チュートリアル、optgroup 要素の理解

カテゴリ選択を選択します。テストの結果、IE と FF はこの要素を適切にサポートできることがわかり...

Reactは一般的なスケルトン画面コンポーネントの例を実装します

目次スケルトンスクリーンとは何ですか?デモデザインのアイデア具体的な実装スケルトンスクリーンとは何で...

Dockerイメージの作成、保存、読み込み方法

イメージを作成する方法は 3 つあります。既存のイメージに基づいてコンテナを作成する、ローカル テン...

Linux で fdisk を使用してディスクをパーティション分割する方法

Linux パーティションでよく使用されるコマンド: fdisk、MBR パーティション テーブルの...

Python 仮想環境のインストールとアンインストールの方法と発生する問題

Ubuntu16.04 のインストールとアンインストール pip実験環境Ubuntu 16.04; ...

CSS を使用してマウスをホバーすることで他のタグのスタイルを変更するサンプルコード

序文:私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...

nginx で HSTS を有効にしてブラウザを HTTPS アクセスにリダイレクトする方法の詳細な説明

前回の記事では、https を使用したローカルノードサービスアクセスを実装しました。前回の記事の効果...

Web 上の要素を非表示にする方法とその利点と欠点

ソースコードの例: https://codepen.io/shadeed/pen/03caf6b36...