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;
}
Related
I'm trying to use Vite dev server in a cloud-based development environment where I can serve on and connect to ports, but need to access them through a proxy path.
Instead of http://localhost:3000/index.html I would visit e.g. https://my.cool.example.com/proxy/3000/index.html. Under the hood, the cloud service translates the URL and proxies the connection through: So to Vite it looks like I'm just requesting /index.html.
...But the various configs I've tried in vite.config.js haven't got this working properly yet:
Setting base as suggested in this answer complains "The server is configured with a public base URL of /proxy/3000/"
Several other unsuccessful experiments with server.base, proxy, publicPath and similar
How can I tell Vite that the client and assets should set a path prefix on requests, but the server can serve from root?
My solution to fix this problem was to make many stuff on reverse proxy inside nginx on filename.conf file inside your domain conf you need to set something like that
location /admin {
include /etc/nginx/includes/proxy.conf;
proxy_pass https://your-service:8081;
}
location ^~ /#vite {
include /etc/nginx/includes/proxy.conf;
proxy_pass https://your-service:8081;
}
location /__vite_ping {
include /etc/nginx/includes/proxy.conf;
proxy_pass https://your-service:8081;
}
location /src {
include /etc/nginx/includes/proxy.conf;
proxy_pass https://your-service:8081;
}
location /node_modules {
include /etc/nginx/includes/proxy.conf;
proxy_pass https://your-service:8081;
}
proxy.conf file look in this way
xy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
proxy_request_buffering off;
proxy_http_version 1.1;
proxy_intercept_errors on;
Inside of your vite.config you must do something like that
server: {
https: true,
host: "0.0.0.0",
port: 8081,
secure: false,
strictPort: true,
hmr: {
port: 8081,
host: "localhost",
},
},
the important think was to the hrm value to overwrite host and the port need to be the same that you are exposing on docker
service vaues of docker-compose.yml
ports:
- '8081:8081'
on the index.html you must update the script src path
From < script type="module" src="/src/main.js" >
To < script type="module" src="https://localhost:8081/src/main.js" >
I had the exactly same problem
the documentation say that there are more options of proxy on https://github.com/http-party/node-http-proxy#options
https://vitejs.dev/config/#server-proxy
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?
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.
Following the instruction here, my website can display the contents fine.
However, handling the form submission is current a problem.
I have virtual host set up in my environment. Rendering of contents is fine but form submission ends up in a blank page.
My form is at http://mysite.local/contact
My virtual host is http://mysite.local matches to http://localhost:8080/site
My form follows the developer trail:
<#hst.actionURL var="actionUrl"/>
<form id="" class="form" action="${actionUrl}" method="post">
When I click submit, I was redirected to a blank page: http://localhost:8080/contact?r14_r1_r1:u_u_i_d=5641b2fe-10ad-41b2-8f30-06d8a59ff451
Using my custom component, I printed out the serverName and it's "localhost"!
How do I configure it's in the Console so that my server is "mysite.local" instead of "localhost"?
#Override
public void doBeforeRender(final HstRequest request,
final HstResponse response)
throws HstComponentException {
super.doBeforeRender(request, response);
l.info(request.getServerName());
}
Updates:
I've added the node as per Joeren's suggestion.
However it's still not working.
I event removed the "localhost" node that was orginally under hst:hosts >> dev-localhost but it broke the Site site.
I've noticed that "hst:hosts" have hst:defaulthostname set to "localhost".
I haven't dared to make the change because it would be irreversible I thought.
Updates:
My virtual host configuration (nginx) is as follows:
server {
# listen 80;
server_name mysite.local;
location /site/ {
proxy_pass http://localhost:8080/site/;
# include /etc/nginx/proxy_params;
}
location /cms/ {
proxy_pass http://localhost:8080/cms/;
# include /etc/nginx/proxy_params;
}
location / {
proxy_pass http://localhost:8080/site/;
# include /etc/nginx/proxy_params;
}
}
To redirect to the fully qualified domain name you will need to setup the virtual host in the HST configuration tree in the CMS JCR console.
If the mysite.local is a domain on your local machine you can place it in the dev-localhost host group. By creating the following nodes:
hst:hst
+ hst:hosts
+ dev-localhost
+ local
+ mysite
+ hst:root
See the hosts configuration documentation for more background information.
If you have a web server in front like apache make sure you leave the proxypreserve host on, so that the HST can detect the host. See the Apache webserver configuration documentation for more information.
Passing the host name solve the problem! Thanks to Jeroen's comment.
There is no need to update the hst:hosts configurations in the console though.
I've updated my nginx config to as follows:
server {
# listen 80;
server_name mysite.local;
location /site/ {
proxy_pass http://localhost:8080/site/;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
location /cms/ {
proxy_pass http://localhost:8080/cms/;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
location / {
proxy_pass http://localhost:8080/site/;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
}