Déployer un site e-commerce React Router 7 en prod

1
git init
2
git add .
3
git commit -m "feat: MVP e-commerce prêt"
4
git branch -M main
5
git remote add origin git@github.com:<ton-user>/shop-router.git
6
git push -u origin main

1
name: 🐳 Build And Push Docker Image
2

3
on:
4
  workflow_call:
5
    inputs:
6
      tag:
7
        type: string
8

9
jobs:
10
  build:
11
    if: ${{ github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' }}
12
    runs-on: ubuntu-latest
13
    steps:
14
      - uses: actions/checkout@v4
15
      - uses: docker/login-action@v2
16
        with:
17
          username: ${{ secrets.DOCKERHUB_USERNAME }}
18
          password: ${{ secrets.DOCKERHUB_TOKEN }}
19
      - uses: docker/setup-buildx-action@v2
20
      - name: 🐳 Build & Push
21
        uses: docker/build-push-action@v3
22
        with:
23
          context: .
24
          push: true
25
          tags: algomax/shop-router:${{ inputs.tag }}

1
name: Docker Image CI
2
on:
3
  push:
4
    branches: ['main','dev']
5
  pull_request:
6
    branches: ['main','dev']
7

8
jobs:
9
  build:
10
    uses: ./.github/workflows/build.yml
11
    with:
12
      tag: ${{ github.ref == 'refs/heads/main' && 'production' || 'latest' }}
13
    secrets: inherit
14

15
  typecheck:
16
    runs-on: ubuntu-latest
17
    steps:
18
      - uses: actions/checkout@v4
19
      - run: npm install
20
      - run: npm run typecheck

1
FROM node:22-alpine AS dev-deps
2
WORKDIR /app
3
COPY . .
4
RUN npm ci                                # deps + devDeps
5

6
FROM node:22-alpine AS prod-deps
7
WORKDIR /app
8
COPY package*.json ./
9
RUN npm ci --omit=dev                     # deps prod only
10

11
FROM node:22-alpine AS build
12
WORKDIR /app
13
COPY . .
14
COPY --from=dev-deps /app/node_modules ./node_modules
15
RUN npm run build
16

17
FROM node:22-alpine
18
WORKDIR /app
19
COPY package*.json .
20
COPY prisma ./prisma
21
COPY --from=prod-deps /app/node_modules ./node_modules
22
COPY --from=build /app/build ./build
23
RUN npx prisma generate
24
CMD ["npm","run","start"]

1
node_modules
2
build
3
README.md

1
services:
2
  shop_router_dev:
3
    build: .
4
    container_name: shop_router_dev
5
    ports:
6
      - "3000:3000"
7
    env_file: .env

1
services:
2
  shop_router_production:
3
    image: algomax/shop-router:production
4
    container_name: shop_router_production
5
    ports:
6
      - "3011:3000"
7
    env_file: .env.production

1
algomax/shop-router:production

1
adduser virgile
2
usermod -aG sudo virgile
3
ssh-keygen -t ed25519 -f ~/.ssh/hostinger
4
# copie la clé .pub dans ~/.ssh/authorized_keys

1
sudo apt update && sudo apt full-upgrade -y
2
curl -fsSL https://get.docker.com | sudo bash
3
sudo apt install docker-compose-plugin -y
4
sudo usermod -aG docker virgile

1
mkdir -p ~/deployments/shop-router && cd ~/deployments/shop-router
2
# copie/colle le script d’installation donné par GitHub
3
./config.sh
4
sudo ./svc.sh install
5
sudo ./svc.sh start

1
shop-router.algomax.fr {
2
  reverse_proxy localhost:3011
3
  encode zstd gzip
4
}

1
sudo systemctl reload caddy

1
sequenceDiagram
2
  participant GitHub
3
  participant Runner
4
  participant DockerHub
5
  participant VPS
6

7
  GitHub->>GitHub: CI (type-check)
8
  GitHub->>DockerHub: build + push image :production
9
  GitHub->>Runner: job deploy
10
  Runner->>DockerHub: docker pull image
11
  Runner->>VPS: docker compose up -d (-f docker-compose.prod.yml)
12
  VPS->>Caddy: service écoute 3011
13
  Caddy->>client: https://shop-router.algomax.fr