コンテナ化

my_project/
├── my-app/     # Frontend app
└── my-api/     # API

mkdir my_project
cd my_project

npx create-react-app my-app
cd my-app
npm run build

The build folder is ready to be deployed.
You may serve it with a static server:
 
  npm install -g serve
  serve -s build

# stage 1 - Build our application
# From the latest nodejs lts version
FROM node:18.14.2-alpine AS BUILDER
 
# Create our app folder
RUN mkdir /app
# Set is as cwd
WORKDIR /app
 
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+) doing this will cache this action untill package.json or package-lock.json is modified
COPY --chown=node package*.json ./
 
# Install dependencies
RUN npm install
 
# Bundle app source code
COPY --chown=node . .
RUN npm run build
 
# stage 2 - Create app image
# From latest nginx version on alpine to have a small image
FROM nginx:1.23.3-alpine
 
# Copy our build directory
COPY --from=BUILDER /app/build /app
 
# Copy our default nginx config
COPY ./server.nginx /etc/nginx/conf.d/default.conf

server {
  listen       80;
  listen  [::]:80;
 
  ## Auto index file in /app
  autoindex on;
  root /app;
  try_files $uri/index.html $uri.html $uri/ $uri =404;
  error_page 404 /404.html;
 
  ## Enable gzip compression
  gzip on;
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_types image/webp image/png text/html text/plain text/css text/xml text/javascript application/x-javascript application/javascript application/xml font/eot font/otf font/ttf;
 
  ## Disable gzip for internet explorer compatibility..
  gzip_disable "MSIE [1-6]\.";
 
  ## Cache all static files
  location ~* ^.+\.(?:css|cur|js|jpe?g|gif|htc|ico|png|html|xml|otf|ttf|eot|woff|woff2|svg)$ {
    access_log off;
    expires 30d;
    add_header Cache-Control public;
 
    ## No need to bleed constant updates. Send the all shebang in one fell swoop.
    tcp_nodelay off;
 
    ## Set the OS file cache.
    open_file_cache max=3000 inactive=120s;
    open_file_cache_valid 45s;
    open_file_cache_min_uses 2;
    open_file_cache_errors off;
  }
}

node_modules
build

docker build -t my-frontend:0.0.1 -f ./Dockerfile .

docker run -it --rm -p 8080:80 my-frontend:0.0.1

mkdir my_project/my-api
cd my-api
npm init
npm install --save express

const express = require('express');
 
const PORT = process.env.PORT || 3000;
const HOST = process.env.HOST || '127.0.0.1';
 
const app = express();
 
app.get('/', (req, res) => {
  res.json({ message: 'Hello World' });
});
 
app.listen(PORT, HOST, () => {
  console.log(`Server running on port ${PORT}`);
});

node main.js

# From the latest nodejs lts version
FROM node:18.14.2-alpine
 
# Create our app folder
RUN mkdir /app
# Set is as cwd
WORKDIR /app
 
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+) doing this will cache this action untill package.json or package-lock.json is modified
COPY --chown=node package*.json ./
 
# Install dependencies
RUN npm install
 
COPY . .
 
# Set host to 0.0.0.0 to bind on all container network interfaces
# This is usefull because we will create a docker network and bind the container to it
ENV HOST=0.0.0.0
# Set the port of the our app to 80 (default http port)
ENV PORT=80
# Expose the port so we can see it during inspection
EXPOSE 80
 
CMD ["node", "main.js"]

node_modules

docker build -t my-api:0.0.1 -f ./Dockerfile .

docker run -it --name my-api --rm -p 8081:80 my-api:0.0.1