[Docker] DockerでTypeScriptの環境を作る

TypeScriptの勉強をするために、ホスト環境を汚したくなかったので、Dockerで環境構築をしました。

コンテナ内に入って、TypeScriptファイルを実行する感じです。

ディレクトリ構成

 

Dockerfile

 

ビルドすると、自動的にpackage.jsonを作成するようにRUNの設定をしています。

docker-compose.yml

 

ポートは、ホスト側から8080で接続要求が来ると、コンテナの8080ポートに接続が行くようにします。

これで、コンテナを動かします。

コンテナ内に入る

これでベースの環境構築はできたので、これからコンテナ内でTypeScriptの環境を整えていきます。

必要なモジュールをインストール

 

package.jsonの変更

npm startで、webpackのWebサーバが動くように設定します。

webpack-dev-serverは、ビルドもしてくれるので、基本的にnpm startで実行できます。

 

webpack設定ファイルを作成

webpack用の設定ファイルです。

 

devServer部分の記述が大切です。

ポート指定、ホスト指定をしないと、外部からコンテナにアクセスできなくなります。

参考

https://qiita.com/ochiochi/items/efdaa0ae7d8c972c8103

 

TypeScriptコンパイラ用の設定ファイルを作る

これだけです。

TypeScriptのプログラムの作成

あとは、以下のドキュメントにしたがって、TypeScriptのプログラムを作成してください!

https://qiita.com/ochiochi/items/efdaa0ae7d8c972c8103#typescript%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AE%E4%BD%9C%E6%88%90

まとめ

これで、docker-composeでvolumes設定をしているので、ホスト側でファイル変更しても、コンテナに反映されるので、開発がすごく楽になります。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA