Docker 기반의 지속적인 통합 개발 환경 구축

알다:zhuanlan.zhihu.com/p/37961402
본고는 하나의 표준적인 Vue 프로젝트를 예로 삼아 전통적인 전단 프로젝트 개발 배치 방식을 완전히 버리고 Docker 용기 기술을 바탕으로 간소화된 전단이 지속적으로 통합된 개발 환경을 구축하고자 한다.
선행 지식:
  1. CI(지속적 통합): 완일봉 선생님의 CI 소개
  2. Docker:Docker 빠른 시작
대상:
  1. 코드는 로컬에서 구축할 필요가 없다
  2. Github에 코드를 밀어 넣기만 하면 자동으로 구축 -> 배포
  3. 손쉬운 버전 관리 및 예비(fallback)

이제 본론으로 들어갑니다.

1단계: Vue 프로젝트 초기화(vue 공식 비계 vue-cli 사용)
1. vue 프로젝트 초기화: vue init webpack vue-docker-demo
2. 프로젝트 루트 디렉토리에서 Dockerfile 만들기
Dockerfile의 내용은 다음과 같다. (예를 들어angular4를 구축하려면angular-cli를 설치하고 구축 매개 변수를ngbuild로 바꾸면 된다. 대동소이하다)

FROM node:6.10.3-slim
RUN apt-get update \    && apt-get install -y nginx
WORKDIR /app
COPY . /app/
EXPOSE 80
RUN  npm install \     && npm run build \     && cp -r dist/* /var/www/html \     && rm -rf /app
CMD ["nginx","-g","daemon off;"]

3. git를 초기화하고 코드를 Github 창고로 연결하여 전송합니다.
2단계: DaoCloud를 사용한 Devops 프로세스 구축
(다른 공유 클라우드 서비스도 사용할 수 있는데 차이가 크지 않다. 본고는 간단하고 조작이 쉬우며 개인 개발자에게 무료인 DaoCloud를 예로 들겠다)
1. DaoCloud 계정 등록
2. 사용자 센터 -> 코드 위탁 관리, Github 창고에 접근할 수 있는 권한 부여
2. Devops 프로젝트에서 새 프로젝트를 만들고 Github에서 새로 만든 프로젝트를 선택하십시오
3. 먼저 수동으로 거울 버전을 구축하여 다음에 이 거울 버전으로 응용 프로그램을 만들 수 있도록 한다
4. 자체 호스트 연결(자체 호스트가 없는 경우 클라우드 테스트 환경도 사용 가능)
tips:vultr 등 호스트를 구매할 수 있습니다. 지시 절차에 따라 호스트 접속을 완료할 수 있습니다. 대개 간단한 서너 단계 조작입니다. 호스트 연결을 완료한 후 호스트에서 수동으로 docker(서비스 docker start)를 시작해야 합니다.
너무 멋있다. 우리는 이미 우리의 호스트를 DaoCloud에 연결했다. 다음은 가장 재미있는 단계를 완성할 것이다.
5. 응용 프로그램 만들기
[미러 창고]에 들어가서 방금 수동으로 구축된 미러를 선택하고 최신 버전을 자유 호스트나 클라우드 테스트 환경에 배치합니다
지금 배포를 클릭하면 잠시 기다려 보십시오.
거울 추출이 완료될 때까지 기다렸다가 용기 목록에 있는 용기가 일어나면 주소를 통해 우리가 배치한 vue 응용 프로그램을 보십시오
대단합니다. 우리는 방금 배치된 vue 응용 프로그램에 접근할 수 있습니다. 또한 우리의 이미지를 자신의 호스트에 배치했습니다. 이때 호스트에 들어가서 용기의 운행 상황을 보면 실행 중인 용기가 있습니다. 바로 우리가 방금 배치한 것입니다. 모든 것이 완벽합니다.
지금까지 99%의 작업을 완료했다고 할 수 있습니다. 하지만 가장 중요한 마지막 1%는 바로 진정한 사용자 정의 지속적인 통합 프로세스입니다. 모든 것을 자동화하고 이제 방금 Devops 프로젝트의 [프로세스 정의]로 돌아가겠습니다.
6. 자동 구축, 작업 자동 발표 정의
Devops 프로젝트로 돌아가서 자동화 프로세스를 정의합니다
우선 자동 구축 작업을 정의합니다. 새로운 태그가 있을 때만 구축 작업을 수행하고, 구축할 때 루트 디렉터리에 있는 Dockerfile을 찾아서 거울을 구축하는 규칙을 설정합니다.
그 다음에 우리는 자동 발표 임무를 정의하여 구축 임무가 완성될 때 자동 발표 임무를 자동으로 촉발하여 자체 호스트의 응용에 발표한다
이로써 우리는 모든 프로세스 제어 작업을 완성했고 전체 프로세스가 통할 수 있는지 테스트해 봅시다.
3단계: 전체 프로세스 테스트
우리 로컬로 돌아가서 텍스트 내용을 수정하고 제출하며 원격으로 전송하고 우리의 첫 번째 버전인 tag 1.0.0을 입력하고 tag를 원격으로 전송합니다
이와 동시에 우리가 태그를 하는 동작이 우리가 정의한 CI 프로세스를 촉발시켰음을 알 수 있다
잠시만 기다리세요. 저희 앱이 업데이트되었습니다. 대응하는 버전은 저희가 방금 올린 1.0.0입니다.
우리는 또 응용된 버전을 전환하고 반환하는 등의 조작을 할 수 있다
이로써 우리는 Dockerfile 프로필 하나만 작성하고 스크립트를 작성하지 않은 상황에서 전방의 지속적인 통합 개발 환경을 성공적으로 구축했다. 이후에 우리는 우리의 업무 코드를 작성하는 데만 전념하면 된다. 태그 하나만 하면 자동으로 온라인으로 배치할 수 있다.
질문이 있으면 언제든지 연락 주세요. 감사합니다.