GitHubによるWebアプリケーションのデプロイ / 07-github-deploy

Transcript

1. 1 36 演習： 慶應義塾大学理工学部物理情報工学科 渡辺 2026年3月9日 計算物理春の学校2026「計算物理屋のためのGit/GitHub入門」 GitHubによる ウェブアプリケーションのデプロイ

2. 2 36 今回の目標 • GitHub Pagesを使ってウェブサイトを公開する • MNISTの学習済みモデルをウェブで試す • 簡単なブラウザゲームを作る

3. 3 36 ウェブサーバとは 我々がインターネットを閲覧する時、クライアントとウェブサーバが通信している クライアント ウェブサーバ サーバのローカルデータ Chrome Safari Firefox

   Edgeなど Apache nginxなど

4. 4 36 ウェブサーバとは クライアントが要求するのはURL (Uniform Resource Location) https://www.mext.go.jp/a_menu/shotou/new-cs/index.htm プロトコル ホスト＋ドメイン名

   ディレクトリ ファイル名 https://www.mext.go.jp/a_menu/shotou/new-cs/index.htm

5. 5 36 ウェブサーバとは https://www.mext.go.jp/a_menu/shotou/new-cs/index.htm プロトコル ホスト＋ドメイン名 ディレクトリ ファイル名 https://www.mext.go.jp/a_menu/shotou/new-cs/index.htm 1.

   httpsというプロトコルで 2. mext.go.jpというドメインに所属する 3. wwwというマシンの 4. a_menu/shotou/new-csというディレクトリにある 5. index.htmlというファイルの情報をください サーバのローカルデータ サーバ ブラウザ

6. 6 36 ウェブサーバとは 実際にはサーバにはIPアドレスという番号が振られている サーバにアクセスするためにはIPアドレスが必要 「www.mext.go.jp」のIPアドレスを 教えてください 202.238.130.103 です ホスト名とドメイン名を合わせて

   FQDN(Fully Qualified Domain Name)と呼ぶ FQDNからIPアドレスを教えてくれるのがDNS (Domain Name System) DNS クライアント

7. 7 36 ウェブサーバとは ウェブページを公開するためには • グローバルIPアドレスを持つサーバの • 適切なディレクトリに • ファイルをアップロードする

   必要がある サーバの ローカルストレージ サーバ

8. 8 36 GitHub Pages GitHub に公開しているリポジトリから、HTMLやJavaScript, CSSなどを取得し、ウェブサイトを公開できる静的ホスティ ングサービス 外からウェブサイトとして 閲覧できる

   ウェブサイトとして公開する リポジトリ、ブランチ、 ディレクトリを指定

9. 9 36 課題1 - Step 1 リポジトリのFork https://github.com/cpss2026-git/pages- sample にアクセスして、Forkボタンを押す

10. 10 36 課題1 - Step 1 こんな画面になるので「Create Fork」 ボタンを押す 自分のアカウントにリポジトリが

    コピーされる

11. 11 36 課題1 - Step 2 Pagesの設定 Forkされたリポジトリ(自分のアカウントに表示されたもの)のSettingsを押す

12. 12 36 課題1 - Step 2 １ 2 3 4

    1. Pagesを選ぶ 2. mainブランチを選ぶ 3. フォルダは /docsを選ぶ 4. Saveを押す

13. 13 36 課題1 - Step 2 Saveボタンを押してから数分待ってからリロード 「Your site is

    live at ....」という表示が現れたら「Visit site」をクリック

14. 14 36 課題1 - Step 3 数字認識できることを確認 マウスでここに入力 判定結果 ニューラルネットへの

    入力画像

15. 15 36 課題1 - Step 4 認識が誤判定するような入力を試す 判定失敗 なぜ、どのような時に誤認識しやすいか？

16. 16 36 課題2 - Step 1 https://github.com/cpss2026-git/tyrano-sample をforkする

17. 17 36 課題2 - Step 2 先ほどと同様の手順でPagesを公開する １ 2 3

    4 5

18. 18 36 課題2 - Step 2 Saveボタンを押して数分待ってからリロード 「Your site is

    live at ....」という表示が現れたら「Visit site」をクリック

19. 19 36 課題2 - Step 2 こんな画面が出たら成功 テストプレイをしてみよう マウスクリックでメッセージ送り 選択肢が出たらマウスクリックで選ぶ

20. 20 36 課題2 - Step 3 リポジトリのクローンのため、リモートURLをコピー 1 2 3

    4 1. 自分のアカウントの 2. Codeをクリックし 3. SSHを選んで 4. コピーボタンを押す

21. 21 36 課題2 - Step 3 cd cd github git

    clone [email protected]:watanabe/tyrano-sample.git cd tyrano_sample Git Bashで以下を実行 ここはコピーされているはずなので、マウス右クリックから「Paste」

22. 22 36 課題2 - Step ３ VS Codeの「フォルダーを開く」で「~/github/tyrano-sample」を開く ここにTYRANO-SAMPLEと表示される

23. 23 36 ブラウザのセキュリティ ブラウザは勝手にローカルファイルにアクセスできない もしアクセスできると、悪意あるサイトに個人情報を 引き抜かれる可能性がある クライアント ウェブサーバ 原則として、ユーザが直接指定したファイルのみ サーバに送信できる

24. 24 36 ブラウザのセキュリティ ブラウザはローカルファイルを自由に見ることができない → ブラウザゲームのローカルでのテストができない 解決策１：ブラウザのセキュリティレベルを下げる(非推奨) 解決策２：ローカルにウェブサーバを立てる ローカルストレージ ウェブサーバ

    ウェブサーバの ローカルなのでアクセスできる ブラウザ 動作確認 ファイル修正

25. 25 36 課題2 - Step 4 1. 拡張機能をクリック 2. 検索窓に「Live

    Server」と入力 3. インストール

26. 26 36 課題2 - Step 4 1. docs/index.htmlを開く 2. Go

    Liveをクリック

27. 27 36 課題2 - Step 4 ブラウザが開いてゲームができれば成功 このタブはデバッグに使うので閉じない事

28. 28 36 課題2 - Step 5 docs/data/scenario/first.ksを開く

29. 29 36 課題2 - Step 5 *start [title name="怒れセリヌンティウス"] [hidemenubutton]

    [wait time=200] [freeimage layer="base"] タイトルを変更して保存する

30. 30 36 課題2 - Step 5 タイトルが変更されれば成功

31. 31 36 課題2 - Step 6 first.ksを修正し、オリジナルゲームを作成する 必要に応じて画像ファイルを追加する 背景画像は docs/data/bgimageにファイルを置く

32. 32 36 課題2 - Step 7 first.ksの保存忘れに注意。push前に保存すること。 VS Codeのファイル名のタブの隣が•になっていたら、保存されていない Xになっていたら大丈夫

33. 33 36 課題2 - Step 7 Git Bashで、カレントディレクトリが /z/github/tyrano_sampleになっていることを確認 以下の手順でpushする

    git add . git commit -m “updates” git push

34. 34 36 課題2 - Step 7 GitHub Pagesで動作確認 1 2

    3 Visit siteをクリックして現れたページで自分のゲームが表示されれば成功

35. 35 36 課題2 - 公開と注意 • 公序良俗に反するような内容にしてはならない。 • (たとえ友人であっても)特定個人を揶揄するような内容にしてはなら ない。有名人も題材としない。

    • 画像を用いる場合は、ライセンスに問題ないものを利用する。 • 面白い作品は別の場所で紹介する可能性があるため、紹介されたくな い場合はその旨をレポートに明記すること。 注意： ゲームの公開 https://アカウント名.github.io/tyrano-sample 以下のURLを共有することで、誰でもゲームをプレイできる 面白いゲームができたら春の学校DiscordやLINEなどに投稿してください

36. 36 36 過去に講義で学生が作成した作品集 https://appi-github.github.io/sample_games/