Gitpod는 훌륭한 온라인 IDE이며 다음은 create-react-app 기반 프로젝트에서 사용하는 방법입니다.

https://itnext.io/how-to-use-gitpod-in-your-create-react-app-based-project-dd4d0b33ce77 

왜 Gitpod인가? 

때때로 우리는 개발 환경을 준비하고 가능한 빨리 코딩을 시작하기 위해 시간을 보내고 싶지 않습니다. 

Gitpod는 Github에 통합되어 있으며 한 달에 100 시간 동안 무료로 사용할 수 있는 온라인 IDE이며 .gitpod.yml로 작업 공간을 사용자 지정할 수 있는 유연성을 제공합니다.

강력한 환경 즉석 (16 코어 + 59GB RAM)

이 이야기에서는 create-react-app (또는 반응 프로젝트) 기반 프로젝트가 있을 때 Gitpod를 활용하는 방법에 대해 설명합니다.

기본 구성 

기본 구성에서 다음 항목을 달성하려고 합니다.

1. 작업 공간을 만들 때 npm 설치
2. 작업 공간을 시작할 때마다 npm start
3. 코드를 업데이트 할 때마다 미리보기 참조

모든 기능을 사용하려면 다음 내용으로 .gitpod.yml을 추가하면 됩니다.

tasks:
  - init: npm install
    command: npm start

ports:
  - port: 3000
    onOpen: open-preview

자체 설명이 풍부하여 대부분의 프로젝트를 쉽게 사용할 수 있습니다.

공식 문서의 추가 옵션

고급 구성 

고급 시나리오는 create-react-app에서 엔드 투 엔드 테스트에 puppeteer를 사용하는 것입니다. 

기본적으로 puppeteer가 사용하는 일부 종속성은 Gitpod 기본 작업 공간 이미지 (gitpod / workspace-full)에 설치되지 않습니다. 따라서 Docker 이미지를 확장하여 작동시켜야 합니다.

저장소에 .gitpod.Dockerfile을 추가하십시오.

FROM gitpod/workspace-full
RUN sudo apt-get update && sudo apt-get install -y libgtk-3-0 libx11-xcb1 libnss3 libxss1 libasound2

그리고 .gitpod.Dockerfile을 사용하도록 .gitpod.yml을 업데이트하십시오.

image:
  file: .gitpod.Dockerfile

tasks:
  - init: npm install
    command: npm start

ports:
  - port: 3000
    onOpen: open-preview

또한 jest-puppeteer에서 --no-sandbox를 사용해야 하며 전체 설정은 여기에서 찾을 수 있습니다.

리포지토리 : https://github.com/jeromewu/create-react-app-gitpod

Gitpod : https://gitpod.io/#https://github.com/jeromewu/create-react-app-gitpod

전체 구성을 사용하면 다음과 같은 작업 환경을 가질 수 있습니다.

하나 더 

나와 같은 VIM 사용자라면 최소한의 노력으로 Gitpod에서 VIM 구성을 사용하는 간단한 방법이 있습니다 (최선이 아닐 수도 있습니다).

image:
  file: .gitpod.Dockerfile

tasks:
  - init: wget https://github.com/jeromewu/docker-workspace/raw/master/vim.zip -O /tmp/vim.zip &> /dev/null && unzip /tmp/vim.zip -d /home/gitpod &> /dev/null
  - init: yarn install
    command: yarn start

ports:
  - port: 3000
    onOpen: open-preview

여기서 개념은 기존 VIM 구성을 압축하고 컨테이너에 압축을 풀고 다운로드하는 것입니다. 설치하는 데 많은 시간이 절약되지만 VIM 구성을 자주 업데이트 해야 하는 경우에는 좋은 옵션이 아닐 수 있습니다.

한마디로, Github 프로젝트에 Gitpod를 사용하면 언제 어디서나 쉽게 프로젝트를 개발할 수 있는 강력한 환경이 제공됩니다. 이 이야기가 유용하고 행복한 코딩이 되길 바랍니다. ?