React 애플리케이션 및 GitHub 작업

React 애플리케이션 및 GitHub 작업

개발에서 출시까지 2분 미만 소요

개발자로서 우리는 항상 이 때문에 죄책감을 느낀다.간단한 질문:

I have a React application and want it deployed on GitHub Pages.

이 점을 실현하는 가장 간단한 방법은 로컬에서 그것을 구축하고 구축 디렉터리를 'gh 페이지' branch와viola로 전송하는 것이다.그리고 이를 실현하기 위해 Travis CI를 도입했고 최근에는 GitHub Actions로 전환했습니다.
나는 수동으로 설정하는 것보다 더 많은 시간을 들였기 때문에 먼저 나의 행동이 정확하다는 것을 증명하려고 한다.

GitHub Action는 마을의 새로운 사물로 개발상으로서 우리는 조기(현재 여전히 논란이 있는) 채용자가 될 책임이 있다

내부 지원이 있으므로 다른 타사와 키와 기밀을 공유할 필요가 없습니다.

활력이 넘치는 생태계를 가지고 시간의 흐름에 따라 더욱 좋아질 뿐이다.예를 들어 NodeJs로 Linux 기기를 설정하려면 두 줄의 코드만 있어야 한다.

젠킨스를 사용하는 회사원으로서 설치 과정이 인기를 끌었다.

여러 작업을 동시에 실행할 수 있습니다!모든 것을 병렬로 실행하거나 의존 항목을 만들 수 있습니다.그것의 용도는 상당히 광범위하다.

비록 나의 현재 문제 진술은 상술한 많은 기능을 필요로 하지 않지만, 간단한 항목으로 나의 손을 더럽히기 쉽다.

어떻게 시작합니까?

워크플로우를 시작하는 가장 간단한 방법은 저장소의 작업 탭으로 이동한 다음 스스로 워크플로우를 설정하는 것입니다.이것은main이라는 파일을 만들 것입니다.yml는 기본적인 작업 절차를 제공했다.이 YAML 파일은 구조가 있는데 GitHub 작업의 구성 요소를 이해하기 위해 이해해야 합니다.

GitHub 운영 구성 요소

GitHub 운영 구성 요소GitHub Docs
GitHub 이벤트가 하나 이상의 작업을 트리거합니다.각 작업은 Runner instance(가상 시스템 또는 Docker 인스턴스)라는 서버에서 실행됩니다.모든 작업은 하나 이상의 절차를 포함하고, 모든 단계는 bash 단말기의 echo에서GitHub 커뮤니티 개발까지의 복잡한 조작을 수행한다. 이런 조작들은 복잡한 작업을 완성할 수 있다.구성 요소에 대한 자세한 내용은 official documentation를 참조하십시오.

행동 계획

이제 GitHub 작업 흐름을 알았으니 맡은 임무를 더 작은 조작 가능한 단원으로 분해할 때가 되었다.
Ubuntu 서버부터 시작하여 최신 NodeJS 환경 설정을 받습니다.우리는 코드를 검사하고 의존항을 설치해야 한다.그런 다음 GitHub 페이지를 구축하고 최종 게시할 수 있습니다.
나는 언제 이 일을 하고 싶습니까?이 문제에 대답하기 위해서, 나는 내가 따르는 업무 절차에 대해 간단하게 이야기할 필요가 있다.나는 발전 부서가 하나 있는데, 나는 거기에서 일한다.나는 자주 제출하고, 매번 제출한 후에는 통상적으로 변경 사항을 발표하고 싶지 않다.일단 내가 안정점에 도달했다고 생각하면, 나는 주 지점에pull 요청을 만들 것이다. (이 저장소는 마스터를main으로 이름 바꾸기 전에 존재한다.)그래서 제 동작이 대사님을 자극했으면 좋겠어요.pull 요청을 할 때 터치하면 요청을 만들 때 터치합니다. 통합 후에 터치하기를 바랍니다.만약 여러 명의 개발자가 있다면, 누가 직접 Master/main에 제출할 수 있는지 제어해야 한다.

행동 수칙

name: build_deploy CI

on:
  push:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'

      - name: Install dependencies
        run: yarn --frozen-lockfile

      - name: Build
        run: yarn run build

      - name: Deploy
        uses: peaceiris/[email protected]
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build
          cname: <domain_name>
          enable_jekyll: false
          user_name: 'github-actions[bot]'
          user_email: 'github-actions[bot]@users.noreply.github.com'

계단 좀 봅시다.

이 동작에 이름이 있어요!

우리는 마스터를 추진하는 과정에서 그것을 운행한다.

작업용 Ubuntu 서버

체크아웃 코드

NodeJS 환경을 설정합니다.우리는 판본을 지정할 수 있는데, 실은 미리 조립한 것이다.

의존항을 설치하고 잠금 파일이 이 과정에서 변경되지 않도록 합니다.

우리는 최적화된 생산 구축을 세웠다.

GitHub 커뮤니티 작업 중 하나를 사용하여 변경 사항을 특정 지점으로 전달합니다.일부 매개변수를 설정하여 사용자정의할 수 있습니다.(사용자 정의 영역이 있기 때문에, 여기에서 cname로 설정했습니다.)

그뿐이야.여러분은 GitHub의 이점을 활용할 준비가 되어 있습니다!

결실

그 외에 나는 개발을 추진하는 모든 지점에서 구축 작업을 실행하는 또 다른 행동이 있다.이것은 내가 합병 요청을 할 때 구축을 막는 어떤 것도 파괴하지 않도록 확보했다.다음은 내 저장소의 모양입니다.

GitHub이 움직였어요. Niladri Roy.
개발 지점에서 실패한 구축은 오류를 바로잡는 데 도움을 주었습니다. 오류가 통과되기 시작하면pull 요청을 열고 통합합니다.이것은 "build deploy CI"작업 흐름을 촉발하여 나의 변경 사항을 나의 사이트에 배치합니다. 이 모든 것은 약 1분 반밖에 걸리지 않습니다!이게 얼마나 멋있어요?
https://medium.com/ones-zeros/react-app-and-github-actions-96c9f5444963