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

推薦する

VueとFlask間の通信の実装

axiosをインストールして通信を実装するここでは、axios を使用して Vue フロントエンドと...

Linux カーネル デバイス ドライバー カーネル デバッグ テクニカル ノート集

/****************** * カーネルデバッグ技術 ****************...

純粋なCSS3で実装されたネオンライト効果

達成される効果は次のとおりです。 マウスがボタン内に移動すると、ネオンライトのような効果が生成され、...

Vue3 リストインターフェースデータ表示の詳細

目次1. リストインターフェースの表示例2. データを表示する2.1. コンポーネントがリストに表示...

MySQLクエリ条件のnot inとinの違いと理由

まずSQLを書く SELECT DISTINCT from_id タラから cod.from_id ...

HTMLでアンカーの位置を設定するためのいくつかの一般的な方法

HTML でアンカーの位置を設定する方法はいくつかあるので、ここで紹介します。 1. ID ポジショ...

Vue要素ヘッダーにスラッシュを追加するための実装コード

<テンプレート> <div class="アプリコンテナ"&...

Linux での Docker と portainer の設定方法

1.Docer CEをインストールして使用するこの記事では、CentOS 7 を例に Docker ...

Zabbix による SQL Server の監視プロセスの詳細な説明

Zabbix による SQL Server の監視を見てみましょう。まずfreetdsをダウンロード...

Centos システムの指定された場所に Nginx をインストールする方法

Centos システムの指定された場所に Nginx をインストールするにはどうすればいいですか?は...

HTML コマンドラインインターフェースの実装

HTML部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...

Linuxで$を#に変更する方法

このシステムでは、# 記号は root ユーザーを表し、$ 記号は通常のユーザーを表します。では、ど...

アイデアを使用して Springboot 初期化サーバーを構築する際の問題分析

問題の説明最近、Springbootプロジェクトを構築していたところ、会社のネットワークケーブルに接...

VUEユニアプリ開発環境についての簡単な説明

目次1. HBuilderXビジュアルインターフェースを通じて2. vue-cliコマンドで実行する...

Navicat For MySQL の使い方に関する簡単なチュートリアル

推薦する: Navicat for MySQL 15 登録とアクティベーションの詳細なチュートリアル...