初めに

今回はフロントエンドとバックエンドのサービスを同一コンテナ内で２つポートを空けて作成する手順を紹介します。
それぞれの細かいコードは省きます。
大雑把な手順はフロントとバックのコードをビルドした後、
supervisodで起動してnginxでフロントをサーブする手順となっています。
supervisordとは
※今回はバックエンドサーバーがGO言語でbackendディレクトリ、
フロントエンドがVite x Reactでfrontendディレクトリとなっています。

1.docker-compose.yaml,Dockerfileを作成

docker-compose.yaml

version: "3"
 
services:
  your-service-name:
    build:
      context: .
      dockerfile: Dockerfile
    restart: always
    ports:
      - 8080:8080 # Goサーバーのポート
      - 5173:5173 # VitexReactのポート

次にDockerfileです

# Goビルド
FROM golang:1.22.5 AS backend_service
 
WORKDIR /workdir
 
COPY backend .
 
RUN CGO_ENABLED=0 go build -o app.exe .
 
# フロントビルド
FROM oven/bun:latest as frontend_service
 
WORKDIR /workdir
 
COPY frontend .
 
RUN bun install && \
    bun run build
 
# nginx導入
FROM nginx:alpine as nginx
 
COPY --from=frontend_service /workdir/dist /usr/share/nginx/html
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
 
FROM ubuntu:20.04
WORKDIR /workdir
 
RUN apt-get update && \
    DEBIAN_FRONTEND=noninteractive \
    apt-get install -y \
    tzdata \
    ca-certificates \
    curl \
    supervisor \
    nginx \
    && rm -rf /var/lib/apt/lists/* \
    && cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime \
    && rm -rf /var/lib/apt/lists/*
 
COPY --from=frontend_service /workdir/dist /usr/share/nginx/html
COPY --from=backend_service /workdir/app.exe /workdir/app.exe
COPY --from=nginx   /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
 
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf
CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

supervisord.confを作成

ビルドした成果物を起動させるためにsupervisord.confを同階層に作成します。

supervisord.conf

[supervisord]
nodaemon=true
user=root
 
[program:backend_service]
command=/workdir/app.exe
autostart=true
autorestart=true
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0
 
[program:frontend_service]
command=/usr/sbin/nginx -g 'daemon off;'
autostart=true
autorestart=true
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0

今回はログを標準出力にしていますが、状況に合わせてログファイルにすることもできます。
supervisordのログについて

nginxを作成

最後にビルドしたファイルを配信するためにnginxの設定ファイルを作成します。
同階層にnginxディレクトリを作成後default.confを作成してください

default.conf

server {
    listen 5173;
    server_name localhost;
 
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
 
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

起動

以上の手順が終了したら、docker-compose.yamlのある階層で
docker-compose up --build
を入力してコンテナをビルドしてください
正常にビルドが完了したら
http://localhost:5173/
にアクセスするとフロントのindex.htmlがサーブされているはずです!