Netlify를 지속적 통합으로 사용하는 방법

Netlify는 정적 웹사이트 또는 웹 애플리케이션에 사용할 수 있는 호스팅 제공업체입니다. 무료 플랜에는 300분의 빌드 시간이 제공되며, 이는 커밋을 많이 받지 않는 프로젝트에 CD(지속적 배포)를 설정하기에 충분합니다. 이러한 리소스를 사용하여 빌드에 간단한 CI(지속적 통합)를 추가하는 방법을 보여 드리겠습니다.

예제 응용 프로그램

간단하게 하기 위해 Create React App(CRA)으로 생성된 애플리케이션을 예제 앱으로 사용하겠습니다. 이런 식으로 우리는 다음과 같은 중요한 응용 프로그램을 얻습니다.

은 단순한 실제 사례와 유사합니다.

에는 일부 npm 종속성이 있고

우리에게 필요한 대부분은 이미 설정되어 있습니다.

결과 응용 프로그램은 다음과 같습니다.

확인 단계

이전에 CI로 실행할 수 있는 것steps에 대해 쓴 적이 있습니다. 예제 응용 프로그램에 대해 설정하는 방법을 살펴보겠습니다.

건물

빌드를 위해 CRA에서 생성한 코드는 필요한 모든 작업을 수행합니다.

$ npm run build

> [email protected] build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  43.71 kB  build/static/js/main.1fb16459.js
  1.78 kB   build/static/js/787.c84d5573.chunk.js
  541 B     build/static/css/main.073c9b0a.css
…

Netlify는 CRA에서 생성한 저장소에서 빌드 명령으로 build 스크립트를 자동으로 선택하고 완벽하게 작동합니다.

테스트

CRA에서 생성한 코드는 단위 테스트를 위한 완전한 설정과 하나의 예제 테스트와 함께 제공됩니다. npm test 스크립트는 개발용으로 만들어졌습니다. 대화형 모드에서 실행되며 기본적으로 파일을 감시합니다. CI에서 실행하려면 단일 실행이 필요합니다.

$ npm test -- --watchAll=false

> [email protected] test
> react-scripts test "--watchAll=false"

 PASS  src/App.test.js
  ✓ renders learn react link (16 ms)

Test Suites: 1 passed, 1 total
Tests:      1 passed, 1 total
Snapshots:   0 total
Time:       0.644 s, estimated 1 s
Ran all test suites.

쉽게 사용할 수 있도록 package.json에서 새 스크립트를 정의하겠습니다.

{
  …
  "scripts": {
    …
    "test": "react-scripts test",
    "test:ci": "react-scripts test --watchAll=false",
    …
  },

정적 분석

코드에 추가하고 싶은 한 가지는 정적 분석입니다. 기본 구성은 매우 간단해야 하지만 이 기사의 범위를 벗어나도록 하겠습니다. 이에 대한 후속 조치를 취하고 싶다면 다음과 같이 시도해 볼 것을 권장합니다.

ESLint – 코드의 잠재적인 문제에 대해 경고하거나

Prettier – 코드 스타일을 자동으로 적용합니다.

새 CI 스크립트

지금 가지고 있는 코드로 성공적인 CI/CD 실행을 위해 다음 단계가 필요합니다.

npm install – Netlify에서 기본적으로 수행하는 패키지 종속성을 가져옵니다

.

npm run test:ci – 수정된 테스트 명령

npm run build – 원래 빌드 명령

배포 – Netlify에서 수행

이제 테스트를 기반으로 한 조건부 빌드를 원합니다. 테스트가 실패하면 실행이 중지되어야 하며 이것이 '&&'를 사용하는 이유입니다. 동시에 Netlify 구성에는 실행할 명령에 대한 입력이 하나만 있습니다. 이 사용 사례 전용 새 스크립트를 생성하여 이 두 가지를 해결할 수 있습니다.

{
  …
  "scripts": {
    …
    "test:ci": "react-scripts test --watchAll=false",
    "ci": "npm run test:ci && npm run build",
    …
  },
  …
}

실행 예

결국 스크립트는 예상대로 작동합니다.

빌드 테스트가 실패하면 Netlify 대시보드에서 실패한 실행이 나타납니다

.

모든 것이 예상대로 작동하면 애플리케이션이 배포됩니다

.

자원 사용

몇 번 실행했을 때 Netlify가 시스템 사용을 제어하기 위해 확인하는 리소스인 빌드 시간에 대한 테스트의 영향은 거의 없었습니다. 물론 이것은 프로젝트가 성장하면 변경되며 프로젝트에 더 많은 테스트를 추가하게 됩니다. 언젠가는 전용 CI 솔루션을 설정하는 데 투자하고 Netlify를 호스팅으로만 사용하는 것이 더 합리적일 것입니다.

연결

deployed application

example repository

다음에 무엇을 하시겠습니까?

Netlify에서 CI를 실행하는 것은 임시 솔루션일 뿐입니다. 귀하의 의견을 듣고 싶습니다. 다음에 어떤 도구를 사용하시겠습니까? 이poll에서 알려주세요.