nginx 上部署 react 项目

在这里可以讨论React开发技术,插件应用等方面技术

版主: jvip_chen

回复
头像
jvip_chen
社区版主
社区版主
帖子: 147
注册时间: 2019年 1月 5日 13:36 星期六

nginx 上部署 react 项目

帖子 jvip_chen » 2019年 11月 19日 10:47 星期二

测试项目: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 /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的情况。

回复