【初心者向け】VSCodeとAWS CLIで始める！AWS EC2環境構築とGit連携の完全ガイド

AWS Basic
スポンサーリンク
スポンサーリンク

1️⃣ はじめに：なぜVSCodeとAWS CLIの連携が必要なのか？

AWSを始めたばかりの方は、マネジメントコンソール（ブラウザのGUI画面）でEC2インスタンスを作成し、操作していることが多いでしょう。しかし、実務レベルの開発を目指すなら、VSCodeとAWS CLIを使った開発環境への移行が必須です。

マネジメントコンソール（GUI）の限界

マネジメントコンソールは視覚的で分かりやすい一方で、以下のような課題があります：

  • 手作業によるミスのリスク：クリック操作は毎回同じ設定を保証できず、セキュリティグループの設定ミスなどが発生しやすい
  • 再現性の低さ：「あの時どうやって設定したっけ？」となりがちで、同じ環境を再構築するのが困難
  • 作業効率の悪さ：複数のインスタンスを管理する場合、ブラウザを行き来する時間が膨大になる
  • チーム開発に不向き：手順を共有しにくく、属人化しやすい

エンジニアらしい開発環境のメリット

一方、VSCode + AWS CLI + Git の組み合わせでは：

  • VSCodeから直接サーバーを操作：リモートのEC2インスタンスが、まるで自分のPCのフォルダのように扱える
  • コマンドで再現可能：AWS CLIを使えば、インフラの構築手順をコード化でき、同じ環境を何度でも再現可能
  • Gitでバージョン管理：設定ファイルやコードの変更履歴を追跡でき、問題が起きても即座に巻き戻せる
  • 爆速の開発サイクル：ターミナルとエディタを行き来せず、すべてVSCode内で完結

この記事では、初心者でも確実に環境構築できるよう、実際のコマンドと画面を交えながら手順を解説していきます。

2️⃣ 事前準備：ローカル環境のセットアップ

EC2に接続する前に、まずは自分のPCにAWS CLIとVSCodeの準備をしましょう。

AWS CLIのインストールと初期設定（Configure）

インストール

公式サイトから最新版をダウンロードしてインストールします：

  • Windows: AWS CLI MSIインストーラー
    上記の公式URLを開いて「`https://awscli.amazonaws.com/AWSCLIV2.msi`」をクリック
  • macOS: ターミナルで以下を実行
    curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"
sudo installer -pkg AWSCLIV2.pkg -target /
  • Linux:
    curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

インストール確認：

aws --version
# aws-cli/2.x.x と表示されればOK

 

初期設定（重要！）

AWSアカウントのアクセスキーを設定します。この設定を間違えると何も動きません：

aws configure

以下の情報を順番に入力：

AWS Access Key ID [None]: AKIA******************
AWS Secret Access Key [None]: ****************************************
Default region name [None]: ap-northeast-1
Default output format [None]: json

注意点：

  • アクセスキーは、AWSコンソールの「IAMユーザー」→「セキュリティ認証情報」から発行
  • 発行時に1度しか表示されないので、必ずメモ帳などに保存しておく
  • リージョンは東京なら ap-northeast-1、バージニア北部なら us-east-1
  • 設定ファイルは ~/.aws/credentials に保存される（漏洩注意！）

確認コマンド：

aws sts get-caller-identity
# 自分のAWSアカウント情報が表示されればOK

VSCodeの必須拡張機能：Remote - SSH

VSCodeで「リモートのサーバーを直接編集できる魔法」を実現する拡張機能です。

インストール手順

  1. VSCodeを開く
  2. 左サイドバーの「拡張機能」アイコン（四角4つのマーク）をクリック
  3. 検索窓に「Remote - SSH」と入力
  4. Microsoft公式の「Remote - SSH」をインストール

なぜこれが必要なのか？

この拡張機能を入れると：

  • EC2上のファイルがVSCodeのエクスプローラーに直接表示される
  • ローカルファイルを編集する感覚で、リモートサーバーのファイルを編集可能
  • VSCodeのターミナルが、そのままEC2のシェルになる
  • Git操作もVSCodeのGUIから実行できる

つまり、「EC2 = 自分のPCのローカルフォルダ」として扱えるようになるのです。これが現代の開発スタイルの標準です。

3️⃣ AWS EC2インスタンスの作成と接続

いよいよEC2インスタンスを作成し、VSCodeから接続します。

AWS CLIからEC2を起動する（最小構成コマンド）

マネジメントコンソールでポチポチする代わりに、コマンド一発でEC2を起動できます。

キーペアの作成

まずSSH接続用のキーペアを作成：

aws ec2 create-key-pair \
  --key-name my-ec2-key \
  --query 'KeyMaterial' \
  --output text > ~/.ssh/my-ec2-key.pem

chmod 400 ~/.ssh/my-ec2-key.pem

 

EC2インスタンスの起動

aws ec2 run-instances \
  --image-id ami-0dafcef159a1fc745 \
  --instance-type t2.micro \
  --key-name my-ec2-key \
  --security-group-ids sg-xxxxxxxxx \
  --subnet-id subnet-xxxxxxxxx \
  --tag-specifications 'ResourceType=instance,Tags=[{Key=Name,Value=MyDevServer}]'

パラメータ解説：

  • --image-id: Amazon Linux 2のAMI ID（リージョンごとに異なるので要確認）
  • --instance-type: t2.microは無料枠対象の最小インスタンス
  • --key-name: 先ほど作成したキーペア名
  • --security-group-ids: 既存のセキュリティグループID（SSH許可が必要）
  • --subnet-id: VPCのサブネットID
  • --tag-specifications: インスタンスに名前をつける

パブリックIPの確認

aws ec2 describe-instances \
  --filters "Name=tag:Name,Values=MyDevServer" \
  --query 'Reservations[0].Instances[0].PublicIpAddress' \
  --output text

表示されたIPアドレスをメモしておきます。

VSCodeからEC2へSSH接続する手順

SSH設定ファイルの編集

~/.ssh/config ファイルを開いて（なければ新規作成）、以下を追加：

Host my-dev-server
  HostName 18.xxx.xxx.xxx  # 先ほど確認したパブリックIP
  User ec2-user
  IdentityFile ~/.ssh/my-ec2-key.pem

各項目の意味：

  • Host: 接続時の識別名（好きな名前でOK）
  • HostName: EC2のパブリックIP
  • User: Amazon Linux 2の場合は ec2-user、Ubuntuなら ubuntu
  • IdentityFile: 秘密鍵のパス

VSCodeから接続

  1. VSCodeで Cmd+Shift+P（Windows: Ctrl+Shift+P）を押してコマンドパレットを開く
  2. 「Remote-SSH: Connect to Host...」を選択
  3. 先ほど設定した my-dev-server を選択
  4. 新しいVSCodeウィンドウが開き、数秒で接続完了

これで完了！ 左下に「SSH: my-dev-server」と表示されていれば、成功です。

次回以降は1クリック

一度設定すれば、次からは：

  1. VSCodeを開く
  2. 左下の緑色アイコンをクリック
  3. 「my-dev-server」を選択

たったこれだけで、即座にEC2に接続できます。もうターミナルで ssh -i ~/.ssh/key.pem ec2-user@... なんて打つ必要はありません。

4️⃣ EC2上でGit連携と開発環境の構築

VSCodeからEC2に接続できたので、次はGitを使えるようにします。

GitのインストールとGitHub SSHキーの設定

Gitのインストール

VSCodeのターミナル（EC2上で動作）で実行：

sudo yum update -y
sudo yum install git -y
git --version

 

GitHub用のSSHキー生成

EC2からGitHubに安全にアクセスするため、SSH鍵を作成します：

ssh-keygen -t ed25519 -C "your_email@example.com"
# Enterを3回押して、デフォルト設定で生成

公開鍵を表示：

cat ~/.ssh/id_ed25519.pub

 

GitHubに公開鍵を登録

  1. 表示された公開鍵（ssh-ed25519 AAAA...で始まる行）をコピー
  2. GitHubにログイン
  3. 右上のアイコン → Settings → SSH and GPG keys
  4. 「New SSH key」をクリック
  5. Titleに「My EC2 Server」など分かりやすい名前を入力
  6. Keyフィールドに公開鍵を貼り付け
  7. 「Add SSH key」をクリック

接続確認

ssh -T git@github.com
# "Hi username! You've successfully authenticated..." と表示されればOK

 

Git初期設定

git config --global user.name "Your Name"
git config --global user.email "your_email@example.com"

VSCode上でリモートリポジトリを操作する

リポジトリのクローン

VSCodeのターミナルで：

cd ~
git clone git@github.com:yourusername/your-repo.git
cd your-repo

または、VSCodeのコマンドパレット（Cmd+Shift+P）から：

  1. 「Git: Clone」を選択
  2. リポジトリURLを入力
  3. 保存先フォルダを選択

VSCodeのGit機能を使う

ここが最大のメリットです。ターミナルで git add、git commit、git push を打つ必要はありません：

  1. ファイルを編集：VSCodeでいつも通り編集するだけ
  2. 変更を確認：左サイドバーの「ソース管理」アイコンをクリック→変更箇所が一覧表示
  3. ステージング：ファイル名の横の「+」アイコンをクリック
  4. コミット：上部のテキストボックスにメッセージを入力して「✓」アイコンをクリック
  5. プッシュ：「…」メニューから「プッシュ」を選択

これだけです。 Git初心者でも、GUIで直感的に操作できます。

ブランチ切り替えもワンクリック

左下のブランチ名をクリック→切り替えたいブランチを選択→完了。

もう git checkout -b feature/new-feature なんて覚える必要はありません。

5️⃣ 実践：簡単なWebサーバーを動かしてみる

環境が整ったので、実際にWebサーバーを立ててアクセスしてみましょう。

Apache（またはNginx）のインストールと起動

Apacheの場合

sudo yum install httpd -y
sudo systemctl start httpd
sudo systemctl enable httpd  # 自動起動設定

 

動作確認

sudo systemctl status httpd
# "active (running)" と表示されればOK

 

テストページの作成

VSCodeでファイルを作成：

  1. エクスプローラーで /var/www/html フォルダを開く（権限エラーが出たら sudo chown -R ec2-user:ec2-user /var/www/html を実行）
  2. 「新しいファイル」→ index.html
  3. 以下を記述：
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My First EC2 Server</title>
</head>
<body>
    <h1>VSCode + EC2 + Git 連携成功！</h1>
    <p>この環境から世界へ発信しよう🚀</p>
</body>
</html>

保存して、ブラウザで http:// にアクセス…

あれ？表示されない？ そう、ここが初心者が必ず躓くポイントです。

セキュリティグループ（ポート80）の開放忘れに注意

AWSのセキュリティグループはデフォルトで全ポートが閉じているため、HTTP（ポート80）を開放する必要があります。

AWS CLIで開放

# まず、インスタンスのセキュリティグループIDを確認
aws ec2 describe-instances \
  --filters "Name=tag:Name,Values=MyDevServer" \
  --query 'Reservations[0].Instances[0].SecurityGroups[0].GroupId' \
  --output text

# HTTP（ポート80）を全世界に開放
aws ec2 authorize-security-group-ingress \
  --group-id sg-xxxxxxxxx \
  --protocol tcp \
  --port 80 \
  --cidr 0.0.0.0/0

注意： 0.0.0.0/0 は全世界からのアクセスを許可します。本番環境では、特定のIPのみに制限してください。

再度アクセス

ブラウザで http:// にアクセス→「VSCode + EC2 + Git 連携成功！」が表示されれば完璧です🎉

 

Gitでバージョン管理

作成した index.html を、VSCodeのGUI操作でコミット・プッシュしましょう：

  1. ソース管理アイコン
  2. 「+」でステージング
  3. コミットメッセージ「Initial commit: Add index.html」
  4. プッシュ

これで、GitHub上にもコードが保存されました。チームメンバーと共有したり、バックアップとしても機能します。

6️⃣ まとめと次のステップ

今回の構成で得られた「爆速」開発環境

この記事で構築した環境により、以下が実現できました：

✅ AWS CLIでインフラをコード化：再現可能な環境構築
✅ VSCodeでEC2を直接編集：ローカルと同じ感覚で開発
✅ Gitでバージョン管理：安心して実験・変更できる
✅ ブラウザ不要：すべてVSCode内で完結

これが、プロのエンジニアが当たり前に使っている開発スタイルです。最初は戸惑うかもしれませんが、一度慣れてしまえば、マネジメントコンソールには二度と戻れなくなるでしょう。

さらに高度な自動化を目指すなら

今回は手動でAWS CLIコマンドを実行しましたが、実務では：

  • Terraform や CloudFormation でインフラをコード管理
  • Docker でアプリケーション環境を統一
  • CI/CD でテスト・デプロイを自動化

といったステップに進んでいきます。

最後に

この記事が、あなたのAWS開発環境構築の第一歩として役立てば幸いです。質問やフィードバックがあれば、コメント欄でお気軽にどうぞ！

Happy Coding! 🚀

スポンサーリンク

コメント