S4) Unit 10. [Deploy]Github Action & Proxy

📣 Github Action

𝟭. Github Actions 란?

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

➰ 레포지토리에서 Pull Request 나 push 같은 이벤트를 트리거로 GitHub 작업 워크플로를 구성할 수 있다.

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

    ㄴ .yml (또는 .yaml ) 파일에 의해 구성되며, 테스트, 배포 등 기능에 따라 여러개의 워크플로도 만들 수 있고 생성된 워크플로는 .github/workflows 디렉토리 밑에 위치한다.

➰ 비공개 레포지토리의 경우 Github Actions가 작동할 때의 용량과 시간이 제한되어있으며 공개 레포지토리는 무료로 사용 가능하다.

 

𝟮. YAML(Yet Another Markup Language) 이란?

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

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

 

𝟯. JSON vs YAML

// YAML 파일

name: Bare Minimum Requirements
on: [push, pull_request]
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

// 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"
      ]
    }
  ]
}

	YAML	JSON
공통점	- key-value 형태로 작성된 파일 - 계층 구조를 가진다
차이점	- "" 없이도 문자열 작성이 가능하다. - {} 형태로 감싸줄 필요가 없다. - 주석을 작성할 수 있다. - JSON의 상위 호환 격으로 기존 json문서를 그대로 yaml로 사용하거나 원하는 부분만 수정할 수 있다. - yaml을 json으로 변환해 사용할 수도 있다.	- {} 형태로 감싸주어야 한다. - 주석을 작성할 수 없다.

 

𝟰. YAML 문법

1️⃣ 주석 & 문서의 시작과 끝

#이런 식으로 주석을 작성할 수 있습니다.

--- #문서 시작

#이 사이에 내용이 들어갑니다.

... #문서 끝

 

2️⃣ 기본 표현

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

key: value

 

3️⃣ 자료형

➰ int, string, boolean, 리스트, 매핑을 지원한다.

#int(숫자)
int_type: 1

#string(문자열)
string_type: "1"

#blooean(참/거짓)
boolean_true_type: true
boolean_false_type: false

#이외에 yes, no로 작성하기도 합니다.
yaml_easy: yes
yaml_difficult: no

#리스트(배열 형태)
person:
  name: Chungsub Kim
  job: Developer
  skills: 
    - docker
    - kubernetes
  # JSON 형식의 "skill" : [docker, kubernetes]와 같습니다.

 

4️⃣ 객체

➰ key 작성 후 두 칸을 들여써서 key-value 형태로 작성을 해주거나, key를 작성 후 중괄호({})로 한 번 묶고 key-value 형태로 작성

key: 
  key: value
  key: value

#또는 이렇게도 작성합니다. 가독성을 위해 사용합니다.
key: {
  key: value,
  key: value
}

 

5️⃣ Text

➰ 줄바꿈 표현(|)과 줄바꿈 무시 표현(>)

# |는 줄바꿈 표현입니다.
# JSON 형식의 "comment_line_break": "Hello codestates.\nIm kimcoding.\n"과 같습니다.
comment_line_break: |
  Hello codestates.
  Im kimcoding.

# >는 줄바꿈 무시 표현입니다.
# JSON 형식의 "comment_single_line": "Hello world my first coding."과 같습니다.
comment_single_line: >
  Hello world
  my first coding.

 

6️⃣ 문자열 따옴표

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

# error가 납니다.
windows_drive: c:

# 이렇게 써야 합니다.
windows_drive: "c:"
windows_drive: 'c:'

 

𝟱. YAML 사용법 및 실제 사용 사례

✔️ configure 파일 등 설정 파일에 사용하기 좋은 언어

➰ spring boot, github action 등 다양한 CI/CD 툴이나 프레임워크에서 사용된다.

➰ YAML을 실제로 사용하고 있는 프레임워크 : 쿠버네티스

---

📣 Proxy

𝟭. Proxy란?

✔️ React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 CORS 정책을 우회할 수 있는 기능

➰ React 앱에서 브라우저를 통해 API를 요청할 때, proxy를 통해 백엔드 서버로 요청을 우회하여 보낸다 => 백엔드 서버는 응답을 React 앱으로 보내고, React 앱은 받은 응답을 백엔드 서버 대신 브라우저에게 전달한다(출처가 같아지기 때문에 브라우저는 이 사실을 눈치 채지 못하고 허용하게 된다)

 

𝟭. Proxy 사용법

1️⃣ webpack dev server proxy 에서 제공하는 proxy 기능 사용

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

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

➰ CRA로 만든 리액트 프로젝트에서는 package.json의 proxy값을 설정하여 적용할 수 있다.

...
"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(() => {
			...
		})
}

➰ 기존의 fetch, axios로 데이터를 받아오던 부분에서 도메인 부분을 제거한다.

 

𝟭. React Proxy 사용법

1️⃣ http-proxy-middleware 라이브러리 설치

npm install http-proxy-middleware --save

 

2️⃣ 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, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
    })
  );
};

 

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

export async function getAllfetch() {

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

export async function getAllfetch() {

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