nginx配置React静态页面的方法教程


Posted in Javascript onNovember 03, 2017

前言

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

关于nginx的安装启动以及80端口被占用的解决方法,大家也可以参考这篇文章:https://3water.com/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

关闭

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

 }
}

附上我的图片

nginx配置React静态页面的方法教程

nginx配置React静态页面的方法教程

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
angular中ui calendar的一些使用心得(推荐)
Nov 03 #Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 #Javascript
基于ES6作用域和解构赋值详解
Nov 03 #Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 #Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 #Javascript
React-intl 实现多语言的示例代码
Nov 03 #Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 #Javascript
You might like
php生成WAP页面
2006/10/09 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python教程之全局变量用法
2016/06/27 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书