Consuming a Sequelize API in a React project. Deploy it with Traefik 2.x in a Docker Swarm

How to use Traefik in high availability mode in a Docker Swarm with a Certificate Authority (CA).

4 min readMay 13, 2020

In my previous posts (Part I) “Traefik 2.x along with Docker Swarm to manage secure services”, (Part II) “Adding PostgrSQL and Pgadmin as services in Traefik 2.x” and (Part III) “Creating and scaling a Sequelize API service”; you could read and learn about Docker Swarm. As I already mentioned, Docker Swarm is still pretty much alive. Indeed, it isn’t dead at all.

As I said, I believe that not all businesses need Kubernetes for orchestration and I think Docker Swarm is indeed a very good alternative for SME’s out there.

As a matter of fact, it has been the challenge I took on when I started working at a&m consulting (a FinTech company) a few weeks ago. I mean, we use TECHnology to improve activities in FINance.

To further elaborate upon my first post, let me continue sharing my experience about the tech stack we implemented in our company and how we moved to that “It’s Live!” stage:

A PostgreSQL DB with PostGIS extension.
Pgadmin for PostgreSQL administration.
A public tokenize Rest API, based on Sequelize.
A React Front project.
Traefik as a reverse proxy and load balancer with “Let’s Encrypt” to enable secure connections.
Portainer to easily build, manage and maintain Docker environments.

In this post (Part IV), I’ll walk you through how to use a Docker image and add it as a new service to our stack, which I called “mystack”.

docker stack deploy — compose-file=traefik-stack.yml mystack

Part IV, 🕓 the FRONT stack

So, let’s continue digging into Traefik configuration by adding a React Front project (React is a JavaScript library for building user interface) built with:

React & React Redux (using Hooks)
Material-UI Next
Tailwind
Formsy React
React ChartJs 2

We’ll not assume any kind of app logic in the Front. The burden will be in the API I already showed in my previous post.

I’m not going to dip so much into the React project since it’s out of scope of this post. The main topic here is how to integrate it with Traefik and how the full Docker orchestration just works.

Adding the FRONT service into the stack (Traefik)

At this moment, you have a Docker image built from your Front project. I defined two environments, one for development purposes and the other one for production. Each environment consumes its own Docker image.

The point is how to integrate the Front as a new service in our stack using Traefik. Let’s do it by modifying the traefik-stack.yml file.

front-dev:
    image: <your docker-hub user>/front-dev-image:latest
    networks:
     - traefik-public
    deploy:
      labels:
        - "traefik.enable=true"
        - "traefik.http.routers.front-dev-http.entrypoints=web"
        - "traefik.http.routers.front-dev.rule=Host(`dev.ebill.aymconsultores.es`)"
        - "traefik.http.routers.front-dev.entrypoints=websecure"
        - "traefik.http.routers.front-dev-http.rule=Host(`dev.ebill.aymconsultores.es`)"
        - "traefik.http.middlewares.front-dev-https.redirectscheme.scheme=https"
        - "traefik.http.routers.front-dev-http.middlewares=front-dev-https@docker"
        - "traefik.http.routers.front-dev.tls=true"
        - "traefik.http.routers.front-dev.tls.certresolver=le"
        - "traefik.http.services.front-dev.loadbalancer.server.port=3000"

And then, deploy the stack again in your “swarm-manager” node:

docker stack deploy --compose-file=traefik-stack.yml mystack

Now, you can go to Portainer and check the service you just deployed.

With that done, and since we had a Dockerfile in our React project:

FROM node:12-alpineRUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/appWORKDIR /home/node/appCOPY package*.json .USER nodeRUN npm installCOPY --chown=node:node . .EXPOSE 3000CMD [ "npm", "start" ]

The built image is able to run a Node server serving the React project on the 3000 port. And Traefik’ll take care of proxies, certificates, redirections and routes. 🚀 🚀🚀 🚀

So, here it is. The Front app is working fine at the address we just defined in the front-dev service:

Conclusion

In this Traefik serie, I showed you how to implement a Docker Swarm stack using Traefik as a container orchestrator, reverse proxier, url redirector, CA generator…and more.

As I already said, the use of Kubernetes is not strictly necessary for small or medium projects, which is the case at a&m consulting.