The problem is just happening on localhost, when I upload the application to AppEngine, It succesfully finds the css files.
I'm using python 2.7, the app is done on webapp2 and I'm using a local copy of bootstrap.
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
Those are my links to the css files, they work when I deploy the app http://main-cocoa-597.appspot.com/cenira, but they don't on localhost.
app.yaml
application: main-cocoa-597
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /static
static_dir: static
- url: /cenira.*
script: cenira.app
- url: .*
script: main.app
libraries:
- name: webapp2
version: "2.5.2"
- name: jinja2
version: latest
I think the problem has nothing to do with the app, since even the launcher's SDK Console is not loading It's css files either.
I just installed Windows, maybe there's something missing? How can I solve this?
EDIT:
just with a basic html (a div with a class), and linking to an external css file:
<link href="/css/asd.css" rel="stylesheet">
getting this:
GET file:///C:/css/asd.css net::ERR_FILE_NOT_FOUND
For PIL, add this to the libraries section of app.yaml:
- name: PIL
version: latest
To diagnose the 500 error in your css request, try adding this:
- url: /static/css
static_dir: static/css
mime_type = "text/css"
(This needs to be ABOVE your - url /static call, so it runs first
Related
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;
}
I deploy a laravel project on google cloud app engine everting is working fine expect 'pictures' that am fetching from products table in MySQL database.
The images are broken, all the thing are working fine on the localhost.
Here's my app.yaml:
runtime: php73
handlers:
- url: /assets
static_dir: public/assets
- url: /(.+\.(gif|png|jpg))$
static_files: public/uploads
upload: .+\.(gif|png|jpg)$
runtime_config:
document_root: public
env_variables:
## Put production environment variables here.
APP_KEY: Already Get this from .env
APP_STORAGE: /tmp
VIEW_COMPILED_PATH: /tmp
SESSION_DRIVER: cookie
CACHE_DRIVER: database
## Set these environment variables according to your CloudSQL configuration.
DB_DATABASE: ufurnitures
DB_USERNAME: ufurnitures
DB_PASSWORD: Already set the pass
DB_SOCKET: /cloudsql/ufurniture:us-central1:ufurnitures
## To use Stackdriver logging in your Laravel application, copy
## "app/Logging/CreateStackdriverLogger.php" and "config/logging.php"
## into your Laravel application. Then uncomment the following line:
# LOG_CHANNEL: stackdriver
beta_settings:
# for Cloud SQL, set this value to the Cloud SQL connection name,
# e.g. "project:region:cloudsql-instance"
cloud_sql_instances: ufurniture:us-central1:ufurnitures
I have an 'uploads' folder in a public directory where pictures are getting saved.
Just change this:
- url: /(.+\.(gif|png|jpg))$
static_files: public/uploads
upload: .+\.(gif|png|jpg)$
To this!
- url: /uploads
static_dir: public/uploads
And hurry it worked! ^_^
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
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 am using Google app engine to serve static web pages but I want to remove .html extension in the URL. I created a App.yaml file. I created a folder called static with the app.yaml file included but it still does not work any ideas what I am doing wrong ?. I am using app engine with java.
application: Google App Engine JSF 2.2 Template
version: 1
runtime: java
handlers:
- url: /(.+)
mime_type: text/html
static_files: static/\1.html
upload: static/(.+)
Hey GAEfan here is my code with the indent and it is google app engine for java,thanks again for the help
application: Google App Engine JSF 2.2 Template
version: 1
runtime: java
handlers:
- url: /(.+)
static_files: static/\1.html
upload: static/\1.html
mime_type: text/html
Try this:
- url: /(.+)
file: static/\1.html
and put app.yaml at the root (war folder). And, make sure the indentation is as you see here. Your indentation is incorrect. Should be 2 spaces indented, except the - url line.