フロントエンドエンジニアが新規プロジェクトを開発しやすくするためにDockerを導入してみた。Dockerの導入方法

JavaScript初心者の方にオススメの記事

Dockerとは

Dockerとはオープンソースの次世代仮想化技術で、アプリケーションを「コンテナ」にパッケージングして、デプロイ、実行できます。Go言語で書かれていてLinuxカーネルのみに依存します。

参考：今からでも間に合うDockerの基礎。コンテナとは何か、Dockerfileとは何か。Docker Meetup Tokyo #2

Dockerを利用するメリット

dockerのメリットなどに関して、docker meetupの動画が参考になりますので、これから入れようと悩んでいる方はこちらを見ると理解しやすいかと思います。

Dockerの導入

Macの導入に関しては下記になります。始めるにはDocker for MacとDOOKER TOOLBOXの2つのインストールをします。まずはDocker for Macのインストール方法から説明します。

Docker for Macのインストール

https://docs.docker.com/engine/installation/mac/

https://docs.docker.com/docker-for-mac/

[@PC] ~/Documents/dev/ (master)
$ docker-compose up --build
-bash: docker-compose: command not found

[@PC] ~/Documents/dev/ (master)

$ curl -L https://github.com/docker/compose/releases/download/1.7.0/docker-compose-`uname -s`-`uname -m` > ./docker-compose

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current

                                 Dload  Upload   Total   Spent    Left  Speed

100   601    0   601    0     0    569      0 --:--:--  0:00:01 --:--:--   570

100 4865k  100 4865k    0     0  1113k      0  0:00:04  0:00:04 --:--:-- 1652k

[@PC] ~/Documents/dev/ (master)

$ sudo mv ./docker-compose /usr/bin/docker-compose

Password:

[@PC] ~/Documents/dev/ (master)

$ sudo chmod +x /usr/bin/docker-compose

[@PC] ~/Documents/dev/ (master)

$ docker-compose up --build

ERROR:

        Can't find a suitable configuration file in this directory or any

        parent. Are you in the right directory?

        Supported filenames: docker-compose.yml, docker-compose.yaml

docker-compose.yamlとDockerfileを作って、再度起動を試みます。
Dockerfileはプロジェクトのルートに置いておきます。

web:
  build: ./
  volumes:
    - "./:/dev/"
  working_dir: /dev/
  ports:
    - "9000:9000"

FROM node:5.12

MAINTAINER name

WORKDIR /dev/

EXPOSE 9000

CMD ["npm", "install"]
CMD ["npm", "start"]

$ docker-compose up --build
ERROR: Couldn't connect to Docker daemon - you might need to run `docker-machine start default`.

docker-machine start defaultを起動しろと怒られるので、起動してみる。

$ docker-machine start default
Host does not exist: "default"

するとエラーが起きる。これはそもそもdockerを起動できていなかった。
かわいいくじらちゃんを起動。サーバーが起動できていれば、下記の画像のサイドバーに記述されます。

ビルドに成功するとこんな感じのがコンソールに表示されます。

$ docker-compose up -d
Building web
Step 1 : FROM node:5.12
5.12: Pulling from library/node
5c90d4a2d1a8: Pull complete
ab30c63719b1: Pull complete
c6072700a242: Pull complete
abb742d515b4: Pull complete
22efa86cdb65: Pull complete
dc09101fb56d: Pull complete
Digest: sha256:278b754e07da59330b0a13b6bc0ce5f80403f865ba854c49c4be5a669c0a95e3
Status: Downloaded newer image for node:5.12
 ---> 5b1c263efd1e
Step 2 : MAINTAINER name
 ---> Running in 3b055cd6635b
 ---> 28d7270e135b
Removing intermediate container 3b055cd6635b
Step 3 : WORKDIR /dev/
 ---> Running in 36752614dbf4
 ---> cb35eaf4228c
Removing intermediate container 36752614dbf4
Step 4 : EXPOSE 9000
 ---> Running in d08de150deaf
 ---> 693efe86877f
Removing intermediate container d08de150deaf
Step 5 : CMD npm install
 ---> Running in 7b2f3340219e
 ---> 499ca17f6bbf
Removing intermediate container 7b2f3340219e
Step 6 : CMD npm start
 ---> Running in 39b28e533694
 ---> ec33139787c3
Removing intermediate container 39b28e533694
Successfully built ec33139787c3
WARNING: Image for service web was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
Creating dev_1

Docker toolboxのインストール

特に難しいことはなく、OSを選択してdmgファイルがダウンロードされるので、そのファイルを開けばOKです。

https://www.docker.com/products/docker-toolbox

サーバーの細かい設定はサーバーサイドのエンジニアに行ってもらったのですが、追記していく予定です。
dockerを導入することによって、stagingやdevelopなどで環境に依存しない開発が可能になりました。

フロントエンドの人間がdockerで幸せになれるポイント

無駄なコミュニケーションを排除できる

フロントエンドのエンジニアだと、「ステージングのデータが違うので見た目が変わってしまう」「データベースのデータがおかしいので、これを治してください」みたいなデータの問題で無駄なコミュニケーションが発生したりします。

また、ビジネスやディレクターなどにアプリケーションの確認をしてもらう際にも「データやAPIの問題」という話をすることがよくあるかと思いますので、そういう時の無駄なコミュニケーションが排除できるのは嬉しいですよね。開発に集中したいのに…ということもありますので、積極的にSlackでもリアルでもこういう無駄なコミュニケーションは避けていきたい。

そもそもそれフロントエンドが伝えなければいけないの…っていうこともあるかと思いますので、余計なストレスから解き放たれることになります。

以上、フロントエンドのエンジニアがDockerを導入してみた記事でした。同じフロントエンドの方々が幸せになれれば幸いです。

参考リンク

参考：今からでも間に合うDockerの基礎。コンテナとは何か、Dockerfileとは何か。Docker Meetup Tokyo #2

Docker for MAC :
https://docs.docker.com/engine/installation/mac/

https://docs.docker.com/docker-for-mac/

docker toolbox :
https://www.docker.com/products/docker-toolbox

dockerを起動するときのエラーとその対処方法についてはこちらの記事もどうぞ。

docker起動時のエラーと対処方まとめ

そもそもフロントエンドの技術がそこまでわからない、これから伸ばしていきたいという方はこちら。

JavaScript初心者の方にオススメの記事