After coding my first website on React, I want to host it on a raspberry pi using nginx.
I have checked website is ok by npm start:
I then built it to create static files using npm run build to create the following files in ~/Documents/myWebsite1/build:
asset-manifest.json css favicon.ico files images index.html js manifest.json resumeData.json robots.txt static
After this I installed nginx, deleted default in both /etc/nginx/sites-available and /etc/nginx/sites-enabled then added the following file in /etc/nginx/sites-available:
server {
listen 80;
server_name localhost;
root ~/Documents/myWebsite1/build;
index index.html index.htm;
location / {
try_files $uri /index.html =404;
}}
nginx -t confirms syntax is ok.
nginx -T confirms only this server block is running.
When I go to my IP address, the page just reads 404 Not Found.
I have checked the logs using sudo tail -n 20 /var/log/nginx/error.log which return:
2022/01/10 18:01:25 [notice] 15929#15929: signal process started
Any ideas as to what I might be doing wrong?
Cheers,
Will
Nginx was trying to access the directory ~/Documents/myWebsite1/build but ~ is only a shell shortcut. Changing to an absolute path fixed it right away :)
Related
I am running on ubuntu. I have nginx running on my computer. I get the welcome page for nginx when I go to the my ip address in the browser but I can't see my react app. I just get a 404 error that says nginx on it. My app is a react app built with create-react app. I made the build with npm run build. I created a site in site-available with nano. which looks like
server {
server_name 192.168.43.177;
root home/a/Documents/d/dapp1/mainDapp/client/build/;
index index.html;
location / {
try_files $uri /index.html =404;
}
}
at first I ran
sudo ln -s /etc/nginx/sites-available/sdft /etc/nginx/sites-enabled/sdft
That brings up 404 error page in the browser that says nginx on it. I then ran this command
sudo ln -s /etc/nginx/sites-available/sdft.nginx /etc/nginx/sites-enabled/sdft.nginx
that bring up "This site can’t be reached" when I go to the ip address in my browser
and every time I edit a file I restart the server but there is no mention of nginx on the error page.
systemctl restart nginx
Please help me.
I am adding an another answer.
You want to navigate to the IP (192.168.43.177). Webservers listen to port 80 (by default).
I get the welcome page for nginx when I go to the my ip address.... is it like this?
If yes nginx is working properly. Goto /etc/nginx/sites-available/default and see what is the path of the root.
In the example above, path is /var/www/html. You should copy your build to this path, i.e. your index.html must be here.
You dont have to change anything in the default.
Running on the belief that you have already loaded the index.html directly with your browser ...
I believe nginx looks for .conf files.
Please try renaming your /etc/nginx/sites-available/sdft.nginx to sdft.conf
Then please try setting your symlink to
ln -s /etc/nginx/sites-available/sdft.conf /etc/nginx/sites-enabled/sdft.conf
If your issue remains unresolved then please try
server {
server_name 192.168.43.177;
root home/a/Documents/d/dapp1/mainDapp/client/build/;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
Noting the change in from index.html to $uri/ location.
Please also validate your system is listening for port 80 and no other services are competing.
Due to reputation limits I can not ask you questions.
Firstly check if all configuration for nginx is passing with:
sudo nginx -t
Is it okay?
sudo ln -s /etc/nginx/sites-available/**sdft** /etc/nginx/sites-enabled/**sdft**
These filename must match.
and also try adding listen 80;, so that it knows what port to listen to.
server {
listen 80; # add this
server_name 192.168.43.177;
root home/a/Documents/d/dapp1/mainDapp/client/build/;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
I put the files of my React build in: root/website.com/site/public.
My /etc/nginx/sites-available/default:
server {
listen 80 default_server;
root /root/website.com/site/public/;
server_name 00.000.00.000;
index index.html index.htm;
location / {
try_files $uri $uri/ =404;
}
}
I get a bad gateway error when I go to my ip address. Do I need to run npm start to get my index.html to show up?
For some reason when I run npm start it searches for index.html in /site/src then if I change the name of public to src it searches in site/public.
Using /root/website.com/site/public was unreachable by nginx apparently. Changed it to the typical /var/www/website/site/public and moved my build file there and it worked.
I've got React app.
It works well on local machine (app + prerender-spa-plugin). I run it with command http-server into ./build package
However thing go wrong on server - it acts like if I launch it with serve-s command.
There is docker with nginx image on server.
I tried to reconfigure nginx the way that it uses different index.html for different URLs, but fail again
Do the problem with routing to directories that keeps static images?
How it could be resolved? or where I could find information about it?
You have to create virtual host on nginx server and point it to build folder of the app. Don't forget to run npm run build.
Simple nginx config
server {
listen 80;
listen [::]:80;
root /var/www/reactjsapp/build;
index index.html index.htm;
server_name reactjsapp.com;
location / {
try_files $uri /index.html;
}
location ~ /\.ht {
deny all;
}
}
I decided it.
My config
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
From official documentation:"It is possible to check directory’s existence by specifying a slash at the end of a name, e.g. “$uri/”."
https://i.stack.imgur.com/PusBE.png
I have tried to deploy my app on heroku and it work normally. But when I build my app using react-app-rewired script and deploy it to my server using nginx. When access my app, it still work fine but if I reload page with contextPath: http://35.240.229.243/products it throws 404 error. You can access my app in http://35.240.229.243 to test. I am using react-router with history. Help me thanks
First you need to find default nginx conf file and disable it, by default it will be under /etc/nginx/sites-enabled/default
sudo rm -rf /etc/nginx/sites-enabled/default
and create new file under /etc/nginx/sites-available/
sudo touch /etc/nginx/sites-enabled/default/redbox
and use vim or nano to put this text into new conf file redbox,
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
and enable it
sudo ln -s /etc/nginx/sites-available/redbox /etc/nginx/sites-enabled/redbox
next, make sure that there are no syntax errors in Nginx files,
sudo nginx -t
If no problems were found, restart Nginx.
sudo systemctl restart nginx
I uploaded react.js application to a server. I'm using nginx server. Application is working fine. But when I go to another page & refresh, the site is not working. It's showing a 404 Not found error.
How can I solve this?
When your react.js app loads, the routes are handled on the frontend by the react-router. Say for example you are at http://a.com. Then on the page you navigate to http://a.com/b. This route change is handled in the browser itself. Now when you refresh or open the url http://a.com/b in the a new tab, the request goes to your nginx where the particular route does not exist and hence you get 404.
To avoid this, you need to load the root file(usually index.html) for all non matching routes so that nginx sends the file and the route is then handled by your react app on the browser. To do this you have to make the below change in your nginx.conf or sites-enabled appropiately
location / {
try_files $uri /index.html;
}
This tells nginx to look for the specified $uri, if it cannot find one then it send index.html back to the browser. (See https://serverfault.com/questions/329592/how-does-try-files-work for more details)
The answers given here are correct. But, I was struggling with this when trying to deploy my React Application in a docker container. The problem was on, how to change the nginx configs inside a docker container.
Step 1: Prepare your Dockerfile
# Stage 1
FROM node:8 as react-build
WORKDIR /app
COPY . ./
RUN yarn
RUN yarn build
# Stage 2 - the production environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
See line with command: COPY nginx.conf /etc/nginx/conf.d/default.conf. Here, we are telling Docker to copy the nginx.conf file from the docker host, to the docker container.
Step 2: Have a nginx.conf file in your application root folder
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Step 3: Now build the docker image and run it
$ docker build . -t react-docker
This should build your docker image successfully.
To check that, run
$ docker images
Now run
$ docker run -p 8000:80 react-docker
and navigate to http://localhost:8000
This was inspired by this blog.
For me the solution was:
location / {
root /var/www/myapp/build;
index index.html;
try_files $uri /index.html$is_args$args =404;
}
After many hours I finally got this working with:
try_files $uri /index.html$is_args$args =404;
The last arg (=404) is what made this work.
This worked for me while using nginx to serve react:
Edit the location section of the nginx.conf(or can also be default.conf) file to be as below. The nginx.conf file is found somewhere in /etc/nginx/sites-available/yoursite
location / {
# First attempt to serve request as file, then
# as directory, then redirect to index(angular) if no file found.
try_files $uri $uri/ /index.html;
}
The full nginx.conf configuration will therefore be as below:
server {
listen 80 default_server;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
location /{
try_files $uri $uri/ /index.html;
}
}
The problem comes when you are in a path for eg http:///some/path and you hit refresh you get a 404 error page. This extra line in the ngnix configuration could solve the issue.
location /{
try_files $uri $uri/ /index.html?/$request_uri;
}
After adding do a nginx service restart.
This worked for me
location /{
try_files $uri $uri/ /index.html$is_args$args;
}
If your are using nextjs like I am, maybe you need add this to next.config.js
module.exports = {
trailingSlash: true,
}
And build your project again.
For reference:
https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash
try using following commands in sites-enabled
sudo nano /etc/nginx/sites-available/Your_WEB_Folder
try_files $uri $uri/ /index.html;
Get me some towers now!