我正在将我的反应应用程序从webpack-dev-server转换为nginx。
当我转到根URL" localhost:8080 / login"我只是得到一个404,在我的nginx日志中,我看到它试图得到:
my-nginx-container | 2017/05/12 21:07:01 [error] 6#6: *11 open() "/wwwroot/login" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /login HTTP/1.1", host: "localhost:8080"
my-nginx-container | 172.20.0.1 - - [12/May/2017:21:07:01 +0000] "GET /login HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0" "-"
我应该在哪里寻找解决方案?
我的路由器反应如下:
render(
<Provider store={store}>
<MuiThemeProvider>
<BrowserRouter history={history}>
<div>
Hello there p
<Route path="/login" component={Login} />
<App>
<Route path="/albums" component={Albums}/>
<Photos>
<Route path="/photos" component={SearchPhotos}/>
</Photos>
<div></div>
<Catalogs>
<Route path="/catalogs/list" component={CatalogList}/>
<Route path="/catalogs/new" component={NewCatalog}/>
<Route path="/catalogs/:id/photos/" component={CatalogPhotos}/>
<Route path="/catalogs/:id/photos/:photoId/card" component={PhotoCard}/>
</Catalogs>
</App>
</div>
</BrowserRouter>
</MuiThemeProvider>
</Provider>, app);
我的nginx文件是这样的:
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/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;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
server {
listen 8080;
root /wwwroot;
location / {
root /wwwroot;
index index.html;
try_files $uri $uri/ /wwwroot/index.html;
}
}
}
编辑:
我知道大多数设置都有效,因为当我在没有登录的情况下访问localhost:8080时,我也会获得登录页面。这不是通过重定向到localhost:8080 / login - 它是一些反应代码。
答案 0 :(得分:144)
nginx配置中的位置块应为:
location / {
try_files $uri /index.html;
}
问题是对index.html文件的请求有效,但您目前还没有告诉nginx将其他请求转发到index.html文件。
答案 1 :(得分:11)
也许这不是确切的情况,但是对于使用$.ajax({
url: "YourRequestURL",
error: function(){
// This function would triggered when timeout occurred
},
success: function(){
//Your logic after success request
},
timeout: 3000 // sets timeout 1 to 3 seconds is mostly used
});
和docker
为react
项目运行react-router
容器的任何人,我拥有的一切我的webpack-dev-server
中需要的内容:
nginx.conf
但是nginx仍然不会向根server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 404 /index.html;
location = / {
root /usr/share/nginx/html;
internal;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
发送404错误。在查看了容器之后,我注意到/
中有一些配置,它们会以某种方式覆盖我的配置,因此删除我的/etc/nginx/conf.d/default.conf
中的文件可以解决问题:
dockerfile
答案 2 :(得分:8)
这是我的解决方法
简单尝试:
location / {
root /var/www/mysite;
try_files $uri /index.html;
}
不再尝试使用非html类型:
location / {
root /var/www/mysite;
set $fallback_file /index.html;
if ($http_accept !~ text/html) {
set $fallback_file /null;
}
try_files $uri $fallback_file;
}
不再尝试非HTML类型和目录(使try_files
与index
和/或autoindex
兼容)
location / {
root /var/www/mysite;
index index.html;
autoindex on;
set $fallback_file /index.html;
if ($http_accept !~ text/html) {
set $fallback_file /null;
}
if ($uri ~ /$) {
set $fallback_file /null;
}
try_files $uri $fallback_file;
}
答案 3 :(得分:2)
以下是适用于实时服务器的解决方案:
我只有followed this tutorial,使用基本的Nginx配置只是配置了位置块。
location / {
try_files $uri $uri/ /index.html;
}
答案 4 :(得分:2)
使用您的 / 块如下:
server {
listen 8080;
server_name localhost;
absolute_redirect off;
root /usr/share/nginx/html;
index index.html;
location / {
expires 5m;
add_header Cache-Control "public";
try_files $uri $uri/ /jobs/index.html;
}
}
答案 5 :(得分:1)
我在使用 service worker 和这个确切的 nginx 配置的 create-react-app 时遇到了一些问题。发布网站的新版本后,Service Worker 将重新获取 JS 并发送 index.html 文件而不是 404。所以我更新的 nginx 配置版本是这样的:
location / {
try_files $uri /index.html;
}
location /static/ {
try_files $uri =404;
}
它确保 /static/ 中的任何内容都不会返回 index.html。
答案 6 :(得分:0)
对我来说,直到我添加了根指令,所有的东西都没有起作用。对于我来说,这也可以使用反向代理来建立/ api /网络服务器端点。
location / {
root /usr/share/nginx/html;
try_files $uri /index.html;
}
答案 7 :(得分:0)
我正在处理相同的问题,我认为那是一个conf错误,但没有。我正在将conf文件复制到#4) v/hjust in element_text
ggplot(iris) +
geom_point(aes(x = Sepal.Length, y = Sepal.Width, fill = Species), shape = 21) +
theme(legend.title = element_text(angle = -90, hjust = 0.5, vjust = 0.5)) +
guides(fill = guide_legend(title.position = "right",
title = "This is the species... Yup, defo the species"))
文件夹中。那在开发人员中有效,但在构建版本中会导致该问题。当路由失败时,nginx不会回退到索引。
只需将conf文件复制到正确的文件夹:/etc/nginx/conf.d/
示例Dockerfile指令:
/etc/nginx/conf.d/default.conf
希望有帮助。
答案 8 :(得分:0)
如果您刚开始,这里有一些步骤可能会对您有所帮助
/
返回到根cd ..
,则您应该进入/
/etc/nginx/sites-available/{yoursitename or default}
cd中的.conf文件以导航至该文件。nano
或vim
编辑该文件,我像这样vi {your site.conf}
使用Vim server {
listen 80;
server_name www.yourDomainName.com, yourDomainName.com;
location / {
root /usr/share/nginx/{location of the build of your react project};
index index.html index.htm;
try_files $uri $uri/ /index.html;
passenger_enabled on;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
答案 9 :(得分:0)
Nginx将尝试在根目录中找到index.html,如果您使用的是其他位置,则可能需要将其添加到try_files指令中:
所以代替:
location /MyLocation {
root /var/www/html;
try_files $uri /index.html;
}
您应该这样做:
location /MyLocation {
root /var/www/html;
try_files $uri /MyLocation/index.html; # Make sure to add the folder to the path
}
通过将MyLocation添加到try_files中,可以使nginx在重定向路由时使用正确的index.html。
答案 10 :(得分:0)
0
我知道这个问题已经死了,但它并不能解决您要通过代理传递使用浏览器路由器而不能使用root的问题。
对我来说,解决方案非常简单。
假设您的网址指向某个端口。
location / {
proxy_pass http://127.0.0.1:30002/;
proxy_set_header Host $host;
port_in_redirect off;
}
,现在由于浏览器路由器,子路径已损坏。但是,您知道什么是子路径。
解决方案?对于子路径/ contact
# just copy paste.
location /contact/ {
proxy_pass http://127.0.0.1:30002/;
proxy_set_header Host $host;
}
我没有尝试过其他任何方法,但是这个简单的修复方法就像该死的魅力。
答案 11 :(得分:-1)
location / {
root /path/to/root/directory/of/staticfiles;
index index.html;
try_files $uri /index.html;
}