Implementation of Nginx configuration and access to local static resources in Mac environment

Implementation of Nginx configuration and access to local static resources in Mac environment

Sometimes local development requires debugging of static file resources that cannot be accessed directly. This can be done by configuring the local Nginx service. By the way, the configuration steps of Nginx are recorded.

Install

<!--Install via Brew: -->
brew install nginx
<!--Start: -->
brew services start nginx
<!--View configuration: -->
cat usr/local/etc/nginx/nginx.conf
<!--Edit configuration: -->
vi usr/local/etc/nginx/nginx.conf

Nginx command:

<!--Start: -->
nginx

<!--Stop/Restart-->
nginx -s stop/start/restart

Configuration Files

File address: usr/local/etc/nginx/nginx.conf

# Only root owner can access root's static files, otherwise 403 will be reported
user root owner;
worker_processes 1;

#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid logs/nginx.pid;


events {
  worker_connections 1024;
}


http {
  include mime.types;
  default_type application/octet-stream;

  #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 logs/access.log main;

  sendfile on;
  #tcp_nopush on;

  #keepalive_timeout 0;
  keepalive_timeout 65;

  #gzip on;

  server {
    # Listen port listen 8080;
    # Bind domain name server_name local.XXX.com;

    #charset koi8-r;

    #access_log logs/host.access.log main;
    
    #File path and entry file location / {
      root /usr/local/var/www;
      index index.html index.htm;
    }
    
    # Interface resource 1
    location /XXXapi/ {
      proxy_pass https://api.XXX.com; 
    }
    # Interface resource 2
    location /apiXXX/ {
      proxy_pass https://api.XXX.com; 
    }

    #error_page 404 /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
      root html;
    }
  }

  include servers/*;
}

Configuration steps

  • Install Nginx
  • Bind HOST via SwitchHost (127.0.0.1 local.XXX.com)
  • Configure port and domain name
# Listen port listen 8080;
# Bind domain name server_name local.XXX.com;
Specify the entry file and static file path#File path and entry file location / {      
 root /usr/local/var/www;      
 index index.html index.htm;    
}
If there are additional API resources, bind the corresponding API resource address through proxy_pass# Interface resource 1
location /XXXapi/ {
  proxy_pass https://api.XXX.com; 
}
# Interface resource 2
location /apiXXX/ {
  proxy_pass https://api.XXX.com; 
}
  1. Put static files into the file path of Nginx configuration
  2. DONE, the local can open the static website resources and access them through the corresponding HOST

This is the end of this article about Nginx configuration in Mac environment and the implementation of accessing local static resources. For more relevant content about Nginx configuration and accessing local static resources, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • How to use nginx to access local static resources on Linux server

<<:  Web project development JS function anti-shake and throttling sample code

>>:  How to install MySQL 5.7.29 with one click using shell script

Recommend

How to use LibreOffice to convert document formats under CentOS

Project requirements require some preprocessing o...

Html easily implements rounded rectangle

Question: How to achieve a rounded rectangle usin...

javascript realizes 10-second countdown for payment

This article shares the specific code of javascri...

Solution to index failure in MySQL due to different field character sets

What is an index? Why create an index? Indexes ar...

Vue uses OSS to upload pictures or attachments

Use OSS to upload pictures or attachments in vue ...

About the problems of congruence and inequality, equality and inequality in JS

Table of contents Congruent and Incongruent congr...

How to add sudo permissions to a user in Linux environment

sudo configuration file The default configuration...

Docker builds cluster MongoDB implementation steps

Preface Due to the needs of the company's bus...

Why MySQL database avoids NULL as much as possible

Many tables in MySQL contain columns that can be ...

Pure CSS to achieve input box placeholder animation and input verification

For more exciting content, please visit https://g...

The whole process of developing a Google plug-in with vue+element

Simple function: Click the plug-in icon in the up...

A brief analysis of CSS :is() and :where() coming to browsers soon

Preview versions of Safari (Technology Preview 10...