gpt4 book ai didi

nginx - React-router 和 nginx

转载 作者:行者123 更新时间:2023-12-03 05:15:00 24 4
gpt4 key购买 nike

我正在将我的 React 应用程序从 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" "-"

我应该在哪里寻找修复?

我的路由器在 react 中看起来像这样:

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 - 这是一些 react 代码。

最佳答案

nginx 配置中的位置 block 应该是:

location / {
try_files $uri /index.html;
}

问题是对index.html文件的请求可以工作,但您当前没有告诉nginx将其他请求也转发到index.html文件。

关于nginx - React-router 和 nginx,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43951720/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com