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

今天给大家分享一篇关于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

如果以上配置都不起作用，则需要按照以下配置：

示例：

server {
        listen   8888;#默认端口是80，如果端口没被占用可以不用修改
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        #vue或者React项目的打包后的dist
        root   E:/vue/my_project/dist;
        location / {
            #需要指向下面的@router
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        #对应上面的@router，
        #主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给前端路由再处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
  }

https://cloud.tencent.com/developer/article/1661636

实战

实际修改服务器：

在192.168.1.12  jenkins 部署的服务器：
[root@jenkins /]# find / -name "mms"
root@jenkins:/var/lib/jenkins/Deploy/mms/Dockerfile# pwd
/var/lib/jenkins/Deploy/mms/Dockerfile

[root@localhost nginx-web]# cat nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  10240;
}

http {
    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  /var/log/nginx/access.log  main;

    sendfile              on;      # 使用系统调用，减少kernel/user切换，提升性能
    keepalive_timeout     60;      # Default 75s
    lingering_timeout     0;       # TCP延迟关闭时，读超时时间
    server_tokens         off;     # emitting nginx version on error pages and in the “Server” response header field.
    charset               utf-8;   # the specified charset to the “Content-Type” response header field
    client_max_body_size  10m;     # 限制request body
    # gzip                on;      # 压缩

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # ssl
    ssl_session_cache          shared:SSL:1m;
    ssl_session_timeout        5m;
    ssl_ciphers                HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;

    server {
        listen       80;
        server_name  _;

        # ---------- React 配置 Begin ------
        root /usr/share/nginx/html;

        # 静态资源
        location / {
           #root /usr/share/nginx/html;
           try_files $uri @router;
           expires 1d;
        }

        location @router {
           rewrite ^.*$ /index.html last;
        }
        # React Router End

        # 监控页面
        location /stub_status {
            stub_status;
            access_log off;
            allow 127.0.0.1;
            deny all;
        }
    }
}

 / # cd /etc/nginx/conf.d/
/etc/nginx/conf.d # vi default.conf
/etc/nginx/conf.d # cat default.conf 
server {
    listen       80;
    server_name  _;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    # React Router Begin
    root /usr/share/nginx/html;
    location / {
        #root   /usr/share/nginx/html;
        try_files $uri @router;
        index  index.html index.htm;
    }

    location @router {
     rewrite ^.*$ /index.html last;
    }
    # React Router End

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

相关文章：
nginx上部署react项目的实例方法
nginx 上部署 react 项目

为者常成，行者常至