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
240
いまからでも遅くない!コンテナで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
400
Rerun いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
0
180
いまからでも遅くない!コンテナでWebアプリを動かしてみよう入門(2-2)WebAPIハンズオン
nomu
0
250
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(2-1)WebAPI座学
nomu
0
380
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
710
Gitハンズオン準備
nomu
0
570
いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
1
340
WebSphere_Integration_Meetup
nomu
0
42
いまからでも遅くない!システム間連携入門(メッセージキュー編)
nomu
0
1k
Other Decks in Technology
See All in Technology
更新系と状態
uhyo
8
2.2k
今日からはじめるプラットフォームエンジニアリング
jacopen
8
1.9k
LT Slide 2025-04-22
takesection
0
110
PagerDuty×ポストモーテムで築く障害対応文化/Building a culture of incident response with PagerDuty and postmortems
aeonpeople
3
530
品質文化を支える小さいクロスファンクショナルなチーム / Cross-functional teams fostering quality culture
toma_sm
0
180
Dynamic Reteaming And Self Organization
miholovesq
3
730
「経験の点」の位置を意識したキャリア形成 / Career development with an awareness of the “point of experience” position
pauli
4
130
【Oracle Cloud ウェビナー】ご希望のクラウドでOracle Databaseを実行〜マルチクラウド・ソリューション徹底解説〜
oracle4engineer
PRO
1
140
Mastraに入門してみた ~AWS CDKを添えて~
tsukuboshi
0
380
Dataverseの検索列について
miyakemito
1
160
MCPが変えるAIとの協働
knishioka
1
120
OPENLOGI Company Profile
hr01
0
63k
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Scaling GitHub
holman
459
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to train your dragon (web standard)
notwaldorf
91
6k
The Language of Interfaces
destraynor
157
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Code Reviewing Like a Champion
maltzj
523
40k
Designing for humans not robots
tammielis
253
25k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
590
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