改めて整理する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 アプリのビルド・デプロイの基本
   

   View Slide

2. 自己紹介
   ● 名前：大嶋勇樹（Twitter：@oshima_123）
   ○ 最近はよく「しま」と呼ばれています
   ● キャリア
   ○ 都内の某 IT 企業 -> フリーランスエンジニア -> 会社設立
   ○ “ ”
   現在は 実務につき始めたエンジニアのスキルアップをサポート
   ○ 研修・勉強会の開催・Udemy 講座の作成など
   ● よく関わる技術分野
   ○ クラウド・コンテナ関連 (AWS、GCP、Docker、Kubernetes など)
   ○ Web アプリのビルド・デプロイまわりの整備はよく担当
   

   View Slide

3. Udemy 講座の紹介
   ● 今日の発表と関連しそうなテーマでは、以下のような講座を出しています
   Linuxとネットワークの基礎から学ぶDocker入門
   Linuxとネットワークの基礎知識からDockerを使った開発環境構築まで
   AWSコンテナサービス入門
   AWSの基本からECS・Copilot CLI・CI/CD・App Runnerまで
   GitHub Actionsで学ぶCI/CD入門
   ビルド・デプロイの基本からAPI自動テスト・AWSへの自動デプロイまで
   ↖️
   今日の発表は、こちらからも抜粋
   

   View Slide

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

   View Slide

5. 近年のアプリケーション開発の環境
   プログラミングの学習のステップアップとして、
   「自動ビルド・自動デプロイに挑戦したい」という声もよく耳にします
   近年の Web アプリケーションの開発では、開発効率の向上などを目指し
   自動ビルドや自動デプロイといった環境を整えることが増えています
   

   View Slide

6. しかし...
   ● Web アプリケーションの方式はどんどん複雑化しており、初学者にとって
   「そもそもビルドとは？デプロイとは？」という疑問を解消するハードルは
   高くなっています
   ● フレームワークを使ってなんとなくコードを書けるものの、自分が実装した
   Web アプリケーションがどのように動いているのかはよく分からない、公開
   するときはどうすればいいのかよく分からない、といった方は多いです
   

   View Slide

7. そこで今日は...
   Web アプリケーションにおける
   「ビルド」と「デプロイ」の基本を改めて整理します
   また、特に混乱を生みがちな、
   Node.js によるフロントエンドのビルドについても、
   まずおさえたい基本をまとめます
   ※ 初学者向けとして、SSR（Server Side Rendering）などの高度な手法にはふれず、
   　 サーバサイドで HTML を生成する方式の Web アプリケーションや、
   　 Web API を使った SPA（Single Page Application）などについての話になります
   

   View Slide

8. アジェンダ
   ● Web アプリケーションの構成の基本
   ● サーバサイドの「ビルド」「デプロイ」とは
   ● フロントエンドの「ビルド」「デプロイ」とは
   ● ビルドやデプロイの自動化
   

   View Slide

9. Web アプリケーションの構成の基本
   

   View Slide

10. まずおさえたい Web アプリケーションの構成
    1. 静的サイト ( Web
    ※ アプリケーションではありません)
    2. サーバサイドで HTML を生成する Web アプリケーション
    3. Web API（Ajax ）を使った Web アプリケーション
    4. Web API + SPA (Single Page Application)
    この他にも様々な構成がありますが、
    まずは上記の 4 つについて理解するのがおすすめです
    

    View Slide

11. 静的サイト
    ● Web サーバだけから成り立つ「静的サイト」では、
    固定の HTML や CSS などで Web サイトを実現することになります
    サーバ
    PC
    (クライアント)
    HTML
    Web サーバ
    ブラウザ
    HTTP
    リクエスト
    HTTP
    レスポンス
    CSS
    HTTP リクエストの内容に対応するファイルを
    特定のディレクトリから探してレスポンスに含める
    

    View Slide

12. サーバサイドで HTML を生成する Web アプリケーション
    ● 古典的な Web アプリケーションでは、サーバサイドの（サーバ上で動く）
    プログラムで HTML を生成して返します
    （例えば、Rails で ERB を使う、Laravel で Blade を使う、Spring で Thymeleaf を使う、といった場合が該当します）
    HTML
    Web サーバ
    ブラウザ
    HTTP
    リクエスト
    HTTP
    レスポンス
    アプリケーション データベース
    固定の HTML、CSS などは Web サーバが返し、
    プログラムによる処理が必要な場合はアプリケーションに依頼
    HTML
    CSS
    Java・Ruby 等
    HTML を生成して返す
    

    View Slide

13. Web API（Ajax ）を使った Web アプリケーション
    ● 画面にデータを表示したりする際に、Web API・Ajax を使う方法も定番です
    HTML
    Web サーバ
    ブラウザ アプリケーション
    データベース
    CSS
    JS
    JSON などを生成して
    返すプログラム (= Web API)
    HTML
    JS
    JSON
    JavaScript が通信し、
    レスポンスの JSON をもとに
    UI を書き換える (= Ajax)
    Java・Ruby 等
    

    View Slide

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 の取得は
    最初のページへのアクセス時のみ
    

    View Slide

15. Web アプリケーションの構成の基本
    ● ここまでに見てきた Web アプリケーションの方式では、どの場合でも
    「静的コンテンツ」と「サーバサイドのプログラム」の 2 種類が登場します
    HTML
    Web サーバ
    ブラウザ アプリケーション データベース
    CSS
    Java・Ruby 等
    JS
    静的コンテンツ
    固定の HTML や CSS、
    ブラウザ用の JavaScript など
    サーバサイドのプログラム
    HTML や JSON を生成して返す
    （様々な言語で実装される）
    

    View Slide

16. フロントエンドとは？（1/2）
    ● Web アプリケーションでは、ブラウザ上で処理される HTML や CSS、
    ブラウザ用の JavaScript などを「フロントエンド」と呼びます
    HTML
    Web サーバ
    ブラウザ アプリケーション データベース
    CSS
    JS
    HTML
    HTML を生成して返す
    Java・Ruby 等
    サーバサイドで HTML を生成する Web アプリケーションの場合、
    サーバサイドの一部もフロントエンドを担うような関係になります
    

    View Slide

17. フロントエンドとは？（2/2）
    ● サーバサイドが Web API となっている場合は、Web サーバで配信する静的
    コンテンツがフロントエンドとなります
    HTML
    Web サーバ
    ブラウザ
    アプリケーション
    (Web API) データベース
    CSS
    JS
    JSON
    JSON などを生成して返す
    Java・Ruby 等
    ここからは「静的コンテンツ = フロントエンド」となる
    Web API を使う方式で話を進めます（分かりやすいため）
    

    View Slide

18. サーバサイドの「ビルド」「デプロイ」とは
    

    View Slide

19. プログラムの実装からリリースまでのステップ
    ● プログラムを実装してからリリースするまでには、例えば以下のような
    ステップがあります
    ここから、最初はよく分からないとなりがちな
    「ビルド」とは何かを説明していきます
    実装・
    単体テスト
    テスト環境に
    デプロイ
    本番環境に
    デプロイ
    ビルド
    テスト環境で
    テスト
    

    View Slide

20. プログラムの実行方式
    ● プログラムには様々な実行方式があります
    ● 書いたコードをそのまま実行：Ruby / PHP / Python / JavaScript
    ● 機械語に変換して実行：C / C++ / Go
    ● 別の言語に変換して実行：Java / TypeScript
    ※ ここで言う「変換」は、明示的に他の形式のファイルに変換するしてから実行するかを指しています
    ※ 正確には言語ごとに 1 つの実行方式があるわけではないですが、各言語のメジャーな実行方式を書いています
    ここからは特に混乱されやすい
    JavaScript と TypeScript を例として扱います
    

    View Slide

21. TypeScript とは
    ● TypeScript は AltJS と呼ばれる、JavaScript の代替言語の 1 つです
    ● TypeScript は JavaScript に変換して実行するのが基本です
    TypeScript は Web アプリケーションの
    フロントエンドの開発でもサーバサイドの開発でもよく使われます
    hello.ts hello.js
    変換
    ブラウザや
    Node.js で実行
    

    View Slide

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
    

    View Slide

23. （補足）ブラウザで動く JavaScript がコマンドで動く？
    ● 実際には、コンピュータは JavaScript を動かすことはできません
    ● JavaScript のプログラムが動いているように見えるのは、JavaScript を
    動かすためのプログラムが動いているためです
    プログラミング言語
    JavaScript
    実行環境（ランタイム）
    ブラウザ
    Node.js
    「ブラウザや Node.js は JavaScript を動かすプログラムを含むため
    JavaScript を動かすことができている」ということです
    

    View Slide

24. TypeScript のビルドの例
    ● TypeScript で実装した Web アプリケーション（サーバサイド）を実行する
    ときは、一例として、以下のように 2 段階の変換を行います
    main.ts main.js
    コンパイル / トランスパイル
    TypeScript から
    JavaScript に変換
    lib.ts lib.js
    index.js
    バンドル / パッケージング / リンク
    1 ファイルにまとめる
    成果物（Artifact）
    node コマンドで
    実行する対象
    ソースコードをもとに、最終的に本番などのサーバで動かす形式に
    変換することを「ビルド」と言います
    

    View Slide

25. ビルドしたら...
    ● プログラムを実装してからリリースするまでのステップの例を再掲します
    実装・
    単体テスト
    テスト環境に
    デプロイ
    本番環境に
    デプロイ
    ビルド
    テスト環境で
    テスト
    ビルドが完了したら、次はテスト環境や本番環境へのデプロイです
    

    View Slide

26. サーバへのアップロード
    ● Web アプリケーションのサーバサイドは、ビルド成果物をサーバにアップ
    ロードして実行します
    本番などの環境
    アップロード
    ビルド
    ビルド成果物を本番などのサーバに配置することや、
    配置したビルド成果物を実行することを「デプロイ」と言います
    サーバ
    （コンピュータ）
    ※ アップロードする先はサーバではなく
    　 PaaS などの環境の場合もあります
    index.js
    

    View Slide

27. （補足 1）ビルドのないアプリケーション
    ● Ruby・PHP・Python などでは、ソースコードをそのままサーバにアップ
    ロードして実行するため形式を変換する「ビルド」は不要な場合があります
    ● 例として出した TypeScript で実装したアプリケーションでも、「ビルド」が
    必要かどうかは開発者の設定や使用するランタイム次第になります
    このように、アプリケーションによっては
    「ビルド」のステップが存在しない場合もあります
    

    View Slide

28. （補足 2 ）コンテナや VM のイメージのビルド
    ● コンテナや VM の「イメージ」を作成して、本番環境などで「イメージ」を
    もとにプログラムを動かす場合、「イメージ」の作成もビルドと呼びます
    ● 例えば TypeScript で実装した Web 　
    アプリケーション（サーバサイド）を
    コンテナとして実行する場合以下の 2 つのビルドが存在します
    ○ ソースコードのビルド
    ○ コンテナのイメージのビルド
    このように、ビルドの手順というのは、
    アプリケーションの設定や実行環境次第で変わります
    

    View Slide

29. フロントエンドの「ビルド」「デプロイ」とは
    

    View Slide

30. Web フロントエンドの動作の基本
    ● ブラウザは Web サーバに通信して、HTML・CSS や、ブラウザ用の
    JavaScript などを取得して処理します
    HTML
    Web サーバ
    ブラウザ
    CSS
    JS
    ソースコードの変換などが特に不要な場合、Web サーバの参照する
    ディレクトリにファイルを置くのがフロントエンドのデプロイです
    /var/www/html など
    設定されたディレクトリを参照
    ※ Web サーバではなく、Netlify などの
    　 静的サイトホスティングサービスを
    　 使うこともあります
    

    View Slide

31. React や Vue.js などのフレームワークを使った開発
    ● 近年は、Web アプリケーションのフロントエンドを実装するために、
    React や Vue.js といったフレームワークを使うことが多いです
    ● React や Vue.js を使った開発では、「.jsx」や「.vue」といった、専用の
    形式のファイルを作成して実装することがほとんどです
    

    View Slide

32. .jsx や .vue ファイルのビルド
    ● ブラウザは、「.jsx」や「.vue」といったファイルを処理できません
    ● そのため、「.jsx」や「.vue 」などのファイルは JavaScript に変換してから
    Web サーバで配信します
    ソースコードを JavaScript に変換したり、JavaScript の複数の
    ファイルを 1 つにまとめたりするのが、フロントエンドのビルドです
    HTML
    Web サーバ
    ブラウザ
    CSS
    JS
    .vue
    .jsx
    変換
    

    View Slide

33. フロントエンド開発における Node.js
    ● フロントエンドのビルドには、Node.js のエコシステムとして使えるツールを
    使用することが多いです
    ● また、フロントエンドの開発時には「npm run dev」などのコマンドで開発
    用の Web サーバを起動して動作確認しながら実装することも多いです
    （このときも Node.js のエコシステムを使用します）
    フロントエンドの開発で Node.js を使うというのは、
    本番での実行時ではなく、開発やビルドに使うというのが第一歩です
    ※ より高度なトピックとして SSR（Server Side Rendering）などがあります
    

    View Slide

34. ここまでのまとめ
    ● ここまでの内容を図にすると以下のようになります
    本番などの環境
    デプロイ
    ビルド
    Web サーバ
    を動かすサーバ
    （コンピュータ）
    ※ Web サーバとアプリケーションは
    　 同じサーバ（コンピュータ）で動かすこともあります
    フロントエンドの
    ソースコード
    成果物
    ブラウザ データベース
    デプロイ
    ビルド
    アプリケーション
    を動かすサーバ
    （コンピュータ）
    サーバサイドの
    ソースコード
    成果物
    

    View Slide

35. ビルドやデプロイの自動化
    

    View Slide

36. ビルドツール
    ● 多数のソースコードをもとにコンパイルなどの操作を行うビルドは、ビルド
    ツールを使って 1 コマンドで実行できるよう自動化することが多いです
    ● プログラミング言語や実行環境によって、様々なビルドツールがあります
    ○ Make、Rake、Gradle などなど
    最近のフレームワークを使った開発では、
    ある程度自動的にビルドツールが設定される場合もあります
    

    View Slide

37. CI (Continuous Integration) とは
    ● ソースコードのビルドや自動テストを開発者の PC だけで実行していると、
    「特定の開発者の PC でしかビルドや自動テストが成功しない」ということ
    になりやすいです
    ● このような状況を防ぐため、GitHub 等へのソースコードのアップロードを
    トリガとして、ビルドや自動テストを専用の環境で自動的に実行するという
    手法があります
    このような手法を CI（継続的インテグレーション）と呼びます
    

    View Slide

38. CI の流れの例
    ● CI の流れは例えば以下のようになります
    CI 環境としては自分でサーバを用意することもできますが、
    GitHub Actions や CircleCI などのサービスを使うことも多いです
    git push trigger
    build
    test
    CI 環境
    GitHub
    

    View Slide

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
    

    View Slide

40. CD (Continuous Delivery/Continuous Deployment) とは
    ● ソースコードの push したら自動テストやビルドを実行する「CI」に加えて
    ● 本番環境へのデプロイ準備までを自動で実行したり
    ● 本番環境への実際のデプロイまでを自動で実行する
    という手法があります
    このような手法を
    CD（継続的デリバリーまたは継続的デプロイメント）と呼びます
    

    View Slide

41. CI/CD
    ● CI と CD を組み合わせて「CI/CD」と呼びます
    ● CI/CD の構築は難しそうに見えますが、手作業でビルド・デプロイできれば
    そこからステップアップとして取り組むハードルは高くないです
    特に GitHub Actions は非常に気軽に使えるので、
    ぜひさわってみてください
    git push trigger deploy
    build
    test
    本番などの環境
    サーバ
    （コンピュータ）
    GitHub Actions
    GitHub
    

    View Slide

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

    View Slide

43. まとめ
    ● 「ビルド」とは、ソースコードをもとに本番などのサーバで動かす形式に
    変換すること
    ● 「デプロイ」とは、ビルド成果物を本番などのサーバに配置することや、
    配置したビルド成果物を実行すること
    ● GitHub Actions などを使って CI/CD の仕組みを構築することも多いです
    「そもそもビルドとは？デプロイとは？」といった
    疑問が解消していれば嬉しいです
    

    View Slide

44. 宣伝
    ● Udemy で「GitHub Actions で学ぶ CI/CD 入門」という講座を出しています
    GitHub Actions で学ぶ CI/CD 入門
    GitHub Actions での CI/CD をテーマに
    自動テストやビルド・デプロイの基本から
    AWS への自動デプロイまで学習する講座です！
    エラーの解決や疑問点なども、できるだけサポートします
    クーポン付き URL を共有させていただくので、
    ハンズオンもしてみたい方は是非手に取ってみてください
    

    View Slide