EC2×VSCodeハンズオン：クラウドでWebページ公開体験！

# 🧭 EC2×VSCodeハンズオン：クラウドでWebページ公開体験！

VSCodeからSSHするときの操作が異なるようです。
＋押して、AWSに表示されたコマンドコピペして、接続後、　`cd /var/` とかにディレクトリ移動してという操作に記事修正が必要ですが、やる気との戦いなので詳しくは巻末さんこうりんくをｄ

---

## 💡 用語

| キーワード | 解説ポイント                 | 実務例            |
| ----- | ---------------------- | -------------- |
| クラウド  | 自分でサーバーを買わずに使える        | テスト環境・HP・業務ツール |
| EC2   | AWSの仮想サーバー             | 社内イントラ・開発サーバー  |
| SSH   | セキュアなリモート接続            | メンテナンス・監視作業    |
| Web公開 | サーバーにファイルを置くことで誰でも見られる | 商品紹介・サービスLPなど  |

---

## 📅 タイムテーブル（最新版）

| 時間帯             | 内容                                             | 備考                          |
| --------------- | ---------------------------------------------- | --------------------------- |
| **13:30〜14:15** | 🧠【講義】クラウド・EC2・SSH・Web公開の全体像を解説                | スライド中心、実務例を交えて紹介            |
| **14:15〜14:25** | ⏸ 休憩                                           |                             |
| **14:25〜15:10** | 🔐【実習1】キーペア作成＋VSCodeにRemote SSH設定＋EC2接続        | `.pem`生成〜VSCodeからEC2へログインまで |
| **15:10〜15:20** | ⏸ 休憩                                           |                             |
| **15:20〜16:05** | 🖥【実習2】HTML/CSS/JSを貼り付けて保存（ローカル15分）＋EC2にアップロード | HTML編集15分、アップロード操作30分       |
| **16:05〜16:15** | ⏸ 休憩                                           |                             |
| **16:15〜17:00** | 🌐【実習3】Webブラウザで公開確認＋トラブル解決演習                   | `http://[IP]/` で表示確認、失敗事例共有 |
| **17:00〜17:10** | ⏸ 休憩                                           |                             |
| **17:10〜17:20** | 💬【まとめ】ふりかえり・Q\&A                              |                             |

---

## 🛠 各実習ステップ（詳細と手順）

---

### 🔐 実習1：EC2接続の準備（14:25〜15:10）

#### ✅ ステップ1：新しいSSHキーペア（.pem）を作成

* AWSマネジメントコンソール → EC2ダッシュボード
* \[キーペア] → \[キーペアの作成] → 名前をつけて`.pem`形式でダウンロード

📎 **参考**：[Amazon公式：キーペアの作成](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-key-pairs.html)

#### ✅ ステップ2：VSCodeにRemote SSH拡張機能をインストール

* サイドバー → 拡張機能 → 「Remote - SSH」で検索してインストール

📎 **参考**：[Remote SSH 概要（日本語）](https://code.visualstudio.com/docs/remote/ssh?lang=ja)

#### ✅ ステップ3：SSH設定ファイルを作成

```bash
# Windowsの場合の例
Host ec2-ubuntu
  HostName [EC2のパブリックIPv4アドレス]
  User ubuntu
  IdentityFile C:/Users/ユーザー名/Downloads/your-key.pem
```

* `~/.ssh/config` に上記を保存（Windowsなら `C:\Users\あなた\.ssh\config`）

#### ✅ ステップ4：VSCodeからEC2に接続

* 左下「><」→「Remote-SSH: Connect to Host」→ `ec2-ubuntu` を選択
* ターミナルが開き、EC2に接続できればOK

---

### 🖥 実習2：WebファイルをEC2にアップロード（15:20〜16:05）

#### ✅ ステップ1：ローカルにHTML/CSS/JSを保存

* VSCodeで `index.html`, `style.css`, `script.js` を貼り付け＆保存（15分）

#### ✅ ステップ2：EC2側のWebフォルダに移動

```bash
cd /var/www/html
sudo rm index.html
```

#### ✅ ステップ3：アップロード（ドラッグ＆ドロップ or `scp`）

1. VSCodeのエクスプローラーで右クリック→コピー
2. `/var/www/html` にペースト（VSCode上で直接操作可能）

※ `Permission denied` の場合：

```bash
sudo chown ubuntu:ubuntu /var/www/html
```

---

### 🌐 実習3：Webページを公開して確認（16:15〜17:00）

#### ✅ ステップ1：EC2のパブリックIPv4アドレスを確認

* EC2インスタンス → \[説明] → \[IPv4 パブリック IP]

#### ✅ ステップ2：ブラウザでアクセス

* `http://[EC2のIP]/index.html` にアクセス
* HTML＋CSS＋JavaScriptの動作を確認


---

## 📎 最新の参考サイトまとめ

* [Remote - SSH の使用（Visual Studio Code公式）](https://code.visualstudio.com/docs/remote/ssh?lang=ja)
* [Amazon EC2 キーペア（公式日本語）](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-key-pairs.html)
* [VSCodeからEC2へRemote SSH接続手順（2024年対応）](https://dev.classmethod.jp/articles/ec2-vscode-ssh-connection/)

---