nginx上部署react项目的实例方法

测试项目:react-demo

  1. 克隆你的react-demo项目到服务器上(默认使用Github管理我们的项目)
  2. 如果需要,请安装项目环境,比如:node.js,yarn等
  3. 进入项目目录,执行npm run build,开始构建项目
  4. 构建成功之后,会生成一个dist文件夹(取决于你的项目配置),这个文件夹里的静态文件,就是我们的项目的访问文件了,
  5. 配置Nginx,Linux服务器是进入到:/etc/nginx/sites-enabled,然后以管理员身份,新建一个你的react项目的配置文件,比如:react-demo.conf,然后,编辑文件:
server {
  listen 8080;
  # server_name your.domain.com;
  root /home/root/react-demo/dist;
  index index.html index.htm;
  location / {
    try_files $uri $uri/ /index.html;
  }
  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }
  error_page 500 502 503 504 /500.html;
  client_max_body_size 20M;
  keepalive_timeout 10;
}

执行sudo service nginx restart重启Nginx服务,

访问项目,http://IP:8080/

注意事项:

1、配置域名的话,需要80端口,成功后,只要访问域名即可访问的项目

2、如果你使用了React-Router的browserHistory 模式,请在Nginx配置中加入如下配置:

location / {
  try_files $uri $uri/ /index.html;
}

原理,因为我们的项目只有一个根入口,当输入类似/home的url时,找不到这个页面,这是,nginx会尝试加载index.html,加载index.html之后,react-router就能起作用并匹配我们输入的/home路由,从而显示正确的home页面,,如果browserHistory模式的项目没有配置上述内容,会出现404的情况。

可参考react-router文档:

https://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

(0)

相关推荐

  • Centos7.x下Nginx安装及SSL配置与常用命令详解

    一.安装 采用yum方式安装 ##自动安装 yum nginx ##启动 nginx 二.SSL及默认端口配置 泛解析配置 server { listen 443; server_name *.banacoo.cn; ssl on; ssl_certificate /etc/nginx/conf.d/1_banacoo.cn_bundle.crt; ssl_certificate_key /etc/nginx/conf.d/2_banacoo.cn.key; gzip on; gzip_buff

  • 为何要小心Nginx的add_header指令详解

    前言 大家都知道,nginx配置文件通过使用add_header指令来设置response header. 昨天无聊用curl查看一个站点的信息,发现返回的头部与想象中的不一样: HTTP/2 200 date: Thu, 07 Feb 2019 04:26:38 GMT content-type: text/html; charset=UTF-8 vary: Accept-Encoding, Cookie cache-control: max-age=3, must-revalidate la

  • 使用nginx同域名下部署多个vue项目并使用反向代理的方法

    效果 目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由. 我期望实现下面的效果(假设 ip: localhost,port: 8080): http://localhost:8080/ 进入最外层的 index.html http://localhost:8080/project1 进入项目一 http://localhost:8080/project2 进入项目二 废

  • 借用nginx.vim工具进行语法高亮和格式化配置nginx.conf文件

    我用的tengine,安装目录是/usr/local/tengine. 1.下载nginx.vim https://www.vim.org/scripts/script.php?script_id=1886 2.将nginx.vim上传至 ~/.vim/syntax/,并在~/.vim/filetype.vim的文件中新增如下内容: au BufRead,BufNewFile /etc/nginx/*,/usr/local/nginx/conf/* if &ft == '' | setfilet

  • Nginx跨域设置Access-Control-Allow-Origin无效的解决办法

    nginx 版本 1.11.3 使用大家说的以下配置,验证无效,跨域问题仍然存在 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST'; 使用以下配置,生效. if ($request_method = 'OPTIONS') { add_heade

  • Python实现监控Nginx配置文件的不同并发送邮件报警功能示例

    本文实例讲述了Python实现监控Nginx配置文件的不同并发送邮件报警功能.分享给大家供大家参考,具体如下: 因为项目中经常涉及到多个Nginx之间的配置文件更改,可能回导致最后Nginx之间的配置文件有所不同,这样会对项目产生影响,最典型的就是可能当访问域名解析到其中一台Nginx的时候,可能是正常的,当域名解析到另外一台Nginx的时候,由于配置文件的不同,导致访问出错之类的,影响体验,所以用python写了一个监控配置文件不同的脚本,如果发现不同,就报警,并且以HTML的形式发送邮件指出

  • CentOS7将Nginx添加系统服务的方法步骤

    导语 经过编译安装以及解决问题,Nginx 已经运行正常,但是此时 Nginx 并没有添加进系统服务.接下来会将 Nginx 添加进系统服务并且设置开机启动. 查看服务 首先查看 Nginx 的服务状态,输入 systemctl status nginx,结果如下 没有找到相关的服务,下一步就是添加系统服务. 添加系统服务 在 /usr/lib/systemd/system 目录中添加 nginx.service,根据实际情况进行修改,详细解析可查看下方参考资料中的文章.内容如下 [Unit]

  • Nginx部署https网站并配置地址重写的步骤详解

    Nginx是一款高性能的网站服务器和反向代理服务器,同时也是一个IMAP.POP3.SMTP等邮件代理服务器:nginx可以作为一个网站服务器进行网站的发布处理,另外nginx可以作为反向代理实现负载均衡的.本文介绍如何在centos6.9环境中,利用Nginx部署https网站,并配置地址重写. 1.环境准备:centos6.9主机一台,关闭防火墙和Selinux 安装依赖包:yum -y install openssl-devel  pcre-devel gcc 创建nginx用户: use

  • nginx配置教程之add_header的坑详解

    前言 add_header 是 headers 模块中定义的一个指令,顾名思义就是用来添加 http 响应头的.但请注意他只是「添加」而已,并不是重写.所以如果已经存在某个头,再使用 add_header 就会出问题.而且在低版本的 nginx 中 add_header 还不支持在错误页面中使用. 这是一个坑比较多的指令.它的处理阶段比 location 处理晚,虽然可以写在 location 中,但如果 rewrite 别的 location,那么上一个 location 中尚未处理的 add

  • docker完整配置nginx+php+mysql的方法步骤

    首先了解一个方法: 使用docker exec进入Docker容器 docker在1.3.X版本之后还提供了一个新的命令exec用于进入容器,这种方式相对更简单一些,下面我们来看一下该命令的使用: sudo docker exec --help 接下来我们使用该命令进入一个已经在运行的容器 $ sudo docker ps $ sudo docker exec -it 775c7c9ee1e1 /bin/bash 一. 配置nginx 查找Docker Hub上的 nginx 镜像 runoob

随机推荐