VSCodeのdevcontainerでGitHubの同期

November 3, 2023

ローカルのPCでdevcontainerを使って開発を行う場合、コンテナ内でGitHubの認証を行う必要がある。VSCodeのドキュメントに記載があるが、コンテナ内での認証は面倒なのでローカルのPCで認証を行い、コンテナ内での認証をスキップする方法をまとめる。

ローカルでの初期設定

ローカルでGitHub連携を行っていない場合は、以下の手順でGitHub連携を行う。

GitHubアカウント連携

まずGitHub CLIをインストールする。

$ brew install gh # Macの場合

アカウントにログイン、SSHによるセットアップを行う。

$ gh auth login
? What account do you want to log into? GitHub.com
? What is your preferred protocol for Git operations? SSH
? Upload your SSH public key to your GitHub account? /Users/username/.ssh/id_rsa.pub
? Title for your SSH key: MacbookAir
? How would you like to authenticate GitHub CLI? Login with a web browser

Git config

ローカルでユーザー名とメールアドレスを設定する。

$ git config --global user.name "username"
$ git config --global user.email "your@email"

SSH Agentの設定

ssh-agentをバックグラウンドで起動する。

$ eval "$(ssh-agent -s)"
Agent pid 97716

SSHの秘密鍵を登録する。

$ ssh-add --apple-use-keychain ~/.ssh/id_rsa # Macの場合
Identity added: /Users/username/.ssh/id_rsa (MacbookAir)

ssh-agentがログイン時に起動されるよう、~/.zprofileに以下を追記する。

if [ -z "$SSH_AUTH_SOCK" ]; then
   # Check for a currently running instance of the agent
   RUNNING_AGENT="`ps -ax | grep 'ssh-agent -s' | grep -v grep | wc -l | tr -d '[:space:]'`"
   if [ "$RUNNING_AGENT" = "0" ]; then
        # Launch a new instance of the agent
        ssh-agent -s &> $HOME/.ssh/ssh-agent
   fi
   eval `cat $HOME/.ssh/ssh-agent`
fi

この辺りの手順はVSCodeドキュメントのSharing Git credentials with your containerを参照。

devcontainerの開発環境の構築

リポジトリのクローン

gh repo clone user-name/repository-name

Dockerfileの作成

Node.jsの開発環境を構築するDockerfileを作成する。これはNode.jsのバージョン18を指定した最小限の設定。

FROM node:18-bullseye-slim
WORKDIR /app
COPY ./package.json /app
RUN npm install
COPY ./ /app

devcontainer.jsonの作成

.devcontainer/devcontainer.jsonを作成する。

Copilotのextensionをインストールしている
Dev Container Featuresを使ってGitHub CLI、Vercel CLI、SSHをインストールしている
- https://containers.dev/features

{
  "name": "Existing Dockerfile",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "GitHub.copilot"
      ]
    }
  },
	"features": {
		"ghcr.io/devcontainers/features/github-cli:1": {},
		"ghcr.io/devcontainers-contrib/features/vercel-cli:1": {},
    "ghcr.io/devcontainers/features/sshd:1": {}
	}
}

devcontainerの起動

VScodeの画面上で、左下の><をクリックしてVSCodeのコマンドパレットからReopen in Containerを選択する。

コンテナ内でGitHub連携の確認

何もしなくても、SSH接続ができることを確認する。

ssh -T git@github.com