开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Nginx 404 on static files (react应用程序)

Nginx是一款高性能的开源Web服务器软件，也可以作为反向代理服务器、负载均衡器和HTTP缓存服务器使用。它具有轻量级、高并发处理能力和低内存消耗等特点，被广泛应用于互联网领域。

针对"Nginx 404 on static files (react应用程序)"这个问题，通常是由于Nginx配置不正确或者文件路径错误导致的。下面是一些可能的原因和解决方法：

配置错误：检查Nginx的配置文件，确保正确指定了静态文件的路径。可以通过修改Nginx的配置文件（通常是nginx.conf或者sites-available/default）来指定正确的静态文件路径。
文件路径错误：确认静态文件的路径是否正确。可以通过检查文件路径是否存在、文件权限是否正确来排除问题。确保Nginx可以访问到静态文件所在的目录。
文件类型错误：检查Nginx的配置文件中是否正确指定了静态文件的类型。例如，对于React应用程序，通常需要指定文件类型为text/html，以确保正确加载index.html文件。
缓存问题：如果之前曾经访问过相同的URL，可能是由于浏览器缓存导致的。可以尝试清除浏览器缓存或者使用无缓存的方式访问。

推荐的腾讯云相关产品是腾讯云的云服务器（CVM），它提供了灵活的计算资源，可以用来部署和运行Nginx服务器。您可以通过以下链接了解更多关于腾讯云云服务器的信息：https://cloud.tencent.com/product/cvm

总结：Nginx 404 on static files (react应用程序)的问题通常是由于Nginx配置不正确或者文件路径错误导致的。通过检查配置文件、文件路径、文件类型和缓存等方面，可以解决这个问题。腾讯云的云服务器是一个推荐的产品，可以用来部署和运行Nginx服务器。

相关搜索:404 -从nginx应用程序到远程服务器localhost？404部署React App Build时未找到Nginx错误 HTML5应用程序(云铸造)- 404未找到nginx Nginx 404 on static html文件 nginx proxy_pass开启/使用go应用程序赠送404 NGINX在页面重新加载时返回404错误(Ember应用程序)Nginx将为两个React应用程序提供服务 Nginx服务器在我的React Router应用程序中返回404 React应用程序的Heroku部署获得404分 react本机应用程序返回404错误

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【前端部署第五篇】使用 docker 部署单页应用，挂载 nginx 配置文件并对其进行系列优化

在这篇文章中，将会由 react-router-dom 实现一个简单的单页路由，并通过 Docker 进行部署。...404 Not Found 其实道理很简单：「在静态资源中并没有 about 或者 about.html 该资源，因此返回 404 Not Found。...3. nginx 的 try_files 指令在 nginx 中，可通过 try_files 指令将所有页面导向 index.html。.../build/static 目录均由 webpack 构建产生，资源路径将会带有 hash 值。 $ tree ./build/static ....location /static { expires 1y; } 5. nginx 配置文件总结缓存策略如下: 带有 hash 的资源一年长期缓存非带 hash 的资源，需要配置 Cache-Control

2K4 0

Vue + Flask 实战开发系列（十）

在部署应用之前，需要在服务器上安装好nginx。关于nginx的安装本文不做介绍。我们先从前端的部署开始。现在让我们为Vue项目创建一个nginx配置文件。...; location / { try_files $uri $uri/ = 404; add_header Cache-Control "no-cache"; }...location /static { expires 1y; add_header Cache-Control "public"; } } root指令告诉...，因此我们必须确保它始终在运行，因此从命令行启动应用程序实际上是不够的。...- Loaded: loaded (/etc/systemd/system/react-flask-app.service

2.5K2 0

react 直接打开路由页面或者刷新页面404 问题解决

loc项目前端使用了react 以及react-router，通过点击跳转到相应的路由页面没有问题，但跳转后刷新页面，或者输入路由网址直接打开页面，就会出现404错误网上查了下资料可以修改nginx...解决 #如果使用的是nginx服务器，则只需要使用try_files 指令： server { ......location / { try_files $uri /index.html } } 顺便说一下，现在用的是宝塔，安装了免费的nginx防护插件。...结果修改完nginx配置之后报错， "nginx: configuration file /www/server/nginx/conf/nginx.conf test failed" 这样卸载了插件，

2.1K2 0

React.js Vue.js 项目部署页面刷新404

使用react，vue等开发的项目因为是前后端分离，所有打包发布到服务器以后，需要放在一个静态服务器中运行配置Nginx服务器: cd /etc/nginx/conf.d vim demo.confg...添加如下信息: server { listen 80; server_name your.domain.com; location / { try_files...: service nginx restart 重启以后访问你的域名或者IP就可以正常访问项目注意事项: 当你使用了react-router的browserHistory模式或者使用了vue-router...的history模式刷新页面会出现404的情况解决方法: 修改Nginx配置信息如下: location / { try_files $uri $uri/ /index.html;...} 原理: 因为我们的项目只有一个根入口，当输入类似/home的url时，找不到这个页面，这时nginx会尝试加载index.html，加载index.html之后，react-router或vue-router

4.1K3 0

使用nginx部署网站教程

//localhost:9000; } 【try_files 设置】 try_files $uri $uri.html $uri/index.html @other; location @other {...由于项目采用react构建，与普通的静态网站有些不同 1、前端路由由于使用前端路由，项目只有一个根入口。...当输入类似/posts的url时，找不到这个页面，这是，nginx会尝试加载index.html，加载index.html之后，react-router就能起作用并匹配我们输入的/posts路由，从而显示正确的...try_files $uri $uri/ /index.html = 404; 2、反向代理由于该项目需要向后端api.xiaohuochai.cc获取数据，但是后台占用的是3000端口，相当于跨域访问...https://www.xiaohuochai.site;"; try_files $uri $uri/ /index.html = 404; } } SSR项目如果前端项目是服务器端渲染的

1.9K2 0

使用nginx部署网站

/404.html; error_page 502 503 /50x.html; error_page 404 =200 /1x1.gif; location...://localhost:9000; } 【try_files 设置】 try_files $uri $uri.html $uri/index.html @other; location @other...由于项目采用react构建，与普通的静态网站有些不同 1、前端路由由于使用前端路由，项目只有一个根入口。...当输入类似/posts的url时，找不到这个页面，这是，nginx会尝试加载index.html，加载index.html之后，react-router就能起作用并匹配我们输入的/posts路由，从而显示正确的...try_files $uri $uri/ /index.html = 404; 2、反向代理由于该项目需要向后端api.xiaohuochai.cc获取数据，但是后台占用的是3000端口，相当于跨域访问

2.6K3 1

在 10 分钟内实现安全的 React + Docker

你可以使用它打包你的应用程序，并包含多种开源 Web 服务器来为你的应用程序提供服务。另外，你还可以通过配置网络服务器来发送安全标头，这样使你的程序更安全。.../nginx.config /etc/nginx/nginx.template CMD ["/bin/sh", "-c", "envsubst .../nginx/html; index index.html; location / { try_files $$uri /index.html; } } 这个文件把...Nginx 配置为将你的 React 应用作为 SPA（其中所有路由都转到 index.html）并在 80 端口上运行。...把你的更改提交到 Git，添加 Node.js + static buildpack，然后部署 React 应用。

19.7K3 0

服务器小白的我,是如何将 node+mongodb 项目部署在服务器上并进行性能优化的

/nginx 关闭 nginx ./nginx -s stop 重启 ./nginx -s reload 基本的使用就是这样子了。...如下给出我的 nginx 代理的设置：我的两个项目是放在 /home/blog/blog-react/build/; 和 /home/blog/blog-react-admin/dist/; 下的，.../404.html; # redirect server error pages to the static page /50x.html #...} 因为进入到文章详情时或者前端路由变化了，再刷新浏览器，发现浏览器出现 404 。...刷新出现 404 问题，可以看下这篇文章 react,vue等部署单页面项目时,访问刷新出现404问题 3.5 上传项目代码，或者用码云、 gihub 来拉取你的代码到服务器上我是创建了码云的账号来管理项目代码的

1.5K2 2

Nginx配置中root和alias分不清？本文３分钟帮你解惑！

$uri $uri/ =404; } location ^~ /img { root /var/www/static; try_files $uri...$uri/ =404; } } 如上配置，当用户访问https://www.wljslmz.cn/img/wljslmz.png时，会找到/var/www/static/img/wljslmz.png...Nginx alias指令 alias 指令就是将 URL 重新映射到根位置以外的其他目录，它对于从不同目录提供静态文件很有用，例如，如果位置 /static/ 的别名是 /var/www/static...$uri $uri/ =404; } location ^~ /img { alias /var/www/static/images/; try_files...$uri $uri/ =404; } } 如上配置，当用户访问https://www.wljslmz.cn/img/wljslmz.png时，会找到/var/www/static/images

6812 0

Nginx部署Vue项目以及解决刷新页面404

在部署vue、react的前端项目时，经常会出现404的问题，一般是文件不是真正的存在，所以Nginx报404的错误一、打包项目 1.在项目中的package.json上右键，点击Show npm...三、解压此文件到nginx/html/目录下 ? 四、复制dist目录到nginx的html目录中 ? 到此vue项目就全部部署到nginx服务器中啦！...五、解决项目部署到nginx服务器中刷新页面404的问题 1....进入nginx配置文件目录 cd nginx/conf/ 2.编辑配置文件nginx.conf vi nginx.conf 输入命令 i 进入编辑模式,在指定位置添加代码 location / {...try_files $uri $uri/ /index.html; ---解决页面刷新404问题} 3.

5.1K2 0

Umi&React打包部署到非根目录及刷新报错404的问题解决

因为路由没有匹配上，比如你把应用部署在 /xxx/ 下，然后访问 /xxx/hello，而代码里匹配的是 /hello，那就匹配不上了，而又没有定义 fallback 的路由，比如 404，那就会显示空白页...这时需要修改一下服务器的配置，以 Nginx 为例：（Nginx配置文件位置为/etc/nginx/nginx.conf） server { # ... ... # 增加下列命令， index.html 可换为项目中使用的其它文件名 try_files $uri $uri/ /index.html; } } 知识扩展： Nginx 的 try_files...命令的使用方式有两种： try_files file ... uri; try_files file ... ...未经允许不得转载：w3h5 » Umi&React打包部署到非根目录及刷新报错404的问题解决

4.8K3 0

Umi&React打包部署到非根目录及刷新报错404的问题解决

因为路由没有匹配上，比如你把应用部署在 /xxx/ 下，然后访问 /xxx/hello，而代码里匹配的是 /hello，那就匹配不上了，而又没有定义 fallback 的路由，比如 404，那就会显示空白页...这时需要修改一下服务器的配置，以 Nginx 为例：（Nginx配置文件位置为/etc/nginx/nginx.conf） server { # ... ... # 增加下列命令， index.html 可换为项目中使用的其它文件名 try_files $uri $uri/ /index.html; } } 知识扩展： Nginx 的 try_files...命令的使用方式有两种： try_files file ... uri; try_files file ... ...未经允许不得转载：w3h5-Web前端开发资源网 » Umi&React打包部署到非根目录及刷新报错404的问题解决

5033 0

如何将node+mongodb项目部署在腾讯云服务器，并进行性能优化的

3.4 用 nginx、apache 或者 tomcat 来提供 HTTP 服务或者设置代理我是用了 nginx 的，所以这里只介绍 nginx 。.../nginx 关闭 nginx ./nginx -s stop 重启 ./nginx -s reload 基本的使用就是这样子了。...如下给出我的 nginx 代理的设置：我的两个项目是放在 /home/blog/blog-react/build/; 和 /home/blog/blog-react-admin/dist/; 下的，如果你们的路径不是这个.../404.html; # redirect server error pages to the static page /50x.html #...} 因为进入到文章详情时或者前端路由变化了，再刷新浏览器，发现浏览器出现 404 。

8.7K9 3

React 项目部署后，页面404解决

解决方法一： Nginx 配置 { listen 80 ; listen [::]:80 ; root /usr/local/react/build; //项目打包代码地址...location / { try_files $uri $uri/ /index.html; //项目服务访问地址 } } 解决方法二： BrowserRouter...换成 HashRouter import React from 'react'; import ReactDOM from 'react-dom/client'; import {HashRouter...} from 'react-router-dom' import App from '....这是因为实际上并没有这样的物理路径，或者没有配置路由请求，所以内容无法显示，而显示404错误。

2.8K3 0

现代Web开发系列教程_07

frontend/js/demo6.js import React from 'react'; import ReactDOM from 'react-dom'; import ReactRouter...from 'react-router'; import { Router, Route, IndexRoute, browserHistory } from 'react-router'; class...progress" }, 后端代码 backend/server.js "use strict"; const koa = require('koa'); const serve = require('koa-static...stats) this.throw(404); } }); const port = 5000; app.listen(port); console.log("server started...on port " + port); 因为前端使用了browserHistory路由，后端要实现类似nginx的try_files逻辑，详情见这里，如果后端是用Java写法，可以考虑使用TryFilesFilter

5945 0

nginx 代理多个服务器——多个server方式

/404.html; # redirect server error pages to the static page /50x.html.../404.html; # redirect server error pages to the static page /50x.html...从而实现了nginx代理多个服务器的目的。.../404.html; # redirect server error pages to the static page /50x.html.../404.html; # redirect server error pages to the static page /50x.html

5.1K1 0

Yii2 起步之创建项目

app根目录 assets/ assets管理定义 commands/ 命令行工具（controller） config/ 应用程序配置...try_files $uri $uri/ /$yii_bootstrap?...$args; } # uncomment to avoid processing of calls to unexisting static files by yii #location...(js|css|png|jpg|gif|swf|ico|pdf|mov|fla|zip|rar)$ { # try_files $uri =404; #} #error_page...404 /404.html; location ~ \.php$ { include fastcgi.conf; fastcgi_pass 127.0.0.1

9292 0

Nginx使用replace-filter-nginx-module实现内容替换

--with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --with-ipv6 --with-http_sub_module...--with-http_gzip_static_module --with-ipv6 --with-http_sub_module --with-ld-opt=-ljemalloc --with-http_ssl_module...修改：/usr/local/nginx/conf/vhost/test.com.conf location ~ [^/]\.php(/|$) { # comment try_files $uri...=404; to enable pathinfo try_files $uri =404; fastcgi_pass 127.0.0.1:9000; fastcgi_index...$uri =404; to enable pathinfo try_files $uri =404; fastcgi_pass 127.0.0.1:9000; fastcgi_index

9991 0

前端部署演化史

，这时已经使用 React 开发应用，使用 webpack 来打包。.../ { # 避免非root路径404 try_files $uri $uri/ /index.html; } # 解决跨域 location /api { proxy_pass...:css|js)$ { try_files $uri =404; expires 1y; add_header Cache-Control "public"; }...location ~ ^.+\..+$ { try_files $uri =404; } } 不过...经常有时候跑不起来运维抱怨着前端的部署脚本没有标好 node 版本，前端嚷嚷着测试环境没问题...--from=builder code/public/static /usr/share/nginx/html/static 那它怎么做的先 ADD package.json /code, 再 npm

1.3K1 0

Ubuntu 安装phpMyAdmin + 配置nginx

/html ``` 0x03 配置nginx 添加server节点，监听端口8001 server { charset utf-8; client_max_body_size 128M; listen...$uri $uri/ /index.php$is_args$args; } # uncomment to avoid processing of calls to non-existing static...files by Yii #location ~ \....(js|css|png|jpg|gif|swf|ico|pdf|mov|fla|zip|rar)$ { # try_files $uri =404; #} #error_page 404 /404.html...$uri =404; } location ~* /\. { deny all; } 0x04 重启nginx ``` sudo service nginx restart ``` 0x05 测试

1.7K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭