最新のフロントエンド開発環境を整備してチュートリアルなどを実行するのは面倒、ということは実はなくて、Node.js さえインストールしてあれば npm install && npm start
で大概は済む話です。とはいえ、何事も進化の早い当節のこと、開発マシンにインストールする Node.js のバージョンを1つに決めることすら難儀なことです。
そこで Docker コンテナー上に Node.js を含めた必要な開発環境を全て構築してしまえば開発マシンの汚れを気にすることなく好みのツールをセレクトして開発を開始することができます。また、Docker 化することで開発環境の整備方法が文書化され、いつでもどこでも誰にでも再現可能になります。
今回は Docker の長々しいコマンドラインやあまり美しいとはいえない Dockerfile を回避するために Wercker CLI を利用してみましょう。
事前準備
- Docker をインストールします。
- Wercker CLI をインストールします。
Releases · wercker/wercker から適切なバイナリをダウンロードしてchmod +x
して PATH の通ったディレクトリにコピーするだけですが、現時点(2017年夏)での最新バージョン 1.0.882 のバグを避けるために 1.0.643 の利用をおすすめします。
react-scripts の利用
フロントエンド開発の基本知識(2017年夏)に書いたように、モダンなフロントエンド開発では Babel, TypeScript, webpack, Browserify といった Node.js 製ツールを使います。
これらをちゃんと設定するのは面倒なので、今回はレディーメイドのオススメ設定を提供してくれるツールを使ってみます。それが react-scripts です。名前に react
が含まれていますが、特に React を使う必要はありません。どのような環境を提供してくれるかは User Guide に詳しく書かれています。
まず package.json を用意します。
{
"devDependencies": {
"react-scripts": "1.0.10"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
}
}
開発する HTML と JavaScript を用意します。react-scripts の定めで、それぞれ public/index.html, src/index.js に置くことが決められています。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>No Title</title>
</head>
<body>
<div id='app'></div>
</body>
</html>
setInterval(() => {
const text = document.createTextNode('*');
document.getElementById('app').appendChild(text);
}, 1000);
さて、wercker.yml を用意して Docker 化してみましょう。
dev:
box:
id: node:6
ports: [ 3000 ]
steps:
- npm-install
- internal/watch:
reload: false
code: |
npm start
プロジェクトの全体像は以下のようになります。
.
├── package.json
├── public/
│ └── index.html
├── src/
│ └── index.js
└── wercker.yml
実行してみましょう :
$ wercker dev --expose-ports
初回の実行では npm install
を実行して node_modules にファイルをダウンロードするため遅いですが、次回以降はダウンロードは発生しないため早くなります。
ブラウザで http://localhost:3000/
を開くとアプリケーションが表示されます。index.js で ES2015 規格のアローファンクション () => ...
を記述していますがちゃんと動作しています。index.html に index.js を読み込む <script>
が無いにもかかわらず index.js が動作していることもわかります。webpack によって自動的にバインドされているのです。
ブラウザーを開いたまま index.js や index.html の内容を編集すると、自動的に再トランスパイルされ、ブラウザの内容もリロードされます。
開発サーバーを停止するには Ctrl-C を入力します。
既存チュートリアルの Docker 化
今度は既存のチュートリアルを Wercker CLI を使って Docker 化してみましょう。例に取るのは react-js-tutorials/1-basic-react at master · learncodeacademy/react-js-tutorials です。
まずクローンします :
$ git clone 'https://github.com/learncodeacademy/react-js-tutorials.git'
$ cd react-js-tutorials/1-basic-react
wercker.yml を用意します :
dev:
box:
id: node:6
ports: [ 8080 ]
steps:
- npm-install
- internal/watch:
reload: false
code: |
npm run dev
実行してみます :
$ wercker dev --expose-ports
しかし、ブラウザでアクセスしても動きません。これは、このチュートリアルで起動する開発サーバーが、localhost のポートのみをリッスンしていて、外部からアクセス出来ないためです。これを 0.0.0.0 にバインドするように変更しなければなりません。
このために package.json の npm-scripts を変更します。
{
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot --host 0.0.0.0",
}
}
package.json の .scripts.dev
のコマンドラインの最後に --host 0.0.0.0
を足しました。今度はうまくいきます :
$ wercker dev --expose-ports
としてブラウザーで http://localhost:8080/ を開いてください。