デプロイ講座_福プロ.pdf

Transcript

1. デプロイ講座 ~Webアプリを公開してみよう！~ 福プロ 2025-07-23 いとじゅん / @itojum1230 1
2. 目次 はじめに 1 Webアプリケーションの仕組み 2 デプロイとは 3 Webアプリを動かしてみよう！ 4 デプロイしてみよう！ 5 まとめ 6 2
3. 準備してもらったもの PC GitHubアカウント インストールしているもの Node.js Git 準備できてない方はこの後の時間で準備お願いします はじめに 3
4. めっちゃ簡略化するとこんな感じ Webアプリケーションの仕組み 4
5. 今回の講座の内容だとこんな感じ Webアプリケーションの仕組み 5
6. デプロイとは 6
7. 以下のリポジトリをforkして、cloneしてください https://github.com/itojum/deploy_course Webアプリを動かしてみよう！ 7
8. READMEの実行方法に従って実行してみてください Webアプリを動かしてみよう！ 8
9. 簡単にグローバルに公開するためには、 クラウドサービスを使うのがおすすめです Cloudflare Pages、GitHub Pages、Vercelを利用します 時間がある人はWebアプリのコードリーディングや 改造をしてみてください デプロイしてみよう！ 9
10. Cloudflare Pages Cloudflareのサービスの1つ 無料で結構いい感じに動く 凝ったアプリをデプロイするときは、Cloudflare Workersを使 う デプロイしてみよう！Cloudflare Pages編 10
11. 1. Cloudflareのアカウントを作成 - Googleログインがおすすめ 2. 「アプリケーションを作成す る」をクリック 3. Pagesを選択 4. 「既存のGitリポジトリをインポ ートする」 デプロイしてみよう！Cloudflare Pages編 11
12. 5. deploy_course リポジトリを選 択 6. ビルド出力ディレクトリに tetris を入力 7. 「保存してデプロイする」 デプロイしてみよう！Cloudflare Pages編 12
13. 8. デプロイが完了すると、 URLが表示されます 9. URLをクリックして表示さ れたら完了 デプロイしてみよう！Cloudflare Pages編 13
14. GitHub Pages GitHubのサービスの1つ 静的なWebアプリをデプロイするのには使える サーバーサイドは無理 デプロイしてみよう！GitHub Pages編 14
15. 1. forkしたリポジトリ のSettingsを開く 2. Pagesを開く 3. Branchのmainを選 択 4. 「Save」をクリック デプロイしてみよう！GitHub Pages編 15
16. 5. Actionsタブを開く 6. これが になったらク リック デプロイしてみよう！GitHub Pages編 16
17. https://[ユーザー名].github.io/deploy_course/quiz/ 7. 表示されたら完了 デプロイしてみよう！GitHub Pages編 17
18. Vercel Web系のライブラリやフレームワークを大体デプロイできる Next.jsのデプロイをするならVercelが最適 今回はReactのアプリをデプロイしてみる デプロイしてみよう！Vercel編 18
19. 1. Vercelのアカウントを作成 2. 「Add New...」→「Project」 をクリック 3. deploy_course リポジトリを import 4. Root DirectoryのEditをクリッ クして todo を選択 5 「Deploy」をクリック デプロイしてみよう！Vercel編 19
20. 6. アプリの画面をクリック 7. 表示されたら完了 デプロイしてみよう！Vercel編 20
21. Webアプリケーションの仕組み ユーザー、ブラウザ、サーバー デプロイは割と簡単にできる 今回はGitHub Pages、Cloudflare Pages、 Vercelを利用した どれが簡単だったかな? 自分が作ったアプリを公開してみよう！ まとめ 21