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

More than 1 year has passed since last update.

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 コマンドに仕込めば、随時コンパイルになるはず...