AngularJSを通して
Dockerと触れあった
at Angular meetup #3
• pastelInc
• お仕事はPHP, JavaScript
• 今日はカメラ担当
Dockerを知らないの!?
Dockerは何を解決するのか
デプロイの問題
• デプロイしたら動かなかった
• デプロイ環境をすぐ用意できなかった
• サーバごとに違うライブラリ、バージョン
• プロビジョニングしたくない
• デプロイ環境再構築で涙
求めたのは
もっと手軽なデプロイ環境
Docker
• 再現性のあるインフラ基盤を迅速に構築
• “コンテナ”同士は互いに隔離
• オープンソース
• Dockerfileでインフラをコードとして記述
• アプリの言語に寄らず、同じやり方でデプロイ
VMとコンテナの違い
Dockerは”コンテナ”を扱う
プラットフォーム
AngularJSアプリを作って
Docker上で動かしてみよう!
• https://github.com/angular/material-start
アプリケーション動作環境
• Node.js
• 8080番ポートを使用
$ node -v
v0.12.5
$ npm -v
2.11.3
コンテナの起動
• docker run <オプション> <イメージ名:タグ> <コマンド> <引数>
• -i はコンテナでの標準入力を可能にする
• -t は擬似ターミナルを展開する
$ docker run -i -t node bash
root@d7d20a8e7bb7:/# node -v
v5.0.0
root@d7d20a8e7bb7:/# npm -v
3.3.6
コンテナの起動
• docker run <オプション> <イメージ名:タグ> <コマンド> <引数>
• -v はホストのディレクトリをコンテナにマウントする
• -p はポートフォアリングする
$ docker run -v `pwd`:/tmp -p 8080:8080 node ls -l
total 60
drwxr-xr-x 2 root root 4096 Nov 10 00:43 bin
drwxr-xr-x 2 root root 4096 Aug 26 16:31 boot
drwxr-xr-x 5 root root 360 Nov 22 02:58 dev
drwxr-xr-x 61 root root 4096 Nov 22 02:58 etc
drwxr-xr-x 2 root root 4096 Aug 26 16:31 home
drwxr-xr-x 12 root root 4096 Nov 10 00:43 lib
コンテナの停止
• Ctrl + P + Qでコンテナを停止せずに

元のターミナルに戻る(デタッチ)
• 再度アタッチ
root@d7d20a8e7bb7:/# exit
$
$ docker attach d7d20a8e7bb7
root@d7d20a8e7bb7:/#
• コンテナを起動してアプリを実行
$ cd material-start
$ docker run -it -v `pwd`:/tmp -p 8080:8080 node:0.12.5 bash
root@d7d20a8e7bb7:/# node -v
v0.12.5
root@d7d20a8e7bb7:/# npm -v
2.11.3
root@d7d20a8e7bb7:/# cd /tmp
root@d7d20a8e7bb7:/tmp# npm start
Dockerfile
• Dockerコンテナの構成をまとめて記述
• docker buildでイメージの作成
Dockerイメージ
• イメージはレイヤの重
なり
• レイヤとはdocker run
してからのファイル差
分のこと
• アプリ実行のためのDockerfileを作成
$ touch Dockerfile
$ echo “FROM node:0.12.5-onbuild” > Dockerfile
$ cat Dockerfile
FROM node:0.12.5-onbuild
Language Stack
• Docker Hubには各言語の公式リポジトリが存
在する
• タグによるバージョンの指定が可能
• ONBUILDディレクティブを含んだイメージが
ある
FROM node:0.12.7
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
ONBUILD COPY package.json /usr/src/app/
ONBUILD RUN npm install
ONBUILD COPY . /usr/src/app
CMD [ "npm", "start" ]
イメージ作成
• docker build <オプション> <PATH>
• -t はイメージの<名前:タグ>を決める
$ docker build -t pastelinc/material-start .
イメージ表示
• docker images <オプション>
$ docker images
REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE
pastelinc/material-start latest 820019b78a27 15 minutes ago 1.042 GB
• Dockerfileを使ってイメージを作成
• イメージからコンテナを起動
$ docker build -t pastelinc/material-start .
$ docker images
REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE
pastelinc/material-start latest 820019b78a27 15 minutes ago 1.042 GB
$ docker run -d -p 3000:8080 pastelinc/material-start
まとめ
• Dockerはデプロイの課題を解決してくれる
• Dockerfileを用意すると実行環境をすぐに作れる
• 悩まず手軽にインフラ環境をどこでも構築でき
て楽しい!
• 現在プロダクションでの採用はまだ少ない

More Related Content

PDF
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
PDF
Dockerぐらし!
PDF
サービスクラス、その前に
PPTX
2150117 infrastructure.nagoya
PDF
サーバー&インフラ勉強会 Vol.1 いとー
PPTX
自作アプリをデプロイしてみた with Docker
PPTX
Notes/Domino エンジニアのための Docker 超入門
PDF
スッとGoを取り入れる
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
Dockerぐらし!
サービスクラス、その前に
2150117 infrastructure.nagoya
サーバー&インフラ勉強会 Vol.1 いとー
自作アプリをデプロイしてみた with Docker
Notes/Domino エンジニアのための Docker 超入門
スッとGoを取り入れる

What's hot (20)

PPTX
Ansibleを使ってdockerコンテナをプロビジョニングする
PDF
Vagrantと網元で開発環境を作ってみよう
PDF
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
PDF
2014.11.01 Dockerことはじめ
PPTX
node-gypを使ったネイティブモジュールの作成
PDF
Rails on Dockerとの戦い
PDF
Reactとbabelで簡易タスク管理ツール作ってみた
PDF
Jenkins study 7 2013-01-28
PDF
Tizen native application
PDF
Firefox Mobile
PDF
Ciじゃない方のJenkins
PDF
Dockerで環境構築したら捗った話
PPTX
初心者が伝えるDocker超入門
PDF
OpenShift 3で、DockerのPaaSを作る話
PDF
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
PDF
「マルチデバイスなDelphiで活かすWebアプリケーション」
PDF
渋谷JVM#1 Immutable時代のプログラミング言語 Clojure
PDF
究極にして至高のWAF
PPTX
Hotoの奇妙な挑戦 〜 Swiftクルセイダーズ 〜
PPTX
RESTful API (JAX-RS) 書くだけで仕様書も 自動で作られていく話 with MicroProfile Open API
Ansibleを使ってdockerコンテナをプロビジョニングする
Vagrantと網元で開発環境を作ってみよう
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
2014.11.01 Dockerことはじめ
node-gypを使ったネイティブモジュールの作成
Rails on Dockerとの戦い
Reactとbabelで簡易タスク管理ツール作ってみた
Jenkins study 7 2013-01-28
Tizen native application
Firefox Mobile
Ciじゃない方のJenkins
Dockerで環境構築したら捗った話
初心者が伝えるDocker超入門
OpenShift 3で、DockerのPaaSを作る話
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
「マルチデバイスなDelphiで活かすWebアプリケーション」
渋谷JVM#1 Immutable時代のプログラミング言語 Clojure
究極にして至高のWAF
Hotoの奇妙な挑戦 〜 Swiftクルセイダーズ 〜
RESTful API (JAX-RS) 書くだけで仕様書も 自動で作られていく話 with MicroProfile Open API
Ad

Similar to AngularJSを通してDockerと触れ合った (16)

PDF
Dockerでデプロイ
PDF
Webアプリケーション開発者のためのDockerハンズオン20210519
PPTX
Docker & Kubernetes基礎
PDF
Webアプリケーション開発者のためのDockerハンズオン
PDF
Docker handson
PDF
Docker/Aarukas入門ハンズオン資料~第1回さくらとコンテナの夕べ #さくらの夕べ 番外編
PDF
Docker講習会資料
PPTX
dockerハンズオン
PDF
Docker基礎+docker0.9, 0.10概要
PPTX
0から始めるコンテナの学び方(Kubernetes Novice Tokyo #14 発表資料)
PDF
Rancher/Kubernetes入門ハンズオン資料~第2回さくらとコンテナの夕べ #さくらの夕べ 番外編
PDF
Docker実践入門
PDF
Dockerイメージの理解とコンテナのライフサイクル
PPTX
~Dockerfileの開発を劇的に楽にする~ Dockerfile開発環境 EDGE
PDF
Dockerで遊んでみよっかー YAPC::Asia Tokyo 2014
PDF
Docker入門: コンテナ型仮想化技術の仕組みと使い方
Dockerでデプロイ
Webアプリケーション開発者のためのDockerハンズオン20210519
Docker & Kubernetes基礎
Webアプリケーション開発者のためのDockerハンズオン
Docker handson
Docker/Aarukas入門ハンズオン資料~第1回さくらとコンテナの夕べ #さくらの夕べ 番外編
Docker講習会資料
dockerハンズオン
Docker基礎+docker0.9, 0.10概要
0から始めるコンテナの学び方(Kubernetes Novice Tokyo #14 発表資料)
Rancher/Kubernetes入門ハンズオン資料~第2回さくらとコンテナの夕べ #さくらの夕べ 番外編
Docker実践入門
Dockerイメージの理解とコンテナのライフサイクル
~Dockerfileの開発を劇的に楽にする~ Dockerfile開発環境 EDGE
Dockerで遊んでみよっかー YAPC::Asia Tokyo 2014
Docker入門: コンテナ型仮想化技術の仕組みと使い方
Ad

AngularJSを通してDockerと触れ合った