Issue accessing a (django) app in a vagrant box with ssl / nginx /gunicorn

I'm using Ansible to deploy a django/react app. I'm deploying it on a development Digital Ocean server and everything is working well on that side. I'm using a similar process to deploy it on a Vagrant box... this is were I'm having troubles.

I'm having issues to access the app on the vagrant guest machine from the host. I detail below the configuration (vagrant, nginx files).

When I access a url like 127.0.0.1:8443/time-series/, nginx is responding with 400 Bad Request The plain HTTP request was sent to HTTPS port. However when I access the url 127.0.0.1:8080/time-series/, I have a response This site can’t be reached tsango’s server IP address could not be found. So it seems that nginx is reached, but cannot serve the app files.

I created ssl crt/key for localhost using let's encrypt certificate for localhost web page.

What do you think can be wrong in what I did? Also what is the good approach to debug such an issue?

The Vagrantfile is:

# -*- mode: ruby -*-
# vi: set ft=ruby :

# Vagrantfile API/syntax version. Don't touch unless you know what you're doing!
VAGRANTFILE_API_VERSION = "2"

Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
  config.vm.box = "ubuntu/bionic64"
  config.ssh.forward_agent = true
  config.vm.define "tsango", primary: true do |app|
    app.vm.hostname = "tsango"
#    app.vm.network "private_network", type: "dhcp"
    app.vm.network "forwarded_port", guest: 80, host: 8080
    app.vm.network "forwarded_port", guest: 443, host: 8443
  end

  config.vm.provider "virtualbox" do |vb|
    vb.customize ["modifyvm", :id, "--name", "Tsango", "--memory", "2048"]
  end

  # Ansible provisioner.
  config.vm.provision "ansible" do |ansible|
    ansible.playbook = "vagrant.yml"
    ansible.host_key_checking = false
    ansible.verbose = "vv"
  end
end

while the Nginx configuration file is:

upstream tsango_wsgi_server {
  server unix:/webapps/tsango/run/gunicorn.sock fail_timeout=0;
}

server {
    listen      80;
    server_name tsango;
    server_tokens off;
    return 301  https://$server_name$request_uri;
}

server {
    listen              443 ssl;
    server_name         tsango;
    server_tokens       off;
        ssl_certificate     /etc/ssl/tsango.crt;
    ssl_certificate_key /etc/ssl/tsango.key;
        ssl_protocols       TLSv1.2;
    ssl_ciphers         'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA';
    ssl_prefer_server_ciphers on;

    # Prevent MIME type sniffing for security
    add_header X-Content-Type-Options "nosniff";

    # Enable XSS Protection in case user's browser has disabled it
    add_header X-XSS-Protection "1; mode=block";

    client_max_body_size 4G;

    access_log /webapps/tsango/logs/nginx_access.log;
    error_log /webapps/tsango/logs/nginx_error.log;

    location /static/ {
        alias   /webapps/tsango/static/;
    }

    location /media/ {
        alias   /webapps/tsango/media/;
    }

    location / {
        if (-f /webapps/tsango/maintenance_on.html) {
            return 503;
        }

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header Host $http_host;
        proxy_redirect off;

        # Try to serve static files from nginx, no point in making an
        # *application* server like Unicorn/Rainbows! serve static files.
        if (!-f $request_filename) {
            proxy_pass http://tsango_wsgi_server;
            break;
        }
    }

    # Error pages
    error_page 500 502 504 /500.html;
    location = /500.html {
        root /webapps/tsango/tsango/tsango/templates/;
    }

    error_page 503 /maintenance_on.html;
    location = /maintenance_on.html {
        root /webapps/tsango/;
    }
}

Solution

I found the issue: the ssl local certificate I created was named localhost instead of tsango.