LoginSignup
17

More than 5 years have passed since last update.

DockerでローカルExpress環境を立ち上げhello worldするまでの全て

Last updated at Posted at 2017-03-12

環境

  • OS X El Capitan 10.11.6
  • Docker 17.03.0-ce-mac2
  • Express 4.15.2

手順

Dockerイメージを取得

docker pull node:7.7.2-alpine

  • :以降は、好きなバージョンを指定
  • alpineだと軽量らしい(小並感)
  • imageの情報は、https://hub.docker.com/_/node/ などを参照

Dockerイメージを立ち上げてみる

docker run -it -v /Users/jumpei/jumpage/app/:/app -p 8080:3000 node:7.7.2-alpine /bin/sh
  • -it: インタラクティブモード&デバイスを確保
  • -v: volumeを共有するフォルダを指定
    • ホスト側(Mac)とコンテナ側(Docker)で、フォルダを共有できる
      • Mac上の好きなエディタで、コンテナ側のファイルを編集できるようになる
    • 絶対パスで指定
    • 引数は[ホスト側パス]:[コンテナ側パス]
  • -p: ポート番号の対応を指定
    • 引数は[ホスト側ポート]:[コンテナ側ポート]
  • node: イメージ名
  • /bin/bash: 実行コマンド

コンテナ側でpackage.jsonを作成

  • コンテナ側で実行
cd [コンテナ側パス]
npm init
  • いろいろと質問に答えるとpackage.jsonができる
package.json
{
  "name": "jumpage",
  "version": "1.0.0",
  "description": "jumpei_ikegami's page",
  "main": "index.js",
  "scripts": {
    "test": "echo 'Error: no test specified' && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jumtech/jumpage.git"
  },
  "keywords": [
    "jumpage"
  ],
  "author": "jumpei ikegami",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jumtech/jumpage/issues"
  },
  "homepage": "https://github.com/jumtech/jumpage#readme"
}

Expressをインストール

  • コンテナ側で実行
npm install --save express@4.15.2
  • --saveを付けるとpackage.jsonに追記される

index.jsを作成

  • ホスト側の好きなエディタで、共有フォルダ内にindex.jsを作成
    • index.jsは、npm init時に指定したentry point
index.js
var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('hello world');
});

app.listen(3000);
console.log("server starting...");
  • コンテナ側の共有フォルダにもindex.jsがあることを確認

サーバ実行

  • コンテナ側で実行
node index.js
  • ホスト側のブラウザで、localhost:8080にアクセス
    • ポート番号は、docker run時に指定したもの
  • "hello world"の表示を確認

Dockerfileを作成

  • 書式
    • FROM: 元となるimage
    • RUN: build時に実行されるコマンド
    • CMD: run時に実行されるコマンド
# 元になるimageを指定
FROM node:7.7.2-alpine

# 各種インストール
## expressコマンド
RUN npm install -g express-generator

## ファイル変更時に自動でサーバ再起動してくれるdemon
RUN npm install -g nodemon
  • -gを付けるとグローバルにインストールされる

Dockerfileの内容で自作imageを作成

docker build -t jumpage ./
  • -t: 自作イメージ名を指定

自作imageを使ってhello world

docker run -it -v /Users/jumpei/jumpage/app/:/app -p 8080:3000 jumpage /bin/sh
  • コンテナ側で実行
cd [コンテナ側パス]
nodemon index.js
  • ホスト側のブラウザで、localhost:8080にアクセスし、hello worldを確認
  • index.jsを書き換え、nodemonが自動で再起動してくれることを確認

コマンドをshファイルに記録

  • コマンド覚えるの面倒なので、ファイル化する
docker_run.sh
docker run -it -v /Users/jumpei/jumpage/app/:/app -p 8080:3000 jumpage /bin/sh

ここまでのディレクトリ構造

jumpage/
  ├ app/
  |  ├ node_modules/
  |  ├ index.js
  |  └ package.json
  ├ scripts/
  |  └ docker_run.sh
  └ Dockerfile

続き

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17