I use nginx as my static file server for my NextJS application, in order to test it in dev environment. My application follows a pattern in which I have, normaly, the following routes:
someRoute/
index.tsx
register.tsx
[id].tsx
My nginx.conf file has the following content:
worker_processes 4;
events { worker_connections 1024; }
http {
server {
listen 80;
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html /register.html;
}
}
What is happening is that, when I create a docker image of the application using nginx, if i try to access someRoute/register or someRoute/123, I always get the localhost/index page. someRoute/index works fine, but the other two don't.
My guess is that when I try to navigate to someRoute/123 nginx expects to find 123.html inside $uri/, which of course won't happen, since it is a dynamic route. As per register.html, I really don't know what's wrong.
How do I get someRoute/register and someRoute/[id] working?
Related
Just started with using React. I have an app created with create-react-app which should be running on a sub-directory while making API calls to a different path.
React App:
location on server: /var/www/myapp/build
endpoint: https://foo.example.com/analytics
Data API endpoint: https://foo.example.com/api/data
Nginx setup
location /analytics {
root /var/www/myapp/build;
try_files $uri /index.html;
}
When setting "homepage":"https://foo.example.com/analytics" in the client's package.json, all the resource paths seem to be correct (i.e. https://foo.example.com/analytics/static/...), but when checking networking no request to .../api/data shows up in my browser's networking inspector and the app doesn't properly spawn.
Using absolute paths in the App's API call (fetch('https://foo.example.com/api/data') instead of fetch('/api/data')) doesn't seem to help, either.
When instead I set "homepage":"." in package.json and also change the Nginx config to serve the react build directory on server root, the app works.
server {
root /var/www/myapp/build;
}
However, in this case, the app is also available under https://foo.example.com, which is something I don't want.
I strongly suspect this has to do with routing, but couldn't figure out how to fix it. So any help would be much appreciated!
--- Edit / Solution ---
I doubt it's the most straight forward solution, but the following setup works for me:
React App
In package.json, set "homepage":"./analytics" before running npm run build
Nginx config:
location = /analytics {
root /var/www/myapp/build;
try_files /index.html =404;
}
location ~ ^/analytics(.*) {
root /var/www/myapp/build;
try_files $1 $1/ /index.html =404;
}
My understanding is that the initial setup using try_files $uri was looking for files in the root directory /var/www/myapp/build for the full uri rather than only the path that follows /analytics. E.g. when requesting ../analytics/css/styles.css it would check if a file (or directory) is available under /var/www/mayapp/build/analytics/css/styles.css which doesn't exist, so it kept serving the index.html as fallback. Hence the regex workaround.
Feedback to improve this solution still very welcome, though.
I was struggling with the same problem. Finally I was able to solve it using official documentation and a combination of answers:
Assumptions:
Your React App is based on create-react-app package (you are using react-router-dom).
You are using Nginx and the root path is being used by another service (or even another React/Gatsby App which is my case).
You want to deploy the React App on a subdirectory and be able to serve all statics of your React App from that subdirectory.
React App Changes:
Based on official documentation.
Update your BrowserRouter by adding a basename. Example: <BrowserRouter history={history} basename="/webapp">.
Specify a homepage on your package.json. Example: "homepage": "/webapp".
If you are referencing a static file by its relative path, you should add the subdirectory to that reference. Example: src="/static/logo/logo.png" becomes src="/webapp/static/logo/logo.png".
Nginx Changes:
location ^~ /webapp {
alias /var/www/myapp/build;
try_files $uri $uri/ /webapp/index.html;
}
Here is an example of nginx location configuration:
location ^~ /analytics {
alias /var/www/myapp/build;
subs_filter href="/ href="http://foo.example.com/analytics;
subs_filter src="/ src="http://foo.example.com/analytics;
}
The location is set to ^~ /analytics , meaning that the rules created in the location braces will become effective when somebody visits http://foo.example.com/analytics
The alias is set to the static build folder of create-react-app site /var/www/myapp/build. That’ll be served when the visitor hits your subdirectory url foo.example.com/analytics
Next, the two subs_filter lines replace any reference to href and src urls that start with the React app’s home directory / with the new complete URL. That will ensure all your CSS and JS files are located and served correctly by NGINX.
The final thing, in the case of Create-React-App is that any references to createBrowserHistory in your react router need to be replaced by createHashHistory, as Browser History won’t work with the above NGINX configuration.
My website is called derekdawsonspersonalwebsite.com and I wanted to serve a react app I made at derekdawsonspersonalwebsite.com/metronome/
I got this working by doing the following:
Added "homepage": "/metronome", to the package.json file
If you are using react router, add <BrowserRouter basename="/your_subdirectory">, in my case:
<BrowserRouter basename="/metronome">
<div>
<nav>
<Link to="/"></Link>
</nav>
<Switch>
<Route exact path="/" component={Metronome} />
</Switch>
</div>
</BrowserRouter>
yarn run build
I uploaded the contents of the build directory to this location on my server /var/www/personalwebsite.com/metronome
This is what my server block /etc/nginx/sites-available/personalwebsite.com looks like
server {
listen 443 ssl;
server_name derekdawsonspersonalwebsite.com www.derekdawsonspersonalwebsite.com;
ssl_certificate /home/derek/ssl/derekdawsonspersonalwebsite.com_chain.crt;
ssl_certificate_key /home/derek/ssl/derekdawsonspersonalwebsite.com_tld.key;
location / {
root /var/www/personalwebsite.com;
index index.html;
}
location /metronome {
root /var/www/personalwebsite.com;
index index.html;
}
}
server {
listen 80 default_server;
server_name derekdawsonspersonalwebsite.com www.derekdawsonspersonalwebsite.com;
return 301 https://$host$request_uri;
}
First of all I'm new to react, so i'm still learning about it.
I got this problem with react if I make a hyperlink from another domain/site to react app on localhost, eg http://localhost:8089/foo/bar. it show the correct page directly but if I make a hyperlink from another domain/site to a public domain with https protocol eg https://example.com/foo/baz it always redirected to homepage page (https://example.com/)
is there anything I can do to make it go straight to https://example.com/foo/baz. I run react on nginx web server with this redirection setting it went well for php, django etc but won't run with react.
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name example.com;
return 301 https://$server_name$request_uri;
root /home/[path to dist folder]/web/app/dist;
index index.html index.htm;
}
FYI the react app is build with webpack thanks in advance
I things the probleme is :
"return 301 https://$server_name$request_uri;"
You should maybe replace it :
"return 301 https://$server_name/$request_uri;"
I've manage to put the right config for the file.
it should be like this
server {
...
location / {
...
try_files $uri $uri/ /index.html;
}
...
}
thanks all for your help
I have a react website which I am hosting inside a Docker container that is running Nginx, which I have running on Port 3000. I then have an instance of Nginx on my host machine, which I have a reverse proxy pointing to 127.0.0.1:3000.
Everything works fine, except I have a Twitter authentication call, which uses a callback. When the url points back to mysite.com/authenticated, this is asking Nginx for the path which of course falls over.
I have scoured the internet and have found many posts indicating I should have this in my nginx default file:
location / {
proxy_pass 127.0.0.1:3000;
try_files $uri $uri/ /index.html;
}
When I then navigate to my website, even the root, I am getting unexpected token < in the console errors.
What could be causing this issue?
Lets say you are calling external twitter api http://twitter/auth.com/twitter/authentication for authentication.
And in your react action file you have give url as /twitter/authentication to call.For this case following will be the configuration.
server {
location / {
proxy_pass http://127.0.0.1:3000;
}
location /twitter/authentication {
proxy_pass http://twitter/auth.com;
}
}
You have to write every location config inside server in nginx config.
After any modification in this config, you have restart nginx.
For me it was the link to app.js
<script src="/app/bundle.js"></script>
When I tried to reach my App at
http://localhost:8080/serv9090
the browser tried to find /app/bundle.js via
http://localhost:8080/app/bundle.js
Which is not found at localhost:8080 (nginx)
For a first try I changed
<script src="/app/bundle.js"></script>
to
<script src="http://localhost:8080/serv9090/app/bundle.js"></script>
This worked fine.
Hope this helped.
I solved this issue by adding the following into the nginx conf file:
location ~ .(static)/(js|css|media)/(.+)$ {
try_files $uri $uri/ /$1/$2/$3;
}
I am trying to configure CakePHP 3 on OSX running nginx. The default page reports that everything is working except URL rewriting. However, I have URL rewriting working for page URLs (just followed the instructions for nginx setup). The only thing that's not working is loading static assets from webroot. I've been digging through a ton of similar stackoverflow questions and none of the responses seem to work.
vhost file:
server {
listen 80;
server_name albums.dev;
root /Users/username/Sites/albums;
access_log /Library/Logs/default.access.log main;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include /usr/local/etc/nginx/conf.d/php-fpm;
}
}
Again: The entire CakePHP application seems to be working correctly, except the static assets in /webroot/ are coming up as 404.
change the root .. you must point to webroot of your project
if you want i can give my conf to you
For clean urls in angularjs I must use $locationProvider.html5Mode(true); but when I refresh my page it shows a 404.
I've read that I need to configure server file.
Structure
/html -
/views -
home.html
about.html
contact.html
index.html
app.js
What I've done so far:
nginx.conf
server {
root /html/views;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
The Angular HTML5 location mode basically took advantage of HTML5 history API to "simulate" URL changes in client. But the URLs are probably not real (not exist) from the point of view from server therefore it's not possible to locate those pages on the server. There are generally two solutions can let server to know the URLs:
Use server-side rendering. This is widely used by another framework called ReactJS. And actually AngularJS 2.0 can work on a server too. Therefore it is possible to generate the real pages server-side and serve them to the client.
Use HTTP server rewrite techniques. This is what you are trying to do. The idea is to forward all related requests to a single AngularJS entrypoint HTML page, normally it's the index.html from the root.
For your case, assume the entrypoint of AngularJS is /index.html. Try this:
server {
root /html/views;
index index.html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
The previous solution is not perfect, because it will test every request arbitrarily. We can avoid unnecessary URL looking up by specify more detailed rules:
server {
root /html/views;
index index.html;
rewrite "^/users" /index.html last;
rewrite "^/pages" /index.html last;
...
}
Use regular expressions to match the URLs you want to serve with Angular.