I'm using nginx in a docker container which is serving out static content. It's run in Kubernetes as a sidecar to another service in the same file.
However, the issue is that although the same exact HTML page is being served (I checked using a text comparer) the page looks malformed on the web server (but fine when I render it locally)
So because of this, it makes me think that there is an issue with serving some of the css, js, or image files
Here's part of the Kubernetes deployment
containers:
- image: <OTHER IMAGE>
imagePullPolicy: Always
name: <imagename>
ports:
- containerPort: 8888
- image: <MY NGINX IMAGE>
imagePullPolicy: Always
name: <imagename>
ports:
- containerPort: 80
- containerPort: 443
restartPolicy: Always
The nginx file
The Dockerfile
Here is the file path of the actual proxy (static content in kiwoon-pages)
Here is the static content
Is there anything that looks glaringly wrong here? Let me know, thanks!
Since #tymur999 has already solved this issue, I decided to provide a Community Wiki answer just for better visibility to other community members.
It's important to know that browsers use the MIME type, to choose a suitable displaying method.
Therefore, the web server must send the correct MIME type in the response's Content-Type header.
In the MIME types documentation, we can find an important note:
Important: Browsers use the MIME type, not the file extension, to determine how to process a URL, so it's important that web servers send the correct MIME type in the response's Content-Type header. If this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled.
In nginx, we can use the types directive to map file name extensions to MIME types of responses (see: NGINX documentation):
Syntax: types { ... }
Default:
types {
text/html html;
image/gif gif;
image/jpeg jpg;
}
Context: http, server, location
NOTE: A sufficiently full mapping table is distributed with nginx in the mime.types file.
As an example, suppose I have a simple website - a single HTML (index.html) and CSS (mystyle.css) file.
$ ls /var/www/html/
index.html mystyle.css
$ cat /var/www/html/index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="mystyle.css"/>
<p>This is a paragraph.</p>
</body>
</html>
$ cat /var/www/html/mystyle.css
body {
background-color: aquamarine;
}
Without the correct MIME type for CSS, my website doesn't work as expected:
NOTE: The text/css MIME type is commented out.
$ grep -Ri -A 3 "types {" /etc/nginx/nginx.conf
types {
text/html html htm shtml;
# text/css css;
}
When the text/css MIME type is properly included, everything works as expected:
grep -Ri -A 3 "types {" /etc/nginx/nginx.conf
types {
text/html html htm shtml;
text/css css;
}
Related
I need to implement an URL rewriting action for a project. This has to be done with HAProxy-1.5 because it is implemented on a PfSense firewall and later versions are not available to this point.
I have the following URLS:
update.domain.com
repository.domain.com
which both point to the same backend server1. The challenge now is to move the document root:
- update.domain.com >> /some/path/repo1.
- repository.domian.com >> /some/path/repo2
Not only is the document root moved but due to a earlier implementation with TMG servers links exists that point to files like this:
update.domain.com/file1.txt
I have tried to work with http-request set-path and some ACL's on the frontend but unfortuanly this function is available with versions > haproxy-1.6
frontend www
bind *:80
acl update_url hdr_beg(host) -m beg update.domain.com
acl update_root path_beg /some/path/repo1/
http-request set-header /some/path/repo1/%[path] if !update_root update_url
use_backend testServer if update_root update_url
default_backend testServer
Links to files such as update.domain.com/file1.txt cant be changed. Keeping TMG is not a solution. How can i get this working with Haproxy-1.5?
For HAProxy 1.5, you can use reqrep, which will replace the request line (and any header lines) with what you specify in your regex, e.g something like:
reqrep ^([^\ :]*)\ /some/path/repo1/(.*) \1\ /some/path/repo2\2
A more detailed explanation of how to use reqrep can be found here.
I am hosting a web application inside a Kubernetes 1.13 cluster behind an NGINX ingress controller. The Ingress specifies path: /my-webapp/?(.*) and annotations:
{ nginx.ingress.kubernetes.io/rewrite-target: /$1 } such that the webapp can be reached from outside the cluster at http://my-cluster/my-webapp. (The ingress controller is exposed as my-cluster.)
One remaining problem is that the webapp contains "relative" URLs that refer e.g. to CGI scripts and to CSS stylesheets. For instance, the stylesheet in <link rel="stylesheet" type="text/css" href="/my-stylesheet.css" /> currently does not load. I assume this is because the browser requests it at the wrong URL (http://my-cluster/my-webapp/my-stylesheet.css would be right) and that some more annotations are needed.
What is the correct configuration is such a case?
UPDATE The inspector reveals that the browser currently requests the stylesheet from URL http://my-cluster/my-stylesheet.css, which is indeed wrong and needs to be fixed.
UPDATE This looks like a related problem with an NGINX reverse proxy in general, not a Kubernetes NGINX ingress controller in particular. I wonder if and how the suggested recipes can also serve in this particular case. For a start, I have tried switching to a relative URL for referencing the stylesheet (per recipe One in the accepted answer), but this also has not worked so far:
<link rel="stylesheet" type="text/css" href="my-stylesheet.css" />, the browser apparently still tries to get the stylesheet from http://my-cluster/my-stylesheet.css, although it displays http://my-cluster/my-webapp in the URL bar and the inspector reports the same URL as baseURI.
Now this combination of annotations seems to do the trick:
annotations:
nginx.ingress.kubernetes.io/configuration-snippet: |
proxy_set_header Accept-Encoding "";
sub_filter '<head>' '<head> <base href="/my-webapp/">';
nginx.ingress.kubernetes.io/rewrite-target: /$1
nginx.ingress.kubernetes.io/use-regex: "true"
I am currently using this version of the ingress controller:
-------------------------------------------------------------------------------
NGINX Ingress controller
Release: 0.23.0
Build: git-be1329b22
Repository: https://github.com/kubernetes/ingress-nginx
-------------------------------------------------------------------------------
In my situation, I must replace URL-s from wsdl service page and this my solution code that was written thanks to the above code
nginx.ingress.kubernetes.io/configuration-snippet: |
sub_filter 'http://example.com:80/project/domain/' 'http://example.com:80${PUBLISH_PATH}/project/domain/';
sub_filter_once off;
sub_filter_types text/xml;
${PUBLISH_PATH} - is the kuber domain specific
Hey there,
I'm new when dealing with NIGNX servers and Linux. My HTML file is displayed but my server does not load the CSS files.
The only thing I found was this line
include /etc/nginx/mime.types;
which I include in the http block.
After that I reload my config with sudo nginx -s reload. To be sure I also executed sudo nginx -s stop and sudo nginx.
This is my whole config:
http {
include /etc/nginx/mime.types;
server {
location / {
root /data/www;
}
location ~ \.(gif|jpg|png)$ {
root /data/www/images;
}
}
}
events {}
My skeleton files are located in /data/www. In this directory there is another CSS folder.
Thank you in advance.
First of all, you're going to need to tell NGINX to have your static files to obtain a TTL (time to live) via expire headers. Locate this in your NGINX configuration file, if it isn't there. Create a new directive with location
location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
expires 1s;
}
After this go ahead and purge your files from the server and force it to serve new files.
Set sendfile off in nginx.conf
Set expires 1s in mysite.conf
Explicitly set Cache-Control header: add_header Cache-Control no-cache;
Of course, before doing anything above. If it doesn't require drastic measure, try manually deleting everything in the cache folder: /var/cache/nginx
If that doesn't help then proceed with everything listed here!
After you've successfully purged your server from serving static files. Add this to your NGINX server block to achieve optimization.
gzip on;
gzip_comp_level 2;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain application/x-javascript text/xml text/css application/xml;
It's possible to set expire headers for files that don't change and are served regularly.
location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
I include my CSS files in the header:
<link rel="stylesheet" type="text/css" href="http://cdn.website.com/base.css">
In the S3 interface under Properties-->Metadata-->
Key: Content-Type
Value: text/css
Permissions are granted to Everyone with Open/Download
Still not working.
The problem is determining the path to the static content of the application (it depends on path the application starts olso)
Solutions are:
Start application from root application path
example: ApplicationName path=/home/ec2-user/site then need
cd /home/ec2-user/site && ./ApplicationName
Configure path for method .UseWebRoot(path_to_static_content)
I want to use Gitlab to manage web-application development. Is it possible to access the html file I have created in my Gitlab repo from the browser?
Currently there are ssh/http url for access to the repo like:
ssh: git#something.some.ca:balbal/web-app.git
http: (ht tps://something.some.ca:balbal/web-app.git)
When I access https from a browser it will just jump into the git repo manage UI (like show you all the commits, branches and detail files)
What I want is web access to a particular html file I have created in my repo (like if there is a index.html file in a folder called 'www' in my repo). I want some URL that I can type into the browser and which will show me the index.html content.
Is it possible for me to set up an web access to these html files?
As of now, Gitlab does not support this functionality. There's a feature request for this: http://feedback.gitlab.com/forums/176466-general/suggestions/5599145-preview-render-static-html-pages-pushed-to-repos
Currently, if you query Gitlab for the raw html file, it sets certain HTTP headers to make it render as text/plain instead:
$ curl -I http://my-gitlab/user/project/raw/dev/doc/_book/index.html
HTTP/1.1 200 OK
Server: nginx
Date: Mon, 20 Apr 2015 13:17:48 GMT
Content-Type: text/plain; charset=utf-8
Connection: keep-alive
Status: 200 OK
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-UA-Compatible: IE=edge
Content-Disposition: inline; filename="index.html"
Content-Transfer-Encoding: binary
Cache-Control: private
ETag: "b81191c550c47eae1ab4adf72dfd0c92"
Set-Cookie: request_method=HEAD; path=/
X-Request-Id: 04ae0499-2fdf-4f89-82ab-8392a8d6a076
X-Runtime: 0.019857
Fortunately, with GitLab 10.1, online display of HTML files is now officially supported.
See the documentation for more details.
With GitLab 10.1, we introduce the online visualization of HTML files created by pipelines for public projects, just one click away from the artifacts browser view.
You have to add a file called .gitlab-ci.yml at the root of your project containing
pages:
script:
- mkdir .public
- cp -r * .public
- mv .public public
artifacts:
paths:
- public
only:
- master
Then access your file there: https://gitlab.org/project-name/filename.html
Source: https://roneo.org/en/framagit-render-html/
Update: see also the project raw.githack
For quick debugging/testing purposes you may use the FireFox PourBico plugin.
Change the response header to text/html
Avoid doing this on the public GitLab, do this on your own GitLab deployment, GitLab was not meant to be hacked like this.
Also see Github pages, HTTP headers
For Chrome, one can use extensions such as Header Hacker and set the headers to render HTML by changing the content-type in the browser. As mentioned by Christophe Roussy this is a hack and you should really have a good reason for doing this.