어제, Github Codespaces의 사용법 기사를 썼습니다만, 오늘 같이 오픈한 github.dev(아무래도 VS Code Web라고 부르는 것 같다)에 대해서 혼동하기 쉽기 때문에, 기사에 정리해 보았습니다.

결론 : 실행 환경 포함 또는 편집기 만의 차이

먼저 결론을 쓰면 Github Codespaces는 VS Code Server를 탑재한 가상 머신이 오는 완전한 개발 환경입니다.

github.dev는 Codespace에서 에디터 부분만을 잘라낸 브라우저에서만 움직이는 VSCode 에디터입니다. 따라서 몇 가지 제한이 있습니다.

그래 그래, github.dev는 무료, Codespaces는 인스턴스의 스펙에 따라 시간 과금되는 점도 다릅니다.

제한: dev에서는 터미널을 사용할 수 없음

github.dev에서는 머신 인스턴스가 오지 않기 때문에 당연히 터미널을 사용할 수 없습니다. 물론 컴파일 등 머신 파워가 필요한 처리도 할 수 없습니다. 개발 서버도 시작되지 않습니다.

확장도 일부만 대응

즉, github.dev는 hotfix나 약간의 수정을 이전에 있던 브라우저상의 파일 단위의 텍스트 에디터보다 보다 고도로 실시할 수 있다고 하는 위치가 됩니다. 확장도 온메모리&JS로 처리 가능한 것(신택스 하이라이트나 JS로)에 한정되는 것 같습니다.



여기에는 not available in VS Code Web. 라고 있으므로, github.dev의 정식 명칭은 「VS Code Web」과 같습니다.

Push하지 않은 파일은 브라우저에 저장?

여기는 대충 거동을 본 것만으로 자신이 없습니다만, 브라우저 A로 github.dev를 엽니다. 는 존재하지 않았습니다. 머신 인스턴스가 들어오지 않기 때문에, 당연히 스토리지도 준비되어 있지 않은 것이군요.

그러나 브라우저 A를 다시로드해도 해당 파일은 남아있었습니다. 아마 ServiceWorker에 의해 오프라인 캐쉬하고 있는 것 같네요.

그 이상은 로컬 또는 Codespaces로 이동!

더 많은 것이 필요하다면 로컬 VS Code에 Clone하거나 Codespaces에 따라 계속 작업하십시오.

어쨌든 리포지토리 전체를 브라우저상에서 편집해 Push 할 수 있으므로, Github Actions와 조합하는 것으로, 완전 무료이며 브라우저만으로 Hugo나 Jekyll 같은 정적 사이트 제너레이터로 사이트를 구축할 정도로 지금은 할 수 있다고 한다 것입니다!

Codespaces의 사용법에 관해서는 이 기사를 참고해 보세요.

본 기사는 Qiita 엔지니어 축제 2021 참가 기사입니다.