[TIL] 프론트 환경 구축과 배포

[TIL] 프론트 환경 구축과 배포

날짜

• 2022.06.21.

목표

• DeSo 프로젝트 Front 환경 구축

내용

Next.js - getStaticProps vs getServerSideProps

• 공통점 - pre-render가 필요한 경우 사용
• getStaticProps - 빌드 시 한번 호출
  • 정적(고정된) 데이터
  • 성능 우수
• getServerSideProps - 페이지 요청마다 호출
  • 동적 데이터
  • 동적 수정 가능

npm ci

• npm ci(Continous Integration, 지속적인 통합)
• 장점 - 빠른 설치 속도
• package.json 파일보다 package-lock.json 파일을 우선
• 기존의 node_modules 폴더를 삭제하고 package-lock.json 파일을 기준으로 package를 다시 설치
• 실행방법

$ npm ci

$ npm ci --only=production # production 레벨까지만 설치

Geth - 데이터 디렉토리 위치

Mac: ~/Library/Ethereum
Linux: ~/.ethereum
Windows: %APPDATA%/Ethereum

Emotion - TypeScript에서 css 속성 없음 오류 해결 방법

• 현상 - element에 css 속성이 없다는 오류 발생

• 해결 - tsconfig.json 파일에 다음 코드 추가

// tsconfig.json 
{ 
    "compilerOptions": { 
        ... "types": ["@emotion/react", "@emotion/react/types/css-prop"], 
    }, 
    ... 
}

Docker - RUN, CMD, ENTRYPOINT 차이점

• 공통점 - Dockerfile에서 실행 명령어
• RUN - 도커파일로부터 이미지를 빌드하는 순간 실행되는 명령어
• CMD - 이미지로부터 컨테이너를 생성하고 최초로 실행할 때 수행
  • 변경 가능함
• ENTRYPOINT - 이미지로부터 컨테이너를 생성하고 최초로 실행할 때 수행
  • 컨테이너가 최초에 꼭 실행해야하는 명령어가 있을 때 사용

Jenkins - docker 자동 배포 pipeline

pipeline {
  agent any
  stages{
    stage('Lagacy Remove') {
      steps{
        script{
          try {
            sh 'docker rm -f sdao-front-end'
          } catch (err) {
            echo 'sdao-front-end is not defined'
          }
        }
        script{
          try {
            sh 'docker rmi -f sdao-front:latest'
          } catch (err) {
            echo 'sdao-front:latest is not defined'
          }
        }
      }
    }

    stage('Build') {
      steps {
        sh 'docker build -t sdao-front ./'
      }
    }
    stage('Run') {
      steps {
        sh 'docker run -d --name sdao-front-end -p 3000:3000 sdao-front:latest'
      }
    }
  }
}

결론

• Next.js에서 getStaticProps 와 getServerSideProps 차이점에 대해 학습했다.
• Geth 설치로 인해 100GB의 용량을 차지하고 있던 데이터를 삭제했다! 편안☺️
• TypeScript에서 Emotion css가 오류로 출력되는 부분을 해결했다.
• 자동배포 pipeline 개발에 성공했다.