How to serve docker-compose app (react-flask) using Kong?

Questions
#1

I have a docker-compose application combining ReactJS, Flask, and MongoDB.
(Kong noob here)

├── Makefile
├── docker-compose-dev.yml
├── docker-compose-prod.yml
└── services
    ├── flask_server 
    ├── react_ui 
    ├── nginx 
    └── swagger

I used Nginx as a reverse proxy for deployment and it works well.

But I came across Kong API Gateway and it looks great because of the plugins and integrations. So I wanted to understand (if possible) how can I serve my react frontend and the whole application using kong instead of nginx.

#2

Hi,

Kong is an Nginx instance, so you could definitively replace your Nginx instance with a Kong instance.

The biggest hurdles would be:

  • Kong uses a database (PostgreSQL or Cassandra) in order to store state. You would have to include a database in your setup so Kong can use it. Please give a look at the Docker installation guide.
  • You would have to translate your custom Nginx reverse-proxy settings to Kong configurations. Depending on how complex they are, this could take some work, or be very straightforward.
1 Like
#3

It would be awesome if you could point me to a tutorial or documentation. I found this link - https://docs.konghq.com/0.11.x/configuration/#serving-both-a-website-and-your-apis-from-kong which seems similar.

As for my nginx conf for now, I think its pretty simple as of now.

server {

  listen 80;

  location / {
    proxy_pass        http://react_ui:80;
    proxy_redirect    default;
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
  }

  location /cargo {
    proxy_pass        http://flask_server:5000;
    proxy_redirect    default;
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
  }

  location /swagger {
    proxy_pass        http://swagger:8080;
    proxy_redirect    default;
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
  }
}

And when react app is built, I copy over my built html file to nginx - Dockerfile

FROM nginx:1.15.0-alpine

RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx

COPY --from=builder /usr/src/app/build /usr/share/nginx/html

EXPOSE 80

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

default.conf

server {
  listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

If you want you can look at the code - https://github.com/maitray16/Cargo that should give you a fair idea of how its setup as of now.

#4

Regarding the translation of nginx reverse-proxy settings to Kong configurations, how do the proxy_set_header directives get translated to Kong environment variables? Thanks