Dockerの使い方(2)

シンプルなWEBアプリを構築してローカルブラウザで確認する。

PORTSに下記が書いてある。
0.0.0.0:32768->5000/tcp
コンテナの5000ポートがdockerホストの32768に割り当てられている

ブラウザで192.168.99.100:32768を見るとHello Worldが表示された。

割り当てるポートを明示する場合

docker portで割り当て確認できる

コンテナのログを見る

Dockerfileからdocker imageを作り、リポジトリに上げる。

不要なコンテナを全部削除する。

停止中コンテナの一括削除

Docker – 基本的な使い方

Windows10でDocker Toolboxを使っています。

Dockerのアップデート

今のバージョンを確認します。

Docker version 1.12.2, build bb80604

まずDocker Toolbox自体をアップデートさせます。ここからWin用をダウンロードして実行したらできると思います。

Docker version 17.03.0-ce, build 60ccb22
なんだこれは全然違う。半年も経ってないのに。

Client/Serverのバージョンのようです。ちょっと前までは、docker -vとやるとサーバのバージョンが出てたけど、今はクライアントのバージョンがでているようです。

Dockerの使い方概要

Docker Hubからdockerイメージを探して、docker pullでイメージをダウンロードして、docker runでコンテナを作成・実行します。

Docker Hub

ここにDocker Hubがあります。沢山イメージがあります。

dockerイメージを落とす

docker pullコマンドでイメージをローカルに落とせます。docker pull rubyとやるとrubyのイメージがダウンロードされます。このrubyは何かというと、ここにあります。ruby:2.4.1というように、[:]の後にタグをつけることもできます。タグは、基本バージョンになります。latestというタグを使うと、最新版をpullできます。

dockerイメージ一覧を確認する

docker imagesコマンドで、ローカルのイメージ一覧が確認できます。

コンテナを作成・実行する

docker runコマンドでコンテナを作ります。コマンドの使い方は下記です。

$ docker run [オプション] [–name {コンテナー名}] {イメージ名}[:{タグ名}] [コンテナーで実行するコマンド] [引数]

コンテナ名rubyのrubyイメージのコンテナを作成する場合下記になります。

-i オプションをつけると、標準入力が開きます。rubyコンテナの標準入力を開いたらirbが起動しました。一度docker runで作成・実行したコンテナは、処理が終わるとすぐに停止しますが、コンテナとしては停止中の状態で存在しています。よって、再度上記docker runコマンドを実行すると下記のようなエラーになります。docker runコマンドはコンテナが存在しない状態で新たに作成する際に使用するコマンドです。

Error response from daemon: Conflict. The name “/ruby” is already in use by container 8504a9a10098ff4a5f3b680adc74ba625a3b39dd6cc332485d96d9cbbdac951f. You have to remove (or rename) that container to be able to reuse that name.

停止中のコンテナを再実行する場合は、docker startコマンドを利用します。使い方は下記になります。コンテナIDは、次のdockerコンテナの一覧を表示させるとCONTAINER IDというのが確認できます。

$ docker start [-i] {コンテナー名}|{コンテナーID}

先程のrubyコンテナの標準入力を開く場合は、下記のようにします。

dockerコンテナの一覧を確認する

docker psコマンドを使います。-a オプションを使うと停止中コンテナも表示されます。

dockerコンテナを削除する

docker rmコマンドを使います。削除対象を指定するには、コンテナ名かコンテナIDを使います。

webpack2でReactを使う

webpacke2でReactの開発環境を作る。

フォルダ・ファイルを作る

$ mkdir react1
$ cd react1
$ mkdir src
$ mkdir public
$ touch public/index.html
$ touch src/index.js
$ touch webpack.config.js
$ touch postcss.config.js

インストール

$ npm init -y
$ npm i -D webpack webpack-dev-server
$ npm i -D babel-loader babel-core babel-plugin-syntax-dynamic-import babel-preset-es2015 babel-preset-react
$ npm i -D extract-text-webpack-plugin
$ npm i -D style-loader css-loader postcss postcss-loader autoprefixer cssnano precss react-css-modules
$ npm i -D react react-dom

package.jsonは下記のようになった。

webpack.config.jsを作る

postcss.config.jsを作る

public/index.htmlを作る

src/index.jsを作る

webpackを実行する。実行後、public/bundle.jsが作成される。

$ webpack

webpack-dev-serverを実行する。実行後、http://localhost:8080にアクセスすると確認できる。

$ webpack-dev-server

Python3 – Seleniumの使い方

Selenium
http://www.seleniumhq.org/

作業環境

私の環境は、下記です。
Windows10
Python3.5
Firefox 51.0.1
Chrome 56.0
ChromeDriver 2.27

Selenium WebDriver

SeleniumRCはJavascriptでブラウザを操作してたけどセキュリティ的に難しくなってSelenium WebDriverが主流になったそうです。WebDriverはブラウザの拡張機能やOSのネイティブ機能などを利用して操作するそうです。ブラウザのドライバに対して、JSON Wire ProtocolでHTTPリクエストを行うとブラウザが操作できるます。ドライバは各ブラウザ毎に異なります。

ドライバに対するリクエストは、一般的には各種プログラミング言語で作成します。使える言語は、公式だと、Java、Ruby、Python、C#、Javascript、PHP、Perlだそうです。その他非公式であったりするそうです。私はPythonでやってみようかなと思います。

Python用Seleniumモジュールをインストールする

pipでインストールできます。

Python用のseleniumのAPIのドキュメントはここです。

chromeドライバのインストールと設定

Chrome Driverはこのページでダウンロードできます。ChromeDriver 2.27のchromedriver_win32.zipをダウンロードしました。展開して、chromedriver.exeを任意のフォルダに配置し、そのフォルダにパスを通しておきます。

Fireboxドライバのインストールと設定

Firefoxはブラウザをインストールしてあればドライバが使えると色々なところに書いてはあったのですが、Firefoxの新しいバージョンではそうでもないらしく、実際自分もエラーになってしまいました。下記のようなエラーが出る場合、ドライバが有効になっていない可能性があります。

上記のような場合は、ここからドライバをダウンロードしてみます。私は、geckodriver-v0.14.0-win64.zipをダウンロードして展開して、上記のchromeと同様に任意のフォルダにgeckodriver.exeを配置し、そのフォルダにパスを通しました。これで、Firefoxも動作するようになりました。

PythonでSeleniumを操作してみる

ブラウザを起動してURLを開く

要素の選択、入力、クリック

Googleに検索ワードを入力して検索ボタンを押すことで検索結果ページに遷移させてみます。

chromeの場合は、検索ワードを入力したら勝手に検索結果のページに遷移したので、btnを取得・クリックしていません。

ログイン

上記と同じですが、ログインもしてみます。Twitterにログインします。

問題なくログインできるのですが、getでURLを開くと全て読み込むまで次に進まないようで、ログインボタンをクリックするまでにやたらと待たせれる点がいやです。解決方法があるか今度確認します。

参考:
第1回 Seleniumの仕組み
Seleniumとは―読み方、意味、WebDriverの使い方
Selenium Web DriverのPythonバインディングを使ってブラウザを操作する
5分でわかるSelenium IDEの使い方
Python で Selenium WebDriver を使ったブラウザテストをする方法
Webブラウザの自動操作 (Selenium with Rubyの実例集)

Ubuntu16.04にGitLabを入れる

Ubuntu 16.04にGitlabを入れていきたいと思います。

Gitlabのインストール

Gitlabのサイトに、OS毎のインストール方法が書いてありました。

ポート開ける

80ポートを開けます。

ポートの衝突を回避する

ブラウザで見てもデフォルトのnginxの画面になる。既にnginx入れているのですが、これとは別にnginxを入れてるみたいでポートが衝突してるらいし。
参考:Ubuntu 14.04 に GitLabをインストールした

上記サイトのとおり、衝突してた。/etc/gitlab/gitlab.rbの下記に、変更したいポートを入れたら出来た。あとは、ufwでポートを開ける必要がある。

ブラウザでアクセスしたらGitlabのログイン画面が表示された。パスワード変更してrootでログインできた。

gitユーザでssh接続できるようにする

AllowUsersにgitを追加します。

sshのポートを変えている場合は、gitlab.rbの下記を修正します。

あとは、ローカルでキーを作成して、gitlabに登録して、.ssh/configを下記のような感じで修正します。

メール送信設定

今回はgmailを新たに登録して、設定してみました。gmail登録後に、安全性の低いアプリに許可というのを設定する必要があります。あとは、gitlab.rbを下記のように設定します。

reconfigure

windows10のvisual studio codeでC言語開発環境をつくる

Visual studio codeはインストール済みです。visual studio codeは、ここからダウンロードできます。

コンパイラをインストールする

参考:WindowsでのC言語の開発環境(Eclipse)

まずは、コンパイラをMinGWからダウンロードします。mingw-get-setup.exeというのをダウンロードして、実行するとインストールが始まります。インストールを始めると、途中でMinCW Installation Managerという画面が出てきます。ここで、mingw32-baseと、mingw32-gcc-g++というのをチェックして、メニューのInstallation > Apply Changesをクリックして、チェックした2つをインストールします。

MinGW.org

PATHを通す

C:\MinGW\binにPATHを通します。細かいやり方はここに載っています。コマンドプロンプトで、gcc -vを実行して、バージョンがでたら成功です。

visual studio codeの設定

visual studio codeを開いて、拡張機能からc/c++と検索したら出てくる、Microsoftが出してる、C/C++というのをインストール・有効化します。コード整形とか、デバッグ機能とか便利な機能を沢山提供してくれるようです。

code_c

あとは、必要に応じて追加していきます。ちなみに、Visual studio codeは、Ctl + @で、コマンドプロンプトが出現します。なので、何かcのファイルをつくって、コマンドプロンプトを開いて、gcc hoge.cとかやるとコンパイルができます。

TensorFlowのDockerのJupyterが動かない

TensorFlowのDockerは下記です。

dockerコンテナを実行したら、Jupyterが動いているのですが、Dockerをローカルブラウザで見る方法がわからないです。コンテナを実行したら下記のようなメッセージがでてきました。

下記に対処方法が書いてありました。dockerのipアドレスを確認して、それでアクセスすればできました。
参考:Unable to start TensorFlow within Docker, on Windows

上記IPでアクセスします。

jupyter

Dockerの使い方 (Windows10)

DockerをWindows10で使えるようにする

参考:無償の「Docker for Windows」で手軽にLinuxコンテナを利用する (1/2)
参考:Windows10マシンにDocker Toolbox を入れて個人用の開発環境を作る

私は、windows10のHomeエディションで、Hyper-vというのが使えないので、Docker Toolboxを使いました。

Docker Toolboxをインストール

DOCKER TOOLBOXからダウンロードします。現状ではバージョンは、1.12.2でした。インストールして、Docker Quickstart Terminalを起動します。すると黒い画面にクジラがでてきました。
docker_install

これでインストール完了っぽい。

Dockerの使い方

基本的な使い方は、Docker Hubからイメージを取得して、それを基にコンテナを作成・実行するらしい。UbuntuでPython3を使えるようにしてみたいと思います。

Ubuntuのイメージをダウンロード

Docker Hubで色々なイメージを探せます。

実行してみる

これでシェルが実行されました。exitで終了します。フォアグラウンドで実行するものは終了した時点でコンテナが消えるそうです。docker runで、コンテナの作成・実行が行われます。-itでフォアグラウンドでの実行を指定できます。イメージの次に何かを書くことで引数として渡せるようです。

バックグランド実行は、run -dです。バックグラウンド実行のコンテナを確認するには、docker psコマンドを実行します。

実行中コンテナをストップするのは、docker stopです。ストップしてもデータが残っているので削除する場合は、docker rmです。ストップ中コンテナの確認は、docker ps -aで確認できます。docker rm -f でストップ&削除することもできます。container idの指定はidの先頭数文字でOKなようです。dockerイメージの削除も、docker rmiでできます。例えば、下記のようにします。

イメージをつくってみる

Dockerイメージを自分で作ってみます。docker buildというコマンドを使うそうです。Dockerfileというファイルに設定を書いて、それをdocker buildするとイメージが作成されるようです。

Dockerfile

Dockerfileを作成したら、docker buildコマンドでイメージを作ります。

とりあえずできました。pythonのバージョンは3.4.3でした。

あと、毎回終了するとまっさらになってしまうので、ローカル環境とマウントさせて、データを保存できるようにしたい。

-v ローカルパス:サーバパスとやるとマウントできる。

pipもインストールする

上記のDockerfileを修正して、pipも使えるようにします。python3-pipをインストールします。

Dockerfile

その他困ったこと

同じ名前でbuildしたら昔のイメージが<none>という名前になって消せなくなった

参考:How to remove unused Docker containers and images

これで一括で消せる。Repositoryとか、Tagとかがになっても、Image IDがあるので、docker rmi {Image ID}とやれば消せた。

visual studio codeがフリーズする

利用開始3日目にして、visual studio codeがフリーズします。特定のプロジェクトを開くとフリーズします。原因不明。そもそもいくらタブを閉じても、フリーズ後に再度プロジェクトを開くと閉じたタブが全部開く。その中には消したファイルすらあり、たまに、そのようなファイルはありませんエラーまで出る。。

あと他のプロジェクトと違うのは、下のステータスバーに、looking for css classes on the workspace…といったメッセージが出続ける。これは拡張の機能だと思う。Zignd/HTML-CSS-Class-Completionこれっぽい。スター数とか結構少ないから、削除してみる。

どうも直ったっぽい。

webpack + eslint

webpackでeslintを使う場合、eslintとは別に、eslint-loaderをインストールする必要があります。

インストール

そして、webpack、eslintそれぞれの設定ファイルを作成します。

webpackの設定

下記のように、webpack.config.jsを設定します。
moduleのpreLoadersにeslint-loaderの設定を書きます。moduleは、eslint-loader等の-loaderを省略できます。あと、下の方にあるeslintというところで、eslintの設定ファイルを指定します。eslintrc.jsonとか、.eslintrcというファイル名であれば指定は不要かもです。

eslintの設定

eslintのルールは沢山あって自分でルールを使うかどうか決められますが、AirBnBのルールが人気だし、そういうところに合わせておいて悪いことはないと思うので、基本AirBnBを使います。ただ、Reactとbabelを使っているときに沢山エラーがでたので、ちょっと修正しました。AirBnBのルールを使いつつ、このエラーは出なくてもいいやと思ったら、ルールを無効にして調整してます。まだ、使いだしたばかりなので、単なる一例です。

.eslintrc

jsx拡張子に関するルール

reactはjsxを使いますが、jsxを使っているファイルの拡張子はjsxにしないと、AirBnBルールに怒られます。jsxを使っていないファイルはjsのままだと思うので、拡張子がjsとjsx共に、webpackがjavascriptに対して実行する処理を適用させるようにしてみます。

該当ファイルの拡張子をjsxに変更し、webpack.config.jsを下記のように修正します。

eslint

ESLint

参考:ESLint 最初の一歩

ESLint は JavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint 等があります。

インストール

package.jsonの設定

グローバルインストールでないので、npmから実行できるようにします。
package.jsonのscriptsを下記のようにします。

初期化(設定ファイルの作成)

eslint –initで対話的に設定ファイルが作成できます。グローバルインストールでないので、eslint –initというコマンドがそのままは使えない為、上記で設定したnpmのscriptsを使います。設定ファイルの作成が終わったら、上記のlint-initは不要です。

色々聞かれたので、popularのAirBnBのjsonにとりあえずしてみました。設定ファイル、.eslintrc.jsonが出力されます。
.eslintrc.jsonの中身

jsファイルを適当に作ってみる

hoge.js

使ってみる

使えました。下記が表示されました。

おー厳しい。

どんなルール設定にしたら最適なのでしょうか?
とりあえずAirbnbに合わせることはいいことだとは思いますが。あと、改行文字とか、ブロックの前にスペース空けるとかは、自動整形とかあると便利なのですが、あるのでしょうか?

結構Airbnbは人気みたい。
visual studio codeでは、Shift+Alt+Fで自動整形できる。拡張機能にeslintもあるし、eslintの設定は、eslintrc.jsonを読んでくれる。eslintはデフォルトで、node_modulesの中はみないとどこかに書いてあったんだけど、visual studio codeのeslint拡張は見ちゃうみたい。.eslintignoreで設定したら消えた。改行文字もvisual studio codeの設定変更した。これでエラー消えた。

webpack

webpack

参考:webpack で始めるイマドキのフロントエンド開発

webpack は WebApp に必要なリソースの依存関係を解決し、アセット(配布物)を生成するビルドツール(要するにコンパイラ)です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。

webpack を使えば、Grunt も Gulp も必要ありません!覚えるべきことはほとんどありません。(必要なら)簡単な設定ファイルを書いて webpack コマンドを実行するだけです。

インストール

これで、hoge.jsがscript.jsとして作成される。

参考:http://webpack.github.io/docs/installation.html
これを使うと簡易webサーバが立ち上げられるっぽい。

参考:webpack-dev-serverの基本的な使い方とポイント
便利だな。

下記のように、package.jsonのscriptsに、webpack-dev-serverの起動を追加して、npm run webpack-dev-serverとしたらサーバが起動した。設定しないと、プロジェクトルートをwebルートにされました。

webpackの設定

webpack.config.jsというファイルに設定を書き込む。

webpack.config.jsを下記のようにして、webpackを実行するとできた。

devServerのcontentBaseを指定すると、webpack-dev-serverのWEBルートが変更できる。ポートも変更できるらしい。

Hot Module Replacement(HMR)というのも便利そう。

参考:http://webpack.github.io/docs/usage.html

nativeのjavascript以外に対応させるためには、loaderというのを使うらしい。例えばbabelであれば、babel-loaderというのがある。

babelをnpmでインストールしてから、webpack.config.jsに、下記を追加する。

testとかよくわからないけど、jsファイルはbabel-loader通す的な感じでしょうか?これによって、Reactとかも対応可能になるもよう。reactで試してみよう。

参考:babelとwebpackを使ってES6でreactを動かすまでのチュートリアル

main.jsを下記のようにする。

これでwebpackしたら、正常に動いた。

あと、プラグインもあって、例えば、jsファイルの圧縮もある。
webpack.config.jsの最初の行に下記を追加する。

あと、webpack.config.jsに下記を追記する。

これで圧縮された。
webpack -p とするだけで、本番用になるので、圧縮してくれるらしい。

スタイルシートもエントリーポイントのJSに組み込むらしい。
参考:http://webpack.github.io/docs/tutorials/getting-started/
参考:タスクランナーを使わずに webpack だけでフロントエンド開発する方法

cssをmain.jsに組み込む。

webpack.config.jsにcss loaderの設定を追加する。

これでできた。
webpack.config.jsに下記を追加すると、importとかするときに、拡張子をつけなくてよくなる。

あと、webpack-dev-serverは、watchしてくれているらしい。ファイルを変更すると自動的に内部的にwebpackし、その結果をメモリ上に保存するらしい。ファイル自体は作成しない。webpack-dev-serverを利用しない場合は、webpackのwatch機能を利用したらしい。

-dというのは、source mapを作成してくれるものらしい。やってみる。おーでてる。bundle.js.mapが作成されました。多分watchできてそう。

あとは、コードチェックしてくれる、eslintを入れてみる。webpackで使う場合、これもloaderになる。eslint-loader。

どうもERROR in Cannot find module ‘eslint’というエラーがでるので、eslintは別で調べる。

Visual Studio CodeでCordova開発をする

無償のVisual Studio CodeがCordovaに対応。HTML5/JavaScriptでのモバイルアプリケーション開発が可能に

Visual Studio Code
とりあえずインストールした。

MacでもLinuxでも使える! 無償の Visual Studio Code を使用した Cordova 開発
拡張機能のCordova Toolsをインストールすればいいらしい。

大体使い方わかったけど、上記記事の最後に、「Visual Studio Code ではなく Visual Studio 2015 を使用することをお勧めします」と書いてあるので、Visual Studio 2015もインストールしてみる。

記事の中でも書いていますが、Windows をお使いの方で、マシンのリソースがそれなりにあるのであれば、Apache Cordova を使用した開発には Visual Studio Code ではなく Visual Studio 2015 を使用することをお勧めします。Visual Studio 2015 は、Cordova 開発環境の構築、プロジェクトの作成やコーディングの際の豊富な入力支援機能、プラグインの管理や複数のシミュレーターの提供など、さまざまな機能が IDE 統合されており、それらをシームレスに使用することができます。

Visual Studio Community

visual studio codeと2015の違いは、下記に書いてあった。
マイクロソフトのクロスプラットフォーム対応新コーディングツール「Visual Studio Code」
visual studio codeの方が軽量でマルチプラットフォーム対応。macやlinuxでも使える。でも至れり尽くせりなのは、2015。ただ、Cordovaの場合、macでも開発するだろうし、studio code使った方がいいかもしれない。両方試してみよう。

Xampp windows10 PHP sendmail 設定 (gmailを使う)

php.iniの設定と、sendmail.iniの設定をして、stunnelをインストールして、stunnel.confを設定する。

php.iniの設定

php.iniの場所は、xampp/php/php.ini
[mail function]という箇所を下記のようにする。

sendamil.iniの設定

sendmail.iniの場所は、xampp/sendmail/sendmaill.ini

stunnelのインストール

stunnel: Downloads

stunnel.confの設定

stunnel.confのバックアップをとっておき、中身を下記のようにする。

最後にXamppコントローラでApacheを再起動する。

Node.js

Node.jsやってみる。

macは、El Capitan 10.11.5です。

ここでNode.jsをダウンロードしたり、ドキュメントを取得できたりする。
http://nodejs.jp/nodejs.org_ja/
Node.js v0.11.11 マニュアル & ドキュメンテーション

Node.jsは、サーバ側の言語。Nginxとかを使わないらしい。

(引用:いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール (1/2)

これでWEBサーバ作ったことになる。Node.jsはWEBサーバで、nginx.confみたいなのが上記なんでしょうか??とりあえずやってみる。

~/nodejs/app.jsを作って、上記を書いた。その後、下記を実行。

おー表示された。

nodejs

モジュール管理は、npmでやる。
ビルドツールは、GruntとかGulpとかでやるんだけど、最近はちょっと嫌われているようで、使わないでやるケースも多いらしい。Gulpのがまだ人気あるらしい。

npmでgulpをグローバルインストールする

gulp用ディレクトリを作って、そこにgulpをインストールする

gulpfile.jsを作成してみる。

gulp実行

ファイルを追加したり、変更したり、削除したりすると、eventを検知して、event.path、event.typeとかが取得できる。これをもとにテストしたり、コンパイルしたりするんだろう。

ただ、上記コードだと、結構な頻度でエラーが出る。try-catchとかしっかりしたらOKになるのだろうか。

ここにあるコンテンツとドットインストールみたらいいかも。
「Node.jsでサーバサイドJavaScript開発入門」