Unit10 - [Deploy] CI/CD

개발 프로세스란 소프트웨어 시스템이나 애플리케이션 개발 및 유지보수할 목적으로 수행되는 활동의 절차

 

개발 프로세스

즉 소프트웨어 개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cycle)을 기반

 

요구분석 및 시스템 명세 작성

설계

구현(프로그래밍 기법 : 구조화 프로그래밍,모듈러 프로그래밍)

테스트

배포 및 유지보수(유지보수 : 수정형 유지보수 , 적응형 유지보수,완전형 유지보수,예방형 유지보수)

 

전통적인 개발 프로세스

폭포수 개발 방식:한 방향으로만 프로세스가 진행되는 개발 과정

개선을 위해 다양한 테스트 도입(시스템 테스트,알파 테스트,베타 테스트)

 

모던 개발 프로세스

애자일(Agile) 방식:스프린트(sprint)' 라고 불리는 짧은 주기의 개발 사이클을 계속해서 반복

SaaS란?

클라우드 서비스의 한 방식으로, 브라우저에 접속하기만 해도 새 버전을 즉시 사용할 수 있는 서비스 방식

 

---

DevOps

개발에서 운영까지 하나의 통합된 프로세스로 묶어내고 사용하는 툴과 시스템을 표준화하여 의사소통의 효율성을 확보하고 일련의 작업들을 자동화

 

개발팀이 잦은 업데이트를 통해 제품에 변화를 만들어야 한다면,

운영팀은 이런 서비스의 구성의 변경을 최소화해 안정성을 확보

 

DevOps는 소프트웨어 개발(Development)과 IT 운영(Operations)의 합성어

일종의 개발 문화로 기능의 분리가 아닌 교차되어 어느 누구라도 해당 업무를 수행할수 있어야한다.

 

코드 통합, 테스트, 배포 과정을 자동화 시키는 것

---

CI/CD란

"CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미

CD"는 지속적인 서비스 제공(Continuous Delivery) 및/또는 지속적인 배포(Continuous Deployment)를 의미

 

지속적 통합(Continuous Integration, CI)

Code : 개발자가 코드를 원격 코드 저장소 (Ex. github repository)에 push하는 단계

Build : 원격 코드 저장소로부터 코드를 가져와 유닛 테스트 후 빌드하는 단계

Test : 코드 빌드의 결과물이 다른 컴포넌트와 잘 통합되는 지 확인하는 과정

 

.이 지속적인 통합 과정을 통해 개발자는 버그를 일찍 발견할 수 있고, 테스트가 완료된 코드에 대해 빠른 전달이 가능해지며 지속적인 배포가 가능

잦은 풀 리퀘스트(pull request)와 머지(merge)로 코드를 자주 통합한다.

 

지속적 통합이 적용된 개발팀은 코드를 머지하기 전, 이미 빌드 오류나 테스트 오류를 확인하여 훨씬 더 효율적인 개발

 

지속적 배포(Continuous Delivery/Deployment, CD)

지속적인 서비스 제공(Continuous Delivery) 및 지속적인 배포(Continuous Deployment)를 의미

• Release : 배포 가능한 소프트웨어 패키지를 작성
• Deploy : 프로비저닝을 실행하고 서비스를 사용자에게 노출, 실질적인 배포 부분
• Operate : 서비스 현황을 파악하고 생길 수 있는 문제를 감지

CI/CD는 지속적 통합, 지속적 제공, 지속적 배포라는 3가지 구축 사례 모두를 의미

파이프라인으로 표현되는 실제 프로세스를 의미하고, 애플리케이션 개발에 지속적인 자동화 및 지속적인 모니터링을 추가

---

배포 자동화

배포 자동화란 한번의 클릭 혹은 명령어 입력을 통해 전체 배포 과정을 자동으로 진행

 

시간이 절약

휴먼 에러 방지

 

CI/CD 파이프라인

코드가 빌드되면서 최종적으로 배포가 되는 단계

이 부분을 지속적인 통합 및 배포를 위하여 일련의 자동화 단계로 만드는데, 이것을 파이프라인을 구축한다고 표현

 

 

 

CI/CD 파이프라인을 구성하는 기본 단계와 수행 작업

Source 단계: 원격 저장소에 관리되고 있는 소스 코드에 변경 사항이 일어날 경우, 이를 감지하고 다음 단계로 전달하는 작업을 수행

Build 단계:uild 단계에서는 Source 단계에서 전달받은 코드를 컴파일, 빌드, 테스트하여 가공합니다. 또한 Build 단계를 거쳐 생성된 결과물을 다음 단계로 전달하는 작업을 수행

Deploy 단계:Deploy 단계에서는 Build 단계로부터 전달받은 결과물을 실제 서비스에 반영하는 작업을 수행

---

Github Actions이란?

Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼

GitHub Action은 Github 레포지토리에서 바로 소프트웨어 개발 워크플로우를 자동화, 사용자 지정 및 실행할 수 있게 한다.

 

레포지토리에서 Pull Request 나 push 같은 이벤트를 트리거로 GitHub 작업 워크플로(Workflow)를 구성

워크프로 ? 하나 이상의 작업이 실행되는 자동화 프로세스로, 각 작업은 자체 가상 머신 또는 컨테이너 내부에서 실행

.yml (혹은 .yaml ) 파일에 의해 구성되며, 테스트, 배포 등 기능에 따라 여러개의 워크플로를 만들수 있다.

생성된 워크플로는 github/workflows 디렉토리 이하에 위치

 

./.github/workflows/pullRequest.yml파일

name: Bare Minimum Requirements

# 언제 job을 작동시킬지
on: [push, pull_request]

# 어떤 job을 할지
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Bare Minimum Requirements
        uses: actions/setup-node@v1
        with:
          node-version: '16'
      - run: npm install
      - run: npm test

 

YAML(Yet Another Markup Language)

사람이 읽을 수 있는 데이터 직렬화 언어

파일로 작성시 확장자는 .yaml 혹은 .yml 확장자 가진다.

 

JSON vs YAML

JSON

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    }
  ]
}

JSON 파일과 YAML 파일은 key-value 형태로 작성된 파일

 

YAML파일은 ""없이 문자열 작성이 가능해서 한눈에 들어옴 

{}형태로 감싸줄 필요가 없다.

주석을 작성=>커뮤니케이션 수월

 

YAML은 JSON의 상위 호환 격이므로, 기존 json문서를 그대로 yaml파일로 사용하거나 원하는 부분만 손볼 수 있다.

반대로 yaml을 json으로 변환해 사용할 수도 있다.

 

YAML 문법

#  : 주석

---  : 문서의 시작 (선택사항)

...  : 문서의 끝 (선택사항)

 

기본표현

key: value 이며, : 다음에는 무조건 공백 문자가 와야한다.

 

자료형

int, string, boolean, 리스트, 매핑을 지원

int_type: 1


string_type: "1"


boolean_true_type: true
boolean_false_type: false


yaml_easy: yes
yaml_difficult: no


person:
  name: Chungsub Kim
  job: Developer
  skills: 
    - docker
    - kubernetes
    JSON 형식의 "skill" : [docker, kubernetes]와 같다.

객체

key: 
  key: value
  key: value

또는
key: {
  key: value,
  key: value
}

 

Text

comment_line_break: |
  Hello codestates.
  Im kimcoding.
  JSON 형식의 "comment_line_break": "Hello codestates.\nIm kimcoding.\n"와 같다.

comment_single_line: >
  Hello world
  my first coding.
  JSON 형식의 "comment_single_line": "Hello world my first coding."과 같다.

 

문자열 따옴표문자열 따옴표

key-value 쌍에서 value에 :가 들어간 경우는 반드시 따옴표가 필요하다.

---

CORS 정책이 필요한 이유

ORS(Cross-Origin Resource Sharing) 정책은 보안상의 이유로 웹 브라우저가 다른 출처(origin)에서 가져온 리소스에 접근하는 것을 제한한다.

웹 애플리케이션에서 서버에서 데이터를 가져와서 보여줄 때, 데이터가 같은 도메인에서 가져오는 것이 아니라 다른 도메인에서 가져오는 경우가 있다.

이때 다른 도메인에서 가져온 데이터를 보여주기 위해 웹 애플리케이션에서 해당 도메인으로 요청을 보내면,

서버에서는 이 요청이 허용되는지를 검사한다.

만약 서버에서 해당 도메인으로의 요청을 허용하지 않았다면, 웹 브라우저는 해당 데이터에 접근할 수 없다.

이러한 제한은 사용자의 개인정보와 같은 중요한 정보를 보호하는 데 도움을 준다. 또한, 웹 애플리케이션에서 사용되는 자원을 안전하게 유지할 수 있도록 하며, 웹 사이트가 다른 웹 사이트에서 가져온 악성 코드로부터 보호할 수 있다.

 

다른 도메인에서 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요하다

 

CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

 

프론트엔드 개발자가 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용해달라고 요청을 해야하고, 백엔드 개발자는 응답 헤더에 필요한 값들을 담아서 전달

 

Proxy

proxy 전용전

proxy 전용후

Proxy 사용법

webpack dev server proxy

ebpack dev server에서 제공하는 proxy 기능을 사용

브라우저 API를 요청할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발서버의 주소로 우회 요청

웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달하고, 백엔드 서버에서 응답한 내용을 다시 브라우저쪽으로 반환

 

package.json

...
"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
	"proxy" : "우회할 API 주소"
}

도메인 부분 제거

export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}

export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}

React Proxy 사용법

proxy는 전역적인 설정으로 수동으로 proxy를 적용해줘야한다.

http-proxy-middleware 라이브러리 설치

npm install http-proxy-middleware --save

React App의 src 파일 안에서 setupProxy.js 파일을 생성

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', //proxy가 필요한 path prameter를 입력
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 api url를 입력
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분
    })
  );
};

기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거

export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}

export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}

 프록시 서버(중개서버) - 간접적인 서버

1. 캐싱 역할

프록시 서버가 API서버에서 응답받은 걸 캐시 해둔다.

2. 보안의 역할 

프록시 서버가 클라이언트 IP주소를 감춰준다.

서버의 주소도 감춰주기 때문에 익명의 사용자도 서버에 직접적으로 접근하기 어려워짐

=>보안성이 높아진다

 

우회(IP주소를 감춰줌)

인터넷 사용량을 제어하는 기능

React Proxy

React 개발 서버에 Proxy 설정

CROS 문제( 브라우저 주소!==API주소)해결

다른 도메인과 통신도 쉽게 해결