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