내 워크플로우

이 워크플로우는 퍼핏티어를 실행하고 웹 애플리케이션의 스크린샷을 캡처한 다음 스크린샷을 추가하여 댓글 또는 풀 요청 댓글을 커밋합니다. 이렇게 하면 웹 앱 UI 상태를 확인하는 프로세스가 쉬워집니다.



workflow file

제출 카테고리:

메인테이너 머스트해브

Yaml 파일

name: Browser-Testing

on: [push, pull_request]

jobs:
  Browser-Testing:
    runs-on: ubuntu-latest
    # Service containers to run postgres
    services:

      postgres:

        image: postgres

        env:
          POSTGRES_PASSWORD: postgres
          POSTGRES_USER: postgres
          POSTGRES_DB: postgres

        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
        ports:

          - 5432:5432

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
      # install puppeteer dependency libraries using apt
      - name: install puppeteer libraries
        run: |
          sudo apt-get update
          sudo apt-get install -y libgbm1
      # since puppeteer is large in size caching will reduce the runtime 
      - name: Cache node modules
        uses: actions/cache@v2
        env:
          cache-name: cache-node-modules
        with:
          path: "node_modules"
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      - name: Install dependencies
        run: npm install

      - name: Install puppeteer
        run: npm install puppeteer

      - name: Migrate database
        run: npm run prismamigrateprod
        env:
          NODE_ENV: production
          DATABASE_URL: "postgres://postgres:postgres@localhost:5432/postgres"

      - name: Seed database
        run: npm run seed
        env:
          NODE_ENV: production
          DATABASE_URL: "postgres://postgres:postgres@localhost:5432/postgres"

      # run a bash script to start the server and then run puppeteer to capture the screenshots
      # after capturing screenshots , they will be uploaded to cloudinary image service and pass the image url to next step using environment variables 
      - name: Run browser testing script
        id: browser-testing
        env:
          HASHSALT: 123
          DATABASE_URL: "postgres://postgres:postgres@localhost:5432/postgres"
          CLOUDINARY_CLOUD_NAME: ${{ secrets.CLOUDINARY_CLOUD_NAME }}
          CLOUDINARY_API_KEY: ${{ secrets.CLOUDINARY_API_KEY }}
          CLOUDINARY_API_SECRET: ${{ secrets.CLOUDINARY_API_SECRET }}
        run: |
          chmod +x run-browser-testing.sh
          ./run-browser-testing.sh

      # add comment to commit or pull request 
      - name: Add comment
        uses: actions/github-script@v5
        env:
          SHA: ${{ github.sha }}
          commentBody: ${{ env.commentBody }}
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |

            let buffercommentBody = process.env.commentBody
            let utf8commentBody = new Buffer.from(buffercommentBody, "base64").toString("utf8");
            console.log(utf8commentBody);

            github.rest.repos.createCommitComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              commit_sha: process.env.SHA,
              body: utf8commentBody
            })

주요 워크플로 단계는 다음과 같이 요약됩니다.

puppeteer를 실행하고 스크린샷을 캡처합니다.

스크린샷을 외부 이미지 서비스(이 경우 cloudinary)에 업로드하고 이미지 URL을 가져옵니다.

이미지 URL을 사용하여 마크다운 파일을 문자열로 만듭니다.

마크다운 파일 문자열을 base64로 인코딩된 문자열로 변환하여 환경 변수에 쉽게 전달할 수 있습니다(개행과 같은 제어 문자를 더 쉽게 전달할 수 있음).

actions/github-script 작업createCommitComment 메서드를 사용하여 커밋 또는 끌어오기 요청에 대한 설명을 게시합니다.

추가 정보

에서 사용

리즈키 라지타 / 링크드인

Linkin은 사용자 지정 가능한 자체 호스팅 링크 트리 플랫폼입니다.

링크드인 ·

Linkin은 사용자 지정 가능한 자체 호스팅 링크 트리 응용 프로그램입니다.

무료 및 오픈 소스 💯

자체 호스팅, 귀하는 귀하의 데이터를 소유합니다 💽

기능이 풍부한 대시보드를 사용하여 몇 번의 클릭만으로 링크 트리를 사용자 지정하세요 🤖

Next js를 사용하여 구축된 SEO 친화적인 디자인 🕸️

여러 클라우드 공급자를 사용한 원클릭 배포 지원 🚀

View Demo

Demo Adminhttp://linkindemo.vercel.app/admin

데모 사용자 이름 = admin

데모 비밀번호 = linkin123

Vercel로 배포

Heroku로 배포

철도와 함께 배포

시작하기

Vercel에 배포

환경 변수 설정

DATABASE_URL - Postgres 데이터베이스 URL

HASHSALT - 임의의 비밀 키

NODE_ENV - NODE_ENV를 production로 설정

성공적으로 배포한 후 관리자 로그인

을 보기 위해 방문youdomain/admin

기본 로그인 자격 증명 사용

사용자 이름 = admin

암호 = linkin123

성공적으로 로그인하면 위의 관리 대시보드를 볼 수 있습니다.

Heroku에 배포

환경 변수 설정

DATABASE_URL - Postgres 데이터베이스 URL

HASHSALT - 임의의 비밀 키

방문youdomain/admin을 성공적으로 배포한 후…

View on GitHub


Example commit comment