改めて整理するWebアプリのビルド・デプロイの基本

●発表の中で紹介しているUdemy講座：https://www.nextskill.co.jp/courses

===

近年のWebアプリケーション開発では、開発効率の向上などを目指して、自動ビルドや自動デプロイといった環境を整えることが増えています。

一方で、Webアプリケーションの方式はどんどん複雑化しており、初学者にとっては「そもそもビルドとは？デプロイとは？」といった疑問を解消するハードルが高くなっています。

そこでこの勉強会では、Webアプリケーションにおける「ビルド」と「デプロイ」の基本を改めて整理します。

また、特に混乱を生みがちな、Node.jsによるフロントエンドのビルドについても、まずおさえたい基本を解説します。

※ 初学者向けとして、SSR（Server Side Rendering）などの高度な手法にはふれず、サーバサイドでHTMLを生成する方式のWebアプリケーションや、Web APIを使ったSPA（Single Page Application）などについての解説となります。

Transcript

1. 改めて整理する Web アプリのビルド・デプロイの基本
2. 自己紹介 • 名前：大嶋勇樹（Twitter：@oshima_123） ◦ 最近はよく「しま」と呼ばれています • キャリア ◦ 都内の某 IT 企業 -> フリーランスエンジニア -> 会社設立 ◦ “ ” 現在は 実務につき始めたエンジニアのスキルアップをサポート ◦ 研修・勉強会の開催・Udemy 講座の作成など • よく関わる技術分野 ◦ クラウド・コンテナ関連 (AWS、GCP、Docker、Kubernetes など) ◦ Web アプリのビルド・デプロイまわりの整備はよく担当
3. Udemy 講座の紹介 • 今日の発表と関連しそうなテーマでは、以下のような講座を出しています Linuxとネットワークの基礎から学ぶDocker入門 Linuxとネットワークの基礎知識からDockerを使った開発環境構築まで AWSコンテナサービス入門 AWSの基本からECS・Copilot CLI・CI/CD・App Runnerまで GitHub Actionsで学ぶCI/CD入門 ビルド・デプロイの基本からAPI自動テスト・AWSへの自動デプロイまで ↖️ 今日の発表は、こちらからも抜粋
4. 改めて整理する Web アプリのビルド・デプロイの基本
5. 近年のアプリケーション開発の環境 プログラミングの学習のステップアップとして、 「自動ビルド・自動デプロイに挑戦したい」という声もよく耳にします 近年の Web アプリケーションの開発では、開発効率の向上などを目指し 自動ビルドや自動デプロイといった環境を整えることが増えています
6. しかし... • Web アプリケーションの方式はどんどん複雑化しており、初学者にとって 「そもそもビルドとは？デプロイとは？」という疑問を解消するハードルは 高くなっています • フレームワークを使ってなんとなくコードを書けるものの、自分が実装した Web アプリケーションがどのように動いているのかはよく分からない、公開 するときはどうすればいいのかよく分からない、といった方は多いです
7. そこで今日は... Web アプリケーションにおける 「ビルド」と「デプロイ」の基本を改めて整理します また、特に混乱を生みがちな、 Node.js によるフロントエンドのビルドについても、 まずおさえたい基本をまとめます ※ 初学者向けとして、SSR（Server Side Rendering）などの高度な手法にはふれず、 　 サーバサイドで HTML を生成する方式の Web アプリケーションや、 　 Web API を使った SPA（Single Page Application）などについての話になります
8. アジェンダ • Web アプリケーションの構成の基本 • サーバサイドの「ビルド」「デプロイ」とは • フロントエンドの「ビルド」「デプロイ」とは • ビルドやデプロイの自動化
9. Web アプリケーションの構成の基本
10. まずおさえたい Web アプリケーションの構成 1. 静的サイト ( Web ※ アプリケーションではありません) 2. サーバサイドで HTML を生成する Web アプリケーション 3. Web API（Ajax ）を使った Web アプリケーション 4. Web API + SPA (Single Page Application) この他にも様々な構成がありますが、 まずは上記の 4 つについて理解するのがおすすめです
11. 静的サイト • Web サーバだけから成り立つ「静的サイト」では、 固定の HTML や CSS などで Web サイトを実現することになります サーバ PC (クライアント) HTML Web サーバ ブラウザ HTTP リクエスト HTTP レスポンス CSS HTTP リクエストの内容に対応するファイルを 特定のディレクトリから探してレスポンスに含める
12. サーバサイドで HTML を生成する Web アプリケーション • 古典的な Web アプリケーションでは、サーバサイドの（サーバ上で動く） プログラムで HTML を生成して返します （例えば、Rails で ERB を使う、Laravel で Blade を使う、Spring で Thymeleaf を使う、といった場合が該当します） HTML Web サーバ ブラウザ HTTP リクエスト HTTP レスポンス アプリケーション データベース 固定の HTML、CSS などは Web サーバが返し、 プログラムによる処理が必要な場合はアプリケーションに依頼 HTML CSS Java・Ruby 等 HTML を生成して返す
13. Web API（Ajax ）を使った Web アプリケーション • 画面にデータを表示したりする際に、Web API・Ajax を使う方法も定番です HTML Web サーバ ブラウザ アプリケーション データベース CSS JS JSON などを生成して 返すプログラム (= Web API) HTML JS JSON JavaScript が通信し、 レスポンスの JSON をもとに UI を書き換える (= Ajax) Java・Ruby 等
14. Web API + SPA (Single Page Application) • さらに画面遷移も JavaScript による UI の書き換えで実現するのが SPA です HTML Web サーバ ブラウザ アプリケーション データベース CSS JS JSON などを生成して 返すプログラム (= Web API) HTML JS JSON JavaScript が通信し、 レスポンスの JSON をもとに UI を書き換える (= Ajax) Java・Ruby 等 HTML・JS の取得は 最初のページへのアクセス時のみ
15. Web アプリケーションの構成の基本 • ここまでに見てきた Web アプリケーションの方式では、どの場合でも 「静的コンテンツ」と「サーバサイドのプログラム」の 2 種類が登場します HTML Web サーバ ブラウザ アプリケーション データベース CSS Java・Ruby 等 JS 静的コンテンツ 固定の HTML や CSS、 ブラウザ用の JavaScript など サーバサイドのプログラム HTML や JSON を生成して返す （様々な言語で実装される）
16. フロントエンドとは？（1/2） • Web アプリケーションでは、ブラウザ上で処理される HTML や CSS、 ブラウザ用の JavaScript などを「フロントエンド」と呼びます HTML Web サーバ ブラウザ アプリケーション データベース CSS JS HTML HTML を生成して返す Java・Ruby 等 サーバサイドで HTML を生成する Web アプリケーションの場合、 サーバサイドの一部もフロントエンドを担うような関係になります
17. フロントエンドとは？（2/2） • サーバサイドが Web API となっている場合は、Web サーバで配信する静的 コンテンツがフロントエンドとなります HTML Web サーバ ブラウザ アプリケーション (Web API) データベース CSS JS JSON JSON などを生成して返す Java・Ruby 等 ここからは「静的コンテンツ = フロントエンド」となる Web API を使う方式で話を進めます（分かりやすいため）
18. サーバサイドの「ビルド」「デプロイ」とは
19. プログラムの実装からリリースまでのステップ • プログラムを実装してからリリースするまでには、例えば以下のような ステップがあります ここから、最初はよく分からないとなりがちな 「ビルド」とは何かを説明していきます 実装・ 単体テスト テスト環境に デプロイ 本番環境に デプロイ ビルド テスト環境で テスト
20. プログラムの実行方式 • プログラムには様々な実行方式があります • 書いたコードをそのまま実行：Ruby / PHP / Python / JavaScript • 機械語に変換して実行：C / C++ / Go • 別の言語に変換して実行：Java / TypeScript ※ ここで言う「変換」は、明示的に他の形式のファイルに変換するしてから実行するかを指しています ※ 正確には言語ごとに 1 つの実行方式があるわけではないですが、各言語のメジャーな実行方式を書いています ここからは特に混乱されやすい JavaScript と TypeScript を例として扱います
21. TypeScript とは • TypeScript は AltJS と呼ばれる、JavaScript の代替言語の 1 つです • TypeScript は JavaScript に変換して実行するのが基本です TypeScript は Web アプリケーションの フロントエンドの開発でもサーバサイドの開発でもよく使われます hello.ts hello.js 変換 ブラウザや Node.js で実行
22. Node.js とは • Node.js は、JavaScript の実行環境の 1 種です • Node.js を使うと、node コマンドで JavaScript を実行できます • Node.js は、「サーバサイドで動く（≒ コマンドで実行できる） JavaScript の実行環境」のように説明されることがあります hello.js ターミナル console.log('hello node') $ node hello.js hello node
23. （補足）ブラウザで動く JavaScript がコマンドで動く？ • 実際には、コンピュータは JavaScript を動かすことはできません • JavaScript のプログラムが動いているように見えるのは、JavaScript を 動かすためのプログラムが動いているためです プログラミング言語 JavaScript 実行環境（ランタイム） ブラウザ Node.js 「ブラウザや Node.js は JavaScript を動かすプログラムを含むため JavaScript を動かすことができている」ということです
24. TypeScript のビルドの例 • TypeScript で実装した Web アプリケーション（サーバサイド）を実行する ときは、一例として、以下のように 2 段階の変換を行います main.ts main.js コンパイル / トランスパイル TypeScript から JavaScript に変換 lib.ts lib.js index.js バンドル / パッケージング / リンク 1 ファイルにまとめる 成果物（Artifact） node コマンドで 実行する対象 ソースコードをもとに、最終的に本番などのサーバで動かす形式に 変換することを「ビルド」と言います
25. ビルドしたら... • プログラムを実装してからリリースするまでのステップの例を再掲します 実装・ 単体テスト テスト環境に デプロイ 本番環境に デプロイ ビルド テスト環境で テスト ビルドが完了したら、次はテスト環境や本番環境へのデプロイです
26. サーバへのアップロード • Web アプリケーションのサーバサイドは、ビルド成果物をサーバにアップ ロードして実行します 本番などの環境 アップロード ビルド ビルド成果物を本番などのサーバに配置することや、 配置したビルド成果物を実行することを「デプロイ」と言います サーバ （コンピュータ） ※ アップロードする先はサーバではなく 　 PaaS などの環境の場合もあります index.js
27. （補足 1）ビルドのないアプリケーション • Ruby・PHP・Python などでは、ソースコードをそのままサーバにアップ ロードして実行するため形式を変換する「ビルド」は不要な場合があります • 例として出した TypeScript で実装したアプリケーションでも、「ビルド」が 必要かどうかは開発者の設定や使用するランタイム次第になります このように、アプリケーションによっては 「ビルド」のステップが存在しない場合もあります
28. （補足 2 ）コンテナや VM のイメージのビルド • コンテナや VM の「イメージ」を作成して、本番環境などで「イメージ」を もとにプログラムを動かす場合、「イメージ」の作成もビルドと呼びます • 例えば TypeScript で実装した Web 　 アプリケーション（サーバサイド）を コンテナとして実行する場合以下の 2 つのビルドが存在します ◦ ソースコードのビルド ◦ コンテナのイメージのビルド このように、ビルドの手順というのは、 アプリケーションの設定や実行環境次第で変わります
29. フロントエンドの「ビルド」「デプロイ」とは
30. Web フロントエンドの動作の基本 • ブラウザは Web サーバに通信して、HTML・CSS や、ブラウザ用の JavaScript などを取得して処理します HTML Web サーバ ブラウザ CSS JS ソースコードの変換などが特に不要な場合、Web サーバの参照する ディレクトリにファイルを置くのがフロントエンドのデプロイです /var/www/html など 設定されたディレクトリを参照 ※ Web サーバではなく、Netlify などの 　 静的サイトホスティングサービスを 　 使うこともあります
31. React や Vue.js などのフレームワークを使った開発 • 近年は、Web アプリケーションのフロントエンドを実装するために、 React や Vue.js といったフレームワークを使うことが多いです • React や Vue.js を使った開発では、「.jsx」や「.vue」といった、専用の 形式のファイルを作成して実装することがほとんどです
32. .jsx や .vue ファイルのビルド • ブラウザは、「.jsx」や「.vue」といったファイルを処理できません • そのため、「.jsx」や「.vue 」などのファイルは JavaScript に変換してから Web サーバで配信します ソースコードを JavaScript に変換したり、JavaScript の複数の ファイルを 1 つにまとめたりするのが、フロントエンドのビルドです HTML Web サーバ ブラウザ CSS JS .vue .jsx 変換
33. フロントエンド開発における Node.js • フロントエンドのビルドには、Node.js のエコシステムとして使えるツールを 使用することが多いです • また、フロントエンドの開発時には「npm run dev」などのコマンドで開発 用の Web サーバを起動して動作確認しながら実装することも多いです （このときも Node.js のエコシステムを使用します） フロントエンドの開発で Node.js を使うというのは、 本番での実行時ではなく、開発やビルドに使うというのが第一歩です ※ より高度なトピックとして SSR（Server Side Rendering）などがあります
34. ここまでのまとめ • ここまでの内容を図にすると以下のようになります 本番などの環境 デプロイ ビルド Web サーバ を動かすサーバ （コンピュータ） ※ Web サーバとアプリケーションは 　 同じサーバ（コンピュータ）で動かすこともあります フロントエンドの ソースコード 成果物 ブラウザ データベース デプロイ ビルド アプリケーション を動かすサーバ （コンピュータ） サーバサイドの ソースコード 成果物
35. ビルドやデプロイの自動化
36. ビルドツール • 多数のソースコードをもとにコンパイルなどの操作を行うビルドは、ビルド ツールを使って 1 コマンドで実行できるよう自動化することが多いです • プログラミング言語や実行環境によって、様々なビルドツールがあります ◦ Make、Rake、Gradle などなど 最近のフレームワークを使った開発では、 ある程度自動的にビルドツールが設定される場合もあります
37. CI (Continuous Integration) とは • ソースコードのビルドや自動テストを開発者の PC だけで実行していると、 「特定の開発者の PC でしかビルドや自動テストが成功しない」ということ になりやすいです • このような状況を防ぐため、GitHub 等へのソースコードのアップロードを トリガとして、ビルドや自動テストを専用の環境で自動的に実行するという 手法があります このような手法を CI（継続的インテグレーション）と呼びます
38. CI の流れの例 • CI の流れは例えば以下のようになります CI 環境としては自分でサーバを用意することもできますが、 GitHub Actions や CircleCI などのサービスを使うことも多いです git push trigger build test CI 環境 GitHub
39. CI サービス・ツールの設定のイメージ • 例えば GitHub Actions では 右のような設定ファイルを書きます • 最近の CI サービス・ツールでは このように YAML 形式で設定を 書くことが多いです CI サービス・ツールではソースコードの push などをトリガーとして あらかじめ設定したコマンドを自由に実行できます name: build on: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 16.x - run: npm ci - run: npm run test - run: npm run build
40. CD (Continuous Delivery/Continuous Deployment) とは • ソースコードの push したら自動テストやビルドを実行する「CI」に加えて • 本番環境へのデプロイ準備までを自動で実行したり • 本番環境への実際のデプロイまでを自動で実行する という手法があります このような手法を CD（継続的デリバリーまたは継続的デプロイメント）と呼びます
41. CI/CD • CI と CD を組み合わせて「CI/CD」と呼びます • CI/CD の構築は難しそうに見えますが、手作業でビルド・デプロイできれば そこからステップアップとして取り組むハードルは高くないです 特に GitHub Actions は非常に気軽に使えるので、 ぜひさわってみてください git push trigger deploy build test 本番などの環境 サーバ （コンピュータ） GitHub Actions GitHub
42. 改めて整理する Web アプリのビルド・デプロイの基本
43. まとめ • 「ビルド」とは、ソースコードをもとに本番などのサーバで動かす形式に 変換すること • 「デプロイ」とは、ビルド成果物を本番などのサーバに配置することや、 配置したビルド成果物を実行すること • GitHub Actions などを使って CI/CD の仕組みを構築することも多いです 「そもそもビルドとは？デプロイとは？」といった 疑問が解消していれば嬉しいです
44. 宣伝 • Udemy で「GitHub Actions で学ぶ CI/CD 入門」という講座を出しています GitHub Actions で学ぶ CI/CD 入門 GitHub Actions での CI/CD をテーマに 自動テストやビルド・デプロイの基本から AWS への自動デプロイまで学習する講座です！ エラーの解決や疑問点なども、できるだけサポートします クーポン付き URL を共有させていただくので、 ハンズオンもしてみたい方は是非手に取ってみてください