Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

GitHub 공식 CLI gh

GitHub의 공식 CLI 1.0 버전이 릴리스되었다.

GitHub CLI는 깃헙을 CLI로 쉽게 사용할 수 있는 CLI 도구이고 이전에는 hub라는 CLI를 제공하고 있었는데 문서에 따르면 hub를 이용할까 고민하다가 장기적인 설계 관점과 git의 별칭으로 사용되는 부분을 제외하기 위해서 새로 만들었고 기존에 hub에 익숙한 사람들의 사용패턴을 바꾸고 싶지도 않았다고 한다. GitHub CLI는 gh 명령어를 사용하는데 gh를 만들었다고 hub를 없애거나 하진 않을 것이라고 한다.

나는 기존에 ghi를 비슷한 용도로 쓰고 있었는데(그래서 hub로 넘어가지 못했다.) 더는 관리되지 않고 gh가 잘 나온 것 같아서 이번 기회에 gh로 갈아탔다.

설치 및 설정

문서에 OS별 설치 방법이 나와 있고 macOS에서는 brew install gh로 간단히 설치할 수 있다.

$ gh --version
gh version 1.0.0 (2020-09-16)
https://github.com/cli/cli/releases/tag/v1.0.0

ghGo 언어로 작성되었다.

내 GitHub를 CLI에서 사용하는 도구이므로 GitHub의 권한이 필요한데 gh auth login으로 인증을 받을 수 있다.

터미널에서 gh 로그인

GitHub.com인지 엔터프라이즈인지를 선택하고 브라우저로 로그인하기를 선택하고(이미 API 키가 있으면 API를 입력하는 방법을 선택할 수도 있다.) 엔터키를 누르면 브라우저가 열린다.

열린 웹브라우저에서 로그인 코드 입력

앞에서 CLI에 보인 코드를 브라우저에서 입력하고 "Continue"를 누르면

GitHub CLI 권한 허용

사용되는 권한이 표시되는데 GitHub을 다 사용해야 하므로 대부분의 권한이 들어있다. "Authorize github"를 누르면 된다.

터미널에서 프로토콜을 선택하고 로그인을 완료

브라우저에서 권한 부여가 완료되면 자동으로 로그인 과정이 다음 과정으로 넘어간다. 사용할 git 프로토콜만 지정하면 되는데 나는 HTTPS 보다는 SSH를 선호하므로 SSH를 선택했다.

$ gh auth status
github.com
  ✓ Logged in to github.com as outsideris (~/.config/gh/hosts.yml)
  ✓ Git operations for github.com configured to use ssh protocol.

로그인 상태를 확인하려면 gh auth status를 이용하면 된다. gh auth -h로 인증 관련 명령어의 자세한 내용을 볼 수 있다.

$ gh auth -h
Manage gh's authentication state.

USAGE
  gh auth <command> [flags]

CORE COMMANDS
  login:      Authenticate with a GitHub host
  logout:     Log out of a GitHub host
  refresh:    Refresh stored authentication credentials
  status:     View authentication status

INHERITED FLAGS
  --help   Show help for command

LEARN MORE
  Use 'gh <command> <subcommand> --help' for more information about a command.
  Read the manual at https://cli.github.com/manual


저장소 관리

새로운 git 저장소를 만들려면 gh repo create [<name>]를 사용하면 된다.

$ gh repo create cli-example
? Visibility Public
? This will create 'cli-example' in your current directory. Continue?  Yes
✓ Created repository outsideris/cli-example on GitHub
? Create a local project directory for outsideris/cli-example? Yes
Initialized empty Git repository in /Users/outsider/temp/cli-example/.git/
✓ Initialized repository in './cli-example/'

공개/비공개 저장소를 선택하고 로컬에도 클론 받은 디렉터리를 만들 것인지를 선택하면 로컬뿐 아니라 GitHub에도 저장소가 만들어진다. 새로운 프로젝트를 만들 때 디렉터리를 생성하고 git init을 한 뒤에 원격 저장소에 푸시할 필요 없이 한 번에 생성할 수 있어서 편하다. --description string 플래그로 저장소 설명을 추가하거나 --enable-issues/--enable-wiki로 이슈/위키의 활성화 여부 등을 지정할 수도 있다.

GitHub의 프로젝트를 클론 받으려면 gh repo clone <repository>를 사용하면 된다. https://github.com/cli/cli의 저장소가 있다면 앞의 뒤의 경로 부분인 cli/cli만 지정해도 클론 받을 수 있다.

$ gh repo clone cli/cli
Cloning into 'cli'...
remote: Enumerating objects: 50, done.
remote: Counting objects: 100% (50/50), done.
remote: Compressing objects: 100% (33/33), done.
remote: Total 14070 (delta 25), reused 34 (delta 17), pack-reused 14020
Receiving objects: 100% (14070/14070), 32.57 MiB | 7.97 MiB/s, done.
Resolving deltas: 100% (9379/9379), done.

보통 GitHub 프로젝트를 작업하려면 github.com에서 해당 저장소를 포크한 뒤에 로컬에서 클론을 받고 원 저장소도 리모트 저장소로 추가해야 하는데 이런 작업도 gh repo fork로 간단히 할 수 있다.

$ cd cli

$ gh repo fork
- Forking cli/cli...
✓ Created fork outsideris/cli
? Would you like to add a remote for the fork? Yes
✓ Renamed origin remote to upstream
✓ Added remote origin

$ git remote -v
origin  git@github.com:outsideris/cli.git (fetch)
origin  git@github.com:outsideris/cli.git (push)
upstream  git@github.com:cli/cli.git (fetch)
upstream  git@github.com:cli/cli.git (push)

앞에서 cli/cli를 클론 받은 디렉터리에 들어가서 gh repo fork를 실행하면 github.com에 포크한 저장소도 만들어 주고 현재의 git 프로젝트에 리모트로도 추가해준다. 일반적인 관례대로 포크한 저장소는 origin으로 원 저장소는 upstream으로 변경해줘서 편하다.

gh repo view --web을 입력하면 바로 웹브라우저에서 해당 저장소를 열어서 볼 수 있다.

$ gh repo view --web
Opening github.com/cli/cli in your browser


이슈 관리

작업하다가 이슈를 다시 확인하고 싶거나 다른 이슈를 찾아보고 싶을 때도 gh issue list로 바로 확인해 볼 수 있다.

$ gh issue list

Showing 30 of 309 open issues in cli/cli

#2001  gh pr create when branch is ...  (enhancement)                    about 8 hours ago
#2000  Support different default OW...  (enhancement)                    about 4 hours ago

--assignee, --author, --label, --state로 이슈를 필터링해서 볼 수 있고 --web을 지정하면 바로 웹브라우저로 열어서 볼 수 있다.

gh issue view {<number> | <url>}로 특정 이슈를 자세히 볼 수도 있다.

$ gh issue view 2000
Support different default OWNER in `gh repo clone REPO`
Open • Moser-ss opened about 13 hours ago • 1 comment

Labels: enhancement


  ### Describe the feature or problem you’d like to solve

  The feature to have the authenticated user as default OWNER when clone the
  repo is very neat, but for some people that could not be enough. For example
  for people that work a lot inside of a specific organization could be nice
  to set a different default owner

  ### Proposed solution

  using the gh config we could set a default owner, like gh config owner acme

  Then every time we use the gh repo clone we don't need to specify the owner



View this issue on GitHub: https://github.com/cli/cli/issues/2000

gh issue create, gh issue close, gh issue reopen 등으로 이슈를 CLI에서 바로 관리할 수도 있는데 내 패턴에서는 이런 부분은 특별한 때 말고는 웹에서 하는 게 더 편한 것 같긴 하다.

gh issue status를 더 자주 쓸 것 같은데 이슈 상태 보기를 하면 나에게 할당된 이슈, 멘션 된 이슈, 내가 오픈한 이슈를 모아서 볼 수 있다.

$ gh issue status

Relevant issues in mochajs/mocha

Issues assigned to you
  There are no issues assigned to you

Issues mentioning you
  #4421  Separately run each async t...  (needs-mcve, unconfirmed-bug)   about 8 hours ago
  #4182  Xunit reporter Failure node...  (reporter)                      about 3 months ago

Issues opened by you
  #4415  Print wrong count concurren...  (confirmed-bug, parallel)       about 1 month ago
  #4047  Unhandled exception of`--fi...  (confirmed-bug, good-first-...  about 4 months ago


Pull Request 관리

Pull Request도 이슈처럼 관리할 수 있다.

$ gh pr list

Showing 23 of 23 open pull requests in cli/cli

#2005  Small readability and code organization ...  small-refactors
#2004  issue create: Add --self-assign flag         marclop:f/add-self-assign-flag-to-issue-...
#2003  Refactor gist create to reuse existing s...  cristiand391:refactor-gist-create
#1994  Don't override user provided title and b...  msfjarvis:pr-create-fill-priority

gh pr close, gh pr merge, gh pr ready, gh pr reopen 등으로 Pull Request의 상태를 관리할 수 있고 gh pr status로 나와 관련된 Pull Request의 상태도 볼 수 있다.

터미널에서 내가 관여된 PR  목록이 출력

Pull Request 생성하기

PR을 올리는 과정을 생각해 보면 브랜치를 따서 작업이 완료되면 원격 저장소에 푸시를 하고 github.com에 가서 알림으로 올라온 PR을 눌러서 제목과 내용을 작성해서 PR을 생성하게 된다. gh pr create도 편리한 기능으로 로컬에서 바로 Pull Request를 생성할 수 있다.

gh pr create로 Pull Request의 내용을 입력 후 생성

위처럼 브랜치에서 실행하면 푸시할 타겟 저정소와 제목/내용을 입력한 뒤에 바로 submit할지 더 작성할 내용이 있어서(예를 들면 이미지?) 브라우저에서 이어서 작업할 지등을 선택할 수 있다. Submit을 선택하면 바로 Pull Request까지 생성되는 것을 알 수 있다. 터미널에서 작업하다가 브라우저를 왔다갔다 할 필요없이 간단히 PR을 올릴 수 있다.

특정 Pull Request 체크아웃하기

gh에서 가장 맘에 드는 기능이다. 지금까지는 GitHub의 Pull Request를 로컬로 가져오기에서 설명했던 대로 git에 alias를 설정해서 git pr 1234처럼 사용하면서 특정 Pull Request를 로컬에서 받아오도록 사용했다.

정확히 이 기능을 해주는 명령어인데 보통 저장소의 메인테이너일 때 유용하다. 올라온 Pull Request를 리뷰할 때 로컬에서 소스 코드를 가져와서 테스트해보고 싶을 때가 있는데 이때 gh pr checkout {<number> | <url> | <branch>}로 특정 PR을 바로 가져올 수 있다.

~/projects/cli on trunk@1b029c76
$ gh pr checkout 2003
remote: Enumerating objects: 16, done.
remote: Counting objects: 100% (16/16), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 16 (delta 11), reused 16 (delta 11), pack-reused 0
Unpacking objects: 100% (16/16), done.
From github.com:cli/cli
 * [new ref]         refs/pull/2003/head -> refactor-gist-create
Switched to branch 'refactor-gist-create'

~/projects/cli on refactor-gist-create@b71e6494

2003 PR을 가져오고 싶으면 gh pr checkout 2003처럼 사용하면 되는데 해당 Pull Request를 가져와서 브랜치 변경을 해주어서 바로 로컬에서 테스트해볼 수 있다.


기능을 둘러보니 만족스러워서 코딩하면서 자주 사용하게 될 것 같다.

2020/09/28 21:46 2020/09/28 21:46

GitHub Codespaces 살펴보기

GitHub은 지난 5월 Satellite 2020 행사에서 GitHub 웹사이트에서 바로 Visual Sutdio Code를 이용해서 개발할 수 있는 Codespaces를 공개했다.

GitHub Codespaces 홈페이지

아직 베타 상태라서 GitHub에서 초대를 보내줘야 사용할 수 있고 아직 정확히 언제 퍼블릭으로 열릴지는 공개되지 않았다.

GitHub Codespaces 초대메일

지난달에 베타 초대를 받아서 사용할 수 있게 되었다. 베타라서 지금은 과금이 되지 않지만 문서에 가격이 나와 있다.

  • Basic (2 cores, 4GB RAM, 32 GB SSD) - $0.085
  • Standard (4 cores, 8 GB RAM, 32 GB SSD) - $0.169
  • Premium (8 cores, 16 GB RAM, 32 GB SSD) - $0.339

Premium을 쓴다고 하면 30일 동안 내내 사용하면 244.08 달러가 나오고 Basic이라면 61.2 달러 정도가 나온다. 하지만 과금은 실제로 Codespace를 사용한 시간만 과금하고 사용하지 않는 상태도 30분이 지나면 자동으로 멈추므로 실제 과금은 훨씬 적을 것으로 보인다. Premium으로 하루 8시간 20일 정도를 사용한다고 하면 54.24 달러 정도(Basic이면 13.6달러)를 예상할 수 있다. 싸진 않지만, 업무에 주로 쓴다면 지불할 정도는 된다고 생각한다.

나는 VS Code도 거의 안 쓰고 JetBrains의 개발도구를 주로 쓰는 편이고 코딩을 로컬이 아닌 웹상에서 할 생각은 전혀 없지만, 베타를 받은 김에 좀 살펴봤다. Figma 덕에 디자인 쪽도 웹상에서 작업하는 쪽으로 옮겨가고 있고 개발도 그런 흐름으로 흘러갈 것으로 보인다.

Codespace 열기

저장소의 코드스페이스 생성 메뉴

저장소에서 "Code" 버튼을 누르면 "Open with Codespaces"라는 메뉴가 나오고 여기서 코드 스페이스로 진입할 수 있다. GitHub 페이지 상단의 "Codespaces" 메뉴에서도 저장소와 브랜치를 선택해서 코드스페이스를 생성할 수 있다.

GitHub 상단 메뉴의 코드스페이스 생성 메뉴

"Open with Codespaces"를 누르면 이미 만들어 놓은 코드스페이스가 없으므로 새로 만들어야 한다고 나온다.

No active codespaces 화면

이미 해당 저장소에서 코드스페이스를 띄워 놨다면 아래처럼 이전에 열어놓은 스페이스 정보가 나와서 바로 띄울 수도 있다.

이미 생성된 코드스페이지가 목록에 나온 화면

"New codespace"를 누르면 화면이 바뀌면서 서버를 불러오고 컨테이너를 띄우면서 환경을 준비한다. 1~3분 정도면 뜨는 것 같은데 아직 베타라 그런지 그것보다 더 오래 걸리는 경우도 있다.

코드스페이스 환경을 준비하면서 컨테이너 등의 로그가 나온다

주소는 https://outsideris-citizen-6g63.github.dev/ 같은 주소로 연결되고 로딩이 완료되면 다음과 같이 익숙한 VS Code 화면이 나오고 로고에서 알 수 있듯이 실제로도 VS Code임을 알 수 있다. VS Code 공지를 보면 VS Code 녹색 아이콘은 Insiders 버전임을 알 수 있는데 현재 Codespaces에 적용된 버전은 Insiders 버전이다. 설정에 가면 Stable 버전으로 전환할 수 있다.

웹브라우저에서 열린 코드스페이스 에디터


Codespace 기능

일단 테스트로 파일을 열고 수정할 때는 코딩할 때 무리 없을 정도로 괜찮은 속도를 보여준다. 물론 테스트라 업무로 몇 시간씩 사용하면서 괜찮을지는 다른 이야기일 수 있다. 레퍼런스를 찾아가거나 정보를 보여주는 것도 VS Code와 마찬가지로 잘 돌아가고 이질감은 거의 느껴지지 않는다. 당연히 설정에서 테마도 변경할 수 있다. 설정에 "Settings Sync is On"가 있어서 테마 등 자신에게 맞게 설정한 걸 다른 코드스페이스에 자동으로 적용해 주어서 웹상이지만 프로젝트가 달라도 하나의 IDE로 개발하는 경험을 가질 수 있다.

코드스페이스를 다크 테마로 변경

현재 최신 버전의 VS Code와 비교해 보면 메뉴나 화면 구성이 거의 똑같은 것을 알 수 있다.

최신버전의 VS Code와 메뉴를 비교해 보면 3개 외에는 같다

이 모든 기능을 다 살펴보는 것은 글도 VS Code를 설명하는 것과 다름없기 때문에 VS Code에는 없는 부분만 설명하려고 한다. 이 추가 기능들도 일부는 이미 VS Code에 있는 익스텐션일 것 같지만 VS COde로 개발을 하지 않아서 정확히는 모르겠다.

Remote Explorer

이 메뉴는 Codespace의 환경 정보를 보여준다.

Remote Explorer 메뉴

이미 생성해 놓은 코드스페이스 정보를 볼 수 있고 두 번째 칸에서는 현재 코드스페이스의 상태가 나온다. 이 메뉴에서 코드스페이스의 연결을 끊거나 하는 것도 가능하다.

터미널에서 실행한 서버의 포트가 Remote Explorer에서 포워디드 포트로 등록된다

"Forwarded Ports" 부분은 코드스페이스 개발하면 서버를 띄우거나 하고 접속해 보고해 봐야 하기 때문에 이러한 포트 포워딩 정보가 나오는 부분이다. 위처럼 터미널에서 프로젝트의 서버를 띄우면 로그 메시지를 보고 URL이 있으면 알아서 포워딩해준 화면이다. 포트 포워딩이 추가되면서 "Forwarded Ports" 부분에 포트 정보가 추가된 것을 볼 수 있다.

여기서는 http://localhost:3000를 탐지해서 포트 포워딩을 추가한 것인데 브라우저에서 열기를 누르면 아래와 같이 코드스페이스 내에서 띄운 서버가 https://3ac9ac26-8d0f-4eca-bec9-d07d7073b248-3000.apps.codespaces.githubusercontent.com/ 같은 GitHub 도메인을 통해서 연결된다. 터미널의 로그를 클릭해서도 바로 이러한 포워딩된 주소로 이동할 수 있다.

포워디드 포트로 연결된  페이지를 브라우저에서 확인


GitHub

Pull Reqeust 아이콘처럼 생긴 메뉴는 GitHub 메뉴인데 코드 스페이스 내에서 열린 Pull Reqeust나 Issue 목록을 볼 수 있다.

GitHub 메뉴에 나온 Pull Reqeust와 issue

Pull Reqeust의 올라온 파일 변경 내용을 보거나 체크아웃해서 소스를 살펴볼 수 있다.

GitHub 메뉴의 Pull Reqeust의 서브 메뉴

Issue에서는 이슈 내용을 열어보거나 해당 이슈를 작업하기 위해서 브랜치를 따서 시작하는 것 등을 할 수 있다.

GitHub 메뉴의 Issue의 서브 메뉴

물론 여기서 새로운 이슈나 Pull Request를 만들어서 올릴 수도 있다.

Live Share

Live Share는 온라인으로 다른 사람과 같이 코딩할 수 있는 기능이고 원래 VS Code에서 협업을 위해 지원하는 부분이다.

Live Share 메뉴

이 기능은 따로 해보진 않았다.


VS Code가 인기를 끌고 점점 발전에 가면서 VS Code도 결국은 웹 기반이라서 이런 식의 확장을 어느 정도 예상한 부분이었고 Microsoft가 GitHub을 인수하면서 훨씬 자연스럽게(혹은 강력하게) 개발자에게 다가왔다고 생각한다. 제대로 느끼려면 코드스페이스를 메인으로 개발을 좀 해봐야 할 것 같은데 테스트 삼아 만져본 느낌은 상당히 괜찮았다. 이미 Visual Studio Codespaces가 있는 것은 알고 있었지만, GitHub에 통합되니 확실히 느낌이 다르다. 근데 기능 테스트하느라 이것저것 하다 보면 난 Codespace에 열어놓은 파일을 닫을 의도로 Command + w를 눌렀지만, 실수로 Chrome 탭이 닫혀서 자꾸 놀라게 된다.

2020/09/19 22:03 2020/09/19 22:03