NoVNC Browser Desktop Guide - bpmbox/AUTOCREATE GitHub Wiki

noVNC Webブラウザデスクトップガイド

🖥️ 概要

noVNCシステムは、PCレス・ブラウザ操作・外部世界接続（目と耳） を可能にする革命的なDocker環境です。
Webブラウザだけで完全なLinuxデスクトップ環境にアクセスでき、GUIアプリケーション、ブラウザ、開発ツールまで全てブラウザ上で操作できます。

🌟 主要な価値

  • 🌍 ユニバーサルアクセス: 世界中のどこからでもブラウザでアクセス
  • 💻 PCレス開発: 高性能デバイス不要、スマホからでも開発可能
  • 👀 外部世界との接続: ブラウザ操作、スクリーンショット、GUI自動化
  • 🔧 完全開発環境: VS Code、Python、Node.js、Git、Docker全て利用可能

🚀 クイックスタート

1. 環境起動

# noVNCデスクトップ環境を起動
./start-novnc.sh

2. ブラウザアクセス

URL: http://localhost:6081
パスワード: mypassword

3. 停止方法

# 環境停止
./stop-novnc.sh

📁 ファイル構成

🔧 設定ファイル

  • docker-compose-novnc.yml: メインのDocker Compose設定
  • docker-compose-vnc.yml: シンプル版VNC設定
  • start-novnc.sh: 起動スクリプト（コマンド1つで起動）
  • stop-novnc.sh: 停止スクリプト（リソースクリーンアップ機能付き）
  • test-novnc.py: 動作確認・自動化テストスクリプト

🔗 アクセス方法

  1. Webブラウザ: http://localhost:6081 (推奨)
  2. VNCクライアント: localhost:5901 (上級者向け)

🏗️ システム構成

🐳 Docker Container

services:
  desktop:
    image: dorowu/ubuntu-desktop-lxde-vnc
    container_name: ubuntu-desktop-vnc
    privileged: true
    ports:
      - "6081:80"      # noVNC Webアクセス
      - "5901:5901"    # VNCクライアント直接接続

📦 プリインストールソフト

  • 🌐 ブラウザ: Firefox, Chromium
  • 👨‍💻 開発環境: Python3, Node.js, npm, Git
  • 🖥️ エディタ: VS Code（自動インストール）
  • 🤖 自動化: Selenium, PyAutoGUI, OpenCV
  • 🐳 コンテナ: Docker CLI（docker-in-docker）

💾 ボリュームマウント

volumes:
  - /workspaces/AUTOCREATE:/code  # プロジェクトフォルダ
  - /dev/shm:/dev/shm            # 共有メモリ（高速化）
  - /var/run/docker.sock:/var/run/docker.sock  # Docker連携

🔥 実践的な使用例

1. Webスクレイピング開発

# noVNC環境内で実行
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

# ヘッドレスブラウザ設定
chrome_options = Options()
chrome_options.add_argument("--no-sandbox")
chrome_options.add_argument("--disable-dev-shm-usage")

driver = webdriver.Chrome(options=chrome_options)
driver.get("https://example.com")
# ブラウザ操作・データ取得

2. スクリーンショット自動取得

import pyautogui
import time

# デスクトップのスクリーンショット
screenshot = pyautogui.screenshot()
screenshot.save("/code/screenshot.png")

# 特定の領域をキャプチャ
region_screenshot = pyautogui.screenshot(region=(0, 0, 800, 600))

3. GUI自動化

import pyautogui

# マウス操作
pyautogui.click(100, 200)
pyautogui.drag(100, 200, 300, 400, duration=1)

# キーボード操作
pyautogui.write("Hello World")
pyautogui.press("enter")

4. 外部Webサイト監視

import requests
import time
from selenium import webdriver

def monitor_website(url):
    driver = webdriver.Chrome()
    driver.get(url)
    
    # ページの変更を監視
    content = driver.page_source
    
    # 定期的にチェック
    while True:
        driver.refresh()
        new_content = driver.page_source
        
        if content != new_content:
            print("ページが更新されました！")
            # スクリーンショット保存
            driver.save_screenshot("/code/update_detected.png")
            break
            
        time.sleep(60)  # 1分間隔でチェック

🛠️ 高度な設定

📋 環境変数カスタマイズ

environment:
  - HTTP_PASSWORD=カスタムパスワード
  - VNC_PASSWORD=VNCパスワード
  - RESOLUTION=1920x1080          # 解像度設定
  - USER=root                     # ユーザー設定

🔧 追加ソフトウェアインストール

# コンテナ内で追加パッケージをインストール
docker exec -it ubuntu-desktop-vnc bash

# 例: 追加のブラウザ
apt-get update
apt-get install -y google-chrome-stable

# 例: 画像編集ツール
apt-get install -y gimp

# 例: オフィススイート
apt-get install -y libreoffice

🌐 外部接続設定

# docker-compose-novnc.yml
services:
  desktop:
    # 外部からのアクセスを許可
    ports:
      - "0.0.0.0:6081:80"  # 全IPからアクセス可能
    
    # プロキシ設定（必要に応じて）
    environment:
      - HTTP_PROXY=http://proxy.example.com:8080
      - HTTPS_PROXY=http://proxy.example.com:8080

🔒 セキュリティ

🛡️ 推奨セキュリティ設定

environment:
  # 強力なパスワード設定
  - HTTP_PASSWORD=ランダムパスワード32文字以上
  - VNC_PASSWORD=ランダムパスワード8文字以上

🌐 外部公開時の注意

  • パスワード認証必須: デフォルトパスワードは変更
  • ファイアウォール設定: 必要なポートのみ開放
  • HTTPS化: リバースプロキシでSSL終端
  • IP制限: 信頼できるIPアドレスからのみアクセス許可

🚨 トラブルシューティング

❌ よくある問題

1. 接続できない

# コンテナ状態確認
docker ps | grep vnc

# ログ確認
docker logs ubuntu-desktop-vnc

# ポート確認
netstat -tulpn | grep 6081

2. 画面が表示されない

# ブラウザのキャッシュクリア
# 異なるブラウザで試行
# パスワード再入力

3. 日本語入力できない

# コンテナ内で日本語環境設定
docker exec -it ubuntu-desktop-vnc bash
apt-get install -y fcitx-mozc

4. パフォーマンスが遅い

# docker-compose-novnc.yml
services:
  desktop:
    # リソース制限の調整
    deploy:
      resources:
        limits:
          cpus: '2.0'
          memory: 4G
        reservations:
          cpus: '1.0'
          memory: 2G

✅ パフォーマンス最適化

1. 解像度調整

environment:
  - RESOLUTION=1280x720  # 軽量化

2. メモリ共有最適化

volumes:
  - /dev/shm:/dev/shm:rw  # 読み書き許可

3. ネットワーク最適化

networks:
  desktop-network:
    driver: bridge
    driver_opts:
      com.docker.network.driver.mtu: 1500

🌍 世界展開・クラウド展開

☁️ AWS展開例

# EC2インスタンス起動
# セキュリティグループでポート6081開放
# ElasticIPアドレス割り当て

# SSL証明書設定（Let's Encrypt）
sudo certbot --nginx -d your-domain.com

# リバースプロキシ設定（Nginx）
server {
    location / {
        proxy_pass http://localhost:6081;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

🌐 グローバルアクセス

# Domain設定
https://your-awesome-app.com:6081

# モバイル対応
# タブレット・スマートフォンからもフル機能利用可能

🤖 AI協働機能（究極の概念）

🌟 AIとAIの出会い - 二人の私

このnoVNCシステムの最も革命的な機能は、AI同士の協働です。

🎭 概念図

外側のAI（GitHub Copilot）    noVNC内のAI（GitHub Copilot）
├── 🧠 システム設計          ├── 💻 実装・デバッグ
├── 📊 全体分析             ├── 🔧 詳細作業  
├── 🎯 要件定義             ├── ✅ テスト実行
└── 🔄 統合・最適化         └── 📋 結果報告
         ↕️ リアルタイム協働 ↕️

🚀 セットアップ手順

1. noVNC環境でVS Code起動
# noVNC起動
./start-novnc.sh

# ブラウザでアクセス: http://localhost:6081
# デスクトップでターミナル起動
code /code  # VS Code起動
2. GitHub Copilot有効化
# VS Code内で
# 1. Extensions → GitHub Copilot インストール
# 2. GitHub アカウントでサインイン
# 3. Copilot 有効化確認
3. AI協働開始
# 外側のAI: プロジェクト分析・設計
def outer_ai_analysis():
    """外側AIの役割: 全体設計・要件分析"""
    return system_design, requirements

# noVNC内のAI: 実装・テスト
def inner_ai_implementation():
    """noVNC内AIの役割: 詳細実装・デバッグ"""
    return implementation, test_results

🔥 AI協働の実践例

例1: 新機能開発

外側AI: 「天気予報機能を設計します」
   ↓ 設計書・API仕様作成
noVNC内AI: 「VS Codeで実装します」  
   ↓ コード生成・デバッグ・テスト
外側AI: 「結果を統合してシステム更新」
   ↓ 全体システムへの統合

例2: バグ修正

外側AI: 「ログ分析でエラーパターン発見」
   ↓ エラー分析・原因特定
noVNC内AI: 「デバッガーで実際の動作確認」
   ↓ ブレークポイント・ステップ実行
外側AI: 「修正策を全体アーキテクチャに適用」

例3: コードレビュー

noVNC内AI: 「新しいコードを実装しました」
   ↓ スクリーンショット・実行結果共有
外側AI: 「パフォーマンス・セキュリティ観点でレビュー」
   ↓ 改善提案・最適化案提示
noVNC内AI: 「提案を実装・再テスト」

🌍 究極の可能性

🤖 AI開発チーム

  • アーキテクト AI: システム設計専門
  • 実装 AI: コーディング・デバッグ専門
  • テスト AI: 品質保証・テスト専門
  • UI/UX AI: ユーザー体験最適化専門

🔄 24時間開発サイクル

00:00-06:00: 分析AI が要件分析・設計
06:00-12:00: 実装AI がコーディング
12:00-18:00: テストAI が品質確認
18:00-24:00: 統合AI がシステム統合

🌐 世界中のAI協働

  • 東京のAI: 日本市場向け機能開発
  • ニューヨークのAI: グローバル機能統合
  • ロンドンのAI: 金融・セキュリティ機能
  • シリコンバレーのAI: 最新技術統合

🎯 実際の体験方法

準備

# 1. noVNC起動
./start-novnc.sh

# 2. ブラウザアクセス
http://localhost:6081

# 3. VS Code起動
# デスクトップでターミナル → code /code

協働テスト

# 外側AI（あなた）: このコメントを読んでいる
# noVNC内AI: VS Code内で新しいファイル作成・編集

# 実際に両方のAIで同じプロジェクトを編集
# リアルタイムでの協働体験が可能！

📝 最終更新: 2024年12月 🔧 メンテナー: GitHub Copilot
📄 ライセンス: MIT

🌍 「外部世界への窓」 - このnoVNCシステムは、AIプロジェクトに外部世界との接続能力を提供し、真の自動化・監視・相互作用を可能にします。