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

2024-02-17 17:12:02

测试项目：react-demo

克隆你的react-demo项目到服务器上（默认使用Github管理我们的项目）
如果需要，请安装项目环境，比如：node.js，yarn等
进入项目目录，执行npm run build，开始构建项目
构建成功之后，会生成一个dist文件夹（取决于你的项目配置），这个文件夹里的静态文件，就是我们的项目的访问文件了，
配置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

总结

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

nginx配置教程之add_header的坑详解

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

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

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

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

相关推荐

随机推荐