今回はじめてDockerを使用しました。

Dockerfileをもとにして、同じコンテンツをブラウザで表示しようと思っています。
(Docker for mac vaersion:1.12.1)

DockerとGitの仕組みをまだ完全に理解しているわけではないので、
意図した質問が出来ないかもしれませんが宜しくお願い致します。。。

1、最初にDocker for macをダウンロード
2、https://github.com/akveo/ng2-admin
ここから.zipファイルとしてローカルにダウンロード。
3、適当なフォルダを作成。
User/Docker/project/ダウンロードしたファイルなど(Dockerfile含)
4、macのターミナルから上記のディレクトリへ移動し、docker buildコマンド
5、docker imagesでimageを確認し、先ほどbuildしたimageを確認
6、docker runを実行

7、ブラウザ（Chrome）でdocker psで確認したportを付けて、
http://localhost:8080
でアクセスしたのですが、このページは機能していませんと表示されてしまいます。

macのIPやdockerのIPなど確認してみたのですが、機能せずブラウザ表示できません。

runしたコマンド
（docker run -d --name 任意 -p 8080:80 buildした時付けた名前:タグ名）

どなたかご教示お願いできないでしょうか。
宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

気になってGitHubを見に行ってデモも触ってみたところ、とても面白かったのでわたしもDockerで動かしてみました。
コンテナ内でのアプリケーションは、8080番で起動しています。
ですので、ビルドしたdocker imageからアプリケーションを実行してアクセスするには、docker runのポート指定が逆になります。

また、Macでport 80番にフォワードしようとすると、通常はsudo(root) でないと利用できないので、8080番とか8888番とかを設定してみてください。

$ docker run --name 任意の名前 -d -p 8888:8080 ng2-admin:0.7.0

わたしの環境だと、これで、Mac側のブラウザの http://localhost:8888/ でアクセスできました。
(8080は別で使っているので8888にしましたが、こちらも空いてるポートなら任意です）

もし宜しければ、dockerのコンテナをGUIで操作できるKitematicも使ってみると良いかと思います。
（停止しているコンテナを起動する際に、GUIからポートを変更したり共有するボリュームを調整したりできます）
参考までに、キャプチャをつけておきます。

追記：アプリケーションのソースの編集について

面白そうだったのでやってみました...。色々方法があると思いますので、1例として挙げますね。

DockerのホストがMacで、イメージを作る際にGitHubから一式ソースを取得していると思います。

$ tree -L 1
.
├── CHANGELOG.md
├── Dockerfile
├── LICENSE
├── README.md
├── _VERSION
├── build.sh
├── config
├── docs
├── package.json
├── src
├── tsconfig.json
├── tslint.json
├── typedoc.json
└── webpack.config.js

3 directories, 11 files

ここのsrc/がAngularJSのソースになるとおもいます。（まちがってたらすみません）
また、このDockerのイメージは、ビルド時に同じソースを /var/www というところに持ってきて展開しています。

コンテナ側の/var/www/src に当たるところを、Mac側の src/ として共有する形で起動してあげるといいと思います。

コンテナに"docker exec"で入って、ソースファイルの変更をwatchするコマンドを発行しておくと、Mac上でお好きなエディタでソースを編集してあげたタイミングでビルドが走って、アプリケーションにも反映されるんじゃないかと思います。

以下、やってみた例です。
ボリュームをシェアすると、Kitematic側でも確認できます。また、いったんコンテナをGUIから保存しておいて、保存している状態でその他必要に応じてボリュームを追加できたりします。

# まずは起動（ソースのボリュームだけシェア）
$ docker run --name demo -v ~/work/ng2-admin/src:/var/www/src -d -p 8888:8080 ng2-admin:0.7.0 

# コンテナ起動したらexecでコンテナに入る
$ docker exec -it  demo /bin/bash

# 入った先で watchを起動、更新があるとソースを勝手にビルド
# npm run watch:dev

これくらいで、あまり運用とかはわからないのですが、参考になれば....

投稿2016/10/14 13:58

編集2016/10/15 05:13

suama

総合スコア1997

xxyyxx

2016/10/15 00:25

キャプチャまで付けて頂き有り難う御座います！！ docker run のportの指定がやはり私理解してないままコマンド叩いたかと思います。。もう一度コンテナ立て直してみます！！！

xxyyxx

2016/10/15 02:04

無事機能させられました！！！本当に嬉しいです！もう1点初歩的な質問なのですが、このコンテナに"docker exec"で入って、エディタをインストールすればそのまま編集出来るのでしょうか？

xxyyxx

2016/10/15 02:07

僕はAtomを普段使用しているのですが…

suama

2016/10/15 05:06

わたしも使い込んでいるわけではないので、他の方からもコメントいただけるかもしれませんが、やったことのある方法を書いてみます。（面白そうだったのでやってみました...）コンテナの中で直接アプリ操作に必要でないパッケージを追加するのはあまり良くないと思っています。 DockerのホストがMacで、イメージを作る際にGitHubから一式ソースを取得していると思います。ここのsrc/がAngularJSのソースで、また、このDockerのイメージは、ビルド時に同じソースを /var/www というところに持ってきて展開しています。コンテナ側の/var/www/src に当たるところを、Mac側の src/ として共有する形で起動してあげるといいと思います。コメント欄だと図がはりにくいので、上の回答のところに追記しておきますね。

suama

2016/10/17 00:21

ソースの編集例をのせましたが、もし色々手を加えて動かしたいなら、あるていど編集が落ちつくまでは、dockerではないほうが良いと思います。個人的には、mac上で直に動かすか、もしくは環境を汚したく無いならvirtualbox&vagrantで動かすほうがいいかと。

xxyyxx

2016/10/18 03:57 編集

試してみているのですが、src/のファイルを変更しても反映できず…自分の知識不足です… 確かにdockerではなくvagrant&centosで動かした方がいいかもしてないですね。もしvagrat&centosなら、src/のファイルを,/var/www/html以下に置けば動くのでしょうか。まだ試していないので、考えているのは上記なのですが。

xxyyxx

2016/10/18 02:47

僕の認識違いでした！ vagrant&centosでdockerを起動させて上記のようにbuildやrunさせて編集してみるってことでしょうか？！

suama

2016/10/18 06:23

こんにちは。説明が上手くなくて申し訳ございません。ちょっと本題からずれてしまうのと、VagrantにしろDockerにしろ、ホストとゲストのファイルを共有する設定とかに慣れてないとやりにくいかと思います。ややこしいことは抜きにして、「このコンテナに"docker exec"で入って、エディタをインストールすればそのまま編集出来るのでしょうか？」でももちろんOKです。 Atomが入るのかはやったことがないのでわかりませんが.... もし気になるようでしたら、別に話題を立てていただけると嬉しいです!

xxyyxx

2016/10/19 04:17

長らくご教示頂きまして大変助かっております！いえいえ、私の知識不足が大きな原因でアドバイスを上手く反映できずに申し訳御座いません。。。どうしても同じ環境でAtom(難しいのであれば他エディタでも)で編集→反映したいと思っているので、新たに質問を作成しようかと思います。。もし宜しければまたご回答の方宜しくお願い致します。。。恐れ入ります。

行動規範の内容に同意します