いまからでも遅くない！コンテナでWebアプリを動かしてみよう！コンテナハンズオン編

本資料は2025年2月28日に開催された以下セッションにおける資料になります。
https://ibm-developer.connpass.com/event/341014/

Transcript

1. © 2024 IBM Corporation 1 いまからでも遅くない！コンテナでWebアプリを動かしてみ よう入門（3-2）コンテナハンズオン TechXchange Dojo 2025年02月28日 18時03分まで マイクミュートにして お待ちください
2. © 2024 IBM Corporation 2 いまからでも遅くないシリーズ •（1）Gitハンズオン •（2）WebAPIハンズオン •（3）コンテナハンズオン •（4）Reactハンズオン •（5）データベースハンズオン •（6）コンテナオーケストレーションハンズオン コンテナオーケストレーション（OpenShift） Web サーバー API サーバー DB サーバー Gitサーバー Push Deploy PC ベースになる 技術「コンテナ」
3. © 2024 IBM Corporation 3 自己紹介 村田 憲昭 北海道北斗市 スノーボード、登山、グルメ、猫 カスタマーサクセス DX人材育成/教育(IT全般) スクラムマスター 半導体アプリエンジニア 某コンビニのエンジニア 名前 生息地 趣味 経歴
4. © 2024 IBM Corporation 4 免責事項 本資料に含まれる情報は可能な限り正確を期しておりますが、 記載された内容に関して、日本アイ・ビー・エム株式会社が 何ら保証するものではありません。 従って、本資料の情報の利用は使用者の責任において 為されるものであり、資料の内容によって受けた 如何なる被害に関しても一切の補償をするものではありません。 アンケートのご協力よろしくおねがいいたします！ 各セッションに皆さんのご意見を取り入れてアップデートしていきます！ https://app.sli.do/event/cTACof7b2VQSibgykyAH2e
5. © 2024 IBM Corporation 5 今回のゴール コンテナの構成がイメージでき るようになる
6. © 2024 IBM Corporation 6 アジェンダ 1. 前回の復習 2. ハンズオンする内容の確認 3. ハンズオン！ 4. まとめ
7. 前回の復習 1
8. © 2024 IBM Corporation 8 8 Customer Success, IBM Technology, Japan / © 2024 IBM Corporation コンテナ基礎 コンピュータの仮想化の方式の一つで、稼働 中のオペレーティングシステム（OS）の一 部を分離して他と隔離された専用のエリアを 用意し、その上でソフトウェアを動作させる 方式をコンテナ型仮想化という。隔離された 領域のことをコンテナという。 出典：IT 用語辞典 e-Words
9. © 2024 IBM Corporation 9 9 Customer Success, IBM Technology, Japan / © 2024 IBM Corporation コンテナ基礎 コンテナがないとき（物理マシン） ハードウェア OS ミドルウェア ライブラリ アプリ アプリ アプリ サーバー
10. © 2024 IBM Corporation 10 10 Customer Success, IBM Technology, Japan / © 2024 IBM Corporation コンテナ基礎 コンテナがないとき（仮想マシン） ハードウェア OS ハイパーバイザー ゲストOS ミドルウェア ライブラリ アプリ ゲストOS ミドルウェア ライブラリ アプリ ゲストOS ミドルウェア ライブラリ アプリ リソース 効率 起動の 遅さ 一貫性 管理の 複雑さ サーバー仮想化
11. © 2024 IBM Corporation 11 11 Customer Success, IBM Technology, Japan / © 2024 IBM Corporation コンテナ基礎 コンテナがあるとき ハードウェア OS コンテナエンジン ミドルウェア ライブラリ アプリ ミドルウェア ライブラリ アプリ ミドルウェア ライブラリ アプリ 軽量化 高速 起動 一貫性 管理の 簡素化 コンテナ化
12. © 2024 IBM Corporation 12 12 Customer Success, IBM Technology, Japan / © 2024 IBM Corporation Docker/podman基礎 Dockerfile Dockerイメージ コンテナ レジストリ 「Build、Share、Run」 Build Share ダウンロード Run
13. © 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
14. © 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 <Noriaki.Murata@ibm.com> 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"]
15. © 2024 IBM Corporation 15 15 Customer Success, IBM Technology, Japan / © 2024 IBM Corporation Dockerfile 基本的な考え方 1.コンテナイメージのビルドプロセスを自動化 2.再現性を確保するために使用 3.アプリケーションの依存関係やビルド手順を明確に 定義
16. © 2024 IBM Corporation 16 16 Customer Success, IBM Technology, Japan / © 2024 IBM Corporation Docker(podman) Compose 複数のコンテナを使用するアプリケーションを定義し 実行するためのツール
17. © 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 ポート
18. © 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 促進
19. © 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
20. ハンズオンする内容の確認 2
21. © 2024 IBM Corporation 21 21 Customer Success, IBM Technology, Japan / © 2024 IBM Corporation ハンズオンする内容の確認 ゴール（wordpressをローカルコンテナで動かす）
22. © 2024 IBM Corporation 22 22 Customer Success, IBM Technology, Japan / © 2024 IBM Corporation ハンズオンする内容の確認 システム構成図 podmanコンテナ 8080ポート Webサーバー （WordPress） 80ポート ブラウザ データベース サーバー （MariaDB） Wordpress-db Wordpress 3306ポート
23. ハンズオン 3
24. © 2024 IBM Corporation 24 ハンズオンでやらないこと 細かい仕様の説明はしません
25. © 2024 IBM Corporation 25 Hello World
26. © 2024 IBM Corporation 26 Hello World ▼「Hello World」という文字が返ってくるWebサーバーのコンテナを作成 podmanコンテナ 8081ポート Webサーバー （nginx） 80ポート ブラウザ hello-web
27. © 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" 以下コマンドを実行
28. © 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ファイルを保存 起動 裏で コンテナ内で 実行
29. © 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
30. © 2024 IBM Corporation 30 Wordpress準備 ～データベースサーバーを立てる～
31. © 2024 IBM Corporation 31 データベースサーバーを立てる ▼MySQLサーバーのコンテナを作成 podmanコンテナ 8080ポート Webサーバー （WordPress） 80ポート ブラウザ データベース サーバー （MariaDB） Wordpress-db Wordpress 3306ポート wordpress-network
32. © 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サーバーのコンテナを作成
33. © 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最新版
34. © 2024 IBM Corporation 34 Wordpress準備 ～WordPressを立てる～
35. © 2024 IBM Corporation 35 Webサーバー（WordPress）を立てる ▼Webサーバー（WordPress）のコンテナを作成 podmanコンテナ 8080ポート Webサーバー （WordPress） 80ポート ブラウザ データベース サーバー （MariaDB） Wordpress-db Wordpress 3306ポート wordpress-network
36. © 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）のコンテナを作成
37. © 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最新版
38. © 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最新版
39. © 2024 IBM Corporation 39 Hello World 確認 ▼Webサーバー（WordPress）のコンテナを作成 ブラウザで以下URLにアクセス。http://localhost:8080
40. © 2024 IBM Corporation 40 まとめて立てる
41. © 2024 IBM Corporation 41 まとめて立てる ▼データベースサーバー、Webサーバー（WordPress）のコンテナを同時に作成 podmanコンテナ 8080ポート Webサーバー （WordPress） 80ポート ブラウザ データベース サーバー （MariaDB） Wordpress-db Wordpress 3306ポート
42. © 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) ③起動！
43. © 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最新版
44. まとめ 4
45. © 2024 IBM Corporation 45 まとめ ・コンテナの構成イメージ ・ワンライナーでコンテナ！（podman） ・yamlでコンテナ！（podman-compose）
46. 次回予告！！
47. © 2024 IBM Corporation 47 いまからでも遅くない！コンテナでWebアプリを動かしてみ よう入門（4-1）React座学 TechXchange Dojo 2025年03月XX日
48. © 2024 IBM Corporation 48