質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Q&A

解決済

3回答

6137閲覧

Dockerのブラウザ即時反映(angular2)

xxyyxx

総合スコア40

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

0グッド

1クリップ

投稿2016/10/24 14:44

Dockerを使用して間もないエンジニアです。
宜しくお願い致します。

私の過去質問の続きになるのですが、
Docker for mac vaersion:1.12.1
mac OS X Yosemite
https://github.com/akveo/ng2-admin (GitよりDL)

こちらの環境で開発環境を構築しようとしています。

Dockerで、gitのDockerfileからbuildし、imageを作成。runを実行し、ブラウザで反映できました。

docker run時に、volumeのオプションでホストOSへディレクトリの共有も成功しました。

コンテナ内に入って
-npm start

-npm run prebuild:prod && npm run build:prod && npm run server:prod

この2つのコマンドを叩きます。
2つ目のコマンドを叩かないとローカルでのファイルが共有できません。
dockerの機能なのか、npmの機能で可能かわからないのですが、即時反映することは可能なのでしょうか?

npm startをして、ローカルでファイルを編集すると、編集を受け付けてnpmはbundleを自動的にし直します。
しかし、
npm run prebuild:prod && npm run build:prod && npm run server:prod
こちらを叩くと、ローカルでのファイル編集は受け付けずに、1度exitし再度同じコマンドを叩かないと変更が反映されません。

docker run時に行ったオプションとして、
docker run --name angulartest
-v ~/Docker/ng2-admin-master/src:/var/www/src
-d -p 8888:8080 コンテナ名:タグ名

こちらになります。

dockerの問題なのか、node.jsのnpmパッケージ管理ツールの使い方の問題なのか判断出来ずにいます。

どなたかご教示の方宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

package.json をエディタで開いてみてください。

npm start を実行すると、 npm の仕様で script の start を実行します。その内容が"npm run server:dev" となっているので、scrript の server:dev を実行します。この script の構成から :dev となっているのはdevelopmentの略で開発用、:prod となっているのはproduct の略でリリース用であると思われます。

開発用もリリース用もwebpack を実行するのですが、開発用の webpack では、ソースコードの修正を監視して、修正がかかると、自動的に bundle しなおしすように設定されているものと思われます。これに対して、リリース用はリリースに最適な形(性能最大、ファイル最小)で bundle を作るようにできており、一般的にソースコードの修正の監視は行いません。

ですので、開発時は npm start で開発し、完成したら npm run prebuild:prod && npm run build:prod でビルドした bundle をリリースするというのが正しい手順です。

質問に戻りまして、

dockerの機能なのか、npmの機能で可能かわからないのですが、即時反映することは可能なのでしょうか?

リリース用のコマンドは即時反映しないように webpack が設定されているものと思われます。
質問返しで恐縮ですが、即時反映したいと思われた理由はなんでしょうか?

投稿2016/10/24 15:33

mit0223

総合スコア3401

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

xxyyxx

2016/10/25 00:01

早速のご回答ありがとうございます。 npmの挙動に関してわかりやすい内容で、理解しました。ありがとうございます! 即時反映したい理由としまして、 npm startを実行させ、ソースコードを修正しますが、急に"ここなおった?"とか、"ここの文言変えてみて"など急に他人に見せないといけない場合、 (npm run prebuild:prod && npm run build:prod && npm run server:prod) リリース用のコマンドを叩かないとブラウザ上に反映されないので、随時即時反映されないと手間になるなと思っています。 また、私自身typescriptの言語にまだ不慣れなため、できるだけ即エラーをはかせるようにしたいということもあります… もし良さそうな開発手法やコマンドがありましたら教えて頂きたいのですが、、 二重質問申し訳ございません。
guest

0

ベストアンサー

こんにちは、先日関連する件で回答させていただいたものです。
(https://teratail.com/questions/51367)

TypeScriptやSassのソースファイルは、編集してもそのままではアプリケーションに反映されません。

ソースファイルとは別のディレクトリに、ビルドという処理を通してJavaScriptやCSSに変換されたものを配置します。 (通常 dist とかいう名前のフォルダ)
アプリケーションはそちらを見て起動する形になります。

この手のアプリケーションは、開発段階ではソースに変更を加えたら即時でビルドしてdist側に反映させるためのプロセスを起動させているので、擬似的に即時反映される状態を作っています。

dockerのコンテナを起動して、アプリケーションを立ち上げる後でも前でもいいのですが、ソースファイルの変更を検出して、変更があったらビルドさせるコマンドを打ってみてはいかがでしょうか。
(#前も回答のところでも触れています)

# コンテナが起動したらexecでコンテナに入る $ docker exec -it angulartest /bin/bash # 入った先で watchを起動させる # cd /var/www/src # npm run watch:dev

watchコマンドを実行したまま、エディタ側で変更してみてください。
ちゃんと変更が検出できていたら、ビルドの処理が流れますので、ブラウザをリロードすると反映されていると思います。

もし本題とずれていましたらご容赦ください...

投稿2016/10/25 13:22

編集2016/10/25 13:24
suama

総合スコア1997

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

nmp start で起動すると、 Web サーバとしても動作しているはずなのですが、それは利用できてない(=ブラウザからはアクセスできていない)ということでしょうか。Docker のコンテナの中で localhost にバインドしているため、外からアクセスできないのではないでしょうか?

config/webpack.dev.js の 15行目、16行目で

const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;

となっているので、コンテナ内から http://localhost:3000/ でしかアクセスできないものと思われます。 環境変数HOSTとPORTを指定すれば外からアクセスできるようにならないでしょうか?つまり、

HOST=0.0.0.0 PORT=80 npm start

で起動すると、npm run server:prod で起動したときと同様にブラウザからアクセスできないでしょうか?
環境変数で指定するのが面倒であれば、config/webpack.dev.js の上記の箇所を修正してデフォルト値を変更することも可能かと思います。
といいますか、デバッグはどうされているのでしょうか? 開発用の webpack では、ブラウザでアクセスして開発ツールで元ソースの行番号でブレークポイントを仕掛けてデバッグできるようになっていると思います。

投稿2016/10/25 00:31

mit0223

総合スコア3401

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mit0223

2016/10/25 00:33

あ、自分の回答にコメントしたつもりが、もう一つ回答を作ってしまいました。すみません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問