I am quite new to NGINX and within this topic it is still very hard for me to find the right buzzwords to have more successful search results. That is why I try to descibe my problem here and maybe some of you can point me in the right direction. For my own personal project I want to set up a website which is composed from several micro services (which have all their own frontend).
My idea was to have one NGINX sever running serving as web server to deliver some kind of HTML which then includes the content of the micro services via server side includes (SSI).
Since the SSI can only include files and local folders as I understand I added some proxy_pass to my local server configuration:
http {
server {
listen 80;
ssi on;
root /usr/share/nginx/html;
location /led-todo {
proxy_pass http://led-todo-frontend:3000/;
}
}
}
So since I have the NGINX and my micro services in the same docker-compose running the URL: http://led-todo-frontend:3000 works.
The issue I am facing now is that when access my index.html page:
<html>
<head>
</head>
<body>
<!--# include virtual="test.html"-->
<!--# include virtual="/led-todo/"-->
</body>
</html>
The index.html content of my micro service is actually included into the above shown html site.
The issue arises when the script tags within my included html content are resolved:
<script src="/static/js/bundle.js">
The browser tries to load them from:
http://localhost:8080/static/js/bundle.js
Instead of:
http://localhost:8080/led-todo/static/js/bundle.js
Which then would again trigger the proxy pass to the correct micro service.
I feel like there should be some parameters to define the root or something so that /static/js/bundle.js is not loaded from localhost:8080 but from localhost:8080/led-todo in the following part of the NGINX configuration:
location /led-todo {
proxy_pass http://led-todo-frontend:3000/;
}
I tried several things I found in the internet here but somehow I am missing the words to describe this issue so that I can find results...
Anyone know how to solve this issue, or know at least some buzzwords I can search for?
This isn't a very elegant solution, but you can try to on-the-fly rewriting that tags content with the ngx_http_sub_module, something like this could work:
location /led-todo/ {
proxy_pass http://led-todo-frontend:3000/;
sub_filter_once off;
# uncomment to do substitution inside CCS or JS content too
# sub_filter_types text/css application/javascript;
sub_filter 'href="/' 'href="/led-todo/';
sub_filter "href='/" "href='/led-todo/";
sub_filter 'src="/' 'src="/led-todo/';
sub_filter "src='/" "src='/led-todo/";
}
Related
I have a Svelte app deployed in a docker image with a Nginx as reverse proxy in front of it. My problem is, that the routing is not working. I looked at the following link to resolve it: https://github.com/EmilTholin/svelte-routing/issues/144
I opted to server all requests with my index.html and changed the nginx config as follows:
location / {
proxy_pass http://127.0.0.1:5000;
try_files $uri $uri/ /index.html;
}
By doing this I am not getting a 404 anymore on my routes, but the page is blank because now my css, js, ... is not loaded correctly:
The stylesheet https://test.com/global.css was not loaded because its MIME type, “text/html”, is not “text/css”.
The stylesheet https://test.com/build/bundle.css was not loaded because its MIME type, “text/html”, is not “text/css”.
The script from “https://test.com/build/bundle.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
As a next step I thought I need an exception for css, js, ... files so that only non css, js, ... files are served through the index.html and I added the following content to my nginx config file: (Source: Send all requests to index.html except certain extensions)
location ~ \.(js|css|png|jpg)$ {
}
Unfortunately this did not solve the issue and I am still having the same issues.
Does someone have another solution for this?
I'm trying to setup a reverse proxy nginx in a docker-compose setup I have. It works fairly well, but I have a problem with a 302 redirect.
The nginx server runs on https://localhost:1253. When I return the redirect within my internal server, nginx will use the internal name (serviceweb) of my docker container in the redirect uri. This is my redirect uri:
https://accounts.google.com/o/oauth2/v2/auth?response_type=code&<...>&redirect_uri=https%3A%2F%serviceweb%2Fsignin-google...
I'd like to change serviceweb to localhost:1253.
How can I do this with nginx?
I've tried this simple setup:
location / {
proxy_pass https://serviceweb;
proxy_redirect serviceweb localhost:1253;
}
But this does not quite work. The location header still contains the original value. I'm sure I somehow have a problem in the proxy_redirect rule , but I'm not sure how. There's a regex based way of doing it according to http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_redirect, and I think my current setup would work with that.
What am I doing wrong?
I'm using Docker to serve my simple WordPress website. A nginx container and a wordpress container. Simple setup:
upstream wordpress_english {
server wordpress_en:80;
}
server {
listen 80;
server_name my_domain.com www.my_domain.com;
location / {
proxy_pass http://wordpress_english;
}
}
Problem: Static files (css, js and images) are not loaded.
The output from the browser console shows a 404:
http://wordpress_english/wp-content/themes/twentyfifteen/genericons/genericons.css?ver=3.2
Its easy to spot the problem: The browser looks for the static files at wordpress_english (the nginx upstream name), instead of my_domain.com
How can I fix this problem?
This is not a nginx problem, but a WordPress problem.
Solution:
In wp-config.php, add the following two lines:
define('WP_HOME','http://my_domain.com');
define('WP_SITEURL','http://my_domain.com');
During the WordPress installation, WordPress automatically sets WP_HOME to nginx upstream name. The above solution overwrites the default setting.
Seems to be an issue in your nginx config file.
When declaring your server my_domain you provide location / with proxy_pass wordpress_english. I don't know a lot on nginx, but I don't see any declaration of path in your server my_domain and is root is linked to wordpress_english. Seems normal that he is looking for files in wordpress_english and not in you server. (In fact, I guess he is looking in your server but your server tells to look in wordpress).
Not sure about it cause I don't know well nginx and proxy_pass functions.
I've been searching for a while now but didn't manage to find anything that fits my needs. I don't need hotlinking protection, as much as I'd like to prevent people from directly accessing my files. Let's say:
My website.com requests website.com/assets/custom.js, that'd work,but I'd like visitors which directly visit this file to get a 403 status code or something. I really have no idea if it's possible, and I don't have any logical steps in mind..
Regards !
You can use nginx referer module: http://nginx.org/en/docs/http/ngx_http_referer_module.html.
Something like this:
server {
listen 80;
server_name website.com;
root /var/www/website.com/html ;
location /assets/ {
valid_referers website.com/ website.com/index.html website.com/some_other_good_page.html ;
if ($invalid_referer) {
deny all;
}
}
}
This config guard assets directory. But remember, that not guaranteed and worked only for browser - any body can emulate valid request with curl or telnet. For true safety you need use dynamic generated pages with dynamic generated links.
You do not need to create the variable $invalid_referer as this is set by the nginx module.
If you nginx powered development instances are showing up in Google search results, there is a quick and easy way to prevent search engines from crawling your site. Add the following line to the location block of your virtualhost configuration file for the block that you want to prevent crawling.
add_header X-Robots-Tag "noindex, nofollow, nosnippet, noarchive";
You can simply deny access to any folder or file just by putting these lines with your folders' name
location ~ /(no_access_folder|folder_2)
{
deny all;
return 403;
}
I have a DV server with MediaTemple and recently had their support enable ngnix webserver. I have been integrating their ProCDN with Super Cache on the WordPress sites on the DV.
I noticed on this domain convoyofhope.eu that the CDN is working properly, but if you view the site on Firefox the fontface isn´t working because of the cross-domain issue. I found this site that seems to solve the problem http://www.red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default
My question is, in the site it says:
Also, if you are using nginx as your webserver you will need to include the code below in your virtual host file:
location ~* \.(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
I am just not sure where I put this on my server. I checked the vhost for convoyofhope.eu but I didn´t see where I would add that to make this work. Thanks for any feedback.
It would generally go in the nginx configuration file that has the server block for that host:
server {
listen 80;
server_name convoyofhope.eu;
...
location ~* \.(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
...
}
On RHEL related distributions, this would be on the file system somewhere under /etc/nginx/. Your particular distribution may vary.
On MediaTemple, in your Plesk control panel, go to Websites & Domains (tab) -> Web Server Settings then scroll down to "Additional nginx directives". Place your location… directive in the text box there.