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
720
Gitハンズオン準備
nomu
0
590
いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
1
350
WebSphere_Integration_Meetup
nomu
0
49
いまからでも遅くない!システム間連携入門(メッセージキュー編)
nomu
0
1.1k
Other Decks in Technology
See All in Technology
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.3k
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
3
130
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
340
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
15
5.3k
Witchcraft for Memory
pocke
1
440
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
【PHPカンファレンス 2025】PHPを愛するひとに伝えたい PHPとキャリアの話
tenshoku_draft
0
120
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
640
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
230
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
190
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Statistics for Hackers
jakevdp
799
220k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Scaling GitHub
holman
459
140k
Balancing Empowerment & Direction
lara
1
380
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