🧭 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公式：キーペアの作成
✅ ステップ2：VSCodeにRemote SSH拡張機能をインストール
- サイドバー → 拡張機能 → 「Remote - SSH」で検索してインストール
📎 参考：Remote SSH 概要（日本語）
✅ ステップ3：SSH設定ファイルを作成
# 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フォルダに移動
cd /var/www/html
sudo rm index.html
✅ ステップ3：アップロード（ドラッグ＆ドロップ or scp）
- VSCodeのエクスプローラーで右クリック→コピー
-
/var/www/htmlにペースト（VSCode上で直接操作可能）
※ Permission denied の場合：
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の動作を確認