Circle CI, EmberJS 및 GitHub와의 지속적인 통합을 설정하는 방법

지속적 통합이란 무엇이며 왜해야합니까?

CI (지속적 통합)는 코드 빌드 및 테스트를 자동화하는 프로세스입니다. 이는 프로젝트 팀 구성원이 버전 제어에 대한 변경 사항을 커밋 할 때마다 발생합니다.

예를 들어 GitHub 리포지토리의 코드를 변경하고 해당 변경 사항을 마스터 브랜치에 푸시합니다. 이렇게하면 CI 프로세스가 트리거되어 가상 환경을 구축하고 명령을 실행합니다. 이 명령은 프로덕션 서버에서와 같이 환경을 구성합니다. 그런 다음 코드를 테스트하기 위해 작성한 자동화 된 테스트 스위트를 실행합니다.

CI는 다음과 같은 용도로 자주 사용됩니다.

  • 개발자가 작업중인 별도의 분기를 확인합니다. 브랜치는 프로젝트의 주요 브랜치에 병합되기 전에 잘 테스트됩니다.
  • 브랜치가 유효성 검사를 통과하면 프로젝트의 최신 버전을 유효성 검사하고 배포합니다.

코드를 프로젝트에 지속적으로 통합하고 테스트하면 다음을 줄일 수 있습니다.

  • 병합 충돌
  • 버그를 고치기 어렵다
  • 다양한 코드 전략
  • 중복 된 노력

마스터 브랜치를 깨끗하게 유지합니다. 여기에서 지속적인 통합에 대해 자세히 알아보세요.

튜토리얼 목표

이것이 지속적 통합 프로세스의 첫 번째 단계입니다. 그래서 일을 아주 간단하게 유지합시다. 우리의 목표는 GitHub에 리포지토리를 만들고 새 커밋이 푸시 될 때마다 해당 리포지토리에서 CI를 실행하는 것입니다. 현재 빌드의 상태를 나타내는 배지도 표시됩니다.

이 데모에 사용할 도구 :

  • GitHub
  • CircleCI
  • EmberCLI

이제 시작하겠습니다.

Github 계정 설정

아직 계정이 없다면 무료 GitHub 계정을 만드십시오.

다음으로 결제 설정으로 이동하여 결제 정보를 입력하십시오. 청구되는 것에 대해 걱정하지 마십시오. (Circle CI) 옵션을 선택하면 매월 1000 분의 무료 빌드 시간이 제공됩니다. 이 데모 프로젝트에는 충분합니다.

마지막으로 ci-ember-demo 라는 새 저장소를 만듭니다 . 초기화하지 마십시오.

기본 Ember 응용 프로그램 만들기

Ember CLI 설치

NPM을 사용하여 Ember CLI를 설치하겠습니다. 여기에는 기본 프로젝트를 생성하는 데 필요한 도구가 포함되어 있습니다.

npm install -g ember-cli

Ember 프로젝트 생성

Ember CLI를 사용하여 ci-ember-demo 라는 프로젝트를 생성 해 보겠습니다 .

# cd into the desktop cd ~/desktop/ # create a new project ember new ci-ember-demo # cd into the directory cd ci-ember-demo # run the server ember s

이제로 이동 //localhost:4200하면 다음 화면이 표시됩니다.

기본 Ember 프로젝트가 예상대로 실행 중입니다. 을 사용하여 서버를 종료 할 수 있습니다 ctrl+C.

기본 테스트가 통과하는지 확인

이제 터미널에서 프로젝트로 생성 된 테스트를 실행 해 보겠습니다.

npm test # alternatively ember test

일련의 6 개의 기본 테스트가 실행되는 것을 볼 수 있습니다. 모두 통과해야합니다.

아이디어는 프로젝트를 개발할 때 작성하는 이러한 테스트와 기타 테스트가 저장소에 변경 사항을 푸시 할 때 계속 실행된다는 것입니다.

프로젝트를 Github에 푸시

받는 사람 향할 CI-엠버 - 데모 편집에 프로젝트 폴더에 README.md파일을. 거기에있는 것을 다음과 같이 바꿉니다.

## ci-ember-demo
This is a basic Ember CI demo application. Check out the tutorial: 'First Step into Continuous Integration with Circle CI'.

원격 URL을 가져 와서 설정하십시오.

GitHub 저장소로 돌아가서 다음과 같은 원격 URL을 가져옵니다.

[email protected]:username/repo_name.git

내부의 CI - 엠버 - 데모 폴더 초기화 저장소를 :

git init

그런 다음 원격 URL을 추가하여 Git이 파일을 어디로 푸시하는지 알 수 있도록합니다.

git remote add origin [email protected]:username/repo_name.git # check that it's been set, should display the updated origin git remote -v

코드를 Github에 푸시 할 시간입니다.

# add all changes git add . # create a commit with a message git commit -m "[INIT] Project" # push changes to the repo's master branch git push origin master

원격 Git 저장소는 우리가 푸시 한 변경 사항으로 업데이트됩니다.

Now we have a main project directory and a repository. It’s time to set up the CI platform.

Setup CircleCI — A continuous integration and delivery platform

CircleCI will be our tool of choice for Continuous Integration. It’s straightforward, popular, and comes with 1000 free monthly build minutes.

Head over to GitHub’s marketplace and set up a plan.

Select the Free plan.

Next head over to CircleCI and login with your GitHub account:

Once you’re in, go to the Add Project section. You’ll see a list of all your GitHub repositories.

Click Setup Project on our ci-ember-demo.

Then select Linux as our operating system and Node for language.

Click Start Building. The project will attempt to build and do what continuous integration processes do.

Since we have no configuration settings the process will almost immediately fail.

Head over to the Builds tab that lists any Jobs that ran, you should see that failure like so:

This is what we expected. Nothing really works because the CI process isn’t configured.

Configure CI in the Ember Project

Get the markdown to display our project’s CI status

CircleCI provides embeddable status badges. They display the status of your latest build. Before we go let’s get the markdown for a status badge.

Go to Settings → Projects → ember-ci-demo’s settings → Status Badges.

Copy the embed code in Markdown.

In the ci-ember-demo's README.md file, paste the embed code under the title. It will look something like this:

## ci-ember-demo [![CircleCI](//circleci.com/gh/username/ci-ember-demo.svg?style=svg)](//circleci.com/gh/username/ci-ember-demo) ...

Add the CI configuration

In the root of ember-ci-demo create a folder named .circleci and create a file called config.yml. This is where all of our configuration settings will go. Add the following:

version: 2 jobs: build: docker: - image: circleci/node:7.10-browsers environment: CHROME_BIN: "/usr/bin/google-chrome" steps: - checkout - run: npm install - run: npm test

Let’s stop and take a look at what’s happening here.

# set the version of CircleCI to use. # we'll use the latest version. version: 2

Next, we’ll set up jobs to run when the CI is triggered.

jobs: # tell CI to create a virtual node environment with Docker # specify the virtual image to use # the -browsers suffix tells it to have browsers pre-installed build: docker: - image: circleci/node:7.10-browsers # use Google Chrome to run our tests environment: CHROME_BIN: "/usr/bin/google-chrome"

Finally, let’s tell it what to do once the environment is setup:

steps: - checkout # install the required npm packages - run: npm install # run the test suite - run: npm test

Push the changes to the master branch.

Review your changes and push them up to the master branch of the repository.

Now, head back to CircleCI and check out the Jobs tab. You’ll now see a passing build. It was able to take the settings from config.yml, set up the correct virtual environments, and run our tests just as we did locally when we first generated the project.

If you look at the repository on GitHub, you’ll see the CircleCI status badge in green. This indicates again that the latest build is passing.

Conclusion

That’s it! Now whenever you create a new pull request or push any changes to master, the CI will run all the tests. The status of that job will be displayed in CircleCI and the badge on your repository. Pass or fail, you get the right information you need to develop well.

Congratulations on taking your first steps into Continuous Integration!

Sources

What is Continuous Integration? — Sam Guckenheimer