I'm studying Docker and how to properly publish my containers coding a very simple web application. It has only two containers, backend and frontend. I've published the source code here: https://github.com/sinayra/hello-private-world
If I run locally each node application, its works "fine" (everything is public, but this is not what I want in the end of the day). Then, I created Dockerfile for each container, to try to simulate a real application. For the frontend, I exposed the port 3000 to access from the host. However, I don't want to expose the port 3333 for the host, and, because of that, my front can't fetch the data from the back.
Here is my index.html from the frontend.
<html>
<head>
<title>Hello Public World</title>
</head>
<body>
<h1>Message from backend:</h1>
<p id="backend"></p>
<script>
const back = document.getElementById("backend");
const url = "http://localhost:3333/"; //I tried backend:3333, but without success
fetch(url)
.then((resp) => resp.json()) // Transform the data into json
.then(function (data) {
back.innerHTML = data.message;
});
</script>
</body>
</html>
Its Dockerfile:
# pull official base image
FROM node:lts
# set working directory
WORKDIR /usr/src/app
# install app dependencies
COPY package.json ./
RUN npm install
# add app
COPY . ./
EXPOSE 3000
# start app
CMD ["npm", "run", "start"]
My index.js from backend:
const express = require("express");
const app = express();
const cors = require("cors");
const port = 3333;
const allowlist = ["http://localhost:3000"];
const corsOptions = {
origin: allowlist,
methods: "GET",
preflightContinue: false,
optionsSuccessStatus: 204,
};
app.use(cors(corsOptions));
app.use(express.json());
app.get("/", (req, res) => {
console.log("GET /");
res.json({ message: "Hello Private World!" });
});
app.listen(port, () =>
console.log(`Example app listening at http://localhost:${port}`)
);
Its Dockerfile:
# pull official base image
FROM node:lts
# set working directory
WORKDIR /usr/src/app
# install app dependencies
COPY package.json ./
RUN npm install
# add app
COPY . ./
#EXPOSE 3333
# start app
CMD ["npm", "run", "start"]
And the Docker compose file
version: "3.8"
services:
backend:
image: helloworld-private
build:
context: ./backend
dockerfile: Dockerfile
working_dir: /usr/src/app
container_name: "express_container"
volumes:
- ./backend/:/usr/src/app
- /usr/src/app/node_modules
networks:
- webappnetwork
expose:
- "3333"
web:
image: helloworld-public
build:
context: ./web
dockerfile: Dockerfile
working_dir: /usr/src/app
container_name: "liveserver_container"
links:
- backend
volumes:
- ./web/:/usr/src/app
- /usr/src/app/node_modules
environment:
- PORT=3000
networks:
- webappnetwork
ports:
- "3000:3000"
networks:
webappnetwork:
driver: bridge
Is there any abstraction layer that I'm missing?
