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

日期：2020-05-12 栏目：程序人生浏览：次

前言

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

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

关闭

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

转载注明出处：http://www.heiqu.com/1209.html

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

相关推荐