9장 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기
Next.js로 리액트 개발 환경 구축하기
pakage.json 파일 만들기
npm init 을 실행해 pakage.json을 만드는 CLI 실행.
핵심 라이브러리 및 devDependencies 설치.
tsconfig.json 작성하기
타입스크립트 작성을 위한 파일
next.config.js 작성하기
Nextjs 설정을 위한 파일
ESLint 와 Prettier 설정하기
스타일 설정하기
어플리케이션 코드 작성
9.2 깃허브 100% 활용하기
깃허브 액션으로 CI 환경 구축하기
CI란?
코드 중앙 저장소에서 여러 기여자가 기여한 코드를 지속적으로 빌드하고 테스트해 코드의 정합성을 확인하는 과정.
이 과정의 핵심은 코드의 변경이 있을 때 마다 정합성을 확인하는 과정을 자동으로 실행해야 한다는 것. → 테스트, 빌드, 정적분석, 보안 취약점 분석 등
이러한 환경을 구축하는 도구로 Jenkins, GithubAction 등이 있다.
깃허브 액션의 기본 개념.
러너 ( runner )
파일로 작성된 깃허브 액션이 실행되는 서버로 특별히 지정하지 않으면 공용 깃허브 액션 서버를 사용.
액션 ( action )
러너에서 실행되는 하나의 작업 단위를 의미. yaml 파일로 작성된 내용을 하나의 액션으로 볼 수 있다.
이벤트 ( event )
깃헙 액션의 실행을 일으키는 이벤트.
pull_request, issues, push, schedule 등이 있다.
잡 ( job )
하나의 러너에서 실행되는 여러 스텝의 모음. 각 잡은 병렬로 실행.
스텝 ( steps )
잡 내부에서 일어나는 각각의 작업. 셀 명령어나 다른 액션 실행 가능. 병렬 아님.
깃헙 액션 작성하기.
저장소의 루트에 .github/workflows 폴더를 생성하고 내부에 파일 작성
파일 확장자를 .yml 또는 .yaml 로 지정.
브랜치에서 푸시하고 PR 만들어 확인하기
name: MD 생성 자동화
on:
push:
branches: ["*"]
jobs:
create-pr:
runs-on: ubuntu-20.04
steps:
- name: Check out the code
uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Create Dynamic Pull Request
env:
GH_TOKEN: ${{ github.token }}
run: |
git config user.name "unchaptered"
git config user.email "workstation19961002@gmail.com"
chmod +x auto.sh
./auto.sh name
액션의 이름
필수 값은 아니지만 액션의 구별에 도움이 됨.
run-name
액션이 실행될 때 구별할 수 있는 타이틀.
필수 값은 아님
on
필수 값이며 언제 해당 액션이 실행될 지 정의.
jobs
필수 값으로 액션에서 어떤 잡을 수행할 지 정의.
병렬로 실행됨.
직접 작성하지 않고 유용한 액션과 깃허브 앱 가져다 쓰기
calibreapp/image-actions
이미지를 최적화하는 깃허브 액션
PR로 올라온 이미지를 sharp 패키지를 이용해 무손실로 압축해서 커밋해준다.
lirantal/is-website-vulnerable
특정 웹사이트를 방문해 해당 웹사이트의 라이브러리 취약접이 존재하는지 확인하는 깃허브 액션
Lighthouse CI ( 프로젝트 PR에 사용해보면 좋을 듯 )
구글에서 제공하는 액션으로 라이트하우스를 CI 기반으로 실행할 수 있도록 도와주는 도구.
깃허브 Dependabot으로 보안 취약점 해결하기
의존성에 문제가 있다면 이에 대해 문제를 알려주고 해결할 수 있는 PR을 열어준다.
유의적 버전이란?
16.0.0 ( 주.부.수 )를 의미한다.
16.0.1 → 기존 버전의 버그 패치. ( 수 )
16.1.0 → 호환이 되며 새로운 기능 추가. ( 부 )
17.0.0 → 16버전과 호환되지 않도록 제공하는 API 변경이 일어남. ( 주 )npm 버전 규칙
react@16.0.0 : 버전 앞에 아무런 기호가 없으므로 해당 버전에 대해서만 의존.
react@^16.0.0 : 16.0 ~ 17.0 미만의 모든 버전은 호환이 가능하다.
react@~16.0.0 : 16.0.0 ~ 16.1.0 과 같은 패치 버전에 대해서만 호환된다. 하지만 위의 규칙들은 개발자들 간의 약속일 뿐 반드시 지켜지는 것은 아니다.
의존성 관련 이슈를 방지하는 가장 좋은 방법은 의존성을 최소한으로 유지하는 것이다.
리액트 어플리케이션 배포하기
Netlify
장점
많은 자료들
무료로 어느 정도 활용이 가능
가격
월 100GB 제한
빌드 시간 300분 제한
동시에 여러 개의 사이트 빌드 불가능
Vercel
가격
월 100GB 제한
이미지 최적화 1000개 제한
서버리스 함수 실행시간 100GB , 함수의 실행 시간은 10초로 제한
동시에 여러 개의 사이트 빌드 불가능
배포 하루에 100개로 제한
DigitalOcean
Github Student Pack에 포함 되어있어 학생 계정으로 가입한 깃허브에 200달러 상당의 무료 크레딧이 제공된다.
리액트 애플리케이션 도커 라이즈하기
도커는 vercel, netlify 와 같은 특정 서비스에 종속적이지 않은 사이트를 배포하기 위해 도커에 이미지 상태로 애플리케이션을 준비해놓고 배포해놓는 방법이다.
도커는 개발자가 모던 애플리케이션을 구축, 공유, 실행하는 것을 도와줄 수 있도록 설계된 플랫폼이다. 도커는 지루한 설정 과정을 대신해 주므로 코드를 작성하는 일에만 집중할 수 있다.
여기서 지루한 설정 과정이란 운영체제 설치, Node.js 설치, 빌드 등을 말한다.
애플리케이션을 ‘컨테이너’ 단위로 패키징하고 이 내부에서 실행될 수 있도록 도와준다.
용어
이미지
컨테이너를 만드는 데 사용되는 템플릿
컨테이너
도커의 이미지를 실행한 상태를 컨테이너.
독립된 공간으로 이미지가 목표하는 운영체제, 파일 시스템, 각종 자원 및 네트워크 등이 할당되어 실행할 수 있는 독립된 공간이 생성된다.
Dockerfile
어떤 이미지를 만들지 정의하는 파일.
이 파일을 빌드하면 이미지를 만들 수 있으며, 도커 이미지화 라는 작업이 Dockerfile을 만드는 것.
태그
이미지를 식별할 수 있는 레이블 값.
ubuntu : latest → 이미지 이름 = ubuntu, 태그= latest
리포지터리
이미지를 모아두는 저장소.
다양한 태그로 지정된 이미지가 모여있는 저장소
레지스트리
리포지터리에 접근할 수 있게 해주는 서비스.
대표적인 서비스로 도커 허브 등이 있음.