Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
NoMu
March 01, 2025
Technology
380
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
本資料は2025年2月28日に開催された以下セッションにおける資料になります。
https://ibm-developer.connpass.com/event/341014/
NoMu
March 01, 2025
More Decks by NoMu
See All by NoMu
いまからでも遅くないコンテナ座学
nomu
0
550
Rerun いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
0
240
いまからでも遅くない!コンテナでWebアプリを動かしてみよう入門(2-2)WebAPIハンズオン
nomu
0
330
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(2-1)WebAPI座学
nomu
0
500
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
800
Gitハンズオン準備
nomu
0
680
いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
1
440
WebSphere_Integration_Meetup
nomu
0
77
いまからでも遅くない!システム間連携入門(メッセージキュー編)
nomu
0
1.4k
Other Decks in Technology
See All in Technology
Redmine 7.0で私が開発した新機能の狙いと背景
vividtone
1
160
幾何アルゴリズムで なめらかなピン操作を / iOSDC Japan 2026 / smoothpin
kazumanagano
0
280
安心して変更できるWebフロントエンドの作り方
pirosikick
4
1.5k
Oracle Cloud Infrastructure IaaS 新機能アップデート 2026/6 - 2026/8
oracle4engineer
PRO
0
170
AIに丸投げしないトイル削減 / Eliminating Toil Without Leaving It All to AI
kohbis
4
1.1k
enechainの内製セルフサービスプラットフォーム
hiyosi
0
160
NW運用でNWトポロジ可視化ツールに期待すること/shumoku-meetup1
corestate55
2
120
アプリをもっと"iOSアプリっぽく"する小さな工夫 / Small Touches That Make Your App Feel More Like an iOS App
matsuji
1
630
Reactの設計論
uhyo
15
8.4k
コスト最適化の「めんどくさい」を AWS FinOps Agent でチョット楽にする
classmethod_kaz
0
320
AI活用の現在地、 ちゃんと見えてますか?/XPfest-2026
visional_engineering_and_design
0
200
GoCon2026 - Open Source, Open World
sanposhiho
4
3.4k
Featured
See All Featured
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
530
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
450
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.3k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
370
Code Reviewing Like a Champion
maltzj
528
40k
How Software Deployment tools have changed in the past 20 years
geshan
1
34k
[RailsConf 2023] Rails as a piece of cake
palkan
59
7k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
230
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
35
2.8k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
500
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
570
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
320
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