I have one Vue.js app and a REST api which i am hosting with nginx.
At / root url there is just a simple index.html page. /api/ has a REST server and /app has vue.js app
My configurations are..
server {
listen 80;
listen 443 ssl;
server_name _;
root /usr/share/backend;
ssl_certificate /etc/nginx/ssl/server.crt;
ssl_certificate_key /etc/nginx/ssl/server.key;
location / {
index index.html;
}
location /api/ {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://localhost:8080/;
}
location /app {
alias /usr/lib/App/;
try_files /index.html /friendly_404;
}
location /friendly_404 {
return 404 "Sorry, that file could not be found.";
}
error_log /var/log/nginx/vue-app-error.log;
access_log /var/log/nginx/vue-app-access.log;
}
My /api/ server is working without any problem but vue.js /app is not working and on my browser its giving me some like multiple errors like this one below.
GET http://192.168.0.1/js/chunk-d9925106.16c4e8be.js net::ERR_ABORTED 404 (Not Found)
Vue.js Config is..
module.exports = {
// ...other vue-cli plugin options...
publicPath: '/app/',
configureWebpack: {
plugins: [
]
},
productionSourceMap: false,
}
What am I doing wrong here?
Related
Usually i see people serve html with ngnix with configuration like this
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
in my case I use a template engine with express that i don't want ngnix to serve html but instead i want ngnix to serve all static files in the public folder css, js, svgs etc..
public folder
css
main.css
js
main.js
svgs
arrow.svg
logo.svg
building.svg
is there is a way to configure ngnix to serve those files and then i can mention them in my pug template like plublic/css/main.css ?
full nginx config file
upstream client {
server client:3000;
}
upstream api {
server api:5000;
}
server {
listen 80;
location / {
proxy_pass http://client;
}
location /sockjs-node {
proxy_pass http://client;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
location /api {
rewrite /api/(.*) /$1 break;
proxy_pass http://api;
}
}
You can add location block under server context for your static files (with a regex for your static files)
location ~* \.(css|js|svg)$ {
root /usr/share/nginx/html;
}
I want to serve my static website and API service from same machine using nginx.
Website is present in /var/www/html
API service is running on port 8000
http://localhost should open static website
http://localhost/api should proxy api service which is running on port 8000
With the help of http://nginx.org/en/docs/beginners_guide.html I tried this config
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
try_files $uri $uri/ =404;
}
location /api {
proxy_pass http://localhost:8000;
}
}
http://localhost is working fine but http://localhost/api is giving me error 404.
What should be correct configuration to achive such infrastucture?
Here I am writing a conf that can perform the operation you need:
server {
listen 80;
server_name <server_name_you_prefers>;
location / {
alias /var/www/html/; # Static directory's complete path from root
}
location /api {
proxy_pass http://127.0.0.1:8000;
proxy_set_header Host $host;
proxy_pass_request_headers on;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET,PUT,PATCH,POST,DELETE,OPTIONS,HEAD';
add_header 'Access-Control-Expose-Headers' 'Origin,Content-Length,Content-Range,Authorization,Content-Type';
add_header 'Access-Control-Allow-Headers' 'Content-Length,Content-Range,Authorization,Content-Type,x-json-response';
add_header 'Access-Control-Allow-Credentials' 'true' always;
}
}
Your nginx reverse-proxy will pass all the requests contains (or start by, I'm not sure) "/api" to your API service.
When you send the request to http://localhost/api, the route "/api" in your code is invoked. I guess this route does not exist because you have 404.
To access your API, 1 simple solution is to prefix all your API by "/api".
For example, if you define the API GET "/version", it should become "/api/version", then you can access this API at http://localhost/api/version.
I installed Nginx on my Ubuntu 20.04 machine and I'm trying to serve a couple of simple static file along with a Asp.Net Core (MVC) app using Nginx as a reverse proxy.
What I would like to achieve:
http://example.com -> /var/www/StaticSiteFolder1/index.html
http://example.com/Site2 -> /var/www/StaticSiteFolder2/index.html
http://example.com/Site3 -> /var/www/StaticSiteFolder3/index.html
http://example.com/NetCoreApp -> get the netcore app running on http://localhost:5000
What I have done so far:
Configured all static sites with the following .conf file inside /etc/nginx/sites-enabled:
server {
listen 80;
listen [::]:80;
server_name myServer;
root /var/www/;
location / {
root /var/www/StaticSiteFolder1;
index index.html index.htm;
try_files $uri $uri/ =404;
}
location /StaticSiteFolder2 {
index index.html index.htm;
try_files $uri $uri/ =404;
}
location /StaticSiteFolder3 {
index index.html index.htm;
try_files $uri $uri/ =404;
}}
Created another .conf file for the reverse proxy, in the same directory:
server {
listen 80;
listen [::]:80;
server_name myServer;
root /var/www/;
location /NetCoreApp {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-For $scheme;
}}
If I keep only the first one the static sites are served correctly.
If I leave only the second one changing "location /NetCoreApp" with "location /" and putting default_server in front listen 80 I have my netcore app correctly working on http://example.com.
I feel that it shouldn't be something so difficult but it's driving me crazy right now!
Thanks!
I have a django rest framework app running on a secured Nginx server.
When I navigate on the DRF api, the protocol in the navigation bar is well redirected to https.
My problem is that all the generated urls are in http instead of https.
I watched in the code, the differents url are build with this method:
def build_absolute_uri(self, location=None):
"""
Build an absolute URI from the location and the variables available in
this request. If no ``location`` is specified, bulid the absolute URI
using request.get_full_path(). If the location is absolute, convert it
to an RFC 3987 compliant URI and return it. If location is relative or
is scheme-relative (i.e., ``//example.com/``), urljoin() it to a base
URL constructed from the request variables.
"""
if location is None:
# Make it an absolute url (but schemeless and domainless) for the
# edge case that the path starts with '//'.
location = '//%s' % self.get_full_path()
bits = urlsplit(location)
if not (bits.scheme and bits.netloc):
current_uri = '{scheme}://{host}{path}'.format(scheme=self.scheme,
host=self.get_host(),
path=self.path)
# Join the constructed URL with the provided location, which will
# allow the provided ``location`` to apply query strings to the
# base path as well as override the host, if it begins with //
location = urljoin(current_uri, location)
return iri_to_uri(location)
In my case, this method always returns unsecured urls (HTTP instead of HTTPS).
I have edited my settings like it's described in this post:
https://security.stackexchange.com/questions/8964/trying-to-make-a-django-based-site-use-https-only-not-sure-if-its-secure
But the generated url are still in HTTP.
Here is my Nginx configuration:
server {
listen 80;
listen [::]:80;
server_name backend.domaine.na.me www.backend.domaine.na.me server_ip:8800;
return 301 https://$server_name$request_uri;
}
server {
# SSL configuration
listen 443 ssl http2;
listen [::]:443 ssl http2;
include snippets/ssl-backend.domaine.na.me.conf;
include snippets/ssl-params.conf;
location / {
proxy_pass http://server_ip:8800/;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
proxy_set_header Host $http_host;
proxy_redirect off;
}
}
server {
listen 8800;
server_name server_ip;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /projects/my_django_app;
}
location /media/ {
root /projects/my_django_app;
}
location / {
include proxy_params;
proxy_pass http://unix:/projects/my_django_app.sock;
}
location ~ /.well-known {
allow all;
}
}
And my django configuration:
In wsgi.py:
os.environ['HTTPS'] = "on"
os.environ['wsgi.url_scheme'] = "https"
In settings.py(Note: I've tried both first two lines):
#SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
SECURE_PROXY_SSL_HEADER = ('HTTP_X_SCHEME', 'https')
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
I really need to fix this probem because my DRF api returns some image URL wich must be in HTTPS, else the site cannot be considered 100% secure.
What is wrong with my configuration? Am I missing some options?
The indirection isn't needed; you can merge the settings from the SSL block and the :8800 block to give something like this:
server {
listen 80;
listen [::]:80;
server_name backend.domaine.na.me www.backend.domaine.na.me;
return 301 https://$server_name$request_uri;
}
server {
# SSL configuration
listen 443 ssl http2;
listen [::]:443 ssl http2;
include snippets/ssl-backend.domaine.na.me.conf;
include snippets/ssl-params.conf;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /projects/my_django_app;
}
location /media/ {
root /projects/my_django_app;
}
location ~ /.well-known {
allow all;
}
location / {
proxy_pass http://unix:/projects/my_django_app.sock;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
proxy_set_header Host $http_host;
proxy_redirect off;
}
}
Then, set SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https') and it should work.
I can't find anything about include proxy_params, and I suspect that the headers that you set in the first proxy block aren't forwarded to the Django app at all.
Why nginx keep on directing without instructions?
I followed this guide to redirect port 80 to 3000:
server {
listen 80;
server_name example.co.uk www.example.co.uk;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:3000;
}
}
It worked fine. Then I tried to roll back as before, and it just keeps on redirecting to https!
I even have removed nginx, but the browser is still redirecting to https! Why? What have done wrong? How can I fix it?
Any ideas?
This was the config before I tried on the redirect thingy:
server {
listen 80;
server_name example.co.uk www.example.co.uk;
return 301 https://$host$request_uri;
}
server {
# listen 80;
listen 433 ssl;
server_name example.co.uk www.example.co.uk;
ssl on;
ssl_certificate /etc/letsencrypt/live/example.co.uk/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/example.co.uk/privkey.pem;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location ~ /.well-known {
allow all;
}
the HTTPS was working fine to before that.
EDIT:
I have re-installed nginx and tested it with nginx -t:
$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful