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;
}
}
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
Simple / Easier / Faster are slogans i read every where they wrote about Passenger.
But it's really complicated to deploy.
Early 2019 i deployed 1st time, it took about a week for searching how to config
And now, 2nd deployment, 3 days already and got no luck, post that helped me config last time has gone.
Official Tutorials are so general and helps just a little and only in easy cases. Most of online tutorials are about PM2,... a few wrote about Passenger but not much to see.
I have Frontend & Backend placed in same root folder with structure like this:
Root app folder
|___client (Frontend - React)
|.......|___node_modles
|.......|___public
|.......|.......|___index.html
|.......|.......|___favicon.ico
|.......|___src
|.......|.....|___index.js
|.......|.....|___App.js
|.......|.....|___actions
|.......|.....|___components
|
| (Backend - nodeJS using express)
|___node_modules
|___middleware
|___models
|___routes
|___server.js
I'm using Nginx + Passenger + nodeJS
Config for Backend:
server {
listen 8080;
server_name x.x.x.x www.x.x.x.x;
root /var/www/tnapp/code/public;
passenger_app_root /var/www/tnapp/code;
passenger_app_type node;
passenger_startup_file server.js;
passenger_enabled on;
}
The server doesn't response and just got err
This site can’t be reached<br/> x.x.x.x took too long to respond..
Frontend config:
server {
listen 80;
server_name x.x.x.x www.x.x.x.x;
root /var/www/tnapp/code/client/public;
passenger_app_root /var/www/tnapp/code/client/src;
passenger_app_type node;
passenger_startup_file server.js;
passenger_enabled on;
}
With this frontend i got response html part, but nodjs part seems not working.
Hope someone can help me out on config this thing
i'm exhausted ##
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
I am wondering about the proper nginx setup when deploying a vue frontend separately from an express backend - not separately in terms of servers or domains, but in terms of how they are served.
During development, I use npm serve in the vue directory, and to build a production build, it is generated via npm run build. The resulting dist folder should be served, and my question is how this is done when the backend is on the same server.
Let's say for the backend, express is exposing routes. Should nginx be in front of express here?
The vue front end is calling those routes, but the static files need to be served. According to the docs this can be done using serve. Is this intended for production? And then again, should nginx be in front of this?
I am wondering, because the route would then be:
Browser Request -> Nginx to Vue Frontend -> Vue Frontend -> Nginx to
Backend
Is this a suitable approach or am I misunderstanding this?
Should nginx be in front of express here?
Yes, it is a very good idea.
You have to use a distinct set of URLs for Vue and Express, so Nginx, while looking at request URL, will be able to understand what to do: give a Vue file or proxy to Express. Nginx has a variety of options how to classify incoming requests: by different hostnames, by paths, by combination of both, etc.
For example, prepend all your Express routes with /api/ path prefix. Then configure nginx like this:
This is not production ready configuration, I'm just trying to give a hint what you should look for in nginx docs
server {
listen 80;
server_name mydomainname.com;
location /api {
proxy_pass http://localhost:8000; # port that Express serves,
# better change to UNIX domain socket
}
location / {
root /vue_root/dist;
}
}
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.