TypeScript で書かれているライブラリを Docker で開発するときの方法メモ

FullCalendar https://github.com/fullcalendar/fullcalendar を開発しようと思ったのでメモ

Docker 環境の用意

必要な node を入れて npm install する

CONTRIBUTING.md を見たら gulp-cli が要るとあったのでそれも入れる

Dockerfile

# specify the node base image with your desired version node:<version>
FROM node:9.5.0

RUN npm install && npm install -g gulp-cli

# replace this with your application's default port
EXPOSE 8888

(expose は特に要らないのですが、いつもなんとなく入れてあります。下記の出力結果と整合性を保つために残しておきます)

image を build する

$ docker build -t fullcalendar .
Sending build context to Docker daemon  240.3MB
Step 1/3 : FROM node:9.5.0
9.5.0: Pulling from library/node
Digest: sha256:df756f3d19c7afe23b5e62e6feb5a9c00ff7c00c0dd9399b826b3073df91bfcf
Status: Downloaded newer image for node:9.5.0
 ---> 39337023f8d4
Step 2/3 : RUN npm install && npm install -g gulp-cli
 ---> Running in 623238eb4d34
npm WARN saveError ENOENT: no such file or directory, open '/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/package.json'
npm WARN !invalid#2 No description
npm WARN !invalid#2 No repository field.
npm WARN !invalid#2 No README data
npm WARN !invalid#2 No license field.

up to date in 0.061s
/usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp-cli/bin/gulp.js
+ gulp-cli@2.0.1
added 244 packages in 7.347s
Removing intermediate container 623238eb4d34
 ---> eb627663d794
Step 3/3 : EXPOSE 8888
 ---> Running in a05f50786690
Removing intermediate container a05f50786690
 ---> a76ef6e29c5b
Successfully built a76ef6e29c5b
Successfully tagged fullcalendar:latest
$

コンテナに入る。

$ docker run -it -v "$PWD":/usr/src/app -w /usr/src/app fullcalendar /bin/bash
root@6d73d680c4c6:/usr/src/app#

コンパイル

FullCalendar の場合には gulp dist でコンパイル結果を出力する

root@fbb427475b9f:/usr/src/app# gulp dist
[14:28:21] Using gulpfile /usr/src/app/gulpfile.js
[14:28:21] Starting 'webpack'...
[14:28:21] Starting 'ts-types'...
[14:28:21] Computing TypeScript definitions file...
[14:28:32] Wrote TypeScript definitions file.
[14:28:32] Finished 'ts-types' after 11 s

[at-loader] Using typescript@2.7.2 from typescript and "tsconfig.json" from /usr/src/app/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.59 sec.
[14:28:44] Version: webpack 3.11.0
                         Asset     Size  Chunks                    Chunk Names
        tmp/automated-tests.js   936 kB       0  [emitted]  [big]  tmp/automated-tests
          dist/fullcalendar.js   622 kB       2  [emitted]  [big]  dist/fullcalendar
                  dist/gcal.js  12.6 kB       3  [emitted]         dist/gcal
      dist/fullcalendar.css.js  3.04 kB      75  [emitted]         dist/fullcalendar.css
dist/fullcalendar.print.css.js  3.04 kB      76  [emitted]         dist/fullcalendar.print.css
         dist/fullcalendar.css  33.3 kB      75  [emitted]         dist/fullcalendar.css
   dist/fullcalendar.print.css  5.58 kB      76  [emitted]         dist/fullcalendar.print.css
[14:28:44] Also compiled 72 locale-related files.
[14:28:47] Finished 'webpack' after 26 s
[14:28:47] Starting 'minify:js'...
[14:28:47] Starting 'minify:css'...
[14:28:48] Finished 'minify:js' after 1.39 s
[14:28:48] Finished 'minify:css' after 1.38 s
[14:28:48] Starting 'minify'...
[14:28:48] Finished 'minify' after 44 μs
[14:28:48] Starting 'dist'...
[14:28:48] Finished 'dist' after 11 μs
root@fbb427475b9f:/usr/src/app#

gulp watch とかを Dockerfile コマンドに仕込めば、随時コンパイルになるはず...