72
1.1 1.2 2.1 2.2 2.3 2.4 2.5 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 4.1 Table of Contents README はじめに 基礎知識 docker まずはおさわり 基本の"" コンテナのいじり方 イメージの作り方 イメージの連携 gitlab gitlabとは? 準備 ユニットテストとは? GitLabの起動 GitLabの設定 動作確認 GitLab-Ci の設定 CIを体験しよう 参考URL mastodon mastodonとは? 1

Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

1.1

1.2

2.1

2.2

2.3

2.4

2.5

3.1

3.2

3.3

3.4

3.5

3.6

3.7

3.8

3.9

4.1

TableofContents

READMEはじめに

基礎知識

dockerまずはおさわり

基本の"き"

コンテナのいじり方

イメージの作り方

イメージの連携

gitlabgitlabとは?

準備

ユニットテストとは?

GitLabの起動

GitLabの設定

動作確認

GitLab-Ciの設定

CIを体験しよう

参考URL

mastodonmastodonとは?

1

Page 2: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

4.2

4.3

4.4

準備

mastodon...いきまーす!

参考URL

2

Page 3: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

はじめに

本資料は ぺちぱな。14〜本を正すと基本が大事。という当然の結論〜 の補足

資料というかメインコンテンツです。

つたない私の説明をこちらで補います。何しているか分からなくなったらこちら

を参照してください。

本イベントでは、「dockerの基本的な使い方からdockerを使った各種サービスの

構築ができること」を目指しています。

このイベントが終わった頃には、参加者の方々は次のようになっていることで

しょう(願望)

dockerの使い方が分かる

GitLabを使ったCI環境を構築できる

自分専用mastodonインスタンスを起動してトゥートできる

お時間の許す限りお付き合いください!

はじめに

3

Page 4: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

基礎知識~今日の主役たち

黒い画面(ターミナル)

dockerといえばコレ。いわなくてもコレ。今日はこれしか使いません。ごめんな

さい。

入力したプログラムを実行してくれるナイスガイです。怖がらないでください。

Source:Webデザイナーの為の「本当は怖くない」”黒い画面”入門

下記アイコンをクリックorダブルクリックして起動しておいてください。

windows

mac

基礎知識

4

Page 5: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

vi(テキストエディタ)

老舗のテキストエディタ。たいていのLinuxにははじめからインストールされてい

る。emacs派と言い争う。

コマンドモードと挿入モードを行き来しながらテキストをいじります。

$vihoge.txt

「わけわかんなくなったらESCキー!」を覚えておくと良いです。

:q viを終了する

:q! バッファでの編集内容を放棄しviを強制的に終了する

:w バッファの内容をファイルに保存

:wq バッファの内容をファイルに保存し,viを終了する.

Source:最低限vi

docker

基礎知識

5

Page 6: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

今日一番タイピングされる単語。仲良くしてあげてください。

できるだけ新しいバージョンを使うことを推奨します。下記コマンドでバージョ

ンを確かめてください。

古い場合は最新版にアップグレードしましょう。

$docker-v

Dockerversion17.05.0-ce,build89658be

$docker-compose-v

docker-composeversion1.13.0,build1719ceb8

基礎知識

6

Page 7: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

まずはおさわり。

とにかく触ってみないと始まりません。ただ無心にコマンド叩いていきましょ

う。

wordpressサイトを立ち上げよう!

$cddocker/wordpress

$ls-la

-rw-r--r--1hideAkistaff1846223:01.env

-rw-r--r--1hideAkistaff3946223:33docker-compos

e.yml

-rw-r--r--1hideAkistaff4146534406223:39mysql.tar

-rw-r--r--1hideAkistaff4327541766223:32wordpress46.

tar

-rw-r--r--1hideAkistaff4189639686223:31wordpress47.

tar

$dockerload<wordpress46.tar

$dockerload<wordpress47.tar

$dockerload<mysql.tar

$docker-composeup-d

ブラウザを立ち上げてhttp://localhostへアクセス!

まずはおさわり

7

Page 8: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

wordpressの初期設定画面が立ち上がってきましたか??資格情報を登録して管

理者画面までいきましょう。

バージョンアップ

まずはおさわり

8

Page 9: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

おや?wordpressのバージョンが古いみたいです。

バージョンアップしてみましょう。

まずはおさわり

9

Page 10: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$vidocker-compose.yml

version:"2"

services:

wordpress:

image:wordpress:4.6-->この記述を"image:wordpress:latest"

に変更

ports:

-"80:80"

depends_on:

-db

environment:

WORDPRESS_DB_HOST:"db:3306"

networks:

-flat-network

env_file:.env

db:

image:mysql:5.7

volumes:

-"db-data:/var/lib/mysql"

networks:

-flat-network

env_file:.env

volumes:

db-data:

networks:

flat-network:

$docker-composestop

Stoppingwordpress_wordpress_1...done

Stoppingwordpress_db_1...done

$docker-composerm

Removingwordpress_wordpress_1...done

Removingwordpress_db_1...done

$docker-composeup-d

ふたたびブラウザを立ち上げてhttp://localhostへアクセス!

まずはおさわり

10

Page 11: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

お、データベースのアップデートを聞いてきました。

めでたく最新版にアップデートされたようです!

お手軽ですね!

まずはおさわり

11

Page 12: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

基本の"き"

さて、いきなりなんのこっちゃわからんことをしてきたので基本からみていきま

しょう。

イメージを探す、持って来る。

dockerはコンテナイメージを手元において、設定通りの環境をいつでも再現でき

る仕組みです。

まずはコンテナイメージを探して、ダウンロードする必要があります。

searchコマンドでイメージを探します。

$dockersearchalpine

NAMEDESCRIPTION

STARSOFFICIALAUTOMATED

alpineAminimalDock

erimagebasedonAlpineLin...2241[OK]

...

実際に探すときはhttps://hub.docker.comで探すことになるでしょう。

それではイメージをpullコマンドでダウンロードします。

$dockerpullalpine

latest:Pullingfromlibrary/alpine

2aecc7e1714b:Pullcomplete

Digest:sha256:0b94d1d1b5eb130dd0253374552445b39470653fb1a1ec2d8

1490948876e462c

Status:Downloadednewerimageforalpine:latest

イメージがダウンロードされて登録されていることをimageコマンドで確認し

ます。

基本の"き"

12

Page 13: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockerimages

REPOSITORYTAGIMAGEIDCR

EATEDSIZE

alpinelatesta41a7446062d7

daysago3.97M

wordpress4.6ca96afcfa2422

weeksago406MB

wordpresslatestca96afcfa2422

weeksago406MB

mysql5.7e799c7f9ae9c3

weeksago407MB

先程saveコマンドで登録したイメージも登録されていますね。

なにはともあれ、helloworld!

そう、定番のやつですね。

$dockerrunalpineechohelloworld!

helloworld!

やった!やりました!

基本の"き"

13

Page 14: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

コンテナのいじり方

ここではコンテナの各種操作を体験してみましょう。

dockerrun-コンテナの起動

Dockerコンテナの起動のためのコマンドです。

$dockerrunalpineechohelloworld!

helloworld!

このコンテナは echo"HelloDocker"を実行して終了しています。

この時、ローカルにイメージが存在しない場合、自動的にDockerHubからイメー

ジを取得した後、コンテナを起動します。

dockerrunを実行するときに -i(キーボード入力可能)と -t(ttyを確保す

る)のオプションをつけると実行したターミナル上でコンテナを操作することが

できます。まとめて -itで記述できます。

$dockerrun-italpine/bin/sh

#uname-a

Linux568b642580eb4.9.30-moby#1SMPWedMay3105:30:34UTC20

17x86_64Linux

#exit

exitを入力すると、コンテナのターミナルを終了し、ホストターミナルに戻り

ます。

実行した shが終了したためコンテナも停止します。

dockerps-コンテナの稼働状況確認

現在稼働しているコンテナの一覧を見ることができます。先程動かした

wordpressのイメージが動いていますね。

コンテナのいじり方

14

Page 15: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockerps

CONTAINERIDIMAGECOMMAND

CREATEDSTATUSPORTSNA

MES

bcf000b1a41cwordpress:latest"docker-entrypoint..."

2hoursagoUp2hours0.0.0.0:80->80/tcpwo

rdpress_wordpress_1

8626ff5ac374mysql:5.7"docker-entrypoint..."

2hoursagoUp2hours3306/tcpwo

rdpress_db_1

-aオプションをつけて実行すると、先程起動したコンテナがExitedステータス

で残っていることがわかります。

$dockerps-a

CONTAINERIDIMAGECOMMAND

CREATEDSTATUSPORTS

NAMES

568b642580ebalpine"/bin/sh"

2minutesagoExited(127)19secondsago

mystifying_kare

bcf000b1a41cwordpress:latest"docker-entrypoint..."

2hoursagoUp2hours0.0.0.0:80->8

0/tcpwordpress_wordpress_1

8626ff5ac374mysql:5.7"docker-entrypoint..."

2hoursagoUp2hours3306/tcp

wordpress_db_1

dockerのコンテナは終了した後も明示的に指示しない限り残り続けます。これは

コンテナに対して少しでも作業が行われたものはイメージとして利用する可能性

があるため、残すように配慮されているものと思われます。実際に、Exitedなコ

ンテナから新たにイメージを作成することもできます。

dockerinspect-コンテナ情報の取得

コンテナのいじり方

15

Page 16: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

すぐに終了するコンテナと、動き続けるコンテナ。どんな違いがあるのでしょ

う。

これはイメージの起動時に実行されるコマンドに違いが有ります。 inspectコ

マンドで確認してみましょう。

コンテナのいじり方

16

Page 17: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockerinspectalpine

[

...

"Config":{

"Hostname":"9ac68176ac52",

"Domainname":"",

"User":"",

"AttachStdin":false,

"AttachStdout":false,

"AttachStderr":false,

"Tty":false,

"OpenStdin":false,

"StdinOnce":false,

"Env":[

"PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/

usr/bin:/sbin:/bin"

],

"Cmd":[

"/bin/sh",

"-c",

"#(nop)",

"CMD[\"/bin/sh\"]"

],

"ArgsEscaped":true,

"Image":"sha256:a96393421091145abdc0ce8f02691166ed0

fe7f769b4dfc7f700b4b11d4a80df",

"Volumes":null,

"WorkingDir":"",

"Entrypoint":null,

"OnBuild":null,

"Labels":{}

},

...

]

$dockerinspectwordpress|grepCMD

"CMD[\"apache2-foreground\"]"

コンテナのいじり方

17

Page 18: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

CMDで指定されているものが違います。alpineが shであるのに対し、

wordpressは apacheが指定されています。

apacheは起動後もhttpリクエストを待ち続けるのでコンテナは終了せずUPステー

タスになっているようです。

inspectコマンドはコンテナだけでなく、dockerで扱われる様々なオブジェク

トに対して利用できます。

volumeの詳細を確認する例は次のとおりです。

$dockervolumels

DRIVERVOLUMENAME

local24e8addfe7e17b0b32edb89a0110bc73fdb89b74ebe4

7b0fc5d0c755ec61e465

localwordpress_db-data

$dockerinspectwordpress_db-data

[

{

"Driver":"local",

"Labels":null,

"Mountpoint":"/var/lib/docker/volumes/wordpress_db-data

/_data",

"Name":"wordpress_db-data",

"Options":{},

"Scope":"local"

}

]

dockerexec-コンテナの稼働状況確認

execを使うと起動中のコンテナに接続してコマンド操作が行えます。名前もしく

はコンテナIDで接続できます。

どちらも dockerpsコマンドで確認できます。

コンテナ内で ps-elを実行するとapache2が動作していることが実際に分かり

ます。

コンテナのいじり方

18

Page 19: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockerexec-itwordpress_wordpress_1/bin/bash

#ps-el

FSUIDPIDPPIDCPRINIADDRSZWCHANTTYTIM

ECMD

4S0100800-78770-?00:00:0

0apache2

#exit

dockerstop&rm-コンテナの終了と削除の仕方

サービス化したプロセスが動作するコンテナはそのまま動き続けます。終了する

には stopコマンドを使います。

$dockerstopwordpress_wordpress_1

wordpress_wordpress_1

$dockerstopwordpress_db_1

wordpress_db_1

コンテナの状態を確認します。

$dockerps-a

CONTAINERIDIMAGECOMMAND

CREATEDSTATUSPORTS

NAMES

568b642580ebalpine"/bin/sh"

AboutanhouragoExited(137)22secondsago

mystifying_kare

bcf000b1a41cwordpress:latest"docker-entrypoint..."

3hoursagoExited(0)3minutesago

wordpress_wordpress_1

8626ff5ac374mysql:5.7"docker-entrypoint..."

3hoursagoExited(0)10secondsago

wordpress_db_1

残ったもので不要なコンテナは rmコマンドで削除できます。稼働中のコンテナ

は削除できませんのであしからず。

コンテナのいじり方

19

Page 20: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockerrmmystifying_kare

mystifying_kare

$dockerps-a

CONTAINERIDIMAGECOMMAND

CREATEDSTATUSPORTS

NAMES

bcf000b1a41cwordpress:latest"docker-entrypoint..."

3hoursagoExited(0)9minutesago

wordpress_wordpress_1

8626ff5ac374mysql:5.7"docker-entrypoint..."

3hoursagoExited(0)6minutesago

wordpress_db_1

wordprssとmysqlのコンテナはもう少しとっておきましょう。

dockersystemprune-お掃除の仕方

dockerはその性質上、知らない間に色々なデータを残します。意外とリソースに

優しくありません。

どれだけリソースを消費しているか dockersystemdfコマンドで確認しま

しょう。

$dockersystemdf

TYPETOTALACTIVESIZE

RECLAIMABLE

Images1224.87

GB4.304GB(88%)

Containers20187B

187B(100%)

LocalVolumes22232.

4MB0B(0%)

最近のdockerさんは自信が管理するリソース(イメージ、コンテナ、ボリュー

ム、ネットワーク)のうちどこからも参照されていないものを一気に削除できる

コマンド dockersystempruneを用意してくれました!

コンテナのいじり方

20

Page 21: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockersystemprune

WARNING!Thiswillremove:

-allstoppedcontainers

-allvolumesnotusedbyatleastonecontainer

-allnetworksnotusedbyatleastonecontainer

-alldanglingimages

Areyousureyouwanttocontinue?[y/N]y

DeletedContainers:

bcf000b1a41cad0d98753f44bf83ba332ce0eae2f8336158c4bf96c40af10331

8626ff5ac374332c41a1e02df603736e873e394f74cbea6750ef9d628cc5da01

DeletedVolumes:

24e8addfe7e17b0b32edb89a0110bc73fdb89b74ebe47b0fc5d0c755ec61e465

wordpress_db-data

DeletedNetworks:

wordpress_flat-network

Totalreclaimedspace:232.4MB

これはうれしい機能です!まめに実行しておいてください。

コンテナのいじり方

21

Page 22: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

イメージの作り方

こではイメージの作り方を具体的に体験してみましょう。

準備

$cd../whalesay/

$ls-la

$dockerload<whalesey.tar

$dockerrundocker/whalesaycowsayphper-nya!

____________

<paper-nya!>

------------

\

\

\

##.

######==

########===

/""""""""""""""""___/===

~~~{~~~~~~~~~~~~~~~~/===-~~~

\______o__/

\\__/

\____\______/

くじらさんがしゃべった!!!!!!!

このコンテナを拡張してイメージを作ろうと思います。

cowsayコマンドの使い方

cowの一覧は -lオプションで見ることができます。

イメージの作り方

22

Page 23: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockerrundocker/whalesaycowsay-l

/usr/local/share/cows:

beavis.zenbongbud-frogsbunnycheesecowerdaemondefaultdock

erdragon

dragon-and-cowelephantelephant-in-snakeeyesflaming-sheepgho

stbusters

head-inhellokittykisskittykoalakoshluke-koalameowmilkmo

ofasamoose

mutilatedrensatanicsheepskeletonsmallsodomizedsquirrelst

egosaurus

stimpysupermilkersurgerytelebearsthree-eyesturkeyturtletu

xudder

vadervader-koalawww

cowは -fオプションで変更できます(うしさんになった)

$dockerrundocker/whalesaycowsay-fwwwphper-nya!

____________

<phper-nya!>

------------

\^__^

\(oo)\_______

(__)\)\/\

||--WWW|

||||

デフォルトのcowはファイルを書き換えて変更できます(コンテナ内)

#cp/usr/local/share/cows/www.cow/usr/local/share/cows/default

.cow

dockercommit-起動したコンテナからイメージを作成

イメージの作り方

23

Page 24: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

いちばん手っ取り早くイメージを作成する方法はdockercommitを使う方法で

す。

イメージ内に接続してデフォルトのcowを変更してみます。

$dockerrun-itdocker/whalesay/bin/bash

#cp/usr/local/share/cows/www.cow/usr/local/share/cows/default

.cow

#exit

実行が完了したコンテナのIDを確認します。

$dockerps-a

CONTAINERIDIMAGECOMMANDCR

EATEDSTATUSPORTS

NAMES

45040acafc72docker/whalesay"/bin/bash"9

minutesagoUp5minutes

dazzling_roentgen

dockercommitを使ってイメージを作りましょう。コンテナIDもしくは名前で指

定しましょう。

dockercommit[OPTIONS]CONTAINER[REPOSITORY[:TAG]]

$dockercommitdazzling_roentgenhideaki/cowsay

$dockerimages

REPOSITORYTAGIMAGEIDC

REATEDSIZE

hideaki/cowsaylatest256199fb22662

0minutesago247MB

イメージが登録されています!早速実行してみましょう。

イメージの作り方

24

Page 25: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockerrunhideaki/cowsaycowsayMoo

_____

<Moo>

-----

\^__^

\(oo)\_______

(__)\)\/\

||--WWW|

||||

うしさんに変更されたcowsayイメージになりました!

Dockerfile-ファイルに記載した内容をイメージ化

commitは手っ取り早く作ることができますが、手作業が入るため同じイメージを

作ることは二度とできません。

そこで突如出現するDockerfile。

これはInfrastructureascodeの考え方に則り、構築手順をファイル化しファイル

内容に沿ったイメージを作成することができます。

Source:さわって理解するDocker入門

イメージの作り方

25

Page 26: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

詳しい書式は Dockerfileリファレンス や Dockerfileの命令を理解して、より

Dockerを有効活用したい!を参考にしてください。ここでは最低限の説明に留め

ます。

Dockerfileのコマンド一覧(抜粋)

コマンド

意味 補足

FROM ベースイメージとなるイメージを指定する

RUN イメージをビルドするためのコマンドを指定する

「RUNapkadd–updatepy-pip」の場合、実際には「apkadd–updatepy-pip」の部分が実行される

COPY ホストからコンテナ内にファイルをコピーする

CMDイメージからコンテナを起動するときに実行するコマンドを指定する

Dockerfile内でCMDは1個だけ指定できる

カスタムイメージを作ってみよう!

Dockerfileを利用してカスタムイメージを作ってください。ただし下記条件は

守ってください。

好きなcowに変更する

runにコマンドの指定(cowsayhoge)がない場合は何か適当に喋る。

FROMdocker/whalesay:latest

RUN

CMD["",""]

Dockerfileが作成できたら下記コマンドでイメージをビルドします。 -tオプ

ションでタグを付けておきます。

イメージの作り方

26

Page 27: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockerbuild-thideaki/cowsay.

$dockerimages

REPOSITORYTAGIMAGEIDC

REATEDSIZE

hideaki/cowsaylatest819ee733dd501

5minutesago247MB

$dockerrunhideaki/cowsay

_____

<boo>

-----

\^__^

\(oo)\_______

(__)\)\/\

||--WWW|

||||

これであなたもイメージマスター!かも。

お掃除 dockersystempruneもお忘れなく。

イメージの作り方

27

Page 28: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

イメージの連携

dockercompose

WordPressをdockerで構築する場合、WordPress本体が置かれているアプリケー

ション・サーバ(webサーバー+PHP)とMySQLサーバという大まかに二つのコ

ンテナで構成されることになります。

dockercomposeとは、複数のDockerコンテナからなるサービスを構築・実行す

る手順をひとまとめに定義して自動化するという機能です。

普通であればそれらコンテナごとに個別に起動し、さらにそれぞれを関連付ける

( linkオプション)必要があります。

起動する順序にも気を使わなくてはなりません。コンテナの数が増えてくると面

倒になってしまいます。

dockercomposeは docker-compose.ymlというファイルで構成を定義します。

YAMLで体系的に構成を定義出来るので全体像の見通しが良いのが特徴です。

dockerrun時のオプションをほぼ同じように定義できる上、コマンド1回実行する

だけで複数のコンテナサービスを全て起動できます。

Source:docker-composeを使ってWordPressテーマ開発環境を構築しよう

イメージの連携

28

Page 29: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

docker-compose.yml

$cd../wordpress/

$vidocker-compose.yml

version:"2"

services:

wordpress:

image:wordpress:latest

ports:

-"80:80"

depends_on:

-db

environment:

WORDPRESS_DB_HOST:"db:3306"

networks:

-flat-network

env_file:.env

db:

image:mysql:5.7

volumes:

-"db-data:/var/lib/mysql"

networks:

-flat-network

env_file:.env

volumes:

db-data:

networks:

flat-network:

.env

イメージの連携

29

Page 30: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

WORDPRESS_DB_NAME=wordpress

WORDPRESS_DB_USER=wp_user

WORDPRESS_DB_PASSWORD=hogehoge

MYSQL_RANDOM_ROOT_PASSWORD=yes

MYSQL_DATABASE=wordpress

MYSQL_USER=wp_user

MYSQL_PASSWORD=hogehoge

起動

$docker-composeup-d

$docker-composeps

NameCommandState

Ports

----------------------------------------------------------------

-------------------

wordpress_db_1docker-entrypoint.shmysqldUp

3306/tcp

wordpress_wordpress_1docker-entrypoint.shapach...Up

0.0.0.0:80->80/tcp

終了(コンテナの停止/削除およびボリュームの削除)

$docker-composedown-v

もしdocker-compseを使わなかったら...

イメージの連携

30

Page 31: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockerrun--namedb-vdb-data:/var/lib/mysql-eMYSQL_USER=w

p_user-eMYSQL_PASSWORD=hogehoge-eMYSQL_DATABASE=wordpress-d

mysql:5.7

$dockerrun-p80:80-eWORDPRESS_DB_PASSWORD=hogehoge-d--nam

ewordpress--linkdb:mysqlwordpress

$dockerstopwordpress

$dockerstopdb

$dockerrmwordpress

$dockerrmdb

$dockervolumermdb-data

環境設定を変えてみよう!

docker-compose.ymlの設定を変更して実行される環境を変えてみましょう。ただ

し下記条件は守ってください。

ブラウザからアクセスされるポート番号は9090DBのデータ保存先を実行中のフォルダ内に指定する

$docker-composeup-d

Creatingnetwork"wordpress_flat-network"withthedefaultdrive

r

Creatingvolume"wordpress_db-data"withdefaultdriver

Creatingwordpress_db_1...

Creatingwordpress_db_1...done

Creatingwordpress_wordpress_1...

Creatingwordpress_wordpress_1...done

$ls-la

-rw-r--r--1hideAkistaff1846223:01.env

drwxr-xr-x@9hideAkistaff3066305:57db-data<--

できている

-rw-r--r--1hideAkistaff4016305:56docker-compo

se.yml

-rw-r--r--1hideAkistaff4146534406223:39mysql.tar

-rw-r--r--1hideAkistaff4327541766223:32wordpress46.

tar

-rw-r--r--1hideAkistaff4189639686223:31wordpress47.

イメージの連携

31

Page 32: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

tar

$ls-ladb-data/

total376912

drwxr-xr-x@20hideAkistaff6806305:57.

drwxr-xr-x8hideAkistaff2726306:00..

-rw-r-----1hideAkistaff566305:57auto.cnf

-rw-------1hideAkistaff16796305:57ca-key.pem

-rw-r--r--1hideAkistaff10746305:57ca.pem

-rw-r--r--1hideAkistaff10786305:57client-cert

.pem

-rw-------1hideAkistaff16796305:57client-key.

pem

-rw-r-----1hideAkistaff13216305:57ib_buffer_p

ool

-rw-r-----1hideAkistaff503316486305:57ib_logfile0

-rw-r-----1hideAkistaff503316486305:56ib_logfile1

-rw-r-----1hideAkistaff796917766305:57ibdata1

-rw-r-----1hideAkistaff125829126305:58ibtmp1

drwxr-x---77hideAkistaff26186305:57mysql

drwxr-x---90hideAkistaff30606305:57performance

_schema

-rw-------1hideAkistaff16796305:57private_key

.pem

-rw-r--r--1hideAkistaff4516305:57public_key.

pem

-rw-r--r--1hideAkistaff10786305:57server-cert

.pem

-rw-------1hideAkistaff16796305:57server-key.

pem

drwxr-x---108hideAkistaff36726305:57sys

drwxr-x---3hideAkistaff1026305:57wordpress

$docker-composedown-v

docker-composeの使い方、イメージできましたか?

(補足)データボリュームの指定書式について

イメージの連携

32

Page 33: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

公式リファレンスに記載があります。参考にしてください

Composeファイル・リファレンス

イメージの連携

33

Page 34: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

GitLabとは?

本章のゴール

GitLabをローカルに立てて、ソースとコンテナの管理ができる

ローカルの自動CI環境を構築できる

GitLab(ギットラボ)

ソフトウェア開発支援環境です。「GitHub」のようなサービスを社内などのク

ローズド環境に独自で構築できるGitリポジトリマネージャーです。Gitベースの

ソースコード管理機能、マージリクエスト、レビュー機能なども備えています。

さらにCI機能・コンテナレジストリ機能などが追加され、オールインワンのCI/DIソリューションとして注目されています。

ローカル運用も可能なため、セキュリティおよびコスト面で導入が難しかった企

業でも使われるようになっています。

GitLabを導入している企業

gitlabとは?

34

Page 35: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

結構ありますね。

Source:GitLabを利用している企業

システム構成

Source:ContinuousDeliverywithGitLabCIandAnsible(part1)

gitlabとは?

35

Page 36: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

Source:CodingtheNextBuild

gitlabとは?

36

Page 37: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

準備

gitlabへのアクセスに使うドメイン名(phper-na14.info)を名前解決できるよう設

定を行います。

hostsファイルの編集(ホスト)

windows

HostsFileManager

192.168.99.100gitlab.phper-na14.info

192.168.99.100registry.phper-na14.info

192.168.99.100ci.phper-na14.info

mac

準備

37

Page 38: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$sudovi/etc/hosts

127.0.0.1gitlab.phper-na14.inforegistry.phper-na14.infoci.php

er-na14.info

hostsファイルの編集(ゲスト)*dockertoolboxのみ

$docker-machinessh

$sudovi/etc/hosts

127.0.0.1gitlab.phper-na14.inforegistry.phper-na14.infoci.php

er-na14.info

$exit

プライベートレジストリの設定(https通信からhttp通信へ切替)

windows

$docker-machinessh

$vi/var/lib/boot2docker/profile

EXTRA_ARGS='

--labelprovider=virtualbox

--insecure-registry192.168.99.0/24

--insecure-registry172.17.0.0/16

'

$exit

mac

準備

38

Page 39: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

イメージのインポート

本章で使うイメージをインポートしておきます。

$cdgitlab

$dockerload<docker.tar

$dockerload<gitlab-ce.tar

$dockerload<gitlab-runner.tar

$dockerload<redis.tar

$dockerload<dnmonster.tar

$dockerload<python.tar

準備

39

Page 40: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

ユニットテストとは?

identidock(webアプリ)起動

$cdgitlab/files

$docker-composeup-d

localhost:9090へアクセス

テストの中身確認

ユニットテストとは?

40

Page 41: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$viapp/tests.py

importunittest

importidentidock

classTestCase(unittest.TestCase):

defsetUp(self):

identidock.app.config["TESTING"]=True

self.app=identidock.app.test_client()

deftest_get_mainpage(self):

page=self.app.post("/",data=dict(name="MobyDock"))

assertpage.status_code==200

assert'Hello'instr(page.data)

assert'MobyDock'instr(page.data)

deftest_html_escaping(self):

page=self.app.post("/",data=dict(name='"><b>TEST</b><

!--'))

assert'<b>'notinstr(page.data)

if__name__=='__main__':

unittest.main()

テスト実行

$dockerrunfiles_identidockpython/app/tests.py

ユニットテストとは?

41

Page 42: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

GitLabの起動

作業フォルダへ移動しdocker-composeを使ってGitlabを起動します。

$cdgitlab

$ls-l

-rwxrwxrwxdocker-compose.yml

drwxrwxrwxfiles

$docker-composeup-d

起動に結構時間がかかります。起動の状況を確認するためにログをリアルタイム

に表示しましょう。

$docker-composelog-f

ログの出力が頻繁になったらCtrl+cでログの出力を停止しhttp://gitlab.phper-na14.infoへアクセスします。

下記の画面がでたら起動完了です。

アクセスできない?名前解決ができているか確認してみましょう。応答がなけれ

ば前項の設定をもう一度行ってみてください。

GitLabの起動

42

Page 43: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$pinggitlab.phper-na.info

PINGgitlab.phper-na14.info(127.0.0.1):56databytes

64bytesfrom127.0.0.1:seq=0ttl=64time=0.046ms

64bytesfrom127.0.0.1:seq=1ttl=64time=0.082ms

64bytesfrom127.0.0.1:seq=2ttl=64time=0.079ms

GitLabの起動

43

Page 44: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

GitLabの設定

GitLabの初期設定を行います。

管理者パスワードの設定

ログイン

ユーザー名はroot先に設定したパスワードを入力してログインします。

GitLabの設定

44

Page 45: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

プロジェクトの新規作成

プロジェクトの設定

projectname(プロジェクト名):test

VisiblityLevel(公開範囲):public

GitLabの設定

45

Page 46: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

にて設定してください。

GitLabの設定

46

Page 47: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

動作確認

リポジトリの確認

http://gitlab.phper-na14.info/root/testへアクセスしリポジトリが空であることを確

認します。

ソースコード登録

gitグルーバル設定(既に実施している場合は不要)

$gitconfig--globaluser.name"Administrator"

$gitconfig--globaluser.email"[email protected]"

ソースコードをリポジトリに登録します。README.mdはコピーします。

動作確認

47

Page 48: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$gitclonehttp://[email protected]/root/test.git

$cdtest

$cp../files/README.md.

$gitaddREADME.md

$gitstatus

$gitcommit-m"addREADME"

$gitpush-uoriginmaster

リポジトリの確認

http://gitlab.phper-na14.info/root/testへアクセスし、先程pushしたソースが登録

されていることを確認します。

レジストリの動作確認

リポジトリの確認

http://gitlab.phper-na14.info/root/test/container_registryへアクセスしレジストリ

が空であることを確認します。

動作確認

48

Page 49: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

プライベートレジストリへのログイン

$dockerloginregistry.phper-na14.info

Username(root):root

Password:

LoginSucceeded

イメージの登録

$dockertaglibrary/python:3.4registry.phper-na14.info/root/te

st/python:3.4

$dockerpushregistry.phper-na14.info/root/test/python:3.4

e5ba092876c2:Pushed

fafff35446a4:Pushed

e1013fcbd78a:Pushed

ab0825ad21e8:Pushed

e7b0b4cd055a:Pushed

445ed6ee6867:Pushed

c59fa6cbcbd9:Pushed

8d4d1ab5ff74:Pushed

3.4:digest:sha256:b5422da942dc1480c28267865b852b7a46a8b91a99de

824a1da23c6d9267cf27size:2007

イメージの登録確認

動作確認

49

Page 50: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

http://gitlab.phper-na14.info/root/test/container_registryへアクセスし、先程pushしたイメージが登録されていることを確認します。

動作確認

50

Page 51: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

GitLabCIの設定

Registrationtokenの確認

http://gitlab.phper-na14.info/admin/runnersへアクセスし"Registrationtoken"を控

えておきます。

gitlab-runnerの登録

既に起動しているgitlab-runnerにログインして設定を行います。

先にmacの方はipアドレスを調べておきましょう

mac

gitlab-cicoordinatorURLに指定するgitlab-ceのipアドレスの調べ方

$dockerinspectgitlab-ce|grepIPAddress

"SecondaryIPAddresses":null,

"IPAddress":"",

"IPAddress":"172.18.0.2",

extra_hostsに指定するgitlab-runner-dockerのipアドレスの調べ方

GitLab-Ciの設定

51

Page 52: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockernetworkinspectbridge|grepGateway

"Gateway":"172.17.0.1"

さて、準備ができした。

既に起動しているgitlab-runnerにログインして設定を行います。

$dockerps

NameCommandState

Ports

----------------------------------------------------------------

-----------------------------------------

gitlab-ce/assets/wrapperUp22/tcp,

0.0.0.0:443->443/tcp,0.0.0.0:80->80/tcp

gitlab-runner/usr/bin/dumb-init/entryp...Up

$dockerexec-itgitlab-runner/bin/bash

下記コマンド実行後、対話式で入力しENTERキーを押していきます#以降はコメ

ントですので入力はしないでください

#gitlab-ci-multi-runnerregister

Runninginsystem-mode.

Pleaseenterthegitlab-cicoordinatorURL(e.g.https://gitlab.

com/\:

-->http://192.168.99.100/ci#dockertoolbox

-->http://172.18.0.2/ci#dockerformac注)gitlab-ceコンテナのi

pを指定

Pleaseenterthegitlab-citokenforthisrunner:

-->cD4zetjQsmVHq-2Zo8qn#先ほど控えたトークンを入力

Pleaseenterthegitlab-cidescriptionforthisrunner:

-->[1e57eefd7e33]:ci

GitLab-Ciの設定

52

Page 53: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

Pleaseenterthegitlab-citagsforthisrunner(commaseparated

):

-->build,test,deploy

Whethertorununtaggedbuilds[true/false]:

-->[false]:#入力なし

WhethertolockRunnertocurrentproject[true/false]:

-->[false]:#入力なし

Registeringrunner...succeededrunner=Rx93N

8ie

Pleaseentertheexecutor:docker,parallels,shell,ssh,virtua

lbox,docker-ssh,docker+machine,docker-ssh+machine,kubernetes

:

-->docker

PleaseenterthedefaultDockerimage(e.g.ruby:2.1):

-->docker:latest

Runnerregisteredsuccessfully.Feelfreetostartit,butifit

'srunningalreadytheconfigshouldbeautomaticallyreloaded!

続いて不足している設定を追記/変更します。

GitLab-Ciの設定

53

Page 54: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

#vi/etc/gitlab-runner/config.toml

concurrent=1

check_interval=0

[[runners]]

name="ci"

url="http://192.168.99.100/ci"

token="a30c281805be2666c8ddb048e0331f"

executor="docker"

[runners.docker]

tls_verify=false

image="dockerlatest"

変更-->privileged=true#trueに変更

disable_cache=false

変更-->volumes=["/var/run/docker.sock:/var/run/docker.sock"

,"/cache"]#既にvolumesが定義されているので上書きする

shm_size=0

追加toolboxの場合-->extra_hosts=["gitlab.phper-na14.info:192

.168.99.100","registry.phper-na14.info:192.168.99.100"]#追記d

ockertoolbox

追加formacの場合-->extra_hosts=["gitlab.phper-na14.info:172.

17.0.1","registry.phper-na14.info:172.17.0.1"]#追記dockerfor

mac 注)gitlab-runner-dockerのipを指定 環境によって変わる

[runners.cache]

#exit

gitlab-runnerの登録確認

http://gitlab.phper-na14.info/admin/runnersへアクセスしgitlab-runnerが登録され

ていることを確認します。

GitLab-Ciの設定

54

Page 55: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

CIを体験しよう

これからやること

1. ソースコードをGitLabにpushします

2. GitLabCIがpushイベントを検知し、設定されているジョブを自動的に実行

i. イメージのビルド

ii. アプリケーションのテスト

iii. テストをパスしたソースを含んだイメージを自動的にレジストリに登録

つまりプログラムソースをpushすると自動でテストが走り、実行環境まで整備し

てくれます。

Source:GitプッシュからAmazonECSに自動デプロイする仕組みを構築する

さぁ、体験してみましょう。

ソースコードのcopyfilesフォルダからtestフォルダへファイルを一式コピーします。

$cp-r../files/..

CIを体験しよう

55

Page 56: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

Jobの内容

Jobの内容が上記の仕様になっていることを確認してください。

$vi.gitlab-ci.yml

variables:

DOCKER_DRIVER:overlay

stages:

-build

-test

-deploy

build:#イメージのビルド

image:docker:latest

stage:build

before_script:

-dockerinfo

script:

-dockerbuild-t$CI_REGISTRY_IMAGE/identidock:latest.

tags:

-build

test:#イメージのテスト

image:docker:latest

stage:test

script:

-dockerrun$CI_REGISTRY_IMAGE/identidock:latestpython/ap

p/tests.py

tags:

-test

deploy:#イメージの登録(動作環境へのデプロイなど)

image:docker:latest

stage:deploy

script:

CIを体験しよう

56

Page 57: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

-dockerlogin-ugitlab-ci-token-p$CI_BUILD_TOKEN$CI_REG

ISTRY

-dockerpush$CI_REGISTRY_IMAGE/identidock:latest

tags:

-deploy

ソースコードのpush

$gitadd.

$gitstatus

$gitcommit-m"デプロイテスト"

$gitpush-uoriginmaster

Jobの確認

ソースコードのpushを検知したGitLabは、Jobを登録してgitlab-runnerにてその

Jobを実行します。

http://gitlab.phper-na14.info/root/test/pipelinesにてJobを確認してみましょう。

おや?テストJobで失敗しています。詳細を見てみましょう。

CIを体験しよう

57

Page 58: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$dockerrun$CI_REGISTRY_IMAGE/identidock:latestpython/app/te

sts.py

.F

================================================================

======

FAIL:test_html_escaping(__main__.TestCase)

----------------------------------------------------------------

------

Traceback(mostrecentcalllast):

File"/app/tests.py",line19,intest_html_escaping

assert'<b>'notinstr(page.data)

AssertionError

----------------------------------------------------------------

------

Ran2testsin0.006s

FAILED(failures=1)

ERROR:Jobfailed:exitcode1

サニタイズ処理のテストが失敗していました。

ソース修正

エラーの原因が分かったのでサニタイズ処理を追加しましょう。修正後再度pushします。

$viapp/identidock.py

name=html.escape(request.form['name'],quote=True)#18行目修正

name=html.escape(name,quote=True)#38行目付近に追記

$gitadd.

$gitstatus

$gitcommit-m"HTMLエスケープ処理追加"

$gitpush-uoriginmaster

再度Jobの確認

CIを体験しよう

58

Page 59: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

http://gitlab.phper-na14.info/root/test/pipelines

暫く待つと...お!テストがパスされて最後までJobが動作しています。

イメージ登録確認

レジストリにイメージが登録されています!

CIを体験しよう

59

Page 60: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

SpecialThanks

SaaSなしでもインフラCIを!GitLabCI+Docker+Ansible+serverspecでインフラCIを試す

プライベートレジストリ--insecure-registryの設定方法(https通信→http通信への切り替え)

DockerinDockerのベタープラクティス

GitプッシュからAmazonECSに自動デプロイする仕組みを構築する

Dockert調査 ~ログ編~

--insecure-registryOSごと設定まとめ

参考URL

60

Page 61: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

mastodonとは?

本章のゴール

dockerを使ってmastodonインスタンスをローカルに立てる

ローカルに立てたmastodonインスタンスをインターネットに公開する

mastodon(マストドン)

(Mastodon)はミニブログサービスを提供するためのフリーソフトウェア、また

はこれが提供する連合型のソーシャルネットワークサービスである。「脱中央集

権型」(decentralized)のマストドンのサーバーはだれでも自由に運用する事が可

能であり、利用者は通常このサーバーの一つを選んで所属するが、異なるサー

バーに属する利用者間のコミュニケーションも容易である。

Source:マストドン(ミニブログ)wikipedia

日本で有名なマストドンインスタンス

mstdn.jppawoo.net (pixiv公式)friends.nico (niconico/ドワンゴ公式)

mastodonとは?

61

Page 62: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

Source:日本のマストドンインスタンス一覧

nullkal氏...ドワンゴ...

システム構成

Source:勉強会に行ってみた!第51回「Mastodon/Pawooの運用&開発技術

mastodonとは?

62

Page 63: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

準備

イメージをインポート

$cdmastodon

$dockerload<mastodon.tar

$dockerload<postgresql.tar

ngrokで公開用URLを取得

ngrok(エヌジーロック)はNATやファイヤーウォール以下にあるローカルサー

バーを、インターネット越しにアクセス可能にしてくれるサービスです。

今回は、このサービスを使ってmastodonインスタンスを外部に公開します。

Source:ngrok

windows

準備

63

Page 64: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

DockerTerminalではなくコマンドプロンプトを起動して実行してください。

>cdpath-to-ngrok

>ngrok.exehttp-region=ap192.168.99.100:3000

ngrokby@inconshreveable

(Ctrl+Ctoquit)

SessionStatusonline

Version2.2.4

RegionAsiaPacific(ap)

WebInterfacehttp://127.0.0.1:4040

Forwardinghttp://ee9e6dd7.ap.ngrok.io->192

.168.99.100:3000

Forwardinghttps://ee9e6dd7.ap.ngrok.io->19

2.168.99.100:3000

Connectionsttlopnrt1rt5p5

0p90

000.000.000.

000.00

mac

別ターミナルで実行してください

準備

64

Page 65: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$chmod+xngrok

$./ngrokhttp-region=ap3000

ngrokby@inconshreveable

(Ctrl+Ctoquit)

SessionStatusonline

Version2.2.4

RegionAsiaPacific(ap)

WebInterfacehttp://127.0.0.1:4040

Forwardinghttp://ee9e6dd7.ap.ngrok.io->loc

alhost:3000

Forwardinghttps://ee9e6dd7.ap.ngrok.io->lo

calhost:3000

Connectionsttlopnrt1rt5p5

0p90

000.000.000.

000.00

設定ファイル編集

公開URL設定

ユーザーがアクセスする公開URLを設定します。

出力されたForwarding行に記載されたURLを設定ファイルに転記します。

$vi.env.production

WEB_DOMAIN=https://ee9e6dd7.ap.ngrok.io

メール受信設定

自分のgmail宛にメールが受信できるように設定します。

下記URLを参考にアプリパスワードの作成を行った上設定してください(要2段階認証設定)

Source:Googleアプリパスワードを利用して2段階認証をより便利に

準備

65

Page 66: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$vi.env.production

SMTP_SERVER=smtp.gmail.com

SMTP_PORT=587

[email protected]<--自分のURL

SMTP_PASSWORD=アプリパスワード

[email protected]

SMTP_DOMAIN=gmail.com

もし、設定できない場合は...Skipしましょう。

準備

66

Page 67: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

mastodon...いきまーす!

さぁ、mastodonのインスタンスを立てますよ!

データベースの作成

$docker-composerun--rmwebrailsdb:migrate

アセットファイルの作成

$docker-composerun--rmwebrailsassets:precompile

起動

もうおなじみのコマンドで!と中身も確認しておきましょう。

$vidocker-compose.yml

version:'3'

services:

db:

restart:always

image:postgres:alpine

###UncommenttoenableDBpersistance

volumes:

-postgres:/var/lib/postgresql/data

redis:

restart:always

image:redis:alpine

###UncommenttoenableREDISpersistance

volumes:

mastodon...いきまーす!

67

Page 68: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

-redis:/data

web:

build:.

image:gargron/mastodon

restart:always

env_file:.env.production

command:bundleexecrailss-p3000-b'0.0.0.0'

ports:

-"3000:3000"

depends_on:

-db

-redis

volumes:

-public-assets:/mastodon/public/assets

-public-packs:/mastodon/public/packs

-public-system:/mastodon/public/system

#タイムラインや通知をWebsocketで受け取ることができます

streaming:

build:.

image:gargron/mastodon

restart:always

env_file:.env.production

command:npmrunstart

ports:

-"4000:4000"

depends_on:

-db

-redis

#メッセージパッシング

sidekiq:

build:.

image:gargron/mastodon

restart:always

env_file:.env.production

command:bundleexecsidekiq-qdefault-qmailers-qpull-

qpush

depends_on:

mastodon...いきまーす!

68

Page 69: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

-db

-redis

volumes:

-public-system:/mastodon/public/system

volumes:

postgres:

redis:

public-assets:

public-packs:

public-system:

$docker-composeup-d

起動状況確認

こちらも起動に時間がかかるので起動状況を確認します。

$docker-composelogs-f

起動確認

あの画面がでましたか??

windows

http://192.168.99.100:3000/

mac

http://localhost:3000/

mastodon...いきまーす!

69

Page 70: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

公開確認

携帯などから確認してみましょう!表示されましたか??(ngrokのアドレスは

各自で読み替えてください)

https://ee9e6dd7.ap.ngrok.io

アカウント作成

初期表示画面にてアカウントを作成(参加)してください。メール認証後ログイ

ンしましょう。

もちろんトゥートもできるはず!

なおメール設定ができていない方は、下記コマンドにてメール認証を行ってログ

インしましょう。

$docker-composerun--rmwebrailsmastodon:confirm_emailUSER_

EMAIL=アカウント作成時に登録したメールアドレス

管理者の登録

下記コマンドで管理者を作成できます。ここでは既に作成したユーザーに管理者

権限を与えています

mastodon...いきまーす!

70

Page 71: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

$docker-composerun--rmwebrailsmastodon:make_adminUSERNAME

=アカウント作成時に登録したユーザー名

サイトの設定は下記URLにて行います。(ngrokのアドレスは各自で読み替えて

ください)

https://ee9e6dd7.ap.ngrok.io/admin/settings/

mastodon...いきまーす!

71

Page 72: Table of Contents · docker まずはおさわり ... Source: Webデザイナーの為の「本当は怖くない」”黒い画面”入門 下記アイコンをクリックorダブルクリックして起動しておいてください。

SpecialThanks

DockerでMastodonをローカルで動かしてみた!ので、その方法をご紹介。

MastodonをDockerで起動する方法

小規模Mastodonインスタンスを運用するコツ

勉強会に行ってみた!第51回「Mastodon/Pawooの運用&開発技術

参考URL

72