$ tree -L 2 ./
./
├── README.md
└── react-app
    ├── Dockerfile
    ├── LICENSE
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── public
    ├── src
    ├── vite.config.js
    └── yarn.lock

FROM node:16-buster AS builder

WORKDIR /app

COPY package*.json .

RUN npm ci

COPY ./ ./

RUN npm run build

# Production 런타임 - Nginx
FROM nginxinc/nginx-unprivileged:1.23 AS runner

WORKDIR /usr/share/nginx/html

COPY --from-builder /app/dist .

ARG PORT=8080

EXPOSE ${PORT}

CMD [ "nginx", "-g", "daemon off;"]

name: Deploy to cloudtype
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: "1. Checkout"
        uses: actions/checkout@v2

      - name: "2. Connect deploy key"
        uses: cloudtype-github-actions/connect@v1
        with:
          token: ${{ secrets.CLOUDTYPE_TOKEN }}
          ghtoken: ${{ secrets.GHP_TOKEN }}
      
      - name: Deploy
        uses: cloudtype-github-actions/deploy@v1
        with:
          token: ${{ secrets.CLOUDTYPE_TOKEN }}
          project: 20911876/react-app
          stage: main
          yaml: |
            name: react
            app: web
            options:
              docbase: /build
              nodeversion: 14
              spa: true
            context:
              git:
                url: git@github.com:${{ github.repository }}.git
                ref: ${{ github.ref }}
              preset: react

name: Create and Publish a Docker Image, Deploy to CloudType
on:
  push:
    branches:
      - main
  workflow_dispatch:

env:
  REGISTRY: yshrim12
  IMAGE_NAME: react
  DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
  DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}

jobs:
  build-and-push-image:
    runs-on: ubuntu-latest
    steps:
      - name: "1. Checkout repository"
        uses: actions/checkout@v3
      
      - name: "2. Log in to the Docker hub"
        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
        with:
          username: ${{ env.DOCKER_USERNAME }}
          password: ${{ env.DOCKER_PASSWORD }}

      - name: "3. Extract metadata (tags,labels) for docker"
        id: meta
        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
      
      - name: "4. Build and push docker image"
        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
        with:
          context: ./
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
      
      - name: "5. Deploy to CloudType"
        uses: cloudtype-github-actions/deploy@v1
        with:
          token: ${{ secrets.CLOUDTYPE_TOKEN }}
          project: 20911876/react-app
          stage: main
          yaml: |
            name: react
            app: container
            options:
              ports: 8080
              image: ${{ steps.meta.outputs.tags }}