ConoHaVPS

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

SANA

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

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

前提条件

<接続先VPSサーバ情報>
サーバ:ConoHa VPS
OS:Ubuntu22.04
・VSCodeインストール済み
・Githubのアカウント取得済み
・SSHの設定(公開鍵認証と/.ssh/config作成)済み

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

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

【30分で完了】ConoHa VPSへSSH接続する方法を解説
【30分で完了】ConoHa VPSへSSH接続する方法を解説
【30分で完了】SSH公開鍵認証の設定方法を解説
【30分で完了】SSH公開鍵認証の設定方法を解説
【30分で完了】SSH接続のパスフレーズを省略する方法
【30分で完了】SSH接続のパスフレーズを省略する方法

『Remote Development』の設定

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

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

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

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

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

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

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

GitHubとVSCodeの連携

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

ローカルリポジトリ個々の開発者のPC内に設置されるファイル保管場所です。作業中のプロジェクトの全ファイルやディレクトリ及びその変更履歴が格納されます。
GitHubリポジトリGitHubが提供するインターネット上にあるファイル保管場所です。ローカルリポジトリと同様の情報を格納できます。
ローカルリポジトリとGitHubリポジトリの説明

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

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

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

※ローカルリポジトリというのは今回でいうとSSH接続先の環境(ConoHa VPS)を指します。

GitHubリポジトリを作成する

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

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

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

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

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

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

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

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

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

GitHubリポジトリを作成する

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

https://github.com/

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

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

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

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

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

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

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

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

GitHubを見てみましょう。

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

まとめ

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

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