Profile picture

[Github Actions] Github Actions + 클라우드 타입(Cloud Type)으로 애플리케이션 배포하기

JaehyoJJAng2023년 05월 11일

준비사항


프로젝트 트리

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

Dockerfile

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;"]

깃허브 토큰 설정

a. 저장소 시크릿 설정하기
앞서 생성한 GHP(Github Personal Token)을 Github Actions을 적용하려는 저장소에 설정. 저장소의 Settings > Security > Secrets and variables 으로 이동
image


클라우드 타입 프로젝트 생성

image


Workflow 작성

a. 배포된 React 앱에 Github Actions 적용

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

b. 프라이빗 레지스트리 이미지 배포 - Github Container Registry

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 }}

배포 결과

a. Github Actions
image


b. CloudType
image


b. 웹 https://port-0-react-k19y2kljmc7933.sel4.cloudtype.app/
image


Ref


Loading script...