nginx部署react build静态资源以及解决刷新路由404

冷不防 2023-02-13 11:08 19阅读 0赞

>  *  **准备环境：nginx-1.14.2 // node v12.16.1 // npm 6.13.4**
>  *  **前端代码为react+typescript**
>  *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70][]

>     "homepage": "../"
> 
>  *  **在package.json文件中添加，保证build出来的资源引入正常，添加位置与version name平级**

> ** 将静态资源拖拽到htm文件夹替换，如下图**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70 1][]

> **打开conf文件夹在nginx.conf文件夹中修改配置启动ip与端口，代码如下**

>  *  ** 下面conf中try\_files $uri /index.html;一句可以解决当前路由下 页面刷新出现404的问题，当前设置访问ip端口为**[http://127.0.0.1:8888/][http_127.0.0.1_8888]，下属conf可见配置信息
> 
>     #user  nobody;
>     worker_processes  1;
>     
>     
>     events {
>         worker_connections  1024;
>     }
>     
>     
>     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  logs/access.log  main;
>     
>         sendfile        on;
>         #tcp_nopush     on;
>     
>         #keepalive_timeout  0;
>         keepalive_timeout  65;
>     
>         #gzip  on;
>     
>         server {
>             listen 8888;#端口
>             #listen [::]:80 default_server ipv6only=on;
>             server_name 127.0.0.1:8888;#配置的访问ip端口
>     
>             #charset koi8-r;
>     
>             #access_log  logs/host.access.log  main;
>     
>             location / {
>                root   html;
>                index  index.html index.htm;
>                try_files $uri /index.html; #加上这句解决react 当前路由下 刷新 报404的问题
>            }
>             location /api { #需要转发的api
>                 proxy_set_header Host $host;
>                 proxy_set_header X-Real-IP $remote_addr;
>                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
>                 proxy_pass http://10.10.50.103:20001/kiali/api; # 转发地址
>             }
>             #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   html;
>             }
>     
>     }
> 
>

>  *  ** nginx命令行启动停止 重启**
>     
>         start nginx //启动nginx
>         nginx -s stop //快速停止
>         nginx -s reload //重启

>  *  ** 启动nginx后，浏览器访问设置的对应ip端口即可**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200528150852658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/202005281454585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM=,size_16,color_FFFFFF,t_70
[http_127.0.0.1_8888]: http://127.0.0.1:8888/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020052815064160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM=,size_16,color_FFFFFF,t_70