I have an MS app that contains both a Bot app and Tab app. I need to use docker as part of our CI/CD process to deploy the app to our Development environment on AWS.

So far I have been trying to have both apps run in a single docker container, but it seems to be a conflict between ReactJS (Tab app) and NodeJS (Bot app).

As when I get the bot app to run, I can’t get the react app to run – and visa versa.

Dockerfile which works to get Bot to run:

FROM node:18.18.0 as development
ENV PORT=80
EXPOSE 80
WORKDIR /usr/src/app

ENV NODE_ENV=development
COPY ["package*.json", "./"]
COPY ["./bot", "./"]
COPY ["./tab", "./"]

RUN npm install

COPY . .
RUN chown -R node /usr/src/app
USER node
CMD ["npm", "run", "dev:bot"]

FROM development as build
RUN npm run build:bot


FROM node:18.18.0-alpine as production
ENV PORT=80 
EXPOSE 80
WORKDIR /usr/src/app

ENV NODE_ENV=production
COPY --from=build /usr/src/app/node_modules ./node_modules
COPY --from=build /usr/src/app/package.json ./package.json
COPY --from=build /usr/src/app/bot/lib ./bot/lib
COPY --from=build /usr/src/app/bot/node_modules ./bot/lib/node_modules
COPY --from=build /usr/src/app/bot/package.json ./bot/lib/package.json
COPY --from=build /usr/src/app/tab/build ./tab/build
COPY --from=build /usr/src/app/tab/node_modules ./tab/node_modules
COPY --from=build /usr/src/app/tab/build /usr/share/nginx/html
CMD ["node", "./bot/lib/index.js"]

Bot is accessible, but ReactJS app doesn’t load/work.

I then try to load the ReactJS app using Nginx, but then the bot is not running:

# Use the official Node.js image as the base image for building
FROM node:18.18.0 as development

# Set the working directory in the container
WORKDIR /usr/src/app
ENV NODE_ENV=development

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Copy Tab app (ReactJS) to the working directory
COPY ["./tab", "./"]

# Copy Bot app (NodeJS) to the working directory
COPY ["./bot", "./"]

# Install dependencies for both backend and frontend
RUN npm install

# Copy the rest of the backend and frontend application code
COPY . .
RUN chown -R node /usr/src/app
USER node
CMD ["npm", "run", "dev:bot"]

# Build the React app and Bot App
FROM development as build
RUN npm run build

# FROM node:18.18.0-alpine as production
# ENV PORT=80 
# EXPOSE 80
# WORKDIR /usr/src/app

ENV NODE_ENV=production

# Use Nginx as a base image to serve the static files
FROM nginx:alpine as production
ENV NODE_ENV=production

# Copy the bot build output from the build stage to working directorys' bot folder
COPY --from=build /usr/src/app/node_modules ./node_modules
COPY --from=build /usr/src/app/package.json ./package.json
COPY --from=build /usr/src/app/bot/lib ./bot/lib
COPY --from=build /usr/src/app/bot/node_modules ./bot/lib/node_modules
COPY --from=build /usr/src/app/bot/package.json ./bot/lib/package.json

# Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

# Copy the build output from the build stage to the Nginx public directory
COPY --from=build /usr/src/app/tab/build /usr/share/nginx/html

# Copy nginx configuration file
COPY nginx.conf /etc/nginx/nginx.conf

# Expose port 80 to the outside world
EXPOSE 80

# Command to run Nginx
CMD ["nginx", "-g", "daemon off;"]

So my question is – is it possible to use docker compose and have each app running in it’s own container rather?

And then if so, how would I configure the MS app to use bot and tab specific URLs?