snippetjavascriptdockerMinor
Docker Compose: How do you build an image while running another container?
Viewed 0 times
imagewhilecontaineryoudockerrunningcomposeanotherhowbuild
Problem
I'm trying to build a Nuxt 3 application using docker compose. However, I'm having trouble with docker compose and dockerfile configuration.
Context
To give background on the project that I'm working on, here are the stack that I'm using:
So, in Nuxt 3 I can run
Problem
The problem is that, when pre-rendering a static contents in Nuxt 3, it requires Strapi backend to run so that it can fetch the contents from Strapi CMS and generate the html files.
So in terms of command line, I need to make sure that Strapi server is running (
When using docker, I need to make sure that Strapi server container is running while building the Nuxt/node.js image. However, I don't know how I'm supposed to run a container (strapi server) while building an image (Nuxt SSG contents).
Files
Dockerfile.client
Dockerfile.server
```
# Strapi Image
FROM node:16-alpine
# Installing libvips-dev for sharp Compatability
RUN apk update && apk add build-base gcc autoconf automake zlib-dev libpng-dev nasm bash vips-dev
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
WORKDIR /opt/
COPY ./server/package.json ./server/yarn.lock ./
ENV PATH /opt/node_modules/.bin:
Context
To give background on the project that I'm working on, here are the stack that I'm using:
- Nuxt 3 for SSG
- Strapi for CMS
- Nginx for serving static contents generated from Nuxt 3
So, in Nuxt 3 I can run
npx nuxi generate to pre-render/generate static contents for the website. After generating the static HTML files, nginx will serve the static contents. Strapi will serve as headless CMS, providing contents for the website.Problem
The problem is that, when pre-rendering a static contents in Nuxt 3, it requires Strapi backend to run so that it can fetch the contents from Strapi CMS and generate the html files.
So in terms of command line, I need to make sure that Strapi server is running (
strapi start) and only then generate the static files (npx nuxi generate) or else there would be an error during build process because Nuxt application cannot fetch resource from the strapi server.When using docker, I need to make sure that Strapi server container is running while building the Nuxt/node.js image. However, I don't know how I'm supposed to run a container (strapi server) while building an image (Nuxt SSG contents).
Files
Dockerfile.client
# Nuxt Image
FROM node:16-alpine as build
WORKDIR /app
COPY ./client .
RUN npm install
RUN npm run generate
# Nginx Image
FROM nginx:1.15 as publish
COPY --from=build /app/.output/public/ /usr/share/nginx/html
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]Dockerfile.server
```
# Strapi Image
FROM node:16-alpine
# Installing libvips-dev for sharp Compatability
RUN apk update && apk add build-base gcc autoconf automake zlib-dev libpng-dev nasm bash vips-dev
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
WORKDIR /opt/
COPY ./server/package.json ./server/yarn.lock ./
ENV PATH /opt/node_modules/.bin:
Solution
You could try using the
Then pass the profile switch during the build:
Please refer to the official documentation for more information:
https://docs.docker.com/compose/profiles/
--profile option during the build.version: "3"
services:
strapi:
profiles: ["strapi"]
build:
context: ./
dockerfile: strapi/Dockerfile
container_name: "strapi"
restart: always
ports:
- "3000:3000"
nuxt:
build:
profiles: ["nuxt"]
context: ./
dockerfile: nuxt/Dockerfile
image: nuxt:latest
container_name: "nuxt"
restart: always
ports:
- "3000:3000"Then pass the profile switch during the build:
docker compose --profile nuxt buildPlease refer to the official documentation for more information:
https://docs.docker.com/compose/profiles/
Code Snippets
version: "3"
services:
strapi:
profiles: ["strapi"]
build:
context: ./
dockerfile: strapi/Dockerfile
container_name: "strapi"
restart: always
ports:
- "3000:3000"
nuxt:
build:
profiles: ["nuxt"]
context: ./
dockerfile: nuxt/Dockerfile
image: nuxt:latest
container_name: "nuxt"
restart: always
ports:
- "3000:3000"Context
StackExchange DevOps Q#16822, answer score: 1
Revisions (0)
No revisions yet.