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

Detailed explanation of MySQL cumulative calculation implementation method

Table of contents Preface Demand Analysis Mysql u...

mysql 5.7.5 m15 winx64.zip installation tutorial

How to install and configure mysql-5.7.5-m15-winx...

How to use @media in mobile adaptive styles

General mobile phone style: @media all and (orien...

MySQL query example explanation through instantiated object parameters

This article will introduce how to query data in ...

SSM implements the mysql database account password ciphertext login function

introduction Our company is engaged in the resear...

How to package the uniapp project as a desktop application

Installing Electron cnpm install electron -g Inst...

Vue implements dynamic query rule generation component

1. Dynamic query rules The dynamic query rules ar...

MySQL log system detailed information sharing

Anyone who has worked on a large system knows tha...

Two solutions for automatically adding 0 to js regular format date and time

Table of contents background Solution 1 Ideas: Co...

How to install MySQL and MariaDB in Docker

Relationship between MySQL and MariaDB MariaDB da...

Website Design Experience Summary of Common Mistakes in Website Construction

Reminder: Whether it is planning, designing, or de...

js simple and crude publish and subscribe sample code

What is Publish/Subscribe? Let me give you an exa...