APIキー不要で学ぶ 開発環境構築（Docker・モック）

APIキー不要で学ぶ 開発環境構築（Docker・モック） 推し活ツール出版記念 HTML・CSS・JavaScript ツールを、模倣サーバーで動かし、試験まで行う 対象：開発を始める社員 ／ 所要時間：60分 ／ 費用：なし（APIの契約は不要）

本日のゴール 60分で、次の3つができるようになります 1．環境を作る 2．模倣で動かす 3．試験する Docker の開発用イメージを作り、コン テナを起動できる。Windows・WSL・ Ubuntu のどれでも手順が分かる。 模倣サーバーを起動し、画面から送っ て結果を表示できる。APIキーは使わな い。 単体試験と画面試験を実行し、合格を 確かめられる。失敗の案内も試験でき る。 社内研修資料 | 2

全体像：コードはホストに、実行はコンテナに ブラウザは、画面とサーバーの両方へ、http で接続します Docker コンテナ（web-dev）：Node.js ・ Python ・ Chromium ブラウザ 画面の配信 模倣サーバー Chrome / Edge http://localhost:8000/… を開く python3 -m http.server 8000 HTML・CSS・JS を配る node mock-ai-server.js ポート 8789 APIキー不要 社内研修資料 | 3

用語の確認 初めての方に大事な言葉を、先に押さえます 用語 意味 例 コンテナ 必要な道具を入れた、実行用の箱 web-dev コンテナ イメージ コンテナを作る元の設計図 web-dev:1.0 模倣サーバー（モック） 本物と同じ形で答える練習用のサーバー mock-ai-server.js fetch JavaScript からサーバーへ送る命令 await fetch(...) 社内研修資料 | 4

環境の選び方 迷ったら、Windows で Docker Desktop と WSL 2 を使います 入口 手軽さ 本番に近さ おすすめの人 Windows ＋ Docker Desktop 高い 中 まず動かしたい人（推奨） WSL 2 の Ubuntu 中 高い Linux の操作を覚えたい人 Ubuntu（ネイティブ） 中 高い 普段から Linux を使う人 注意：プロジェクトは WSL の中（/home の下）に置くと、速く安定します。 社内研修資料 | 5

初回の手順（Windows） 一度だけ行う準備です 1 2 3 4 WSL 2 を入れる Docker Desktop を 入れる WSL 連携を有効に する 動作を確かめる PowerShell（管理者）で wsl --install -d Ubuntu インストール時に「Use WSL 2」を有効にする Docker Desktop の設定で Ubuntu を有効にする 社内研修資料 | 6 PowerShell で docker version（Client と Server ）

開発用コンテナを作り、起動する プロジェクトのフォルダで実行します ① イメージを作る（初回だけ） docker build -f docker/dev/Dockerfile -t web-dev:1.0 . ② コンテナを起動する（毎回） docker run --rm -it --shm-size=1g -v "${PWD}:/work" \ -p 8000:8000 -p 8789:8789 web-dev:1.0 bash -v：フォルダを見せる -p：ポートを開く --shm-size：ブラウザが落ちないための設定 社内研修資料 | 7

模倣サーバーを起動して確かめる コンテナの中で、2つの端末を使います 端末1：模倣サーバー node apps/memo-formatter/mock-ai-server.js 端末2：画面の配信 python3 -m http.server 8000 --bind 0.0.0.0 ブラウザで開く：http://localhost:8000/apps/memo-formatter/index.html 確かめ：送信すると、title に「テスト」が返る（応答が JSON で返る） 社内研修資料 | 8

ツールのファイル構成 役割を混ぜないことが、直しやすさの基本です ファイル 役割 直すとき index.html 画面の部品（入力欄・ボタン・結果） 文字や部品を変える style.css 色と余白（色は変数にまとめる） 見た目を変える app.js ボタンの処理・送信・表示 動きを変える config.js サーバーの場所。APIキーは書かない 接続先を変える mock-ai-server.js 模倣サーバー（決まったルールで整形） 応答の形を変える 社内研修資料 | 9

試験：2つの種類で確かめる 今回のツールでは、次の結果を確認しています 単体試験：6件 合格 関数1つを、速く、お金をかけずに確かめる。 実行：node --test apps/memo-formatter/test/parse.test.js 画面試験：9件 合格 ブラウザで実際に操作する。送信、分類、コピー、空入力、 404、接続不可を確かめる。 実行：python3 apps/memo-formatter/test/e2e_memo.py 注意：模倣での合格は、本物のサービスでの合格とは別です。本番の確認は、最後に少量で行います。 社内研修資料 | 10

よくあるつまずき 困ったら、まずこの表を確認します 症状 原因 対処 docker が認識されない Docker が未導入 Docker Desktop を入れて起動 Cannot connect to the Docker daemon Docker Desktop が停止 起動して Running を待つ 画面が「接続できません」 模倣サーバーが未起動 node で模倣サーバーを起動 Address already in use ポートが使用中 前の起動を止める。または PORT を変える ブラウザが落ちる 共有メモリ不足 --shm-size=1g を付ける 社内研修資料 | 11

安全のルール 社内の情報を守るための約束です • APIキーは config.js にだけ書く。コードや画面には書かない • config.js は共有しない。Git に入れない（.gitignore で除外） • 練習は、必ず模倣サーバーで行う。本物の利用は、規程に従って承認を得てから • 配るファイルに、APIキーや社内の情報が入っていないか確認する • 音声や文書をサーバーへ送るときは、社内規程の範囲内で扱う 社内研修資料 | 12

まとめと次のステップ 次回は、演習で整形ルールを1つ足します • 環境は Docker で揃える。コードはホストに置き、コンテナに 見せる • API は模倣で練習する。APIキーは使わない • 失敗は種類ごとに案内する。試験で、案内も確かめる • 試験は、単体と画面の2種類を使い分ける 社内研修資料 | 13 次のステップ ・演習1：整形ルールを1つ足す ・演習2：空入力の案内を変える ・Udemy 講座で、復習する