[Gitpod] 웹에서 코딩하기
2022-07-12
Gitpod은 오픈소스 원격 개발 플랫폼이다. 이미 굉장히 많은 사용자들이 있고, 이 블로그 또한 처음부터 Gitpod 사용했다. 개인적으로 생각하는 Gitpod의 가장 큰 장점은 사용자가 본인 컴퓨터에 로컬 개발환경 세팅에 시간을 너무 많이 투자해야 할 필요가 없고, 모든 걸 Gitpod이 제공하는 원격 환경안에서, 그리고 VS code 에디터를 사용하여 코딩을 할 수 있다는 것이다.
원격개발환경이 로컬개발환경보다 낫다기 보다는, 이제는 실제로 굉장히 많은 것을 웹에서 할 수 있는 세상이라는 것에 포인트를 두고 싶다. 수 많은 원격개발 플랫폼이 있지만, Gitpod은 거의 깃허브 빌트인 원격플랫폼처럼 사용(할 수 있도록 Gitpod 연결버튼이 이미 UI에 포함되어있다..) 할 수 있기 때문에 훨씬 접근하기 용이하다.
How to use
깃허브에서 새 레파지토리를 만들어 보자.
난 test라고 네이밍 했다. 퍼블릭이든 프라이빗이든 상관없고, create repository를 클릭하자.
이제 레파지토리를 Gitpod을 통해 오픈하면 되는 데, 두 가지 방법이 있다.
-
가장 왼쪽의 Gitpod 버튼을 클릭한다.
-
URL을 이용하면 된다. 본인의 레파지토리 URL을 복사한 후, https://www.gitpod.io# 다음에 붙여넣는다.
https://www.gitpod.io#your_repo_url_goes_here
방금 만든 레파지토리로 예를 들자면,
https://www.gitpod.io#https://github.com/kyuing/test
미리 알아두어야 좋은 점들은:
- Gitpod에 가입이 되어 있어야 한다. 보통 본인의 깃허브 계정을 사용해서 가입한다. (무료플랜은 50시간 제공됨)
- 깃 레파지토리를 Gitpod을 통해 오픈하는 순간, Gitpod안에서 하나의 프로젝트가 생성되는 것이기 때문에, 최초 연결 후에 특별한 이유가 없다면 Gitpod 대쉬보드에서 프로젝트를 오픈하는 걸 추천한다. 이렇게 하지 않으면, 동일한 깃 레파지토리에 대한 새 Gitpod 프로젝트를 계속 생성하게 된다.
- (새 레파지토리인 경우) 깃 커맨드를 복사해 두자.
깃 레파지토리를 Gitpod을 통해 오픈하면 다음과 같은 화면이 나온다.
VS code가 build-in 에디터라 (사용자가 다른 에디터를 선택 할 수는 있음) 사용하기 편하다. 또한 원격으로 사용하는 VM이 리눅스 기반이라는 걸 알 수 있다.
거의 모든 준비가 90%이상 완료되었다. 이제 사용자가 원하는 걸 하면 된다. 특별히 필요한 테크스택이 있으면 업로드해도 되고, 리눅스 커맨드를 사용해서 다운로드 받아도 된다.
init, commit, and push to your git repo
마지막으로 중요한 부분은 아까 복사해둔 깃 커맨드를 터미널에 붙여넣어서 깃 레파지토리와 Gitpod 프로젝트를 동기화 시켜준다.
(initial 커밋이 아니라면 add . > commit > push)
깃 레파지토리 페이지를 새로고침하면 동기화된 업데이트를 볼 수 있다.
여기까지 완료되었다면, 원격개발환경 세팅이 100% 완료되었다는 의미이고, 동시에 Gitpod 대쉬보드에 해당 프로젝트가 생성되었다는 뜻이다. 앞서 언급했듯이, 특별한 경우 (e.g. Docker 사용을 위한 yml 생성 또는 DB관련 세팅 등을 위한 깃 레파지토리 초기화)가 아니라면 Gitpod 대쉬보드를 통해 프로젝트 오픈하는 걸 추천한다.
음.. 그래도 hello world 프린팅은 한번 띄우고 마무리 하는게 좋겠다. 다시 Gitpod 프로젝트를 오픈하고, index.html 파일을 만든 후, html을 타이핑하고 자동완성 중에서 html:5를 선택하면 기본 HTML 템플릿이 생성된다.
body 태그 안에 hello word를 타이핑하면 완성이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
이제 터미널에서 python -m http.server 8000를 타이핑해보자. Gitpod VM은 기본적으로 파이썬과 자바가 설치되어 있다.
현재 프로젝트안에서 포트 8000 서버가 실행되고, 오른쪽 하단의 open browser를 클릭하면 방금 작성한 hello world를 브라우저에 새창으로 띄울 수 있다.
마지막으로 변동사항을 깃 레파지토리와 동기화해 주면 된다.
gitpod /workspace/test (main) $ git add .
gitpod /workspace/test (main) $ git commit -m "v1: hello world"
[main badf430] v1: hello world
1 file changed, 12 insertions(+)
create mode 100644 index.html
gitpod /workspace/test (main) $ git push
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 16 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 467 bytes | 467.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/kyuing/test.git
e2c295e..badf430 main -> main
