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
Related
I have a reactjs app, and now I dockerized it with the following Dockerfile
# get the base node image
FROM node:alpine as builder
# set the working dir for container
WORKDIR /frontend
# copy the json file first
COPY ./package.json /frontend
# install npm dependencies
RUN yarn install
ENV REACT_APP_API_ADDRESS=http://localhost:7001
# copy other project files
COPY . .
# build the folder
RUN yarn build
# Handle Nginx
FROM nginx
COPY --from=builder /frontend/build /usr/share/nginx/html
COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf
and my nginx conf is simple like below:
server {
listen 7001;
server_name _;
index index.html;
root /usr/share/nginx/html;
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
location / {
try_files $uri /index.html =404;
}
}
and then, I build it and push it to docker hub, I hope if I have publish a new image or you can said the latest one, the reactjs application should popup a window or a notification to let the user click it (I can make it so far).
and then, if user click the update notification button, the another server i call it hook_upgrade_server in anther container, which will get a signal and then it will execute docker pull reactjs and restart it by docker run -d -p7001:7001 reactjs docker container with latest images.
Which mean, I want to install two container on the user host:
reactjs do some business
hook_upgrade_server for wait user click signal and pull latest image and restart
So, How can i make it happen?
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 :)
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;
}
}
Im trying to dockerize my react app.
Whenever i run docker-compose up it gets stuck on "Attaching to"
Dockerfile
# Stage 0 - Pre-requisite: Based On Node.js to BUILD and compile App.
FROM node:10.15.0-alpine as node
WORKDIR /app
COPY package.json /app/
RUN npm install
COPY ./ /app/
RUN npm run build
# Stage 1 - Based On Nginx to have ONLY a compiled and PRODUCTION ready build.
FROM nginx:1.15.8-alpine
COPY --from=node /app/build/ /usr/share/nginx/html
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf
docker-compose.yml
version: '3'
services:
idcheck-demo:
image: idcheck-demo
build:
context: .
dockerfile: Dockerfile
ports:
- 8080:8080
nginx-custom.conf
server {
listen 8080;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
Ive tried attempting to access it by going to 0.0.0.0:8080 but it just returns me with the following error in the browser
This page isn’t working 0.0.0.0 didn’t send any data.
ERR_EMPTY_RESPONSE
In my case was a port forwarding at the docker-compose.yml. I was doing the forward to 8080 when the exposed port was the 80 so when I've changed the port forwarding to 80 at the docker-compose.yml the service have done as should be.
First check if the container is up. You can do this by running:
docker-compose ps
In case of your configuration I got:
Name Command State Ports
---------------------------------------------------------------------------------------
54368216_idcheck-demo_1 nginx -g daemon off; Up 80/tcp, 0.0.0.0:8080->8080/tcp
as you can see container is running with nginx not being daemonized which explains why the console is hanging after you run docker-compose up.
You can also run a quick telnet to see if the HTTP service is responding correctly:
telnet localhost 8080
Trying ::1...
Connected to localhost.
Escape character is '^]'.
Bottom line is that console stuck on "Attaching to..." is caused by the nginx process not running as a daemon.
You can put the container into background running:
docker-compose up -d
I got this problem when I start nginx using "docker-compose up". And the reason is Port Conflict, so I fix it by changing Ports Configuration.
I'm actually working on a webapp, I use Reactjs for the frontend and Golang for the backend. Those 2 programs are hosted separately on 2 VMs on Google-Compute-Engine. I want to serve my app through https so I choose to use Nginx for serving the frontend in production. Firstly I made my config file for Nginx:
#version: nginx/1.14.0 (ubuntu)
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/banshee;
server_name XX.XXX.XX.XXX; #public IP of my frontend VM
index index.html;
location / {
try_files $uri /index.html =404;
}
}
For this part everything works as expected but after that I want to serve my App over https following this tutorial. I installed the packages software-properties-common,python-certbot-apache
and certbot but when I tried
sudo cerbot --nginx certonly
I get the following message:
gdes#frontend:/etc/nginx$ sudo certbot --nginx certonly
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Could not choose appropriate plugin: The requested nginx plugin does not appear to be installed
The requested nginx plugin does not appear to be installed
I made some searches on Google and here and I still can't figure out which plugin is missing or an other way to fix this.
Does someone have an idea tohelp me ?
Thanks a lot :)
I was trying to create Let's Encrypt certificate using certbot for my sub-domain and had the following issue.
Command:
ubuntu#localhost:~$ certbot --nginx -d my_subdomain.website.com -d my_subdomain2.website.com
Issue:
The requested Nginx plugin does not appear to be installed
Solution:
Ubuntu 20+
ubuntu#localhost:~$ sudo apt-get install python3-certbot-nginx
Earlier Versions
ubuntu#localhost:~$ sudo apt-get install python-certbot-nginx
You will need to replace
apt install python-certbot-nginx
by
apt install python3-certbot-nginx
You can install the Certbot nginx plugin with the following commands:
add-apt-repository ppa:certbot/certbot
apt update
apt install python-certbot-nginx
You have to re-install a python3 version of Lets Encrypt's certbot.
Run
sudo apt-get install python3-certbot-nginx
On Debian 10, certbot returns a "could not find a usable nginx binary" issue because, "/usr/sbin" is missing from the PATH. Add /usr/sbin to the PATH
export PATH=/usr/sbin:$PATH
Then certbot can make a certificate for nginx
certbot --nginx -d <server name> --post-hook "/usr/sbin/service nginx restart"
As explained on the debian wiki page for letsencrypt.