Create docker file for client and server

Question

I have a folder structure like this: root/server root/frontend root/start.sh

where start.sh is somethins like this:

#!/bin/sh

cd server
npm run build;

cd ../client;
npm run build;
mv -R build ../server/client;

cd ../server
npm run start;

so I build the server, then the client, I move the client built file inside my server app and I run the app...is there a way to do something like this with a docker image?

Answer 1

Yes, most of the thing that you can do with a .sh script could be done building a docker image. Howerver, docker images follow often the Single Responisbility Principle, so i would not couple FE and BE in a single image (if they are two different applications) but instead i would do 2 different, then using docker compose , you will be able to manage your multi-container application

let's see a very simple example

Backend: (Dockerfile in server directory)

FROM node:xxx (use your development version)
WORKDIR /server
COPY . /server/
RUN npm run build

EXPOSE 3000

CMD npm start

Frontend: (Dockerfile in client directory)

FROM node:xxx (use your development version)
WORKDIR /client
COPY . /client/

RUN npm run build
EXPOSE 80

CMD npm start

docker compose (in the parent directory of server and client

version: 3
services:
  server:
    build: ./server
    container_name: server
    ports:
      - 3000:3000
  client:
    build: ./client
    container_name: client
    ports:
      -80:80

then with docker-compose up --build you can build and run your containers in any moment, see the documentation for other commands (stop, kill, remove ecc)

NOTE: i've written all "by hand", there could be some typo or wrong syntax. Sorry, i will fix!

Answer 2

this is probably similar to the problem your facing:

FROM node:alpine as buildjob_frontend
COPY web/package.json .
COPY web/yarn.lock .
RUN yarn install
COPY web/ .
RUN yarn build

FROM golang:alpine as buildjob_go
RUN mkdir -p /go/src/github.com/marhaupe/go-react-bootstrap && \
  mkdir -p /src/bin/ && \
  apk update && \
  apk add git && \
  apk add make
WORKDIR /go/src/github.com/marhaupe/go-react-bootstrap/
COPY . .
RUN GOOS=linux make build-server && mv serverbin /src/bin/app

FROM alpine:latest
RUN apk update && apk add ca-certificates && rm -rf /var/cache/apk/* && \
  mkdir -p /src/web/build
COPY --from=buildjob_frontend /build /src/web/build
COPY --from=buildjob_go /src/bin/app /src/
WORKDIR /src
EXPOSE 3000
CMD ["./app"]

Builds frontend, builds backend, and copies backend binary and frontend build folder into an alpine image. I can link you the full repo if you need to see how things are linked with eachother

Answer 3

In Docker to change directory use the WORKDIR keyword , you need to specify the full path in this section

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

WORKDIR /usr/src/app/client

RUN npm install

RUN npm run build

WORKDIR /usr/src/app

EXPOSE 5000

CMD ["node", "server.js"]