nginx configuration React static page tutorial

This article mainly introduces you to the relevant content about nginx configuring React static pages. The article gives you a detailed introduction to the installation of nginx and some basic operations, and then shares with you the simple version of the sample code for nginx configuration of React static pages. Not much to say below, let’s take a look at the detailed introduction.

Regarding the installation and startup of nginx and the solution to the occupation of port 80, you can also refer to this article: http://www.jb51.net/article/110291.htm

Step one: Install

1, http://nginx.org/en/download.html download

2, tar -xf nginx-1.2.0.tar.gz

.3. Enter the decompression directory chmod a+rwx *

4. ./configure --without-http_rewrite_module

5. make && make install

6, sudo /usr/local/nginx/sbin/nginx

7, browser access localhost

8 , I was surprised to find the welcome page

Step 2: Basic operation

Start

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

Soft link

Start So troublesome, I want to start nginx directly!

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

View the startup configuration file

sudo nginx -t

Restart

sudo nginx -s reload

Close

ps -ef | grep nginx
kill -QUIT xxxx

Step 3 Simple version of React static page nginx configuration

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/*;
}

Some explanations:

• Where is my configuration file?

• If you want to know where your configuration file is, check View startup configuration file in the second step, and then write the required configuration in this file.

Step 4: Multiple site deployment

In the directory where the nginx.conf file is located, create a new folder vhost and create several new files, such as example1.conf , example2.conf...

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;
 }
}

Then reconfigure nginx.conf

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/*
}

Appendix: Configuration introduction (dictionary query)

#运行用户
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 <p>Attach my picture</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/36df2e7ee057b1abbdd596a4cfa63188-0.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/1afcaadd276a7966f66f6ee1deae901d-1.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p><p>Related recommendations: <br></p><p><a href="http://www.php.cn/js-tutorial-383372.html" target="_self"> Detailed example of VSCode configuration React Native development environment</a></p><p><a href="http://www.php.cn/php-weizijiaocheng-383220.html" target="_self">Detailed explanation of React, ajax, and java to implement the function of uploading images and previewing them</a></p><p><a href="http://www.php.cn/js-tutorial-379017.html" target="_self">JS to implement static page search and highlighting</a></p>

The above is the detailed content of nginx configuration React static page tutorial. For more information, please follow other related articles on the PHP Chinese website!