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 相关文章推荐
jqgrid 简单学习笔记
May 03 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
js格式化时间的简单实例
Nov 27 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
Vue.use源码分析
Apr 22 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
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
PHPMailer邮件发送的实现代码
2013/05/04 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
php通过session防url攻击方法
2014/12/10 PHP
php集成开发环境详解
2019/09/24 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
详解python并发获取snmp信息及性能测试
2017/03/27 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python坐标线性插值应用实现
2019/11/13 Python
python sorted函数原理解析及练习
2020/02/10 Python
Python实现AI换脸功能
2020/04/10 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
服务承诺口号
2014/05/22 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server