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
210
いまからでも遅くない!コンテナで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
330
Rerun いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
0
180
いまからでも遅くない!コンテナでWebアプリを動かしてみよう入門(2-2)WebAPIハンズオン
nomu
0
230
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(2-1)WebAPI座学
nomu
0
360
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
700
Gitハンズオン準備
nomu
0
550
いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
1
320
WebSphere_Integration_Meetup
nomu
0
36
いまからでも遅くない!システム間連携入門(メッセージキュー編)
nomu
0
930
Other Decks in Technology
See All in Technology
自分のやることに価値を見出だせるようになり、挑戦する勇気をもらったベイトソンの考え / Scrum Fest Fukuoka 2025
bonbon0605
0
190
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
300
Log Analytics を使った実際の運用 - Sansan Data Hub での取り組み
sansantech
PRO
0
280
IAMのマニアックな話2025
nrinetcom
PRO
6
1.7k
早くて強い「リアルタイム解析基盤」から広げるマルチドメイン&プロダクト開発
plaidtech
PRO
1
190
Postman AI Agent Builderで AI Agentic workflow のプロトタイピング / Prototyping AI Agentic Workflow with Postman AI Agent Builder
yokawasa
0
210
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
2
220
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
1.2k
Microsoft_20250311_第2回AI_IoT共創ラボ.pdf
iotcomjpadmin
0
210
Codar: Arte ou Ciência?! A Jornada de um DEV na Creator Economy
vclementino
0
180
困難を「一般解」で解く
fujiwara3
9
3.1k
データモデルYANGの処理系を再発明した話
tjmtrhs
0
540
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Fireside Chat
paigeccino
36
3.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Building Adaptive Systems
keathley
40
2.4k
GraphQLとの向き合い方2022年版
quramy
44
14k
The Language of Interfaces
destraynor
156
24k
The Cult of Friendly URLs
andyhume
78
6.2k
Music & Morning Musume
bryan
46
6.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Pragmatic Product Professional
lauravandoore
32
6.4k
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