PREVIEW: Using Custom Domains and SSL with Let's Encrypt and Traefik

When you deploy your site you want it to be accessible under your own domain name and also secured with certificate, so that you see the lock icon in your browser and the site is accessible with HTTPS

In this Wappler update, we are introducing a new way to handle custom domains and automatically
generate free SSL certificates to secure them. All that thanks to two new services: Traefik for easy managing your site and services redirection, working together with Let’s Encrypt for issuing free secure certificates.

Register a Domain Name

You can register your own domain name at any provider as you wish. So you have full control of it.
Where the domain name and it sub domains point to is determined by the assigned DNS records to your domain.

You can edit the DNS records usually at the provider where you register your domain with, or have it under control of the provider that you are running your server on like Digital Ocean or Amazon AWS.

Once your register it, you can assign an IP address to it pointing to your server.

If you want free domain registration with .tk and other simple extensions, you can try the Freenom service

Use Cloud Hosting with Wappler Docker Machine

To deploy your website live on a server, you need to create an online server first. You can choose for hosting cloud providers like Digital Ocean or Amazon AWS. Check the appropriate guide for quick setup:

Edit your DNS settings

Once you create your server, you will know its IP address that you need to assign to your domain name. You can see it on the Docker Machine choice screen at your project target docker settings:

image

If you have Digital Ocean then you can simply add the domain there for management. Do make sure you assigned the right DNS servers as outlined in the guide above at your domain registrar to point to the ones at Digital Ocean. After that it is easy to assign the new domain:

Once you have assign the domain for management, you need to add hostnames to manage (sub domain names).

As I want to use multiple hostnames for vrious services under the same domain, for easy management I will use a wildcard hostname noted with *
This means that any subdomain under my domain will point to the same server.


So as you can see my domain is setup now with any hostname( sub domains) we can think of later on:

Install Traefik to assign domain names

So now that we have pointed our domain to our brand new server, we need to let the server know about it and let it automatically generate SSL certificates for the domain names.

To do this we need to install Traefik.

Open your project settings, choose the remote target and go to the Docker Machines manager:

image

In the Docker Machine Manager, choose the server you have created and then Manage Services:

There you will see the services you can install. You can choose from Portainer and Traefik.

You can enable both if you wish. Potainer to be able to manage your docker containers online and Traefik to manage your routing and assigned domain names with their certificates.

Important is to enter your e-mail address so it will be registered with Let’s Encrypt and be used to issue your free SSL certificates. Those are valid for just 3 months but will be automatically renewed for you by Traefik.

You can choose now domain names for the Portainer and Traefik dashboards if you enabled them.
You can supply also username and password for secure access to the Traefik dashboard.

Once you are done, just click on the “Apply” button to install the services.

You can see if everything is installed in the log pane below:

If something went wrong you can check the logs of the services:

So now we can assigned already two subdomains in our example for the portainer and traefik services in our case. So an automatic process of Traefik will kicks in to issue certificates for them. A minute later you will be able to access their dashboards as we specified in our case at https://portainer.my-awesome-wappler-site.tk and https://traefik.my-awesome-wappler-site.tk

Assign your new Domain Names

So now that we completed the installation of Traefik, we can now also assign custom domain names to our web server as well.

You can do that in the target settings. Enter there you full domain name prefixed with the subdomain and https, in the Web Server URL field. Also clear the Port field as we don’t use it:

Save the target settings, make sure they are active and deploy your target:

image

You can see that everything is deployed successfully and by the green light, and if you want more info you can expand the panel below:

So now after the deploy of your new domain the installed Traefik will pick it up and starts its automatic process to issue a new SSL certificate for it from Let’s Encrypt, if it doesn’t have it yet. So that your web site is securely accessible under https with a nice free certificate.

It might take a minute to generate as the the external service of Let’s Encrypt need to be called and your domain verified. But after that you can go directly in the browser and access you new site. IN our case this was: https://node.my-awesome-wappler-site.tk/

Conclusion

You see how easy it is now to use custom domains and issue fully automatically certificates to them thanks to Traefik and Docker Hosting. Setting up hosting is never being easier!

9 Likes

Thankyou @George.

I found that couldn’t initially get the dashboards working. I added both @ and * to the DNS records in Digital Ocean and finally worked. Not sure if anyone else experienced this.

Here is screenshot of Digital Ocean DNS settings.

2 Likes

Yes you can add @ as hostname as well indeed - which basically means, respond also without hostname, like for example.com

While using a * as hostname - means respond for any hostname, so like site1.example.com, site2.example.com etc

or you can just specify only the hostnames you want.

1 Like

Hi @George, thanks for the tutorial. Definitely, makes go live so much faster and easier.

My problem is somehow, I don’t see the traefik service setting, only Portainer. I’m on the latest Wappler version 3.2.1

I finally was able to make this work :slight_smile: I had some figuring out to get it right so if this helps anyone.

  1. It’s an experimental feature, so had to enable experimental feature from settings.

  2. You have to enter all the settings: Portainer, Dashboard, username, password etc. I tried it with just the traefik setting on and dashboard as ‘off’, nothing happens. But the UI doesn’t give any indication that dashboard is mandatory or anything.

  3. Then I ran into this error:

ERROR: for traefik Cannot start service traefik: driver failed programming external connectivity on endpoint traefik (703c6972ebf3bf79ebac9823a23c5aa9dc4b0ad73323ba3e0813ee8cbc6946b5): Bind for 0.0.0.0:80 failed: port is already allocated
ERROR: Encountered errors while bringing up the project.
Error Deploying Services on Docker Machine OrderManagementDemo!

This was because my node server was also running on the same port.

I made port as blank in Node, deployed to remote and then apply traefik & portainer settings again, it showed the green lights

and then I changed the host of the Server to my ‘https’ domain.

It worked out in the end.

3 Likes

I was in the process of writing a similar post. I had the same issues, PHP server running on port 80. Probably just needs a note in the instructions to either shutdown the docker web service whilst installing Traefick or change the port number before installing Traefik. Works well once up and running though.

1 Like

Thanks - yes will adjust the docs for the final release.

2 Likes

Got this working, to reiterate the above feedback - you must install both portainer and traefik - this is the part I was missing.

However, neither dashboard appears to be working, neither the portainer.mydomain or traefik.mydomain - can’t access either and when return to the project settings, the user and password are blanked out - even if I continue to save it.

Screen Shot 2020-09-07 at 2.32.57 pm

I am having the same issue. Assigned both subdomains to the server IP and it’s showing the following text: 404 page not found

A post was split to a new topic: Missing Dockerfile when deploy

traefik is running but when I open website in browser it gives me 404 error: {“status”:“404”,“message”:"/ not found."}

Also I managed to install traefic and portainer and they are working well, however the main site is showing me 404 page not found message, with the not secure tag on top, and Your connection is not private. I don’t know where I went wrong?
I followed all the steps and got the green light after deploying but the ssl may have not installed correctly I think.

This is usually because Traefik currently only sets up one host (either www.yourdomain.com or yourdomain.com - not both) there is a workaround for this, while @george and the team add a couple of options to the setup. You can find it here:
Www and non-www certificates in Docker

Hey bpj, actually I don’t have any url forwarding for www.mydomain.com to mydomain.com so I am only using the basic mydomain.com but still after I tried installing ssl through traefic and the steps mentioned above, something went wrong and now the site is not accessible because I am getting this message:

In project settings, is the domain set as https://your domain.com? (Ensure it is https://)

Got it working now. Initially it wasn’t working because I had the ip address in there with the https, and I didn’t change it because I thought it was the same thing as writing https://mydomain.com. Thanks

1 Like