ソフトウェア工学2023

1. ソフトウェア工学
nCI/CD
• 継続的インテグレーション，継続的デリバリ，継続的デプロ
イ，DevOps，GitHub，render，webアプリ
玉木徹（名工大）

2. サイクルを伴う開発

3. 代表的な開発プロセス
n一方通行の開発
• モデル
• ウォーターフォール
• V字
• 上流が下流に影響
• 終わるまで始められない
• 遅れたらしわ寄せ
nサイクルを伴う開発
• モデル
• プロトタイピング
• スパイラル
• アジャイル
• 工程を何度も繰り返す
• 顧客の意見を確認し取り入れる
• 顧客に途中の成果物を見せる
• プロトタイプ
• モックアップ（モック）
• 顧客との信頼関係を築く

4. システム開発を運用までループ化する
n開発ループ
• コーディング，ビルド，テスト，デリバリ（納品）・デプロイ（運用）
• 効率の悪い部分
• ビルドとテストに人手がかかる
• デプロイのために実稼働システムを止めて更新しなければならない
n改善策
• ビルドとテストの自動化：継続的インテグレーション（CI）
• デリバリ・デプロイの自動化：継続的デリバリ（CD）継続的デプロイ（CD）
• 止めない・止まらないサービスの実現

5. DevOps＝開発＋運用
nDevelopment + Operations
nhttps://ja.wikipedia.org/wiki/DevOps
• ソフトウェア開発手法の一つ
• 開発 (Development) と運用 (Operations) を組み合わせた語
• 開発担当者と運用担当者が連携して協力する（さらに両担当者の境目もあいま
いにする）開発手法
• ソフトウェアを迅速にビルドおよびテストする文化と環境により、確実な
リリースを、以前よりも迅速に高い頻繁で可能とする組織体制の構築を目
指す
nDevOpsを実現するための方法
• アジャイル・スクラム，CI/CD
Illustration showing stages in a DevOps toolchainKharnagy - Own work
CC BY-SA 4.0

6. DevOpsの派生
nMLOps：機械学習のDevOps
• MLOpsとは？DevOpsとの違いや
機械学習プロジェクトに求められ
る理由, Alsmily, 2023/4/18
• MLOps（機械学習基盤）とは？
AIOpsとの違い, @IT, 2019/11/21
nAIOps：AIのDevOps
• 特集：AIOpsとは何か〜インフラ運
用、AIで変わること、変わらないこ
と〜, @IT
• AIOpsとは何か？ 事例や市場、実
際のツールまで一挙に解説, ビジネ
ス+IT, 2023/3/14

7. 継続的インテグレーション

8. 継続的インテグレーション（CI）
nCI（Continuous Integration）
• コードの変更を定期的に中央リポ
ジトリのメインブランチにpushす
る
• すべての開発者が，1日に数回
から数十回も行う
• push・プルリクされたらビルドと
テストを自動実行
• ビルドとテストが成功したら自
動マージ
n利点：手戻りが短い
• エラーにすぐ気が付ける
• 放置することがない
n手順
• ローカル
• ビルドとテスト（自動）
• テストが通れば次へ
• push・プルリクでCI
• CI側でビルドとテスト（自動）
• テストが通ればマージ

9. クラウドCIサービス
nCI専用サービス
• TravisCI
• circleCI
nホスティング＋CIインフラ
• GitHub Actions
https://github.co.jp/features/actions
https://circleci.com
https://www.travis-ci.com

10. CIによる開発ルーチン
変更
修正 ローカル
リポジトリ
リモート
リポジトリ
push
CIサービス
自動ビルド
自動テスト
結果
返送
トリガー
CIがOKなら
運用へ展開

11. 実際のCIの例

12. https://github.com/PointCloudLibrary/pcl/pull/4614
ここではPRをマージす
るときにCIを使ってい
る
CIの結果がこれ

13. 多数の環境でビルドで
きるか確認している

14. このビルドについては
テストは100%パス

15. このビルドは失敗して
いる？
CIサービスにはMicrosoftのAzure DevOpsを
利用している

16. 失敗している場所が赤
になっている

17. 詳しい内容はここ

18. ライブラリのビルドに
失敗していることがわ
かった

19. 継続的デリバリ
継続的デプロイ

20. CIによる開発ルーチン
変更
修正 ローカル
リポジトリ
リモート
リポジトリ
push
CIサービス
自動ビルド
自動テスト
結果
返送
トリガー
CIがOKなら
運用へ展開
ここが手作業

21. CDによる開発ルーチン
変更
修正 ローカル
リポジトリ
リモート
リポジトリ
push
CI/CDサービス
自動ビルド
自動テスト
OKなら
自動展開
トリガー
ここまで自動！
n継続的デプロイ（CD）
• ビルドとテストが成功し
たら自動的に実環境へデ
プロイ
• クラウドサービスに適し
ている
n継続的デリバリ（CD）
• 実際にデプロイするのは
手動
• 最終確認ができる
結果
返送

22. 世の中CI/CDは当たり前
CI CD
MarkdownでCI/CD結果
へのリンクとバナーが
埋め込める

23. 世の中CI/CDは当たり前
https://github.com/pytorch/pytorch
JenkinsでCI

24. 世の中CI/CDは当たり前
https://github.com/tensorflow/tensorflow
Google CloudでCI

25. CI/CDを実践してみる

26. CDはwebアプリに最適
nクラウドサービスを開発・デプロイする
• ローカルで開発
• コーディング
• ビルドとテスト
• ローカル環境で実行
• CI/CD側に投げる
• 自動ビルドとテスト
• 成功したらデプロイ
• web経由で利用可能になる
nフレームワーク
• Python: Streamlit, Flask, Django, dash, FastAPI
• JavaScript: Node.js, React
• Ruby on Rails
• PHP: Laravel
Webix provides a great number of JavaScript UI
widgets with a pefect look and feel great on various
devices. All of them can be effortlessly customized in
accordance with your preferences thanks to the rich
and clear API.Kelluvuus - Own work
CC BY-SA 4.0

27. streamlit：軽量webアプリ作成ライブラリ
画像をダウン
ロード
RGBのヒストグ
ラムを計算
ラジオボダンで
RGBを選択 ローカルでアクセス
した画面
main.py
import numpy as np
import pandas as pd
import streamlit as st
from skimage.io import imread
# download the image
img_url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d
/df/Mount_Fuji_from_Mount_Aino.jpg/640px-Mount_Fuji_from_Mount_Ai
no.jpg'
im = imread(img_url)
st.image(im, caption='image from wikimedia commons’,
use_column_width=True)
# show histgram of all colors
hist_red, _ = np.histogram(im[:, :, 0], bins=64)
hist_green, _ = np.histogram(im[:, :, 1], bins=64)
hist_blue, _ = np.histogram(im[:, :, 2], bins=64)
hist = np.stack((hist_red, hist_green, hist_blue), axis=1)
df_hist = pd.DataFrame(hist, columns=['R', 'G', 'B'])
st.bar_chart(df_hist)
# choose one color
color = st.radio(
"choose R, G, or B",
('R', 'G', 'B'))
if color == 'R’:
df_hist = pd.DataFrame(hist_red)
st.bar_chart(df_hist)
if color == 'G’:
df_hist = pd.DataFrame(hist_green)
st.bar_chart(df_hist)
if color == 'B’:
df_hist = pd.DataFrame(hist_blue)
st.bar_chart(df_hist)

28. 今から行うCI/CDの概要
https://github.com/logos
変更
修正 ローカル
リポジトリ
clone push
リモートリ
ポジトリ
https://render.com/
web
アプリ
• 手動でデプロイ
• pushされたら自動デプロイ
• pushされてCIがpassしたら自
動デプロイ
連携

29. render：PaaS
n各種言語のwebアプリをデプロ
イできる
• 無料枠
• 月100GBまでの通信（外向き）
• 月500分までのビルド時間
https://render.com/pricing

30. まずフォーク https://github.com/tttamaki/show_img_hist

31. それをクローン
ここは自分のアカウント
名になる
フォークした自分のリポ
ジトリのsshのURLを
使ってください

32. それをクローン
フォークした自分のリポ
ジトリのsshのURLを指
定してください
$ git clone git@github.com:tttamaki/show_img_hist.git
Cloning into 'show_img_hist'...
remote: Enumerating objects: 57, done.
remote: Counting objects: 100% (57/57), done.
remote: Compressing objects: 100% (41/41), done.
remote: Total 57 (delta 23), reused 45 (delta 12), pack-reused 0
Receiving objects: 100% (57/57), 6.35 KiB | 3.17 MiB/s, done.
Resolving deltas: 100% (23/23), done.
$ cd show_img_hist
$
自分でフォークしたリポジトリURL

33. まずはローカルで確認：build
$ docker compose build
[+] Building 28.0s (7/9)
[+] Building 60.9s (10/10) FINISHED
=> [internal] load build definition from dockerfile 0.0s
=> => transferring dockerfile: 195B 0.0s
...
=> => exporting layers 4.3s
=> => writing image sha256:a405268705e58f85aa72ecda190e9b52fb6959cc422ae 0.0s
=> => naming to docker.io/library/show_img_hist_mypython 0.0s
$

34. まずはローカルで確認：up -d
コンテナの8888
ポートを
ホストの8888
ポートへ転送し
ている
コンテナを起動
コンテナ情報を
見ると
$ docker compose up -d
[+] Running 2/2
⠿ Network show_img_hist_default Created 0.0s
⠿ Container show_img_hist-mypython-1 Started 1.1s
$
$ docker compose ps
NAME COMMAND SERVICE STATUS PORTS
show_img_hist-mypython-1 "python3" mypython running 0.0.0.0:8888->8888/tcp
$

35. $ docker compose down
まずはローカルで確認：ブラウザでアクセス
ndockerfile内で「実行用ファイルをコ
ンテナ内の/root/にコピー」する
• デプロイを想定
• クラウドでは
「ローカルを/mnt/にマウント」
ができない
n実行コマンドはentrypointに記載
• up -dしたらこれが実行されている
n使用ポートは環境変数を利用
• コンテナ内では${PORT}を参照
• コンテナ起動時に設定する
http://localhost:8888/に
アクセスすればOK
止めるときには
ポート「8888」composeが使う環
境変数はファイル「.env」に書い
た番号

36. 起動の仕組み：コンテナ外のファイル
FROM python:slim
COPY requirements.txt /root/
RUN pip install -U pip ¥
&& pip install -r /root/requirements.txt
COPY main.py start.sh /root/
RUN chmod +x /root/start.sh
ENTRYPOINT [ "/root/start.sh" ]
services:
mypython:
build: ./
tty: true
environment:
PORT: ${PORT}
ports:
- "${PORT}:${PORT}"
dockerfile
docker-compose.yml
ローカルのファイルmain.pyを
コンテナ内の/root/にコピー
コンテナ内で使
用するポート
コンテナを起動した時
にコンテナ内で実行す
るコマンド
コンテナ内で使
用する環境変数
composeが使う環境変数は
ファイル「.env」に書く
PORT=8888
.env
streamlitの起動
はshスクリプ
トの中で

37. 起動の仕組み：コンテナ内のファイル
#!/bin/bash
streamlit run /root/main.py --server.port=${PORT} --server.address=0.0.0.0
/root/start.sh
streamlitサーバを
起動するコマンド
streamlitを使った
pythonスクリプト
コンテナ内の/root/に
コピーしたスクリプト
streamlitが使用する
ポートの指定（環境
変数PORTを使う）
streamlitが起動するサー
バのアドレス（不定なの
で0.0.0.0にする）

38. renderへのデプロイ

39. renderのアカウント作成
sign inした後のダッシュボード画面
get startedを押してsign up
GitHubやGoogle
やメールアドレ
スでsinupする

40. GitHubのアカウントに連携
account settings
から
connect githubを
押す
githubアカウン
トが間違ってい
ないことを確認
してAuthorize
連携される

41. webアプリの作成
NewからWeb
Serviceを作成
もしこんなメッ
セージがでたら
githubを一旦サ
インアウトする
リポジトリが出ないなら以下の
URLからgithubにおけるrenderの権
限を修正
https://github.com/apps/render/installations/new

42. githubにおけるrenderの権限を修正
リポジトリが出ないなら以下の
URLからgithubにおけるrenderの権
限を修正
https://github.com/apps/render/installations/new
自分のアカウン
トを選択して
renderにアクセ
スを許すリポジ
トリを選択して
インストール

43. webアプリの作成
renderに許可した
GitHubリポジトリが
表示されるので
connect

44. webアプリの作成
一意の名前を
つける
ブランチを選択
（自分で使うも
のを選ぶ）
dockerを選択

45. webアプリの作成
Advanced以下のauto-deployを
Noにしたら手動デプロイ
Yesにしたら自動デプロイ（CD）
作成するとビルドプ
ロセスが開始

46. ビルド開始
ビルドプロセスは長い
In progressがLiveに変わるまで待つ

47. ビルド終了＆webアプリにアクセス
In progressがLiveに変わったら起動したので
このURLをクリックして
webアプリにアクセス

48. 停止の仕方（停止しないと無料枠が減る）
Settingsから
Suspendを選択
停止中．もう一度押
すとresumeする

49. 停止の確認（停止しないと無料枠が減る）
Dashboardを見
れば起動中かど
うかが分かる
suspendになっ
ていれば停止さ
れた

50. デプロイの履歴
Eventsを見れば
履歴が分かる
個々のログが見
られる

51. 環境変数の登録
ポートを変更したいなら環境変数PORTを登録・に設定
その後，Manual Deployでlatest commitを選択して再度デプロイ
（render環境変数PORTのデフォルトは10000）

52. 自動デプロイ（CI/CD）
• GitHubへpush
• ActionsでCI
• passしたらrenderでデプロイ

53. 現代社会：ほぼシステム外部
nやり取りにはAPI
を利用
nクラウドにはWeb
API
• 楽天API
• Yahoo API
• Amazon API
• Google Cloud API
• 【2023年最新】作りたいアプリ
別API一覧を全紹介〜随時更新〜
n開発にはSDKを利
用
社内サーバ
社内DB 本社システム 入退室
システム
クラウド
他社
システム
工場システム
社内PC
開発する
システム
エンドユーザー
API
API
API
API
API
SDK
SDK
SDK
SDK

54. APIキーとSecrets
n外部システムへのアクセス
• パスワードは入力したくない，他人にログインされたくない
• アクセス専用のパスワードみたいなものがあればよい：これがAPI key
nAPI keyをコードに書いてはダメ，絶対
• commitしてpushして公開してしまったら全世界からアクセスされてしまう
• 出前サービス「Wolt」のAndroidアプリに外部サービスのAPIキーがハードコードされている問題, 2023年3月14
日, インプレス窓の杜
• Android アプリ「Hulu」に外部サービスの API キーがハードコードされている問題, 2022年7月28日, Scan Net
Security
• 3200以上のモバイルアプリでAPIキー漏えい判明！Twitterアカウントの乗っ取りが可能に, 2022.08.03, カミアプ
nローカルなら
• 別ファイルに記載（.gitignoreでgit管理外）
• 環境変数から取得（~/.bashrcなどで設定）
• 専用のファイルに記載（例：~/.comet/configなど）
nクラウドは？：これがSecrets

55. APIキーとSecrets
パスワード
（ログイン可能）
API key（ログイ
ン不可，情報ア
クセスのみ）
パスワード
API key
厳重に保管された
API key
API key
ファイル
コード
API key
API key
API key
ファイル
コード
API key
API key
API key
Secrets
リポジトリにpushされる・
デプロイされるファイル
他人には公
開されない
API key（ログイ
ン不可，情報ア
クセスのみ）
デプロイ

56. render：自動デプロイをoffにしておく
nrenderの自動デプロイはCIなしCDのみ
• render側の自動デプロイ機能は使わないのでoffにしておく
nGitHub ActionsでCI/CDを実現する
• ActionsでCIをパスしたらActionsからrenderへデプロイする
auto-deployをNoにしたら手動デ
プロイ（自動デプロイoff）

57. 準備：renderアカウントのAPIキーを取得
account
settingsから
create API key
キーに名前
をつけて
これで作成
された
作成されたキーを今すぐコピー！
（後からコピーはできない）
不要になっ
たらrevoke
で削除

58. 準備：renderアプリのサービスID取得
Hook URLのこの部分が
サービスIDなのでコピー
（/から?の間）
再生成が可能

59. 準備：GitHubのリポジトリにsecrets追加
リポジトリの
settingsから
Actionsに
Secretsへ行き
このリポジトリ
のsecretsを新
規作成
renderのAPI keyと
service IDを登録
この名前で登録
すること！

60. GitHub Actionsの設定
nこの場合は
ワークフローは
設定済み
• .github/workflo
s/以下にある
登録した名前の
secretsが使える
secretsに登録した
名前を使うこと！

61. CI/CDの実行
npushすると
• Actionsが実行
• flake8がパスすれば
• renderへデプロ
イ
• flake8が失敗すれば
• そこで中断
• デプロイは実行
されない flake8がパスしたの
でrenderへのデプロ
イが実行されている
Actionsをみると

62. 補足：複数のActionsの設定
render_testブランチ
にpushされた時に実
行
mainブランチにpush
された・プルリクが
合った時に実行

63. CIが失敗する場合
では，わざとコード
を間違えてみる
（flake8が検出でき
る構文エラー）

64. CIが失敗する場合
間違ったままコードをadd,
commit, pushしてみよう
（当然できてしまう）
$ git add main.py
$ git commit -m "commit with error"
[render_test c4401e4] fix error
1 file changed, 1 insertion(+), 1 deletion(-)
$ git push
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 293 bytes | 293.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/tttamaki/show_img_hist.git
094c181..c4401e4 render_test -> render_test
$
自分でフォークしたリポジトリURL

65. CIが失敗する場合
Actionsをみると
flake8が失敗したの
でそこで中断，デプ
ロイは実行せず

66. 修正したらCIは成功＋CD
コードを修正して，add,
commit, pushしなおすと
CIはパスする（デプロイ
もされる）
さっきのCI失敗

67. 自分でワークフローを設定するなら
Actionsへ行って
pythonならpython
packageがおすすめ
大量のテンプレート
があるので探す

68. 自分でワークフローを設定するなら
yamlの中身を書いて
ファイル名を指定
yamlファイルの追加をコ
ミットすると，それ以降
はActionsが実行される
マニュアルがんばっ
て読む

70. 課題
n今回のwebアプリを作成せよ
• スライドの手順に従って
• localhostのwebアプリにアクセスできることを確認する
• renderアプリを作成し，GitHubと連携して手動でデプロイする
• ブラウザでrenderアプリにアクセスできることを確認する
• CI/CDを体験する
• GitHub Actionsを設定する
• コードを修正，commitしてGitHubへpushする
• renderに自動デプロイされていることを確認する
• renderアプリを終了するのを忘れないこと
n（上級者編）アプリを修正（もしくは自作）してみよう

71. 想定試験問題
nDevOpsとは何かを説明せよ
nCIとは何かを説明せよ
nCDとは何かを説明せよ
nCI/CDの商用サービスには何があるのかを列挙せよ
nPaaSとはどのようなサービスなのかを述べよ