Nginx-Konfiguration React-Tutorial für statische Seiten

Dieser Artikel führt Sie hauptsächlich in die relevanten Inhalte zur Nginx-Konfiguration von React-Static-Seiten ein. Er führt Sie im Detail in die Installation von Nginx und einige grundlegende Vorgänge ein und teilt Ihnen dann den Beispielcode der einfachen Version der Nginx-Konfiguration für React-Static mit Im Folgenden gibt es nicht viel zu sagen, werfen wir einen Blick auf die ausführliche Einleitung.

Bezüglich der Installation und Inbetriebnahme von Nginx und der Lösung für die Belegung von Port 80 können Sie auch auf diesen Artikel verweisen: http://www.jb51.net/article/110291.htm

Nein. Schritt eins: Installieren

1. Herunterladen von http://nginx.org/en/download.html

2 .tar.gz

.3. Geben Sie das Dekomprimierungsverzeichnis chmod a+rwx *

4 ein
5. make && make install

6. Browserzugriff auf localhost

8 , ich war überrascht, die Willkommensseite zu finden

Schritt 2: Grundbedienung

Start

Softlink

Das Starten ist so mühsam, ich möchte Nginx direkt starten!

cd /usr/local/nginx/sbin
./nginx

Startkonfigurationsdatei anzeigen

ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/nginx

Neustart

sudo nginx -t

Schließen

sudo nginx -s reload

Der dritte Schritt ist eine einfache Version der React-Static-Page-Nginx-Konfiguration

Einige Erklärungen:

ps -ef | grep nginx
kill -QUIT xxxx

worker_processes 1;

events {
 worker_connections 1024;
}


http {
 include mime.types;
 default_type application/octet-stream;
 sendfile on;
 keepalive_timeout 65;
 server {
 listen 8080;
 server_name localhost;

 root /Users/jasonff/project/erp-web;

 location / {
  try_files $uri @fallback;
 }

 location @fallback {
  rewrite .* /index.html break;
 }

 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
  root html;
 }
 }
 include servers/*;
}

Wo ist meine Konfigurationsdatei?

• Wenn Sie wissen möchten, wo sich Ihre Konfigurationsdatei befindet, aktivieren Sie im zweiten Schritt die Option „Startkonfigurationsdatei anzeigen“ und schreiben Sie dann die erforderliche Konfiguration in diese Datei.

• Schritt 4: Layout mehrerer Websites
  Erstellen Sie in dem Verzeichnis, in dem sich die Datei nginx.conf befindet, einen neuen Ordner vhost und mehrere neue Dateien, z. B. example1 .conf, example2.conf...

Dann nginx.conf neu konfigurieren

Anhang: Konfigurationseinführung (Wörterbuchabfrage)

server {
 listen 8030;
 server_name localhost;
 root /Users/jasonff/project/souban-website;
 location / {
 try_files $uri @fallback;
 }
 location @fallback {
 rewrite .* /index.html break;
 }
 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
 root html;
 }
}

Anhängen me Bilder von

worker_processes 1;
events {
 worker_connections 1024;
}

http {
 include mime.types;
 default_type application/octet-stream;
 sendfile on;
 keepalive_timeout 65;
 include vhosts/*;
 //加入include vhosts/*
}

#运行用户
user nobody;
#启动进程,通常设置成和cpu的数量相等
worker_processes 1;

#全局错误日志及PID文件
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid logs/nginx.pid;

#工作模式及连接数上限
events {
 #epoll是多路复用IO(I/O Multiplexing)中的一种方式,
 #仅用于linux2.6以上内核,可以大大提高nginx的性能
 use epoll; 

 #单个后台worker process进程的最大并发链接数 
 worker_connections 1024;

 # 并发总数是 worker_processes 和 worker_connections 的乘积
 # 即 max_clients = worker_processes * worker_connections
 # 在设置了反向代理的情况下，max_clients = worker_processes * worker_connections / 4 为什么
 # 为什么上面反向代理要除以4，应该说是一个经验值
 # 根据以上条件，正常情况下的Nginx Server可以应付的最大连接数为：4 * 8000 = 32000
 # worker_connections 值的设置跟物理内存大小有关
 # 因为并发受IO约束，max_clients的值须小于系统可以打开的最大文件数
 # 而系统可以打开的最大文件数和内存大小成正比，一般1GB内存的机器上可以打开的文件数大约是10万左右
 # 我们来看看360M内存的VPS可以打开的文件句柄数是多少：
 # $ cat /proc/sys/fs/file-max
 # 输出 34336
 # 32000 < 34336，即并发连接总数小于系统可以打开的文件句柄总数，这样就在操作系统可以承受的范围之内
 # 所以，worker_connections 的值需根据 worker_processes 进程数目和系统可以打开的最大文件总数进行适当地进行设置
 # 使得并发总数小于操作系统可以打开的最大文件数目
 # 其实质也就是根据主机的物理CPU和内存进行配置
 # 当然，理论上的并发总数可能会和实际有所偏差，因为主机还有其他的工作进程需要消耗系统资源。
 # ulimit -SHn 65535

}


http {
 #设定mime类型,类型由mime.type文件定义
 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 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，
 #对于普通应用，必须设为 on,
 #如果用来进行下载等应用磁盘IO重负载应用，可设置为 off，
 #以平衡磁盘与网络I/O处理速度，降低系统的uptime.
 sendfile on;
 #tcp_nopush on;

 #连接超时时间
 #keepalive_timeout 0;
 keepalive_timeout 65;
 tcp_nodelay on;

 #开启gzip压缩
 gzip on;
 gzip_disable "MSIE [1-6].";

 #设定请求缓冲
 client_header_buffer_size 128k;
 large_client_header_buffers 4 128k;


 #设定虚拟主机配置
 server {
 #侦听80端口
 listen 80;
 #定义使用 www.nginx.cn访问
 server_name www.nginx.cn;

 #定义服务器的默认网站根目录位置
 root html;

 #设定本虚拟主机的访问日志
 access_log logs/nginx.access.log main;

 #默认请求
 location / {

  #定义首页索引文件的名称
  index index.php index.html index.htm; 

 }

 # 定义错误提示页面
 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
 }

 #静态文件，nginx自己处理
 location ~ ^/(images|javascript|js|css|flash|media|static)/ {

  #过期30天，静态文件不怎么更新，过期可以设大一点，
  #如果频繁更新，则可以设置得小一点。
  expires 30d;
 }

 #PHP 脚本请求全部转发到 FastCGI处理. 使用FastCGI默认配置.
 location ~ .php$ {
  fastcgi_pass 127.0.0.1:9000;
  fastcgi_index index.php;
  fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  include fastcgi_params;
 }

 #禁止访问 .htxxx 文件
  location ~ /.ht {
  deny all;
 }

 }
}

Verwandte Empfehlungen:

Detailliertes Beispiel für die VSCode-Konfiguration React Native-Entwicklung Umgebung

Detaillierte Erläuterung von React, Ajax und Java zur Implementierung von Bild-Upload- und Vorschaufunktionen

JS zur Implementierung statischer Seitensuche und Hervorhebung

Das obige ist der detaillierte Inhalt vonNginx-Konfiguration React-Tutorial für statische Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!