VSCodeのSSH接続とGitHub連携手順|ConoHa VPS

こんにちは。この記事ではエンジニアの皆さんが大好きなVisual Studio Code（VSCode）をConoHa VPS上で使用するためのセットアップ手順を詳しく解説します。

また、後半ではVSCodeと拡張機能を用いたGitHubとの連携方法について解説します。これにより開発してるプログラムのバージョン管理まで可能となります。

みんなが使っている！VSCode超入門 プログラマーを目指すなら確実に身につけたい必携ツール （I/OBOOKS） [ 清水　美樹 ]

created by Rinker

¥2,860 (2024/12/26 00:43:04時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

前提条件

特にSSHの設定は必須ですのでしっかりと設定を終わらせておきましょう。

手順に関しては以下の記事を参照してください。

【30分で完了】ConoHa VPSへSSH接続する方法を解説

【30分で完了】SSH公開鍵認証の設定方法を解説

【30分で完了】SSH接続のパスフレーズを省略する方法

『Remote Development』の設定

VSCodeを開いたら左のバーにある拡張機能をクリックして「Remote Development」をインストールしましょう。これでリモートサーバにある資材を追加/編集することができます。

事前に.ssh/configファイルを設定しておくと、「SSH」に接続ホスト名が表示されます。これにより、簡単にリモートサーバに接続できます。(事前準備のセクションを参照)

「リモートに接続しました。」というメッセージが表示されれば、リモートサーバへの接続が成功したことになります。

「フォルダーを開く」をクリックし、「ワークスペースにフォルダーを追加」を選択します。

プロジェクトを選択して「OK」を押します。これで、リモートサーバ上のプロジェクト作業を開始できます。

『venv』フォルダはPythonの仮想環境に関連するものです。これは、プロジェクトごとにPythonのバージョンやライブラリを分けたい場合に使用します。基本的なリモート作業には影響しませんので、無視しても構いません。

【20分で完了】『venv』を使うPython複数バージョン管理

GitHubとVSCodeの連携

GitHubとVSCodeを連携させる前に用語の整理をします。GitHub上でのプロジェクトは「リポジトリ」として管理されます。リポジトリとは、プロジェクトに関連するファイルやディレクトリ、それらの変更履歴を保存する箱のようなものです。

ローカルリポジトリは個人の作業スペースであり、GitHubリポジトリはチームやコミュニティでコードを共有するためのプラットフォームです。ローカルリポジトリへの変更に内容をGitHubリポジトリへプッシュしながら開発を進めるイメージです。

今回はGitHubリポジトリに作成したファイルを反映させるところまで説明します。流れは以下です。

はじめてでもできる　GitとGitHubの教科書 [ たにぐち まこと ]

created by Rinker

¥2,640 (2024/12/26 00:43:04時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

ローカルリポジトリを作成してファイルをコミットする

ローカルリポジトリは「リポジトリを初期化する」を押してください。

適当なファイルを作ったら「コミット」してみましょう。

「Gitの”user.name”と”user.email”を構成していることを確認してください。」のエラーが出る場合があります。Git でコミットを行う際に user.name と user.email の設定が必要であり、これらの設定がないとGit はコミットの作者情報を識別できないのでエラーになってしまうのが原因です。

そのため、このソール画面から以下のコマンドを打ってください。

git config --global user.name 'GitHubのアカウント名'
git config --global user.email '登録したEメールアドレス@gmail.com'

登録できたら再度「コミット」を押してみましょう。

これでローカルリポジトリへの登録が完了しました。

GitHubリポジトリを作成する

さて、次にGitHub側にリポジトリを作成しましょう。

https://github.com/

上記からGitHubのサイトへログインします。

「Start a new repository for アカウント名」から任意のリポジトリ名を決めます。PublicとPrivateはどちらでもよいです。Pubulicの場合は誰でもそのリポジトリを見ることができ。Privateの場合は特定のメンバーに対して公開することができます。

「Create a new repository」ボタンを押すと以下のような画面が表示されます。これでGitHubリポジトリが作成されました。赤線部分の「https://〜」は次の章で使うのでコピーしておいてください。

ローカル＆GitHubリポジトリを紐づける

VSCodeに戻って下の方にあるターミナルからコマンドを入力します。

git remote add origin https://github.com/ユーザ名/GitHubリポジトリ名.git

「https:〜」の部分は前のセクションのURLに対応しています。このコマンドにより、ローカルリポジトリとGitHubリポジトリを紐づけることができました。

GitHubリポジトリへプッシュする

「…」を押して「プッシュ」ボタンを押します。これによりローカルリポジトリからGitHubリポジトリへの反映をします。

GitHubを見てみましょう。

無事、ローカルリポジトリの情報が反映されていることが確認できました。

Appendix

コミットしたくないファイルを定義する

プロジェクト配下に.gitignore ファイルを作成し、必要なファイルやディレクトリを無視する設定を追加します。

# macOSの隠しファイル
.DS_Store

# Pythonのキャッシュファイル
__pycache__/
*.pyc

# Node.jsのモジュール
node_modules/

まとめ

本記事ではVSCodeからConoHa VPSにSSH接続して資材を編集する方法と、VSCodeとGitHubを連携させる手順について解説しました。これらの設定を一度行ってしまえば、以後の開発作業が大幅に効率化されます。また、本ガイドを通じて、開発チーム内での知識共有や新規メンバーの導入プロセスもスムーズに行えるようになります。

さな夫

JTC エクストリーム中間管理職

XContact

東京生まれ。30代。大学院修了後に今のSIer会社へ就職。普段はアプリ開発の設計を担当。奥さんと子供2人とほのぼのとした日常を過ごしながら技術系のブログを執筆中。