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

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

ただいまの
回答率

90.47%

  • Node.js

    1942questions

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

  • Docker

    768questions

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

  • npm

    300questions

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

  • webpack

    251questions

  • Angular2

    176questions

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,132

xxyyxx

score 24

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パッケージ管理ツールの使い方の問題なのか判断出来ずにいます。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

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/25 09:01

    早速のご回答ありがとうございます。

    npmの挙動に関してわかりやすい内容で、理解しました。ありがとうございます!

    即時反映したい理由としまして、
    npm startを実行させ、ソースコードを修正しますが、急に"ここなおった?"とか、"ここの文言変えてみて"など急に他人に見せないといけない場合、
    (npm run prebuild:prod && npm run build:prod && npm run server:prod)
    リリース用のコマンドを叩かないとブラウザ上に反映されないので、随時即時反映されないと手間になるなと思っています。
    また、私自身typescriptの言語にまだ不慣れなため、できるだけ即エラーをはかせるようにしたいということもあります…

    もし良さそうな開発手法やコマンドがありましたら教えて頂きたいのですが、、
    二重質問申し訳ございません。

    キャンセル

checkベストアンサー

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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 09:33

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

    キャンセル

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

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    docker runのオプションについて

    docker のバージョンは1.8です。 いくつか質問します。 常識的なことかもしれませんがおねがいしますm(__)m(汗) docker runのオプション1.-t は何をす

  • 解決済

    docker永続化について

    Dockerですが、下記のように永続化という表現が出てきます。 Docker でデータのポータビリティをあげ永続化しよう Dockerコンテナの再起動を行っても、コンテナ内

  • 解決済

    Docker上でMongoDBが動かせない

    Dockerを使って、MongoDBを動かそうと思っているのですが、なかなかうまくいきません。 具体的には、 $ service mongod start を実行しよう

  • 解決済

    Dockerについて(開発環境)

    今回はじめてDockerを使用しました。 ここの https://github.com/akveo/ng2-admin Dockerfileをもとにして、同じコンテン

  • 解決済

    docker build で 「no space left on device」と出てビルドできない

     やりたいこと docker buildでビルドすると「no space left on device」とでてビルドできなくなるのを解決し、ビルドできるようにしたいです (

  • 解決済

    Dockerfileにて、一時的にサービスを起動したい

    いつもお世話になっております。 Dockerfileにて、RUNでサービスを起動し、その起動したサービスに対してコマンドを実行したいと考えています。 Dockerfileで

  • 解決済

    Docker開発のイメージが掴めない

    すみません。 Docker初学者です。 Dockerfileでイメージを生成し、docker-compose.ymlファイルに記述して、その2つのファイルをチームの人に共有させ

  • 解決済

    dockerを使った開発方法について

    現在、PHPとAPI(Go)を組み合わせたシステムの開発環境をdockerで構築しようとしています。 その構築方法、また開発方法について疑問点が2点ございますので、よろしければ

同じタグがついた質問を見る

  • Node.js

    1942questions

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

  • Docker

    768questions

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

  • npm

    300questions

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

  • webpack

    251questions

  • Angular2

    176questions