I have a basic node server that serves built vuejs application.
The server is running on localhost:3000
Nginx is set to listen on port 80
The app is deployed on the local IP.
nginx config:
upstream nodejs {
server localhost:3000;
}
server {
listen 80;
server_name localhost;
root /mnt/data/app/server/public;
location / {
try_files $uri #nodejs;
}
location #nodejs {
proxy_redirect off;
proxy_http_version 1.1;
proxy_pass http://nodejs;
proxy_set_header Host $http_host ;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
In index.html all static files are loaded like
css
href="/css/chunk_name.css"
js
src="/js/chunk_name.js"
The issue is that all of those static files are loading over HTTPS
Check the screenshot
If I try to load a single file but replacing HTTPS with HTTP, the file is loaded normally.
I don't know if I am missing something in the config, or it is something else. Any help is appritiated
Config your nginx to serve the static file
location ~ ^/(css|js)/ {
access_log off;
expires 30d;
}
Related
I'm serving multiple nodejs apps on a single server through pm2 and using nginx to manage reverse proxies. Right now if I use the server's ip and app port to reach the apps directly it all works fine. But if I try to navigate to my apps through the location paths set in the nginx config then I get 404 errors.
Below is my nginx default config:
upstream frontend {
server localhost:3000;
}
upstream backend {
server localhost:8000;
}
server {
listen 443 ssl;
server_name <redacted>;
ssl_certificate <redacted>.cer;
ssl_certificate_key <redacted>.key;
error page 497 301 =307 https://$host:$server_port$request_uri;
location /app/frontend {
proxy_pass http://frontend;
proxy_redirect off;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Ssl on;
}
location /api {
proxy pass http://backend;
proxy_redirect off;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Ssl on;
}
}
server {
listen 80;
server_name <redacted>;
return 301 https://$server_name$request_uri;
}
Now when I try to go to https://<server ip>:3000, the frontend loads just fine but if I go to https://<server ip>/app/frontend, I get the following 404 error:
Although the index.html loads up, it tries to find the static assets on https://<server ip>/ but rather should try to find them on https://<server ip>:3000. This is the exact behaviour that I'm trying to achieve.
What I have tried so far:
Using rewrites
Adding trailing slashes to both location path and proxy_pass
I know this can be solved by changing the app's base url or the build directory but that is not what I'm looking for.
Any help would be highly appreciated.
I have an Ubuntu web server running with this structure:
Nginx reverse proxy localhost:80, which redirects to either '/' (apache server with WordPress site at localhost:8080), which currenly works.
More recently a I've tried to add a Node.js Application at www.site.com/app or, internally, localhost:3000. I am able so serve the HTML and CSS of the node.js webapp, however all internal route calls at 404ing, likely because of the URL addressing of /app/.
IE. Tries to hit /someendpoint and 404s because Node.js is technically running on localhost:3000 (www.site.com/app). Should I be routing arguments like (www.site.com/app/someendpoint)?
The Problem: All POST/GET calls from NODE.JS are 404ing because of my bad understanding of NGINX config. How do I route this GET calls to the actual location of the Node.js server which is (site.com/app/, localhost:3000).
Here is my 'default' config from /etc/nginx/available_sites/.
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.php index.html index.htm index.nginx-debian.html;
server_name www.*site*.name;
location / {
proxy_pass http://127.0.0.1:8080$request_uri;
proxy_buffering on;
proxy_buffers 12 12k;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
try_files $uri $uri/ /index.php?q=$uri&$args;
}
#Currenly serving HTML, CSS of site, however node routes 404
location /app/ {
proxy_pass http://localhost:3000/;
}
}
How might I update this NGINX config file to account for node endpoints actively trying to hit the route of my apache site and not the /app real location of the node server?
Any help or ideas would be great, I've been stuck on this issue for a while as part of a personal project.
Thanks!
please remove the try_files statement in the location / block
your location should look like this
.....
location / {
proxy_pass http://localhost:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
Here is a sample app.js file that may offer you some insight into the matter.
var express = require("express");
var router = require("./lib/routes/index");
var app = express();
var port = 3000;
app.use('/app', router);
app.listen(port, function () {
console.log("Listening on port " + port);
});
As for the nginx configuration, I would recommend something along the lines of the following:
# Sample nginx config with 2 upstream blocks
upstream nodeApp {
server 127.0.0.1:3000;
}
upstream apacheApp {
server 127.0.0.1:8080
}
server {
listen 80;
listen [::]:80;
server_name www.domain.com domain.com;
root /var/www/domain;
location / {
proxy_pass http://apacheApp;
}
location /app {
proxy_pass http://nodeApp;
# OR
# try_files $uri $uri/ #backend;
}
location #backend {
proxy_pass http://nodeApp;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
The key part of this is using an external router in your app.js, then using this line: app.use('/app', router);
You may want to also set up nginx to serve static files instead of relying on express.static(). This would also be easy to do by setting up more location blocks like so:
location /app/public {
try_files $uri $uri/ =404;
}
This should work for your purposes. Don't forget to check your configuration with nginx -t.
For more troubleshooting advice, check out this very similar thread: nginx proxy_pass 404 error, don't understand why
The solution that worked with my 404 issue was to add an extra / after my proxy_pass url.
I have a nodejs express app deployed using ecs single container works fine. Now i need to serve the static files of the nodejs app using nginx proxy.
How do I specify the root of the nginx in a multicontainer environment on ECS?
upstream cms_node_server_dev {
server marketing-site-container:3000;
keepalive 64;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
index index.html index.htm index.nginx-debian.html;
root '/home/ubuntu/cms/dev/static-website/public';
location /{
try_files $uri #cms_node_server_dev;
}
location #cms_node_server_dev {
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_pass http://cms_node_server_dev;
}
error_page 404 = /404;
}
I have a Node.js app running on port 3000 and using NGINX as a proxy. Static files are also being served by NGINX. The conf in sites-enabled:
server {
listen 80;
server_name myapp.dev;
location ~ ^/(img/|js/|css/|robots.txt|favicon.ico) {
root /srv/nodejs/myapp/public;
access_log off;
expires max;
}
location / {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Everything is working fine at the moment. But when a non-existing static file is requested (/css/doesntexist.css) I get a the default NGINX 404 page.
I know it's possible to redirect the user tot a custom 404 page (eg. /404.html), but I want to keep the URL pointing to the non-existing path while displaying a custom 404 from my Node app.
Any ideas?
Got it working with the following.
location ~ ^/(img/|js/|css/|robots.txt|favicon.ico) {
access_log off;
expires max;
error_page 404 = #not_found;
}
location #not_found {
proxy_pass http://127.0.0.1:3000;
}
Which is based on an example from the NGINX documentation for the error_page option.
My current nginx config is this:
upstream nodejs {
server 127.0.0.1:3000;
}
server {
listen 8080;
server_name localhost;
root ~/workspace/test/app;
index index.html;
location / {
proxy_pass http://nodejs;
proxy_set_header Host $host ;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
I'm very very new to nginx, but at the very least I know that nginx is better than node/express at serving static files. How can I configure the server so that nginx serves the static files?
I solved it using this new configuration:
upstream nodejs {
server localhost:3000;
}
server {
listen 8080;
server_name localhost;
root ~/workspace/test/app;
location / {
try_files $uri #nodejs;
}
location #nodejs {
proxy_redirect off;
proxy_http_version 1.1;
proxy_pass http://nodejs;
proxy_set_header Host $host ;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Thanks to the following Stack Overflow post:
How to serve all existing static files directly with NGINX, but proxy the rest to a backend server.
You'll probably want another location block within your server for the static files.
location /static {
alias /path/to/static/files;
}
This uses the alias directive.
Then you can hit files at localhost:8080/static/some_file.css
P.S. You don't need the root or index that you have set currently.
(root is similar to alias with a slight difference in usage)