How to point iframe to a url within a docker network? - r

Question

I have two docker containers:
web, contains nginx with some static html
shiny, contains an R Shiny web application
When run, the shiny web-application is accessible through localhost:3838 on the host machine, while the static html site is accessed through localhost:80.
My goal is to make a multi-container application through docker-compose, where
users access the static html, and the static html occationally fetches data visualisations from shiny via <iframe src="url-to-shiny-application"></iframe>
I can't figure out how to point the iframe to a url that originates within the docker-compose network. Most people tend to host their Shiny apps on urls that are accessible through the Internet (ie. shinyapps.io), as a learning project I wanted to figure out a way to host a containerized shiny server alongside nginx.
Desired result would be the ability to simply write <iframe src="shiny-container/app_x"></iframe> in the static html, and it would find app_x on the shiny server through the docker network.
Is this something that can be sorted out through nginx configuration?

Answer 1

The answer is in your question already:
the shiny web-application is accessible through localhost:3838 on the host machine
So start the URL with http://localhost:3838. If you need this to be accessible from other hosts or you expect that published port number ever might change, you'll need to pass in a configuration option to say what the external URL actually is, or stand up a proxy in front of the two other containers that can do path-based routing.
Ultimately any URL you put in an <iframe src="...">, <a href="...">, and so on gets interpreted in a browser, which does not run in Docker. That means that references to things that might happen to be running in Docker containers in HTML content always need to use the host's hostname and the published port number; they can never use the Docker-internal hostnames.

Answer 2

Did you try this: https://docs.docker.com/compose/networking/?
Sample docker-compose file given:
version: "3"
services:
web:
image: web
ports:
- "8000:8000"
shiny:
image: shiny
ports:
- "3838:3838"
Each container can now look up the hostname web or shiny and get back the appropriate container’s IP address.
and use <iframe src="http://web:8000"/> or port 80, or 8080 or what you configure in the docker file.

Answer 3

You might be interested in "Server Side Includes", to embed web UIs of your microservices in your webpage:
https://developer.okta.com/blog/2019/08/08/micro-frontends-for-microservices#micro-frontends-to-the-rescue%EF%B8%8F%EF%B8%8F