Dockerを使用してNode.js開発環境を構築 + Hello World

やっと最近Docker🐳の勉強を始めました🎉

できればもっとはやく勉強したかったですが、仕事関係ちょっとiOSを触ることになり時間が取れず...

それも一旦落ち着いたので、Dockerを使用してNode.js開発環境を構築 + Hello Worldを表示するところまでを紹介したいと思います。

ここ記事では「Dockerとは？」「Docker メリット」などの説明はしません。🙇‍♂️
「Dockerとは？」「Docker メリット」と調べてもらうといい記事がたくさん見つかると思いますので、そちらの記事を見てください。

また前提として、Docker Desktopをインストールしいるものとします。

この記事でやること

この記事では

Dockerfileの開発環境を構築
Node.jsでサーバを起動し、ブラウザからHello Worldを表示

を紹介します。

Dockerfileの開発環境を構築

構築したい開発環境

以下の開発環境を構築します。

Node.js(v12.4.0) ... 現時点で最新
Yarn

Dockerfileを作成

FROM node:12.4.0-alpine

RUN apk add --no-cache yarn

WORKDIR /app

docker-compose.yamlを作成

volumesにappディレクトリを指定していますので、このディレクトリ内で開発を行うことになります。

version: "3"
services:
  node:
    container_name: node
    build: .
    volumes:
      - ./app:/app
    tty: true
    ports:
      - 3000:3000

ここまでで、フォルダ構造は以下の通りです。

$ tree
.
├── Dockerfile
└── docker-compose.yaml

コンテナを作成して開始

コンテナを作成し、開始します。
docker-compose.yamlがあるディレクトリで以下のコマンドを実行します。

$ docker-compose up -d

コンテナが開始されたか確認します。

$ docker container ls
CONTAINER ID        IMAGE                                    COMMAND                  CREATED             STATUS              PORTS                    NAMES
0e8e1e7fd72a        sample-of-nodejs-env-using-docker_node   "docker-entrypoint.s…"   46 seconds ago      Up 44 seconds       0.0.0.0:3000->3000/tcp   node

コンテナ内でshellを実行

これにより、コンテナ内で任意の操作ができるようになります。

$ docker container exec -it node /bin/sh
/app #

DockerfileでWORKDIR /appと指定しているので、カレントディレクトリはappディレクトリになっています。

Node.jsのversionとYarnのversionを確認

コンテナ内でshellを実行できるようになったので、Node.jsとYarnのversionを確認してみます。

/app # node -v
v12.4.0
/app # yarn -v
1.16.0

これでNode.js開発環境が構築できました👏

Hello Worldを表示

それではコンテナ内でサーバを起動し、ブラウザ上で「Hello World」を表示してみます。

パッケージは、Expressを使用します。

package.jsonを作成

/app # yarn init --yes
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json

expressをinstall

/app # yarn add express

server.jsを作成

const app =  require('express').express()

app.get('/', (req, res) => res.send('Hello World!👏'))
app.listen(3000, () => console.log('Example app listening on port 3000!'))

docker-compose.yamlのportsで、localhost:3000=>コンテナのport3000にアクセスできるように設定しているので、
サーバを起動するportを3000に指定しています。

ブラウザからアクセス

server.jsを実行します。

/app # node server.js
start! port: 3000

コンテナ内でサーバが起動したので、ブラウザを起動して、http://localhost:3000/にアクセスします。

Hello World!👏と画面に表示されれば成功です🎉

コンテナを停止して削除

docker-compose.yamlがあるディレクトリで以下のコマンドを実行します。

$ docker-compose down

コンテナが削除されているか確認してみます。

$ docker container ls -a
CONTAINER ID        IMAGE                                    COMMAND                  CREATED             STATUS              PORTS                    NAMES

以上です。

Dockerを使用してNode.js開発環境の構築 + Hello World表示を紹介しました。

ここで紹介したコードをgithubで公開しています。

開発環境を素早く構築できるのはとてもいい点だと思います。
チーム開発では積極的に取り入れたいですね。

これからどんどんDockerを使用して開発してみようと思います。

Ikkyu's Tech Blog

技術系に関するブログです。