Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
Search
NoMu
March 01, 2025
Technology
0
260
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
本資料は2025年2月28日に開催された以下セッションにおける資料になります。
https://ibm-developer.connpass.com/event/341014/
NoMu
March 01, 2025
Tweet
Share
More Decks by NoMu
See All by NoMu
いまからでも遅くないコンテナ座学
nomu
0
440
Rerun いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
0
190
いまからでも遅くない!コンテナでWebアプリを動かしてみよう入門(2-2)WebAPIハンズオン
nomu
0
260
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(2-1)WebAPI座学
nomu
0
400
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
730
Gitハンズオン準備
nomu
0
590
いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
1
360
WebSphere_Integration_Meetup
nomu
0
49
いまからでも遅くない!システム間連携入門(メッセージキュー編)
nomu
0
1.1k
Other Decks in Technology
See All in Technology
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
ゼロからはじめる採用広報
yutadayo
3
920
Geminiとv0による高速プロトタイピング
shinya337
1
270
Operating Operator
shhnjk
1
580
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.9k
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.8k
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
300
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
140
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
KATA
mclloyd
30
14k
Docker and Python
trallard
44
3.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
The Cult of Friendly URLs
andyhume
79
6.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Transcript
© 2024 IBM Corporation 1 いまからでも遅くない!コンテナでWebアプリを動かしてみ よう入門(3-2)コンテナハンズオン TechXchange Dojo 2025年02月28日
18時03分まで マイクミュートにして お待ちください
© 2024 IBM Corporation 2 いまからでも遅くないシリーズ •(1)Gitハンズオン •(2)WebAPIハンズオン •(3)コンテナハンズオン •(4)Reactハンズオン
•(5)データベースハンズオン •(6)コンテナオーケストレーションハンズオン コンテナオーケストレーション(OpenShift) Web サーバー API サーバー DB サーバー Gitサーバー Push Deploy PC ベースになる 技術「コンテナ」
© 2024 IBM Corporation 3 自己紹介 村田 憲昭 北海道北斗市 スノーボード、登山、グルメ、猫
カスタマーサクセス DX人材育成/教育(IT全般) スクラムマスター 半導体アプリエンジニア 某コンビニのエンジニア 名前 生息地 趣味 経歴
© 2024 IBM Corporation 4 免責事項 本資料に含まれる情報は可能な限り正確を期しておりますが、 記載された内容に関して、日本アイ・ビー・エム株式会社が 何ら保証するものではありません。 従って、本資料の情報の利用は使用者の責任において
為されるものであり、資料の内容によって受けた 如何なる被害に関しても一切の補償をするものではありません。 アンケートのご協力よろしくおねがいいたします! 各セッションに皆さんのご意見を取り入れてアップデートしていきます! https://app.sli.do/event/cTACof7b2VQSibgykyAH2e
© 2024 IBM Corporation 5 今回のゴール コンテナの構成がイメージでき るようになる
© 2024 IBM Corporation 6 アジェンダ 1. 前回の復習 2. ハンズオンする内容の確認
3. ハンズオン! 4. まとめ
前回の復習 1
© 2024 IBM Corporation 8 8 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation コンテナ基礎 コンピュータの仮想化の方式の一つで、稼働 中のオペレーティングシステム(OS)の一 部を分離して他と隔離された専用のエリアを 用意し、その上でソフトウェアを動作させる 方式をコンテナ型仮想化という。隔離された 領域のことをコンテナという。 出典:IT 用語辞典 e-Words
© 2024 IBM Corporation 9 9 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation コンテナ基礎 コンテナがないとき(物理マシン) ハードウェア OS ミドルウェア ライブラリ アプリ アプリ アプリ サーバー
© 2024 IBM Corporation 10 10 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation コンテナ基礎 コンテナがないとき(仮想マシン) ハードウェア OS ハイパーバイザー ゲストOS ミドルウェア ライブラリ アプリ ゲストOS ミドルウェア ライブラリ アプリ ゲストOS ミドルウェア ライブラリ アプリ リソース 効率 起動の 遅さ 一貫性 管理の 複雑さ サーバー仮想化
© 2024 IBM Corporation 11 11 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation コンテナ基礎 コンテナがあるとき ハードウェア OS コンテナエンジン ミドルウェア ライブラリ アプリ ミドルウェア ライブラリ アプリ ミドルウェア ライブラリ アプリ 軽量化 高速 起動 一貫性 管理の 簡素化 コンテナ化
© 2024 IBM Corporation 12 12 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation Docker/podman基礎 Dockerfile Dockerイメージ コンテナ レジストリ 「Build、Share、Run」 Build Share ダウンロード Run
© 2024 IBM Corporation 13 13 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation Docker/podman基礎 コマンドで表現(podman) Dockerfile Dockerイメージ コンテナ レジストリ podman build podman push podman pull podman start ※pull + start = run
© 2024 IBM Corporation 14 14 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation Dockerfile Dockerコンテナイメージ を作成するための設計 図や手順書として機能 するテキストファイル 例)index.htmlにアクセス すると「Hello from Dockerfile」と表示する Apacheサーバー # This is a commant line FROM rhel9:latest MAINTAINER Noriaki Murata <
[email protected]
> LABEL description="A custom Apache container image" RUN yum install -y httpd && ¥ yum clean all ADD training.repo /etc/yum.repo.d/training.repo RUN echo "Hello from Dockerfile" > /var/www/html/index.html EXPOSE 80 ENTRYPOINT ["httpd","-D","FOREGROUND"]
© 2024 IBM Corporation 15 15 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation Dockerfile 基本的な考え方 1.コンテナイメージのビルドプロセスを自動化 2.再現性を確保するために使用 3.アプリケーションの依存関係やビルド手順を明確に 定義
© 2024 IBM Corporation 16 16 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation Docker(podman) Compose 複数のコンテナを使用するアプリケーションを定義し 実行するためのツール
© 2024 IBM Corporation 17 17 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation Docker(podman) Compose Web3層アプリケーションを表現してみる Ngnix Node.js MySQL 8080 ポート 80 ポート 3306 ポート 3000 ポート data 例えば・・・ network host1 host2 host3 /home/hoge/data 3306 ポート
© 2024 IBM Corporation 18 18 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation Docker(podman) Compose podmanコマンドで実施 #network作成 $ podman network create --subnet=192.168.100.0/24 --gateway=192.168.100.254 test_network1 # host1起動 $ podman run -d --name host1 --net test_network1 -p 8080:80 ngnix:latest # host2起動 $ podman run -d --name host2 --net test_network1 node:latest # host3起動 $ podman run -d --name host3 --net test_network1 -e MYSQL_USER=mysql -e MYSQL_PASSWORD=password – e ¥ -e MYSQL_DATABASE=my_database MYSQL_ROOT_PASSWORD=password ¥ -v /home/hoge/data/:/var/lib/mysql mysql:latest コマンド 複雑 標準化 デプロイ 効率化・自動化 マイクロサービスア ーキテクチャの台頭 DevOps 促進
© 2024 IBM Corporation 19 19 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation Docker composeコマンドで実施 version: '3' services: host1: image: nginx ports: - "8080:80" networks: - test_network1 host2: image: node environment: MYSQL_ROOT_PASSWORD: password MYSQL_DATABASE: my_database MYSQL_USER: mysql MYSQL_PASSWORD: password networks: - test_network1 #host1, host2, host3起動 $ podman-compose up -d host3: image: mysql ports: - "3306:3306" environment: MYSQL_ROOT_PASSWORD: example networks: - test_network1 networks: test_network1: driver: bridge ipam: config: - subnet: 192.168.100.0/24 gateway: 192.168.100.254 ※事前にdocker-compose.ymlファイル準備 Docker(podman) Compose
ハンズオンする内容の確認 2
© 2024 IBM Corporation 21 21 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation ハンズオンする内容の確認 ゴール(wordpressをローカルコンテナで動かす)
© 2024 IBM Corporation 22 22 Customer Success, IBM Technology,
Japan / © 2024 IBM Corporation ハンズオンする内容の確認 システム構成図 podmanコンテナ 8080ポート Webサーバー (WordPress) 80ポート ブラウザ データベース サーバー (MariaDB) Wordpress-db Wordpress 3306ポート
ハンズオン 3
© 2024 IBM Corporation 24 ハンズオンでやらないこと 細かい仕様の説明はしません
© 2024 IBM Corporation 25 Hello World
© 2024 IBM Corporation 26 Hello World ▼「Hello World」という文字が返ってくるWebサーバーのコンテナを作成 podmanコンテナ
8081ポート Webサーバー (nginx) 80ポート ブラウザ hello-web
© 2024 IBM Corporation 27 Hello World ▼「Hello World」という文字が返ってくるWebサーバーのコンテナを作成 以下コマンドを実行
$ podman run -d --name hello-web -p 8081:80 docker.io/nginx:latest $ podman exec hello-web sh -c “echo ‘Hello World Murata' > /usr/share/nginx/html/index.html" 以下コマンドを実行
© 2024 IBM Corporation 28 Hello World ▼「Hello World」という文字が返ってくるWebサーバーのコンテナを作成 解説
$ podman run -d --name hello-web -p 8081:80 docker.io/nginx:latest $ podman exec hello-web sh -c "echo 'Hello World' > /usr/share/nginx/html/index.html" コンテナ名 ポート番号 ベースになるコンテナイメージ コンテナ名 「Hello World」という文字が書かれたhtmlファイルを保存 起動 裏で コンテナ内で 実行
© 2024 IBM Corporation 29 Hello World ▼「Hello World」という文字が返ってくるWebサーバーのコンテナを作成 後始末
$ podman stop hello-web $ podman rm hello-web $ podman images REPOSITORY docker.io/library/nginx latest b52e0b094bc0 3 weeks ago 196 MB $ podman rmi b52e0b094bc0
© 2024 IBM Corporation 30 Wordpress準備 ~データベースサーバーを立てる~
© 2024 IBM Corporation 31 データベースサーバーを立てる ▼MySQLサーバーのコンテナを作成 podmanコンテナ 8080ポート Webサーバー
(WordPress) 80ポート ブラウザ データベース サーバー (MariaDB) Wordpress-db Wordpress 3306ポート wordpress-network
© 2024 IBM Corporation 32 データベースサーバーを立てる 以下コマンドを実行 # ネットワークを作成 $
podman network create wordpress-network # データベースサーバーを作成 $ podman run -d --name wordpress-db ¥ --network wordpress-network ¥ -e MYSQL_ROOT_PASSWORD=rootpassword ¥ -e MYSQL_DATABASE=wordpress ¥ -e MYSQL_USER=wordpress ¥ -e MYSQL_PASSWORD=wordpress ¥ mariadb:latest ▼MariaDBサーバーのコンテナを作成
© 2024 IBM Corporation 33 データベースサーバーを立てる 解説 # ネットワークを作成 $
podman network create wordpress-network # データベースサーバーを作成 $ podman run -d --name wordpress-db ¥ --network wordpress-network ¥ -e MYSQL_ROOT_PASSWORD=rootpassword ¥ -e MYSQL_DATABASE=wordpress ¥ -e MYSQL_USER=wordpress ¥ -e MYSQL_PASSWORD=wordpress ¥ mariadb:latest ▼MariaDBサーバーのコンテナを作成 「wordpress-network」という名前 のネットワークを作成 コンテナ名:wordpress-db ネットワーク:wordpress-network に所属 環境変数:以下を設定 MYSQL_ROOT_PASSWORD MYSQL_DATABASE MYSQL_USER MYSQL_PASSWORD コンテナイメージ:MariaDB最新版
© 2024 IBM Corporation 34 Wordpress準備 ~WordPressを立てる~
© 2024 IBM Corporation 35 Webサーバー(WordPress)を立てる ▼Webサーバー(WordPress)のコンテナを作成 podmanコンテナ 8080ポート Webサーバー
(WordPress) 80ポート ブラウザ データベース サーバー (MariaDB) Wordpress-db Wordpress 3306ポート wordpress-network
© 2024 IBM Corporation 36 Hello World 以下コマンドを実行 # Webサーバー(WordPress)を立てる
$ podman run -d --name wordpress ¥ --network wordpress-network ¥ -p 8080:80 ¥ -e WORDPRESS_DB_HOST=wordpress-db ¥ -e WORDPRESS_DB_USER=wordpress ¥ -e WORDPRESS_DB_PASSWORD=wordpress ¥ -e WORDPRESS_DB_NAME=wordpress ¥ wordpress:latest ▼Webサーバー(WordPress)のコンテナを作成
© 2024 IBM Corporation 37 Hello World 解説 # Webサーバー(WordPress)を立てる
$ podman run -d --name wordpress ¥ --network wordpress-network ¥ -p 8080:80 ¥ -e WORDPRESS_DB_HOST=wordpress-db ¥ -e WORDPRESS_DB_USER=wordpress ¥ -e WORDPRESS_DB_PASSWORD=wordpress ¥ -e WORDPRESS_DB_NAME=wordpress ¥ wordpress:latest ▼Webサーバー(WordPress)のコンテナを作成 コンテナ名:wordpress ネットワーク:wordpress-networkに 所属 ポート番号:8080ポートと80ポートを 対応させる 環境変数:以下を設定 WORDPRESS_DB_HOST WORDPRESS_DB_USER WORDPRESS_DB_PASSWORD WORDPRESS_DB_NAME コンテナイメージ:WordPress最新版
© 2024 IBM Corporation 38 Hello World 解説 # Webサーバー(WordPress)を立てる
$ podman run -d --name wordpress ¥ --network wordpress-network ¥ -p 8080:80 ¥ -e WORDPRESS_DB_HOST=wordpress-db ¥ -e WORDPRESS_DB_USER=wordpress ¥ -e WORDPRESS_DB_PASSWORD=wordpress ¥ -e WORDPRESS_DB_NAME=wordpress ¥ wordpress:latest ▼Webサーバー(WordPress)のコンテナを作成 コンテナ名:wordpress ネットワーク:wordpress-networkに 所属 ポート番号:8080ポートと80ポートを 対応させる 環境変数:以下を設定 WORDPRESS_DB_HOST WORDPRESS_DB_USER WORDPRESS_DB_PASSWORD WORDPRESS_DB_NAME コンテナイメージ:WordPress最新版
© 2024 IBM Corporation 39 Hello World 確認 ▼Webサーバー(WordPress)のコンテナを作成 ブラウザで以下URLにアクセス。http://localhost:8080
© 2024 IBM Corporation 40 まとめて立てる
© 2024 IBM Corporation 41 まとめて立てる ▼データベースサーバー、Webサーバー(WordPress)のコンテナを同時に作成 podmanコンテナ 8080ポート Webサーバー
(WordPress) 80ポート ブラウザ データベース サーバー (MariaDB) Wordpress-db Wordpress 3306ポート
© 2024 IBM Corporation 42 まとめて立てる version: '3' services: db:
image: mariadb:latest volumes: - db_data:/var/lib/mysql restart: always environment: MYSQL_ROOT_PASSWORD: rootpassword MYSQL_DATABASE: wordpress MYSQL_USER: wordpress MYSQL_PASSWORD: wordpress wordpress: depends_on: - db image: wordpress:latest ports: - "8080:80" restart: always environment: WORDPRESS_DB_HOST: db WORDPRESS_DB_USER: wordpress WORDPRESS_DB_PASSWORD: wordpress WORDPRESS_DB_NAME: wordpress volumes: db_data: ▼データベースサーバー、Webサーバー(WordPress)のコンテナを同時に作成 ➀ファイルの作成(docker-compose.yml) ➁ソースコードを貼り付け $ notepad docker-compose.yml $ podman-compose up –d (docker-compose up –d) ③起動!
© 2024 IBM Corporation 43 version: '3' services: db: image:
mariadb:latest volumes: - db_data:/var/lib/mysql restart: always environment: MYSQL_ROOT_PASSWORD: rootpassword MYSQL_DATABASE: wordpress MYSQL_USER: wordpress MYSQL_PASSWORD: wordpress wordpress: depends_on: - db image: wordpress:latest ports: - "8080:80" restart: always environment: WORDPRESS_DB_HOST: db WORDPRESS_DB_USER: wordpress WORDPRESS_DB_PASSWORD: wordpress WORDPRESS_DB_NAME: wordpress volumes: db_data: 解説 コンテナ名:wordpress ポート番号:8080ポートと80ポートを対応させる 環境変数:以下を設定 WORDPRESS_DB_HOST WORDPRESS_DB_USER WORDPRESS_DB_PASSWORD WORDPRESS_DB_NAME コンテナイメージ:WordPress最新版 まとめて立てる ▼データベースサーバー、Webサーバー(WordPress)のコンテナを同時に作成 コンテナ名:db 環境変数:以下を設定 MYSQL_ROOT_PASSWORD MYSQL_DATABASE MYSQL_USER MYSQL_PASSWORD コンテナイメージ:MariaDB最新版
まとめ 4
© 2024 IBM Corporation 45 まとめ ・コンテナの構成イメージ ・ワンライナーでコンテナ!(podman) ・yamlでコンテナ!(podman-compose)
次回予告!!
© 2024 IBM Corporation 47 いまからでも遅くない!コンテナでWebアプリを動かしてみ よう入門(4-1)React座学 TechXchange Dojo 2025年03月XX日
© 2024 IBM Corporation 48