※スマホ対応はしてません。

カテゴリー: Web

Docker公式イメージでWordPress環境を用意する。

カテゴリー: サーバー

library/wordpress が公式に提供されているのを昨日知りました。WWW+PHP+WordPressなパッケージみたい。DBは library/mysql を使うとして、この二つでさっくり環境が用意できました。

$ docker run --rm -d --name my-mysql -e MYSQL_ROOT_PASSWORD=passwd -v `pwd`/db:/var/lib/mysql mysql
$ docker run --rm -d --name my-wordpress --link my-mysql:mysql -p 80:80 -v `pwd`/wp:/var/www/html wordpress

これで http://localhost を開くと、WordPressの初期設定が始まります。DBの初期処理にちょっと時間がかかるので、エラーが出てもちょっと待ってて開きなおしたりしてください。

終了は

こう。

$ docker stop my-mysql my-wordpress

Windowsは

pwd の代わりに %CD% を使います。

$ docker run --rm -d --name my-mysql -e MYSQL_ROOT_PASSWORD=passwd -v %CD%/db:/var/lib/mysql mysql
$ docker run --rm -d --name my-wordpress --link my-mysql:mysql -p 80:80 -v %CD%/wp:/var/www/html wordpress

後述のDocker Composeを使うと書き分ける必要がなくなります。

変数的なもの

以下の値は適宜変更してください。

  • my-mysql … MySQLコンテナの名前。
  • my-wordpress … WordPressコンテナの名前。
  • passwd … DBのパスワード。開発用となら適当でいいんじゃないの。
  • 80 … ポート番号。 : で分けて左辺は任意。右辺は 80 で固定。
  • pwd/db, pwd/wp … 生成ファイルを配置するディレクトリ。絶対パス(フルパス)にする。

DBやアップロードしたファイルの行方

-v pwd/db:/foo 的な記述のおかげで、コマンド実行時の作業ディレクトリ直下に db, wp の二つのディレクトリが作成されるはずです。これらを保存しておいて、次回も -v で指定します。

新しい環境にする場合はここをさくっと変えればよろしい。

wordpressイメージ

安心安全のDocker公式イメージです。

PHPとApacheが含まれたイメージを元に作成されているみたい。(ものによるけど。) DB以外が揃ってるので簡単に始められる。ありがとう、ありがとう。

WordPressのバージョン

tagsのページを見ると4.8.3, 4.8.2の二つが用意されているっぽい。

でも docker pull wordpress:3 とかで普通に落ちてくるし使えるので、試してないけど一通り用意されてるんじゃないでしょうか。知らんけど。

あるいは、Dockerfileは前述の通り公開されてます。やっぱり試してないんだけど、こいつの WORDPRESS_VERSION の数字をいじるだけで他のバージョンに対応したやつも作れるんじゃないすかね。知らんけど。

バリエーション

例えばこんなタグがあります。

  • 4.8.3-php7.1-fpm-alpine
  • 4.8.2-php5.6-apache
  • cli-1.4.0-php7.1

なんか色々あるみたいなので公式ドキュメントを読んで、良さそうなものを見つけてください。

単純にWordPressのバージョンを指定するだけだと、PHP5.6とApacheとの組み合わせになるみたいです。(古いバージョンについて調べてないです。)

“cli” については次項。

WP-CLI

こちらさまね。

wordpress:cli でCLIも使えます。

$ docker run --rm -ti --volumes-from my-wordpress --link my-mysql:mysql wordpress:cli plugin list
+---------+----------+-----------+---------+
| name    | status   | update    | version |
+---------+----------+-----------+---------+
| akismet | inactive | available | 4.0     |
| hello   | inactive | none      | 1.6     |
+---------+----------+-----------+---------+

あら便利。

話には聞くけど使ったことはないです。ちゃんと動くよね? 大丈夫?

ところでこれって、

ものが全然違うから将来分割されるんじゃないかなあ。 wp-cli みたいなのに。あ、まんまだ。それとも、サーバの方もなんかいろいろあるし、これでいいんだろか。

自分が作ったテーマを別途追加する

実践編。

たぶん個別にGitで管理したりしてると思うので、そういうのは別々に追加していきましょう。

-v ないし --volume で指定します。 : の左側にテーマのディレクトリ(絶対パス)、右側に配置先、つまり /var/www/html/wp-content/themes/xxx 的なやつを書きます。

$ docker run --rm -d --name my-wordpress --link my-mysql:mysql -p 80:80 \
-v `pwd`/wp:/var/www/html \
-v `pwd`/my-great-theme:/var/www/html/wp-content/themes/my-great-theme \
-v /path/to/my-wonderful-theme:/var/www/html/wp-content/themes/my-wonderful-theme \
wordpress

(さすがに長いので改行しました。)

-v でもっと追加してもいいですよ。

とはいえこんな長えのを毎回ぽちぽちしてらんねえーので、Docker Composeを使います。(シェルスクリプトが好きならそっちでも良いと思う。)

Docker Composeにする

相対パス使えて便利ね。

 # docker-compose.yml
version: "3"

services:

  wp:
    image: wordpress
    ports:
      - "80:80"
    volumes:
      - ./wp:/var/www/html
      - ./my-great-theme:/var/www/html/wp-content/themes/my-great-theme
    depends_on:
      - db

  db:
    image: mysql
    volumes:
      - ./db:/var/lib/mysql
    environment:
      MYSQL_RANDOM_ROOT_PASSWORD: "yes"
      MYSQL_DATABASE: wordpress
      MYSQL_USER: username
      MYSQL_PASSWORD: password

これで起動すれば “Database Host”を “db” にする以外はそのままぽちぽちいけるはずです。

$ docker-compose up

終了は Ctrl+C で。

envが増えてしまうのが謎。いやDocker直でやったらいらない方が謎か。

きっとありがちなエラーとトラブルシュート

名前が被った

docker: Error response from daemon: Conflict. The container name “/my-wordpress” is already in use by container “0c38694fb63ec30c7e5c1a2140489055dec35a3e6b6031af81be4b591e089ec1”. You have to remove (or rename) that container to be able to reuse that name.

その名前( --name で指定したもの)は既に稼働中です。他の名前を付けるか、現在稼働中のものを停止してください。

たぶん停止し忘れ。

ポートが使用中

docker: Error response from daemon: driver failed programming external connectivity on endpoint my-wordpress2 (87a56c6aaaf8adc1a12dcfa26a0f18917bf9fc4809a65726a5eb47d39ad0b3b9): Bind for 0.0.0.0:80 failed: port is already allocated.

そのポート( -p で指定したもの)は既に稼働中です。他の番号を使うか、現在稼働中のものを停止してください。

先の例では80番で起動したけど、例えば8080番で起動する場合はこう。

$ docker run --rm -d --name my-wordpress --link my-mysql:mysql -p 8080:80 -v `pwd`/wp:/var/www/html wordpress

そしてポート番号を指定して http://localhost:8080 みたいにして開いてください。

MySQLを起動していない

docker: Error response from daemon: could not get container for my-mysql: No such container: my-mysql.

先に docker run ... mysql 的なアレを実行して、MySQLのコンテナを用意してください。その後WordPressを起動。

db, wp ディレクトリが作られない

例えば相対パスは使えません。

こちら駄目な例。

$ docker run --rm -d --name my-mysql -e MYSQL_ROOT_PASSWORD=passwd -v ./db:/var/lib/mysql mysql
$ docker run --rm -d --name my-wordpress --link my-mysql:mysql -p 80:80 -v ./wp:/var/www/html wordpress

絶対パスで書くか、冒頭のように pwd や %CD% を利用します。

pwd 周りに使えない記号が含まれている。

docker: Error response from daemon: create `pwd`/wp: “`pwd`/wp” includes invalid characters for a local volume name, only “[a-zA-Z0-9][a-zA-Z0-9_.-]” are allowed. If you intended to pass a host directory, use absolute path.

Windowsだと pwd が使えないです。本記事冒頭参照。

localhostに繋がらない

初回ならたぶんMySQL待ちです。

念のためdockerの状況見ときましょうか。

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                NAMES
730219bd4919        wordpress           "/entrypoint.sh ap..."   6 seconds ago       Up 29 seconds       0.0.0.0:80->80/tcp   my-wordpress
29d4002b011b        mysql               "docker-entrypoint..."   15 seconds ago      Up 38 seconds       3306/tcp             my-mysql

一覧右端 “NAMES” に my-wordpress が出てくれば大丈夫。のはず。

DBエラー

Error establishing a database connection

たぶん前項と同じ。

あるいはイメージのバージョンを変えちゃったとか。それならバージョンを戻すか作り直し。

イメージを変えたのにWordPressのバージョンが変わらない

ちゃんと db, wp のディレクトリを新しいのにしました?

書いてる人について

WordPressは仕事で使ったことないですのでそこらへんの温度感についてはお察しください。

新しいChromeでスクロールが取れない? scrollingElement?

カテゴリー: JavaScript

知り合いに聞かれて気づいたんですが、Google Chromeのv61からスクロールの取得方法が変わったっぽい。とりあえずこんなコードで取れます。

var top = document.documentElement.scrollTop || document.body.scrollTop

なんだこれ

Chrome 60までとか未対応のやつは document.documentElement.scrollTop が常に 0 を返すので、 || で繋げてやるとどっちに対応してる環境でも動きます。

事前にUAから分岐して要素を分けて、みたいなことしてると駄目なので、こっちがおすすめです。そんなに実行コストかからんでしょ。知らんけど。

Chromeは変わったけどSafariはまだ変わってないので、対応しときましょう。

あとEdgeも document.body の方みたい。IEは document.documentElement だったのに。はしごを外されちゃったね。

scrollingElement なるものが

で、ちらちら見てたら scrollingElement というものがあるらしい。Safariもこいつに対応してるけど、IEは対応してない。(Edgeはいける。) IEを無視できるならこれで一発ですね。

var top = document.documentElement.scrollTop;

らくちん~。

(まだMDNに日本語版がない。これは翻訳チャンスだ。)

対応まとめ

環境 scrollingElement documentElement body
Firefox ✅ ✅ 0
Chrome 61 ✅ ✅ 0
Chrome 60 ✅ 0 ✅
Safari ✅ 0 ✅
IE undefined ✅ 0
Edge ✅ 0 ✅

試してみたい方はこちらをどうぞ。

参考

“VCBuild.exe”がないと言われたけど、windows-build-toolsを入れたら解決したよ。

カテゴリー: JavaScript

正直あんまりわかってないけどまあ解決したのでメモしておく。

ざっくり

管理者権限のPowerShellで npm install --global windows-build-tools したら解決した。

  • https://www.npmjs.com/package/windows-build-tools

環境

  • node v4.5.0
  • Windows 10

なお現在node.jsの最新バージョンはv8.4です。

問題: “VCBuild.exe”がないと言われる

何かをインストールしようとしたとき、こんなエラーが出ました。

C:\Users\Ginpei\project\foo>npm install
> contextify@0.1.15 install C:\Users\Ginpei\project\foo\node_modules\jsdom\node_modules\contextify
> node-gyp rebuild


C:\Users\Ginpei\project\foo\node_modules\jsdom\node_modules\contextify>if not defined npm_config_node_gyp (node "C:\Users\Ginpei\AppData\Roaming\nvm\v4.5.0\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe". To fix this, 1)  install the .NET Framework 2.0 SDK, 2) install Microsoft Visual Studio 2005 or 3) add the loca tion of the component to the system path if it is installed elsewhere.  [C:\Users\Ginpei\project\foo\node_modules\jsdom\node_modules\contextify\build\binding.sln]
gyp ERR! build error
...

MSBUILD : error MSB3428: Could not load the Visual C++ component “VCBuild.exe”.

node-gypでこける。なんかFAQだった気がする。

対応

MS Visual Studioをインストールすればいいのかなーと思ったけど、windows-build-toolsなるnpmパッケージでいけるらしい。npmパッケージじゃないのもあるのかなあ。

Windows PowerShellを管理者権限で起動

管理者権限じゃないとエラー。

>npm install --global --production windows-build-tools

-
> windows-build-tools@1.3.2 postinstall C:\Program Files\nodejs\node_modules\windows-build-tools

> node ./lib/index.js

Downloading BuildTools_Full.exe
[>                                            ] 0.0% (0 B/s)
Downloading python-2.7.13.msi
[>                                            ] 0.0% (0 B/s)
Downloaded python-2.7.13.msi. Saved to C:\Users\Ginpei\.windows-build-tools\python-2.7.13.msi.
Starting installation...
Please restart this script from an administrative PowerShell!
The build tools cannot be installed without administrative rights.
To fix, right-click on PowerShell and run "as Administrator".
npm ERR! Windows_NT 10.0.15063
...

Please restart this script from an administrative PowerShell!

というわけで、言われた通りに管理者権限でPowerShellを起動。

右クリックしてRun as administrator

で、この一行です。

npm install --global --production windows-build-tools

ここでツールをビルドしてるっぽくて相当時間かかった。

10分くらいかかった。

終わったら npm install し直すと、今度は成功した。やったね。

おしまい。

アンインストール

どうもwindows-build-toolsインストール前の状態への戻し方がわからない。npmのパッケージを削除してみたが、特に問題なく npm install が成功するようになってしまった。(まあ別にいいんだけど!)

>npm uninstall --global windows-build-tools

WindowsのSystem settingsから “Add or remote program” で一覧を開いて、今日インストールされたものの中からそれっぽいものを探す。どうやら以下の三つ。

  • Python 2.x.x
  • Microsoft Visual C++ Build Tools
  • Microsoft Visual C++ 2015 Redistributable (x64)

アンインストールするコマンドっぽいものはドキュメントに書いてあるんだけど、使い方がわからない……。これ↓と同じ症状。

参考

なんかこう、しゅしゅしゅーんてな感じで動く検索画面のデモを作りました。

カテゴリー: CSS

こんなん。

雑に作ったので特に解説なし。

Vue+Webpackの開発がすごい楽ちんだ。(Vue.js始めるおれおれアドベントカレンダー2016 – 17日目分)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 17日目分(28日公開)

これこれ。

インストール

vue-webpack-boilerplate自体は特にインストール作業はなさそうなんだけど、その前にvue-cliが必要です。

$ npm install -g vue-cli

これでコマンドラインから vue コマンドが使えるようになります。 “vue-cli” はそのコマンドをインストールする的なやつで、ブラウザが読み込む vue.js とは別物。

開始

出力結果は省略してるけど、こんな感じ。

$ vue init webpack my-project
$ cd my-project
$ yarn install

開発サーバー起動。

$ npm run dev

Listening at http://localhost:8080

URLを開くと最初のページが出てきます。やったね。

テンプレートから生成された画面。

Ctrl+C で終了。

大丈夫そうなので、今回生成されたファイルを見ていきます。

(さらに…)