GitPod 를 적용해보자

DONG EUN LEE·2025년 7월 12일

devops github gitpod node.js

DevOps

목록 보기

1/1

친구와 함께 같이 개발을 진행 하다가 작업환경 설정에 익숙하지 않고 직접 나도 다시 세팅하려니 너무 번거로워서 협업하여 개발 중인 Repository 에 Gitpod 를 적용해보기로 했다

+탭도 하나 구매했는데 탭으로도 개발 작업 할 수 있으면 편하겠다 싶었다..

Gitpod 알아보기!

Gitpod은 GitHub, GitLab, Bitbucket 등 Git 기반의 모든 저장소(Repository)를 클릭 한 번으로 완벽하게 구성된 개발 환경으로 만들어주는 서비스이다. 웹 브라우저만 있다면 언제 어디서든 코드를 작성하고 실행하며 협업할 수 있도록 돕는다.

1. 왜 Gitpod이 필요한가? (등장 배경 및 해결하는 문제)

전통적인 개발 환경은 다음과 같은 문제점들을 가지고 있었다:

환경 설정의 번거로움: 새로운 프로젝트를 시작할 때마다 필요한 도구, 라이브러리, 의존성 등을 일일이 설치하고 설정해야 했다. 이는 많은 시간과 노력을 소모하며, 때로는 예상치 못한 오류를 유발한다.
"내 컴퓨터에서는 잘 되는데?" (환경 불일치): 팀원마다 다른 운영체제나 개발 도구 버전을 사용하면서 발생하는 환경 불일치 문제는 디버깅을 어렵게 하고 생산성을 저해한다.
자원 제약: 고사양의 개발 환경이 필요할 경우 개인 컴퓨터의 성능 제약에 부딪히곤 한다.
이동성의 한계: 특정 컴퓨터에 개발 환경이 종속되어 있어 다른 장소나 기기에서는 작업하기 어려웠다.

Gitpod은 이러한 문제들을 '클라우드 기반의 일관된 개발 환경'을 제공함으로써 해결한다.

2. Gitpod의 핵심 기능 및 특징

클릭 한 번으로 즉시 시작하는 개발 환경 (Instant Dev Environments):
- 어떤 Git 저장소든 URL 앞에 gitpod.io/#를 붙이거나 Gitpod 대시보드를 통해 클릭 한 번이면, 해당 프로젝트에 필요한 모든 도구와 의존성이 미리 설정된 개발 환경이 몇 초 내에 준비된다.
사전 빌드 (Prebuilds):
- .gitpod.yml 파일에 워크스페이스 설정(의존성 설치, 빌드 명령 등)을 정의하면, Gitpod은 코드가 변경될 때마다(예: Git Push) 워크스페이스를 미리 빌드해 놓는다. 덕분에 개발자가 환경을 열자마자 코딩을 시작할 수 있다.
일시적인(Disposable) 워크스페이스:
- 각 워크스페이스는 독립적이며, 작업이 끝나면 쉽게 버릴 수 있다. "깨끗한 상태"에서 다시 시작하거나, 여러 기능을 동시에 개발할 때 각기 다른 환경을 활용하기 용이하다.
브라우저 기반의 VS Code IDE:
- Gitpod은 강력한 VS Code를 웹 브라우저에서 사용할 수 있도록 제공한다. 익숙한 단축키, 확장 프로그램, 터미널 등을 웹에서 그대로 경험할 수 있다.
협업 기능:
- 팀원들과 동일한 개발 환경을 공유하고, 실시간으로 함께 코드를 편집하며 페어 프로그래밍을 할 수 있다.

3. Gitpod을 사용하면 좋은 점

설정 시간 제로: 더 이상 개발 환경 설정에 시간을 낭비하지 않고, 바로 코드 작성에 집중할 수 있다.
"Works on my machine" 문제 해결: 모든 팀원이 동일하고 일관된 클라우드 개발 환경에서 작업하므로 환경 불일치로 인한 문제가 사라진다.
어디서든 개발 가능: 웹 브라우저만 있다면 어떤 컴퓨터(저사양 노트북, 태블릿 등)에서도 모든 기능을 갖춘 개발 환경을 이용할 수 있다.
강력한 클라우드 자원 활용: 필요에 따라 고성능의 CPU와 RAM이 할당되므로, 복잡한 빌드나 테스트도 빠르게 처리할 수 있다.
온보딩 가속화: 새로운 팀원이 프로젝트에 합류할 때, 복잡한 환경 설정 가이드 없이 Gitpod 워크스페이스만 공유하면 바로 개발을 시작할 수 있다.

Gitpod 적용해보기 !

1. Gitpod 접속후 Dashboard 를 누른뒤 접속

작업중인 Repository 를 연결하고, 나는 Vscode 로 설정했다

사양을 선택하고 Continue 를 통ㅇ해 생성 하면..

쉽게는 안된다..😩

2. 권한 부여

권한문제인것 같은데 메일을 확인해보니 third-part 를 허용해줘야된다고한다 링크를 들어가서
Request 버튼 딸깍 하니 문제가 해결되었다

3. 접속

Workspace를 보면 연결된 목록이나오고

접속해보면 브라우저에서 vscode 화면이 나온다 👍

4. 테스트

// helloworld.js
import express from 'express';
import dotenv from 'dotenv'; // .env 파일에서 환경 변수를 로드하기 위해 사용

dotenv.config();

const app = express();
const port = process.env.PORT || 3000;

// JSON 요청 본문을 파싱하기 위한 미들웨어
app.use(express.json());
// URL-encoded 요청 본문을 파싱하기 위한 미들웨어
app.use(express.urlencoded({ extended: true }));

// 기본 경로 (루트)에 대한 GET 요청 처리
app.get('/', (req, res) => {
  res.send('Hello World! This is the root of the sanner_worker.');
});

// /helloworld 경로에 대한 GET 요청 처리
app.get('/helloworld', (req, res) => {
  res.send('Hello World from /helloworld API!');
});

// 서버 시작
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
  console.log(`Access it at: http://localhost:${port}`);
  console.log(`Or via Gitpod URL once exposed.`);
});

대충 hello world 코드를 작성해서

pm2 start helloworld.js

실행을 해보면

잘실행이 된다👏👏👏

`.gitpod.yml`

Gitpod 워크스페이스에서 웹 서버나 API 서버 등을 실행할 때, 이 서버에 외부에서 접속하려면 포트를 적절히 설정해야 한다. .gitpod.yml 파일의 ports 섹션은 워크스페이스 내에서 열리는 포트들을 Gitpod이 어떻게 다룰지 정의한다.

1. `ports` 설정 예시

ports:
  - port: 3000          # 필수: 서버가 사용하는 포트 번호를 명시한다. (예: Node.js 앱)
    onOpen: open-browser # 선택: 워크스페이스 시작 시 이 포트에 대해 Gitpod이 취할 동작을 지정한다.
    visibility: public  # 선택: 이 포트로 열리는 URL의 접근 권한을 설정한다. (기본값은 'private')

  - port: 8080          # 다른 서버(예: 개발용 프론트엔드 서버)가 사용하는 포트
    onOpen: open-preview # IDE 내에서 미리보기 패널로 연다.
    visibility: private # Gitpod에 로그인한 사용자만 접근을 허용한다.

2. `ports` 옵션 상세 설명

ports 섹션 아래 각 포트는 여러 옵션을 가질 수 있다.

port (필수)
- 설명: 워크스페이스 내에서 실행되는 애플리케이션이 실제로 사용하는 포트 번호를 지정한다. Gitpod은 이 번호를 통해 내부 포트를 외부 URL과 연결한다.
- 예시: 3000, 8080, 5173 등.
onOpen (선택)
- 설명: 워크스페이스가 열릴 때 Gitpod이 해당 포트에 대해 어떤 동작을 할지 지정하는 옵션이다.
- 사용 가능한 값:
  - open-browser: 새 웹 브라우저 탭을 열어 해당 포트의 URL로 접속시킨다. (기본값)
  - open-preview: Gitpod IDE 내부에 분할 화면으로 미리보기 패널을 열어준다. 간단한 웹 앱 미리보기에 유용하다.
  - notify: 포트가 열렸다는 알림만 표시한다. 사용자가 직접 클릭하여 접속할 수 있다.
  - ignore: 아무런 동작도 하지 않는다. 포트는 열리지만, Gitpod이 자동으로 사용자에게 보여주거나 알리지 않는다.
visibility (선택)
- 설명: 이 포트로 생성되는 외부 URL의 접근 권한을 설정한다.
- 사용 가능한 값:
  - public: 인터넷상의 누구나 이 포트의 URL에 접근할 수 있다. (예: https://3000-워크스페이스ID.gitpod.io) 디버깅이나 외부 테스트를 위해 일시적으로 사용된다.
  - private: Gitpod에 로그인한 사용자만 이 포트의 URL에 접근할 수 있다. 보안상 더 권장되는 설정이며, 팀원 간 공유에 적합하다. (기본값)
  - private-internal: 워크스페이스 내부에서만 접근 가능하다. 외부로 노출되지 않는다. 주로 내부 서비스 간 통신이나 백그라운드 프로세스에 사용된다.

이 설정들을 통해 Gitpod 워크스페이스의 네트워크 환경을 유연하게 제어할 수 있다. 특히 visibility 옵션은 보안과 직접적으로 연관되므로 신중하게 선택하는 것이 중요하다.

마치며

Gitpod 연결해야지 해야지 했었는데... 막상 해보니 금방하기도 했고 재미있고 유익했던것 같다 시간이되면 Github Action 같은것도 같이 연동해서 환경을 자동적으로 세팅할 수 있게 해봐야겠다

DONG EUN LEE