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
Related
I've set up an Express and React website using nginx and Elastic Beanstalk. It works fine when navigating the website, but if I refresh on a route other than the home route, or try type in a specific route other than the home route it causes a 404.
I've found a lot of different solutions to do with changing the nginx.config, and think I'm one step away. This is my current nginx.config:
server {
listen 80;
server_name leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com www.leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com;
root /var/www/leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
I've seen a lot of solutions suggesting to use root /usr/share/nginx/html;, however when I use this instead of the root above every page links to the nginx index.html. So I changed to try the root as the path to the domain, which I think I have wrong, but don't know how to work out the path, and currently causes 500 internal error on every route including the home route.
Any help would be massively appreciated, thanks.
I think your nginx config has the wrong syntax. In the below nginx.conf, the / location points to your index.html in the folder /var/www/html
server {
listen 80;
server_name leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com www.leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com;
location / {
root /var/www/html;
index index.html
try_files $uri $uri/ /index.html;
}
}
You need to manually copy all the content of the client/build folder to /var/www/html - or you can just create a symlink (which is IMO not the very best solution, but it should work)
ln -s client/build /var/www/html
If you want to work with a symlink, make sure to remove the folder before creating the symlink otherwise you get an error
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 have a situation where i have two apps developed in react.
User App
Admin App
I made a build of both apps and have placed the user app build in site directory, where as admin app build is inside site/admin directory
What i want is
when someone tries www.mydomain.com/admin, it should go to admin directory, where as if no admin is given in url then it should not look for admin instead user files should be served.
I am willing to change directory structure any possible way to make this urls work as expected.
I have given alot of time and tries but failed to achieve the result. I am missing something, possibly its related to try_files configuration but i am not sure yet.
Following is the Nginx file i have created so far for my needs.
If i write mydomain.org/admin, it works fine.
But when i write mydomain.org/admin/{someotherparam e-g dashboard}, it loads the main user react app instead of admin app. I guess it reads the index file of user in that case. How to make read the index file of admin if /admin/ is in the url on first.
I have not much knowledge on nginx configuration, thou i did tried google.
Only 1 task is remaining to do on my part is if i put admin directory and user directory separate.
But then i would have to do domain.org/user and domain.org/admin, which i do not want.
I want admin react to work only if there is admin in url in first place after url.
I am not sure how to get this to working.
server {
listen 80;
listen [::]:80;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name mydomain.org www.mydomain.org;
location / {
root /var/www/mydomain.org/html/frontend/site;
try_files $uri $uri/ /index.html;
}
location /admin(.*) {
root /var/www/mydomain.org/html/frontend/site/admin;
try_files $uri $uri/ /index.html;
}
}
I am using LEMP on ubuntu 18.
Could you try this config?
server {
listen 80;
listen [::]:80;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name mydomain.org www.mydomain.org;
root /var/www/mydomain.org/html/frontend/site;
location / {
try_files $uri $uri/ /index.html;
}
location /admin {
try_files $uri $uri/ /admin/index.html;
}
}
How can I deploy these two together, I don't like the Laravel React preset, I want to separate both, bundle the React app and deploy them together with any web server (apache, nginx...)
EDIT
This is my config for Laravel, but it isn't loading the routes
server {
listen 8000;
server_name 127.0.0.1
root "..\..\Proyecto\Backend\JWT\public";
add_header 'Access-Control-Allow-Origin' '*';
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
index index.html index.htm index.php;
charset utf-8;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }
error_page 404 /index.php;
location ~ \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
include fastcgi_params;
}
location ~ /\.(?!well-known).* {
deny all;
}
}
You can run them separately using nginx
you run each on separate ports and use methods (POST/GET) to push/get data
use pm2 (http://pm2.keymetrics.io/) for running React (I recommend it because you can monitor the activity of the react app and if you want to do maintenance you can stop the current app process and run a "under maintenance" app process)
you can read more about running laravel on nginx here (https://www.digitalocean.com/community/tutorials/how-to-deploy-a-laravel-application-with-nginx-on-ubuntu-16-04)
as for running react without pm2, you have to build the project yarn build and tell nginx that the file you want to load is the index.html inside of the build file
assuming that you are using an ubuntu server and you uploaded your code to github or gitlab
server {
listen 50;
root /var/www/[Your repo name]/build;
server_name [your.domain.com] [your other domain if you want to];
index index.html;
location / {
try_files $uri /index.html;
}
}
you write this inside of your nginx configuration along with the laravel configuration on a separate port
hope my answer helped a bit
This was proving to be very tricky and it took me at least 3 days to put everything together. Here is what you have to do.
Run
npm run build in the react project.
Copy the contents of the build folder to the server
scp react_project/build/* <server name or ip>:/var/www/html/react
Change the ownership of the project folders to the user www-data or add your user id to the group www-data.
Now. set up the Laravel project in a different directory (in /var/www/html/laravel, for example).
Set up the database, environment variables.
Run
php artisan key:generate
php artisan config:clear
php artisan config:cache
Now, proceed with nginx configuration. Create 2 configs for react and laravel projects as given below. Make sure that the listen ports are different for both projects.
Create configuration files for react and laravel projects under /etc/nginx/sites-available
Create symlinks to the created configs under /etc/nginx/sites-enabled as given below
sudo ln -s /etc/nginx/sites-available/react_conf /etc/nginx/sites-enabled/react_conf
sudo ln -s /etc/nginx/sites-available/laravel_conf /etc/nginx/sites-enabled/laravel_conf
And for the contents,
react_conf:
server {
listen 80;
server_name <server_ip or hostname>;
charset utf-8;
root /var/www/html/react;
index index.html index.htm;
# Always serve index.html for any request
location / {
root /var/www/html/react;
try_files $uri /index.html;
}
error_log /var/log/nginx/react-app-error.log;
access_log /var/log/nginx/react-app-access.log;
}
laravel_conf:
server {
listen 90;
server_name <server ip or hostname>;
charset utf-8;
root /var/www/html/laravel/public;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
index index.php index.html index.htm;
# Always serve index.html for any request
location /api {
try_files $uri $uri/ /index.php?$query_string;
}
location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }
error_page 404 /index.php;
location ~ \.php$ {
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
include fastcgi_params;
}
location ~ /\.(?!well-known).* {
deny all;
}
error_log /var/log/nginx/laravel-app-error.log;
access_log /var/log/nginx/laravel-app-access.log;
}
Now, delete the default config present in /etc/nginx/sites-enabled
Also, verify that /etc/nginx/nginx.conf contains the following include directive where the server configs are expected(under http)
include /etc/nginx/sites-enabled/*;
Verify that the config is fine by running
sudo nginx -t
Restart the server
sudo service nginx restart
Now, you should be up and running.
You can approach it by two ways .
First one is when the you are creating react-app in different folder than the laravel project folder . In such case just deploy laravel app and react app in two different url .
The second condition is when the react-app is inside the laravel app . In such case build the react project and put the dist folder in views folder of the laravel project . So in routes/web.php add this
//Used for handling the html file of react project
View::addExtension('html', 'php');
Route::get('/{any}', function () {
//path to dist folder index.html inside the views directory
return view('build/index');
})->where('any', '.*');
Laravel will not server the required js and css file from inside the views folder . So you need copy and paste all the content of the dist folder to public folder of the laravel project . No need to copy paste index.html file but other file need to placed in the pubic folder .
After that visit the root url of the laravel project in the browser the react app should be working
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!