Google App Engine flexible runtime(custom runtime) and web font not working(ttf, woff, woff2)

511 views
Skip to first unread message

임형주

unread,
Mar 27, 2017, 9:15:22 AM3/27/17
to Google App Engine
I've got some problem where google app engine flexible custom runtime with web font(ttf, woff, woff2).
I'vs got 404 error for web font resource.

app.yaml
runtime: custom
env: flex


Docker file
# The standard nginx container just runs nginx. The configuration file added
# below will be used by nginx.
FROM nginx

# Copy the nginx configuration file. This sets up the behavior of nginx, most
# importantly, it ensure nginx listens on port 8080. Google App Engine expects
# the runtime to respond to HTTP requests at port 8080.
COPY nginx.conf /etc/nginx/nginx.conf
COPY extra-mime.types /etc/nginx/extra-mime.types

# create log dir configured in nginx.conf
RUN mkdir -p /var/log/app_engine

# Create a simple file to handle heath checks. Health checking can be disabled
# in app.yaml, but is highly recommended. Google App Engine will send an HTTP
# request to /_ah/health and any 2xx or 404 response is considered healthy.
# Because 404 responses are considered healthy, this could actually be left
# out as nginx will return 404 if the file isn't found. However, it is better
# to be explicit.
RUN mkdir -p /usr/share/nginx/www/_ah && \
    echo "healthy" > /usr/share/nginx/www/_ah/health

# Finally, all static assets.
ADD www/ /usr/share/nginx/www/
RUN chmod -R a+r /usr/share/nginx/www

nginx.conf
events {
    worker_connections 1024;
}

http {
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    include /etc/nginx/mime.types;
    include /etc/nginx/extra-mime.types;
    default_type application/octet-stream;

    # Logs will appear on the Google Developer's Console when logged to this
    # directory.
    access_log /var/log/app_engine/app.log;
    error_log /var/log/app_engine/app.log;

    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript;

    server {
        # Google App Engine expects the runtime to serve HTTP traffic from
        # port 8080.
        listen 8080;
        root /usr/share/nginx/www;
        index index.html index.htm;


extra-mime.types
types {
   font/truetype                             ttf;
   application/x-font-woff2                  woff2;
   font/opentype                             otf;
}

When I run docker on my local computer, there is no problem and all mime type has no problem and font rendering is working.

But, when I deploy to app engine(flexible environment custom runtime), I've got 404 error.(content-type is text/html for woff/woff2)

Nicholas (Google Cloud Support)

unread,
Mar 27, 2017, 4:12:46 PM3/27/17
to Google App Engine
404s are normally served when a resource cannot be found given a specific URL.  In general, an effective way to identify where this is happening is by starting from the where logs are available to you and working inwards until you get to the docker container.
  • Are there other static assets in the same directory being served correctly?
  • Is there a request log entry for the font resource?  If not, it would suggest that the request is not making it to the application at all.
  • If the request log is present, does the request make it to the application container?  If it does not, there may be app.yaml static file/folder handlers intercepting the request before it is sent to the application container.
  • If so, does the request make it to your container's nginx process?  You should be able to check your container's nginx logs by connecting to the instance, entering the application docker container and inspecting nginx logs.
The above is a general guide for troubleshooting errors in the flexible environment.  Given the specific error, I'd suggest asking a question on Stack Overflow with the [google-app-engine] tag.  If you believe this to be an issue with the platform not behaving as documented or intended, I'd suggest filing a new issue on Issue Tracker.  This Google Group is intended for general best practice, how-to and architecture type discussions.
Reply all
Reply to author
Forward
0 new messages