Travis CI를 사용하여 React 항목에 대한 자동 확인 설정 방법

본고는 React의 기초 지식을 잘 알고 GitHub에 작업을 저장한다고 가정합니다.

자동화란 무엇입니까? 당신은 왜 관심을 가져야 합니까?

자동화는 컴퓨터로 하여금 작업을 실행하게 하는 방법일 뿐, 이렇게 하면 수동으로 작업을 수행할 필요가 없다.
당신이 소프트웨어를 구축할 때, 당신은 그것을 작은 덩어리로 나누고, 여기에 조금 더, 거기에 조금 더, 모든 것이 정상적임을 확보할 것이다.하지만 매번 당신이 뭔가를 바꿀 때마다 예전의 유용한 것을 깨뜨릴 수 있다.
변경할 때마다 모든 것이 정상인지 수동으로 검사할 수 있습니다.하지만 당신의 프로젝트가 커지면서 시간이 더 필요해요.너는 더 많은 것을 놓칠 수 있다.
그럼 왜 컴퓨터에서 이런 검사 안 시켜줘요?이렇게 하면 너는 더욱 효과적인 일에 시간을 쓸 수 있다.이 모든 것을 시작하고 실행하는 것은 Continuous Integration 과정의 일부분이다

매우 간단한 어플리케이션

이 글에서, 나는 React에서 간단한 응용 프로그램을 구축했다.이것은 심지어 완전한 업무 목록은 아니지만, 그것은 단지 시작일 뿐이다.
이 응용 프로그램에서 작업을 목록에 추가할 수 있습니다.

나는 이미 이 앱을 나의 GitHub 계정에 밀어 넣었다.여기서 찾을 수 있어요.

알렉스 마셜 / TravisAutomationExample

Travis CI와 통합된 간단한 todo 어플리케이션 프레젠테이션

자동화 설정

이제 프로젝트가 GitHub에서 시작되었습니다. 자동화 검사를 추가하겠습니다.
Travis와 연락하려면 먼저 Travis CI 로 이동하여 등록하고 GitHub 계정에 연결하는 것이 좋습니다.

일단 네가 해낸다면, 너는 거의 준비가 다 되었다.최상위 레벨에서 프로젝트에 파일을 추가해야 합니다.다음과 같은 내용을 포함하는 .travis.yml 파일을 만듭니다.

language: node_js
node_js:
  - "stable"
script:
  - yarn build

Yarn 대신 NPM을 사용하여 프로젝트를 작성하는 경우 yarn build 를 npm run build 로 대체합니다.
이것은 거의 가장 간단한 각본이다.우리는 트라비스에게 우리의 프로젝트가 사용되고 있다고 말했다 node_js. 우리는 그것이 안정적인 버전을 사용하기를 바란다.그리고 구축 스크립트를 실행할 것을 요구합니다.이것은 React 구축 과정을 실행할 것입니다. 만약 우리가 그것을 막는 오류를 범했다면, Travis가 우리에게 알려 줄 것입니다.
따라서 이 파일을 제출하고 변경 사항을 GitHub로 전송합니다.이제 GitHub 페이지 맨 위에 최신 커밋 번호가 표시되고 그 옆에 주황색 표시기가 있습니다.마우스를 위에 걸면, 검사가 아직 끝나지 않았다는 것을 알 수 있을 것이다.트라비스의 건조가 진행 중이다.

만약 네가 그것을 몇 분 주면 아이콘이 녹색 표시로 변하는 것을 볼 수 있을 것이다.만약 당신이 그것을 클릭한다면, 구축이 이미 통과된 것을 볼 수 있을 것이다.

프로세스에 프로세스 추가

따라서 이 설정은 초기본적입니다. - 이 검사를 좀 더 철저하게 하세요.
작업을 입력하고'저장'을 누르면 작업 목록에 추가되는 테스트를 만들었습니다.그런 다음 입력 상자를 지웁니다.
이 테스트를 작성하는 방법을 자세히 소개하지는 않겠지만, 이전에 어떤 테스트도 작성하지 않았다면 React Testing Library 를 보십시오.
이 테스트는 Travis가 GitHub에 제출할 때마다 실행되기를 바랍니다.이 점을 실현하기 위해 .travis.yml에 한 줄을 더하자.

language: node_js
node_js:
  - "stable"
script:
  - yarn build
  - yarn test

마찬가지로 NPM을 사용하는 경우 이 행은 npm test 으로 변경됩니다.
변경 사항을 제출하여 GitHub에 전달합니다.다시 한 번, 우리는 녹색의 표시를 얻었다.전송 중인 구축에 대한 자세한 정보를 보려면 클릭한 다음 링크를 클릭하십시오.트라비스는 우리에게 그것이 운행하는 모든 기록을 보여 주었다.만약 우리가 아래로 끝까지 굴러가면, 그것은 테스트의 상세한 정보를 보여 준다.

그들 옆에 녹색 편이가 있는데, 모든 것이 지나갔다. 대단해!

안전을 위해 나뭇가지를 잡다

지금 우리는 이 녹색 진드기를 가지고 있다. 우리는 모든 것이 정상이라는 것을 안다. 만약 우리가 이 상태를 유지할 수 있다면 좋지 않겠는가?
이 점을 실현하는 좋은 방법은 시종일관 단독git 지점에서 변경하는 것이다.이렇게 하면 우리는 주요 지점에서 독립적으로 작업을 진행할 수 있으며, 모든 것이 정상을 확보한 후에야 새로운 변경 사항을 합병할 수 있다.새 지점을 만들기 위해 터미널에서 실행합니다git checkout -b my-new-branch.현재, 만약 우리가 어떤 잘못을 저질렀다면, 그것들은 주 코드에 영향을 주지 않을 것이다.
Travis 구축이 통과되지 않는 한 지점에서 주요 지점으로의 합병을 중단할 수 있습니다.
GitHub repo에서 설정으로 이동하여 브랜치를 선택합니다.거기서 주 지점의 이름을 누르고 Require status checks to pass before merging 와 Travis 구축 검사를 선택할 수 있습니다.만약 당신이 상처를 입지 않도록 보호하고 싶다면, Include administrators 옵션을 선택하십시오.

현상을 타파해 봅시다.

그럼 뭐가 고장난 걸로 하면 어떡해요?나는 코드를 수정해서 목록에 새로운 업무를 추가하는 줄을 삭제했다.이것은 나의 테스트가 실패할 것이라는 것을 의미한다.이것은 새로운 지점이기 때문에 전송할 때 GitHub에 새 지점을 만들어야 하기 때문에 터미널에서 실행됩니다 git push --set-upstream origin my-new-branch.
우리가 GitHub에 갔을 때, 우리는 그것이 당기는 요청을 건의하는 것을 보았다.

녹색 단추를 누르면pull 요청을 만들 것입니다.검사가 완료되기 전에 이 요청을 통합할 수 없습니다.만약 우리가 좀 기다린다면, 우리는 트라비스 빌딩에 적십자사가 있는 것을 볼 수 있을 것이다.

만약 우리가 Travis의 상세한 정보를 클릭한다면, 우리는 어떤 문제가 발생했는지 볼 수 있다.

이번에 우리는 녹색의 똑딱거리는 소리를 받지 못했다.우리는 우리가 예상한 바와 같이 테스트can add a task가 실패한 것을 볼 수 있다.
Travis에서 우리의 오류를 발견했습니다. 메인 코드 라이브러리를 파괴하는 것이 아니라 복구할 기회가 있습니다.
코드로 돌아가서 오류를 수정하고 GitHub로 다시 보낼 수 있습니다.이번 구축이 통과되어 우리는 녹색 표시를 얻었고 우리의 요청을 안전하게 합병할 수 있었다.

여기서 어디로 갑니까

이것은 단지 기초일 뿐이다. 여기서 너는 네가 생각할 수 있는 모든 일을 자동으로 처리할 수 있다.

완벽한 엔드 투 엔드 테스트 실행

브라우저 또는 버전별 노드에서 테스트

모든 것이 순조롭다면 Netlify 같은 서비스에 자동으로 배치

더

나는 이 문장이 네가 지속적인 통합의 장점과 어떻게 간단하게 설정하는지 볼 수 있기를 바란다.
만약 당신이 자동화를 사용하는 멋진 방법에 대해 다른 건의가 있다면, 나는 기꺼이 평론에서 들을 것이다.
즐거운 인코딩!