My web app is configured with React frontend and asp.net backend. But to deploy this to aws ec2 instance, I've a little problem. I'm now deploying react app using http-server and nginx on aws. The routes are configured by this code.
<AlertProvider>
<NavbarProvider>
<Router>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/signup" element={<Sign signUp />} />
<Route path="/login" element={<Sign />} />
<Route path="/upload-portfolio" element={<Portfolio />} />
<Route path="/manage-users" element={<Manager />} />
<Route path="/manage-endpoints" element={<Manager />} />
<Route path="/manage-custom-nodes" element={<Manager />} />
<Route path="/manage-value-types" element={<Manager />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
</NavbarProvider>
</AlertProvider>
And nginx configuration is as following
server {
listen 80;
location / {
proxy_pass http://localhost:8080;
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_set_header X-Forwarded-Proto $scheme;
}
# Fontend proxies
location /signup {
proxy_pass http://localhost:8080;
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_set_header X-Forwarded-Proto $scheme;
}
location /login {
proxy_pass http://localhost:8080;
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_set_header X-Forwarded-Proto $scheme;
}
location /upload-portfolio {
proxy_pass http://localhost:8080;
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_set_header X-Forwarded-Proto $scheme;
}
location /manage-users {
proxy_pass http://localhost:8080;
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_set_header X-Forwarded-Proto $scheme;
}
location /manage-endpoints {
proxy_pass http://localhost:8080;
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_set_header X-Forwarded-Proto $scheme;
}
location /manage-custom-nodes {
proxy_pass http://localhost:8080;
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_set_header X-Forwarded-Proto $scheme;
}
location /manage-value-types {
proxy_pass http://localhost:8080;
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_set_header X-Forwarded-Proto $scheme;
}
# Backend proxies
location /user {
proxy_pass http://localhost:5000;
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_set_header X-Forwarded-Proto $scheme;
}
location /portfolio {
proxy_pass http://localhost:5000;
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_set_header X-Forwarded-Proto $scheme;
}
location /category {
proxy_pass http://localhost:5000;
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_set_header X-Forwarded-Proto $scheme;
}
}
But unfortunately, I can't find /login or /upload-portfolio page directly.
When I redirect using useNavigate
hook, I can, but if I use window.href.url
or find host/login
, I can't find page.
If you have experience with it, I hope you help me.
Thank you.
I solved this problem.
This problem is ocurred in deploying single page web app.
I solved this problem using http-server-spa
.
If you met similar problem, I think that it can help you.
Thank you.