Currently, I am delving into the world of docker. Within my repertoire, I possess a mix of a next.js app and a node.js app.
Within my next.js application, specifically in page.tsx, I have incorporated a call to my backend API.
export const revalidate = 0;
export default async function Home() {
const response = await fetch("/api/getRandomNumber");
const data = await response.json();
console.log(data);
return (
<main className={styles.main}>
<h1>{data.lastInfo.randomNumber}</h1>
</main>
);
}
In the realm of nodejs, I have constructed an endpoint labeled as getRandomNumber utilizing expressjs.
router.get("/getRandomNumber", async (req, res) => {
const randNumber = `${Math.random() * 100}`;
const info = new Info({ randomNumber: randNumber });
await info.save();
const lastInfo = await Info.findOne({
where: { randomNumber: randNumber },
});
return res.status(200).send({ lastInfo });
});
Though aware that next.js functions as a comprehensive framework, here I strive to comprehend the process of dockerizing multiple services by creating a dedicated node.js application.
Below showcases my Dockerfile for the next.js app:
FROM node:18-alpine
WORKDIR /usr/app
COPY ./package.json ./
RUN npm install
COPY ./ ./
CMD ["npm","run","dev"]
The subsequent segment highlights my Dockerfile for the node.js app:
FROM node:18-alpine
WORKDIR /usr/app
COPY ./package.json ./
RUN npm install
COPY ./ ./
CMD ["npm","run","dev"]
Pursuing this, I have gone ahead with nginx integration. As part of the process, I have generated a directory which holds both default.conf and Dockerfile.dev.
My approach involved appending /api to my nodejs app through default.conf.
Contained within Dockerfile.dev:
FROM nginx
COPY ./default.conf /etc/nginx/conf.d/
Following this progression is the construction of a single docker-compose.yml file accommodating next.js, nginx, and node.js.
version: "3"
services:
postgres:
image: "postgres:latest"
environment:
- POSTGRES_PASSWORD=postgres_password
nginx:
restart: always
build:
dockerfile: Dockerfile.dev
context: ./nginx
ports:
- "3050:80"
depends_on:
- nodeapp
- nextapp
nodeapp:
build:
dockerfile: Dockerfile.dev
context: ./nodeapp
volumes:
- /app/node_modules #don't try to override this folder
- ./nodeapp:/app
environment:
- PGUSER=postgres
- PGHOST=postgres
- PGDATABASE=postgres
- PGPASSWORD=postgres_password
- PGPORT=5432
nextapp:
build:
dockerfile: Dockerfile.dev
context: ./nextapp
volumes:
- /app/node_modules
- ./nextapp:/app
environment:
- WDS_SOCKET_PORT=0
While successful in accessing my node.js app via
http://localhost:3050/api/getRandomNumberhttp://localhost:3050/.
An endeavor to contact
http://localhost:3050/api/getRandomNumberMoreover, attempts at simply reaching out to /api/getRandomNumber yield the message "Failed to parse URL."
For further insights, refer to the Github repository here.
Additional screenshots can be found below:
https://i.stack.imgur.com/7MRQF.png