I hope you guys can help me, I have a reactjs application and I have built it with npm run build and to run it i have to run serve -s build.
I would like to know if there is a way to do it automatically whenever computer is turned on, and if the server goes down too, because i tried to just open index.html and I get an error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
You can use NGINX, and serve your app content from the build folder. Example Nginx configuration:
server {
listen 80;
root /home/username/path/to/build/;
index index.html;
try_files $uri/index.html $uri.html $uri =404;
}
Install Nginx and setup its config as described and it will create a service whenever you restart you machine it will boot up again
Related
I currently have a VueJS application that has 2 parts. One being a static front end page and the other as a NodeJS express backend.
In the backend server, it will load the static(dist) folder as the front end view. The backend also contains some MongoDB api's to load and save some configuration.
I am currently trying to separate the two as each own docker container. I've managed to make the backend running but I am currently having some issues on running the front end. I'm having issues with configuring the nginx that will allow me to upload files to the server.
Here is my current nginx config
server{
listen 80;
root /var/www/html;
index index.html;
location /models/ {
root /app/upload;
}
location / {
try_files $uri $uri/ /index.html;
}
}
So in the frontend, it will create a post request to the backend to upload some models but it seems that it is throwing: 405 (Not Allowed) error.
Is the issue because there is something wrong with the configuration or it cannot connect to the backend as it is in a separate container?
Any help/opinions with this is greatly appreciated. Thank you
Thanks for helping out!
I'm setting up an API server that will also function as a web-app server. (Debian 10)
I currently have nginx as a reverse proxy to my nodeJS app.
I'm thinking of using VueJS to develop my frontend single page app but I can't figure out how to tie it all together.
Should I :
use a reverse proxy to nodeJS and have my API live there
AND
use nginx to serve my vueJS web app, without the nodeJS overhead
This seems logical but I'm a bit confused, since I've never done it before.
Thanks again for helping!
Regards,
Renato
I have a website running with nodejs and vuejs which is hosted on digital ocean with nginx reserve proxy. I'm using pm2 to call nodejs apis and it works perfectly fine. As far as Vue.js is concerned, you can run build and deploy the dist folder anywhere on the internet.
Just add the following code to run front-end with nginx:
server {
root /path to your dist vuejs folder;
index index.html index.htm index.nginx-debian.html;
server_name domain.com;
location / {
try_files $uri $uri/ =404;
}
}
I have my business app running in Development env and inside that, 2 folders named Client and Backend.
Client (ReactJS) running in port 5000
Backend (Node.JS) running in Port 6000
Server Nginx.
So in Nginx default.conf file, listening 80 and I've proxy_pass http://localhost:5000.
Its working fine in the Development.
Please note, some redirections are configured like ${host}:3000/xxx in the backend and client scripts
But while doing the production deployment, I found difficulty in doing so.
I have the static build client file and placed it in the nginx root folder.
Below is the .conf file
server {
listen 80;
listen 5000;
server_name xx.xxx.xxx.xxx;
location / {
root /usr/share/nginx/html/client/build;
index index.html index.htm;
try_files $uri $uri/ #backend;
}
location ~ ^/([A-Za-z0-9]+) {
proxy_pass http://localhost:6000;
}
}
I Also have SSO enabled, when I navigate the address, it send the index.html file which is the login page.
When I press login, first it will navigate to "/login/abc/" which is routed in "backend" script.
But it responds with 404 error.
What am I doing wrong?
I've got nginx to run my (node.js/react) application on the server. But I can't seem to connect to the database.
In the nginx.conf file I've added the following inside http.
http {
...
server {
listen 80;
server_name localhost;
...}
...}
And above the http section I have the following,
stream {
server {
listen 4000;
proxy_connect_timeout 1s;
proxy_timeout 3s;
proxy_pass stream_mongo_backend;
}
upstream stream_mongo_backend {
server 127.0.0.1:27017;
}
}
I start the nginx server, the application runs on localhost, opens up the login page but I can't login because it's still not connected to the database (mongodb).
I'm not sure if I've got my port numbers wrong or if I'm missing some configuration line inside nginx.conf.
EDIT: Ok, I had it wrong before. I wasn't supposed to connect to mongodb at this point. I was supposed to connect to the backend server of my application which would run at 4000. So now I've added a new location for /api/ inside http and proxied all requests to 4000. I still have one question though. I have to run my backend server separately for this to work. For the frontend I've created a folder and put all my build files in there so nginx starts up the webserver from there. Doing the same for the backend did not start up the server. Is there a way to get nginx to start the backend server as well?
Also can I get the frontend to run directly without the build files ? Like node would with npm start?
the port number is right. try to open up a mongo shell and see if you are able to access a mongo instance. if not, you will need to run sudo service mongodb start to start it up.
Guess it's knida late but you don't need to setup nginx for your backend to connect local mongodb.
And you need to run the frontend and backend server first by yarn start, node run or something like that if you want to run it without build files.
And then bypass the calls from 80 port to the local host servers.
For example, your FE run at 3000 port, BE run at 5000 port.
Then your nginx should be:
http {
...
server {
listen 80;
server_name localhost;
location /api/ {
proxy_pass localhost:5000;
}
location / {
proxy_pass localhost:3000;
}
...}
...}
I need the right configuration of nginx for my problem.
Suppose the nginx + nodejs serverprograms are running on the same debian machine.
Domain name for my website is for simplicity just webserver.com (and www.webserver.com as alias)
Now, when someone surfs on the internet to "webserver.com/" it should pass the request to the nodejs application which should run on a specific port like 3000 for example. But the images and css files should get served by nginx as static files and the filestructure should looke like webserver.com/images or webserver.com/css .. images + css should get served by nginx like a static server
Now it gets tricky:
But when someone surfs on webserver.com/staticsite001 or webserver.com/staticsite002 then it should get served by the nginx server only. no need for nodejs then.
And for the nodejs server, I am just setting up my nodejs application with port 3000 for example to receive the bypass from nginx for webserver.com/
to put it in a more understandable language: when someone surfs to webserver.com/staticsite001 it should NOT pass it to the node application. It should only pass it to the node application if its inside of the first webserver.com/ directory that the outsiders can see. The webserver.com/staticsite001 should only get serverd by nginx.
How, how do I do that ? And what should the http and server block look like for the nginx configuration look like?
I am familiar with nodejs. But I am new to nginx and new to reverse proxying.
thanks
the file structure on the debian hard drive looks like:
/home/wwwexample/staticsite001 (for www.webserver.com/staticsite001/) only handled by nginx
/home/wwwexample/staticsite002 (for www.webserver.com/staticiste002/) only handlex by nginx
/home/wwwexample/images
/home/wwwexample/css
and in
/home/nodeapplication is my node js application
This server block should work:
server {
listen 80;
server_name webserver.com www.webserver.com;
root /home/wwwexample;
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
}
location /staticsite001 {
}
location /staticsite002 {
}
location /images {
}
location /css {
}
}
First location makes nginx to proxy everything to localhost:3000. Following empty locations instruct nginx to use default behavior, that is to serve static files.
Put this code into file /etc/nginx/sites-available/my-server and create a symlink to it in /etc/nginx/sites-enabled. There is a default config, which you could use as a reference.
After that you could use command sudo /usr/sbin/nginx -t to check configuration. If everything is OK use /etc/init.d/nginx reload to apply new configuration.