Download as PDF, PPTX
![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)](https://image.slidesharecdn.com/202309cicd-231007115029-e8f530d1/85/2023-09-CI-CD-27-320.jpg)
![まずはローカルで確認：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
$](https://image.slidesharecdn.com/202309cicd-231007115029-e8f530d1/85/2023-09-CI-CD-33-320.jpg)
![まずはローカルで確認：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
$](https://image.slidesharecdn.com/202309cicd-231007115029-e8f530d1/85/2023-09-CI-CD-34-320.jpg)
![起動の仕組み：コンテナ外のファイル
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スクリプ
トの中で](https://image.slidesharecdn.com/202309cicd-231007115029-e8f530d1/85/2023-09-CI-CD-36-320.jpg)
![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](https://image.slidesharecdn.com/202309cicd-231007115029-e8f530d1/85/2023-09-CI-CD-64-320.jpg)
![CircleCIを勝手に紹介・宣伝 + おまけ [OSC Hokkaido 2015 LT]](https://cdn.slidesharecdn.com/ss_thumbnails/oschokkaido2015lt-150614164532-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
ソフトウェア工学2023 09 CI CD
- 1.
- 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.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. CDによる開発ルーチン 変更 修正 ローカル リポジトリ リモート リポジトリ push CI/CDサービス 自動ビルド 自動テスト OKなら 自動展開 トリガー ここまで自動！ n継続的デプロイ（CD） • ビルドとテストが成功し たら自動的に実環境へデ プロイ •クラウドサービスに適し ている n継続的デリバリ（CD） • 実際にデプロイするのは 手動 • 最終確認ができる 結果 返送
- 22.
- 23.
- 24.
- 25.
- 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 numpyas 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.
- 31.
- 32. それをクローン フォークした自分のリポ ジトリのsshのURLを指 定してください $ git clonegit@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 composebuild [+] 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 ポートへ転送し ている コンテナを起動 コンテナ情報を 見ると $ dockercompose 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 composedown まずはローカルで確認：ブラウザでアクセス 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.
- 39. renderのアカウント作成 sign inした後のダッシュボード画面 get startedを押してsignup GitHubやGoogle やメールアドレ スでsinupする
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52. 自動デプロイ（CI/CD） • GitHubへpush • ActionsでCI •passしたらrenderでデプロイ
- 53. 現代社会：ほぼシステム外部 nやり取りにはAPI を利用 nクラウドにはWeb API • 楽天API • YahooAPI • Amazon API • Google Cloud API • 【2023年最新】作りたいアプリ 別API一覧を全紹介〜随時更新〜 n開発にはSDKを利 用 社内サーバ 社内DB 本社システム 入退室 システム クラウド 他社 システム 工場システム 社内PC 開発する システム エンドユーザー API API API API API SDK SDK SDK SDK
- 54. APIキーとSecrets n外部システムへのアクセス • パスワードは入力したくない，他人にログインされたくない • アクセス専用のパスワードみたいなものがあればよい：これがAPIkey 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 厳重に保管された APIkey 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.
- 58.
- 59.
- 60.
- 61. CI/CDの実行 npushすると • Actionsが実行 • flake8がパスすれば •renderへデプロ イ • flake8が失敗すれば • そこで中断 • デプロイは実行 されない flake8がパスしたの でrenderへのデプロ イが実行されている Actionsをみると
- 62.
- 63.
- 64. CIが失敗する場合 間違ったままコードをadd, commit, pushしてみよう （当然できてしまう） $ gitadd 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.
- 66.
- 67.
- 68.
- 70. 課題 n今回のwebアプリを作成せよ • スライドの手順に従って • localhostのwebアプリにアクセスできることを確認する •renderアプリを作成し，GitHubと連携して手動でデプロイする • ブラウザでrenderアプリにアクセスできることを確認する • CI/CDを体験する • GitHub Actionsを設定する • コードを修正，commitしてGitHubへpushする • renderに自動デプロイされていることを確認する • renderアプリを終了するのを忘れないこと n（上級者編）アプリを修正（もしくは自作）してみよう
- 71.