Vultr Docker Setup With SSL

Question

I'm trying to spin up a dockerized website (React JS) being hosted on my Vultr server. I used the one click install feature that Vultr provides to install Docker (Ubuntu 20.04).

I can get my website started with HTTP and a port number 8080. But what I'm looking to accomplish are the following:

1. How to add SSL to my website with docker(since my website is dockerized).

PS: I already have a domain name.

2. How to get rid of the port number as it doesn't look very professional.

For number 2, I did try adding a reverse proxy but not sure if I did it correctly.

Also, not sure if this was the right approach, but I did install letsencrypt in my host Vultr machine (nginx was need too for some reason). I navigated to my domain name and sure enough I do see my website secured (https) with the "Welcome to Nginx" landing page. But again, is this the correct way? If so, how do I display my react website secured instead of the default "Welcome to Nginx" landing page.

Or should I have not installed nginx or letsencrypt in the host machine?

As you can see, I'm an absolute beginner in docker!

This is my Dockerfile-prod

FROM node as build

WORKDIR /usr/src/app
COPY package*.json ./
RUN yarn cache clean && yarn --update-checksums
COPY . ./
RUN yarn && yarn build

# Stage - Production
FROM nginx
COPY --from=build /usr/src/app/build /usr/share/nginx/html
EXPOSE 80 443

#Make sites-available directory
RUN mkdir "etc/nginx/sites-available"

#Make sites-enabled directory
RUN mkdir "etc/nginx/sites-enabled"

# add nginx live config
ADD config/*****.com /etc/nginx/sites-available/*****.com

# create symlinks
RUN ln -s /etc/nginx/sites-available/*****.com /etc/nginx/sites-enabled/*****

# make certs dir as volume
VOLUME ["/etc/letsencrypt"]

CMD ["nginx", "-g", "daemon off;"]

I have to configuration files. PS: I was trying following this guy's repo repo

I feel like everything is there in front of me to get it to work, but I just can't figure it out. If you guys can help me out, I'd really appreciate it! Thanks in advance!

config 1 *****-live.com

server {
    listen 80;
    listen [::]:80;
    server_name *****.com www.*****.com;

    location ~ /.well-known/acme-challenge {
        allow all;
        root /var/www/html;
    }
}

server {
    listen 443 ssl;
    server_name *****.com www.*****.com;

    ssl_certificate /etc/letsencrypt/live/*****.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/*****.com/privkey.pem;

    location / {
        proxy_pass http://172.17.0.2:8080;
    }
}

config 2 *****-staging.com

server {
    listen 80;
    listen [::]:80;
    server_name     *****.com www.*****.com;

    location ~ /.well-known/acme-challenge {
        allow all;
        root /var/www/html;
    }
}

This is my host machine directory to letsencrypt/live

Answer 1

You can use Nginx Proxy and its acme companion.

1. Nginx proxy helps you get read of the port name and can route multiple domain through single IP.
2. Acme proxy can create a Let's encrypt SSL for you and automatically renew it.

Follow the instructions in their GitHub README to set them up.