0

0

nginx配置React静态页面实例教程

小云云

小云云

发布时间:2017-12-28 10:18:54

|

2416人浏览过

|

来源于php中文网

原创

本文主要给大家介绍了关于nginx配置react静态页面的相关内容,文中给大家详细介绍了关于nginx的安装以及一些基本操作,然后给大家分享了react 静态页面 nginx 配置简洁版的示例代码,下面话不多说了,来一起看看详细的介绍吧。

关于nginx的安装启动以及80端口被占用的解决方法,大家也可以参考这篇文章:http://www.jb51.net/article/110291.htm

第一步:安装

1、http://nginx.org/en/download.html 下载

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

.3、进入解压目录  chmod a+rwx *

4、 ./configure --without-http_rewrite_module

5、make && make install

6、sudo /usr/local/nginx/sbin/nginx

7、浏览器访问 localhost

8、惊奇地发现欢迎页面

第二步:基本操作

启动

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

软链接

启动那么麻烦,我想直接打nginx启动!

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

查看启动的配置文件

sudo nginx -t

重启

sudo nginx -s reload

关闭

培训招生教育类网站模板(响应式)1.4.2
培训招生教育类网站模板(响应式)1.4.2

培训招生教育类网站模板(响应式)安装即用,自带人人站CMS内核,支持响应式,前端banner轮播图文本均已进行可视化配置,伪静态页面生成,支持内容模型、多语言、自定义表单、筛选、多条件搜索等功能,支持多种URL模式及模型。模板特点:1、安装即用,自带人人站CMS内核及企业站展示功能(产品,新闻,案例展示等),并可根据需要增加表单 搜索等功能(自带模板) 2、支持响应式 3、前端banner轮播图文

下载
ps -ef | grep nginx
kill -QUIT xxxx

第三步 React 静态页面 nginx 配置 简洁版

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

若干解释:

  • 我的配置文件在哪里?

  • 想知道自己的配置文件在哪里,查看第二步中的查看启动配置文件,然后将需要的配置写在这个文件里面。

第四步:多个站点布置

在nginx.conf 文件所在目录中,新建一个文件夹 vhost ,新建若干个文件,例如 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;
 }
}

然后重新配置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/*
}

附录:配置介绍(字典查询)

#运行用户
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;
 }

 }
}

附上我的图片

相关推荐:

实例详解VSCode 配置React Native开发环境

详解React、ajax、java实现上传图片并预览功能

JS实现静态页面搜索并高亮显示

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
进程与SOCKET
进程与SOCKET

共6课时 | 0.4万人学习

nginx浅谈
nginx浅谈

共15课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号