SSH接続でGitHubから安全にコードを取得する方法〜スタバのWi-Fiでも詰まらない「どこでも開発環境」の作り方〜

はじめに:なぜ「いつもの接続」がカフェで使えないのか?

「家では動くのに、カフェに来るとGitHubに繋がらない……」

そんな経験はありませんか?

実は、スターバックスなどの公共Wi-Fiでは、セキュリティ上の理由からSSH接続でよく使われる「22番ポート」が制限されていることがあります。

今回は、GitHubから安全にコードを取得するための基本設定に加え、場所を選ばずどこでも爆速で開発をスタートできる「ポート回避設定」をまとめました。

作業の全体像:今回のポイント

  1. SSHキー(鍵)の作成: 安全な「デジタル身分証」を作る
  2. GitHubへの登録: 鍵の片方をGitHubに預ける
  3. SSH設定ファイルの作成(重要): 公共Wi-Fiの制限を突破する
  4. 環境構築: リポジトリを取得して開発準備完了

1. SSHキー(鍵)の作成

まずは、自分のPCとGitHubを安全に繋ぐための「鍵」を生成します。

ssh-keygen -t ed25519
フラグ意味
ssh-keygenSSHキーを作成するコマンド
-t ed25519最新かつ最も安全と言われる暗号化方式(Ed25519)を指定

この操作で、秘密鍵(自分だけが持つ)と公開鍵(GitHubに登録する)の2つのペアが作成されます。

2. 公開鍵の確認とGitHubへの登録

作成した鍵のうち、GitHub側に「これがあれば私だと認識してね」と渡すのが公開鍵です。

cat ~/.ssh/id_ed25519.pub

表示された ssh-ed25519... から始まる長い文字列をコピーし、GitHubの管理画面から登録します。

登録場所:

GitHubにログイン > Settings > SSH and GPG keys > New SSH key

Screenshot
Screenshot
  • Title・・・好きな名前を記入
  • Key type・・・デフォルトのままでOK
  • Key・・・ssh-ed25519... から始まる長い文字列

3. SSH設定ファイルの作成【ノマド必須設定】

ここが今回、最も重要なポイントです。

通常の設定だと、カフェのWi-Fiなどでは「Operation timed out(時間切れ)」というエラーで接続を拒否されることがあります。

これを回避するために、Web通信と同じ「443番ポート」を使ってSSH接続を行う設定を追記します。

手順

~/.ssh/config という名前でファイルを作成(または編集)し、以下の内容を貼り付けます。

# SSH設定ファイルを開く
nano ~/.ssh/config

🔽【貼り付ける内容】

Host github.com
  HostName ssh.github.com
  Port 443
  User git

これで、「22番ポート」が閉じられている環境でも、443番ポート(通常のWebサイト閲覧と同じ通り道)を使って安全に通信ができるようになります。副業エンジニアやノマド作業をする方には必須の設定です。

置き場所

~/.ssh/config
  • 1ユーザーにつき1つ
  • 全プロジェクト共通で使います
  • ホームディレクトリ配下の .ssh フォルダの中です

~/.ssh/config の役割をざっくり言うと

SSH接続の「ルールブック」です。

「このホストに接続するときは、この設定で行ってね」

というのをまとめて書いておく場所。

4. リポジトリのクローンと環境構築

接続の準備が整ったら、プロジェクトを開始します。

# SSH方式でプロジェクトを取得
git clone git@github.com:githubユーザー名/githubリポジトリ名.git

# プロジェクトフォルダへ移動
cd リポジトリ名

# 必要なライブラリを一括インストール
npm install

package.json に記載されたReactやNext.jsなどのライブラリが、これで一気にダウンロードされます。

5. 開発サーバーの起動

最後に以下のコマンドを実行します。

npm run dev

ブラウザで http://localhost:3000 を開き、画面が表示されれば成功です!

まとめ:環境構築は「最初の一歩」を盤石に

今回の作業で整ったのは以下の3点です。

  • SSHによるセキュアな通信: パスワード入力不要で安全
  • ポート443設定: 場所を選ばずどこでも開発可能
  • Next.js開発の土台: すぐにコードを書き始められる状態

「環境構築でつまずかない」ことは、継続的な学習と開発において、技術そのものと同じくらい重要です。この設定を味方につけて、最高の開発ライフをスタートしましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次