RemixをDockerで使う

フォルダ構成

• root/
  • docker-compose.yaml (本番用)
  • docker-compose-dev.yaml（開発用）
  • remix/
    • Dockerfile（本番用）
    • DockerfileDev（開発用）

remixフォルダがnpx create-remix@latestでつくられるプロジェクトフォルダです

本番用

Dockerfile

FROM node:20-alpine

WORKDIR /usr/server

COPY ./package.json ./
RUN npm install

COPY ./ .

RUN npm run build
ENV NODE_ENV=production

CMD ["npm", "run", "start"]

docker-compose.yaml

services:
  remix:
    build: ./remix
    ports:
      - "3000:3000"
    volumes:
      - ./remix/app:/usr/server/app
      - ./remix/public:/usr/server/public

開発用

DockerfileDev

FROM node:20-alpine

WORKDIR /usr/server

COPY ./package.json ./
RUN npm install

COPY ./ .

ENV NODE_ENV=development

CMD ["npm", "run", "dev"]

docker-compose-dev.yaml

services:
  remix:
    build:
      context: ./remix
      dockerfile: DockerfileDev
    ports:
      - "3000:3000"
      - "3001:3001"
    volumes:
      - ./remix/app:/usr/server/app
      - ./remix/public:/usr/server/public

開発版ではウェブソケットも動くように、3000ポートだけではなく3001ポートも空けます