Omnishambles



Django + Fly.io + CloudFlare Gotchas

Posted: 2023-07-10

This site uses Django, running on Fly.io, fronted by CloudFlare (I know, I know, but I'm using the free tier…).


The only thing that might set it apart from the panoply of roll-your-own Django blogs is that I'm using Google Docs as the WYSIWYG editor. (TODO: write about that and link to it here).


Here's a list of things I ran into that took a little debugging:

Problem: Django admin date/time widgets disappearing

The widgets for models.DateTimeField that should look like:

 

Where instead looking like:

 

And the console was showing:


Uncaught ReferenceError: django is not defined

    at prepopulate_init.js:3:15


Solution:


I was inserting custom JavaScript into the admin page, and forgetting to add {{ block.super }} to my template:


 {% extends "admin/change_form.html" %}

 {% load static %}

 {% block extrahead %}

 {{ block.super }} {% comment %} <- you don't forget this {% endcomment %}

 <script type="text/javascript" src="{% static 'blog/js/change_form.js' %}"></script>

 {% endblock %}


Problem: Cloudflare was showing an error page

When using a CNAME to point to the site's .fly.dev URL, I was getting "Web server is returning an unknown error Error code 520" messages:



Solution:


The issue was that Cloudflare (defaulted?) into "Flexible" SSL/TLS encryption mode, as found under SSL/TLS > Overview on the sidebar. That was causing cloudflare to make a HTTP / port 80 connection to my fly.io app, which for whatever reason, didn't like it.


Changing the SSL/TLS encryption mode to "Full" or "Full (strict)" fixed the problem, and was very much the right thing to do anyway:


 

Tags: hosting, debugging



© Andrew