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
Related
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 have an App composed of three projects with the following structure :
mainapp
->/packages
->/admindashboard
->/shopapp
->/api
I want to deploy the project on an Ec2 instance (which I'm not the administrator), so I built the admindashboard and the shopapp with :
yarn build
added Nginx and configured the /nginx/sites-available/default file like so :
server {
listen 80 default_server;
server_name localhost;
location / {
root /var/www/mainapp/packages/shopapp/out;
index index.html index.htm;
}
}
#running admin-Dashboard
server {
listen 3000 default_server;
server_name localhost;
location / {
root /var/www/mainapp/packages/admindashboard/build;
index index.html index.htm;
}
}
-this got the tow front apps to work, but I couldn't link the api.
when I run yarn dev:api-shop or yarn dev:api-admin
it shows that it's running on port 4000 but the front app's fail to fetch the data, it can't get or post to the api.
what is the correct way to deploy such project?
the project technologies are :
Admin Dashboard :
-CRA
-Apollo
-BaseUI
-Typescript
-React Hook Form
Shop :
-NextJs
-Apollo
-Typescript
-Styled Components
-Stripe Integration
-Formik
API :
-Type GraphQL
-Type ORM
thank you, and sorry if my explanation is not clear.
I resolved the problem, actually in the admin project in the .env file the API URL was :
http://localhost:4000/admin/graphql
I had to change localhost to the Ip address of the instance like so :
(example)
http://15.xxx.xx.xxx:4000/admin/graphql
and it worked, yet having two API (one for the shop and one for the adminDashboard)
I had to run one on the 4000 port and the other one on the 4001, Now it works but I still wonder if it's the proper way to deploy such app . thank you all
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 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.