開発環境見直し for WORDPRESS on WSL

2017/11/09 追記:
LAN内の他のPCからアクセスするには、コントロールパネル ≫ Windows Defender ファイヤーウォール の新規受信規則で、ポート80番を開けないといけません。


ちょっと前に今の仕事の開発環境を新しくしたのですが、Windows 10 Fall Creators Update(以下、FCU)で、Windows Subsystem for Linux(WSL)がベータ版から正式版に変わったんで、また見直し。見直しというか、Wordpress用。

HyperVを使った前のやつは、こっち、でCIFSマウントしているディレクトリへのアクセスがたまにエラー?で読み取れなくなるぐらいで、特に不自由もなかったんですが、WSLの記事をググると、思いの他進化しているので、WORDPRESSでのお手軽サイト構築用の環境として整備することにした。

Windows10 FCU からは、限定的ですが、ネットワークフォルダをマウントすることができて、WSLはかなり実用的な開発ツールセットになってきています。しぶしぶMac使っている人(そんな奴いるのか?)は、やっと大好きな(笑) 使い慣れたWindowsでウェブ系のお仕事ができます!( ̄▽ ̄)

BoWそのものは、マイクロソフトストアからインストールできるので、もう説明要らないでしょう。Windows10 FCUから開発者モードにする必要もなくなったし。

手順を記録しとこう、という備忘録です。特にこれといって新しいことが書かれているわけではなく、グーグル先生に聞いた内容を自分用にまとめたものなので、あまり参考にはなりません。あしからず。

>>以下の手順を全自動で行うシェルスクリプト

■ パッケージのインストール
apt コマンドで、必要なパッケージをインストールしていきます。sudo するのがかったるいので、全部 root で作業します。
の、前に・・・、まず、/etc/apt/source.list の中のリポジトリを日本のものに差し替えるのが定石だそうですので、変更してからにします。
また、mysql-serverをインストールする最中に、root パスワードを入力するように促されるので適当に。

sudo su -

sed -i.orig -e 's%http://archive.ubuntu.com/ubuntu/%http://ftp.jaist.ac.jp/pub/Linux/ubuntu/%g' /etc/apt/sources.list
apt update
apt -y upgrade

apt -y install apache2 apache2-doc mysql-server mysql-client
apt -y install php php-mbstring php-mysql php-sqlite3 php-gd php-mcrypt libapache2-mod-php 

php の方は、必要なモジュールを別途 apt でインストールする必要があります。・・・その辺はまぁ適当に。

■ Apache2 設定
まず、そのまま “service apache2 start” とかやると、ワーニングがでます。まぁ、無視すりゃいいんですが、気になるので・・・。
/etc/apache2/apache2.conf を開いて下記2行を追記します。

AcceptFilter http none
AcceptFilter https none

あと、開発するファイル等が入った、ドライブなり、フォルダなりを apacheから見えるようにしないといけません。
windows.confは、僕の環境では、下記のような感じ

#
# /etc/apache2/sites-available/windows.conf
#
<Directory "/mnt/d/devel">
AllowOverride All
Options All
Require all granted
</Directory>
Alias /devel /mnt/d/devel

で、有効化します。

a2ensite windows

php.iniの修正も若干必要ですかね。デフォルトで2MBしかアップロードできませんし、開発環境なんで、memory_limitは無制限にしたい。
ってなわけで、/etc/php/7.0/apache2/php.ini で、以下の項目を修正

  • date.timezone
  • memory_limit
  • post_max_size
  • upload_max_filesize

それと、まぁ、ほとんど使わないと思いますが・・・DocumentRootが /var/www/html で設定されているのですが、これのオーナーとグループを自分のユーザーにしときましょう。いちいち sudo してコピーするのメンドクサイでしょう。ついでにホームディレクトリにリンクを作っときましょう。

#一度 root を exit して・・・
exit
#myuserは自分のアカウントで置き換える
sudo chown -R myuser:myuser /var/www/html
ln -s /var/www/html ~/wwwroot
# root に戻る
sudo su -

■ MySQL 設定
次、mysql。apacheと同じく、”service mysql start” とかやると、僕の環境ではワーニングが出ます。これも無視すればいいんでしょうけど・・・。
mysqlユーザーのホームディレクトリを作ってやります。すでにあればやる必要なし。

mkdir /home/mysql
chown mysql:mysql /home/mysql
usermod -d /home/mysql mysql

mysql の 文字コードを UTF8にしときます。
/etc/mysql/my.cnf を開いて、下記を追記

[client]
default-character-set = utf8

[mysql]
default-character-set = utf8

[mysqld]
character-set-server = utf8

ここで、一旦 mysql を起動して、mysqlクライアントからユーザー、データベースを作っちゃいましょう。

service mysql start
mysql -u root -p

ここから mysql シェル

まずユーザー(wpuser)を作成。パスワードは適当に 0000 とか。
> CREATE USER wpuser IDENTIFIED BY '0000';

WORDPRESS用のデータベースを作っときます。
> CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8;

作ったユーザーに、データベースの権限を全許可します。
> GRANT all privileges ON wordpress.* TO wpuser

> quit

あと、phpMyAdmin は必須っすね。aptコマンドでインストールしてもいいんですが、最新のものをマニュアルで入れときます。

#一旦rootを抜けて、一気に片付けましょう。
exit
cd /var/www/html
wget -O - https://files.phpmyadmin.net/phpMyAdmin/4.7.5/phpMyAdmin-4.7.5-all-languages.tar.gz | tar xvzf -
mv phpMyAdmin-4.7.5-all-languages phpMyAdmin
cd phpMyAdmin
cat config.inc.sample.php | sed -r 's/^(\$cfg\['\''blowfish_secret'\''\]) *= *'\''.*'\''/\1 = '\''32_moji_no_randamu_na_ei_suuji_x'\''/g' > config.inc.php

WSLではサービスとして動かすことができないので、bash を終わらせるとapache,mysqlのデーモンが全部落ちます。まぁバックグラウンドで走らせてしまうと、Windows Serverの顔が立たない(^^;ので致し方ありません。
bashを立ち上げるたびに、

sudo sh -c 'service mysql start; service apache2 start' 

とかやる必要があります。まぁこれは、alias 一個作っとけばいいだけなんすけどね。

WORDPRESSでのサイト構築ではもう十分な感じ。でも WSLのubuntuで docker が動いたらこんなメンドクサイことしないで済むのになぁ・・・。いずれ対応してくれることを祈る。

実際にはシェルスクリプトにすることで、インストールしてコマンド一発で、LAMP環境をセットアップできるようしています。
そのスクリプトは、こっち。

ドメイン変更

ORGからJPに変更。。。

IPアドレスが同じの場合、HTTPSでのドメイン転送はどうすればいいんだろう・・・。
う~む、勢いで変更しちゃったから、HTTPSでリンク貼られたところは軒並み、「プライバシーエラー」が出てしまう。

んー、ま、いいか。

xkeymacs + Windows10

そろそろプロパティダイアログの修正入っているのかなぁ・・・と思って久しぶりにxkeymacsのページを覗いたけど、現状で安定しているのかsnapshotが6年前で止まってた。まぁ、Windows10でもちゃんと動いているんだし(^^;
snapshotのリリースは止まっていたけど、ソース自体は更新されていたので、最新のソースをダウンロードしてVisual Studio 2015 Community でビルドした。
ビルドする前に設定ダイアログのサイズをちょっと伸ばしてプロパティシートが切れないのようにちょっとだけ伸ばす。これは↓と同じ(^^;

Windows8.1用にxkeymacsをビルド

スクリーンテキストのサイズは100%でしか使わないのでOK。
プロパティの部分だけ(GUIの部分だけ)C# .Net Frameworkとかで書けば多分解決するんでしょうけど、いかんせん、MFCのソースは僕には皆目読めません。。。読む気ありません。。。ただでさえC++忘れかけてるのに・・・。C++ TR1ぐらいがギリついてけるが、C++11規格とかもうサッパリ・・・。Cに至ってはもうC90ぐらいでも今となってはついていけるかも怪しい。。。

ってなわけで、どこからでもダウンロードできるように、リンク貼っておこう。
Rev.8799a18のものをVisual Studio 2015 Community Editionでビルドしたやつ

C6/C7ステートは無効にせよ

家にあるPCは、部品寄集めの所謂、自作機。Haswel Core i7 と Gigabyte製のM/B。

(4年前の画像が残ってた)

Windows7の時は特にこれといって不満はなかったんですが・・・Windows10にした頃から、なんだかフォルダウィンドウが開くの妙に遅く感じてた。開くだけでなく、ウィンドウの切り替えが全体的にもっさり。タスクバーに登録したフォルダのショートカットをクリックしてウィンドウが現れるのに最悪2秒くらいかかる。

会社で使っているPCは 第二世代のCore i5 なんですが、それよりも遅い・・・今までいろいろググってみたけど、分からず・・・。
でも、つい最近なんですが、動画エンコード中にフォルダウィンドウを開くと、普通に速く開くのにやっと気付く(遅ッ)・・・あれ? もしかしてCPUの省電力が無駄に働いてんのかな・・・。
早速ググると、どうやら デスクトップPCではM/Bの設定でC6/C7ステートは無効にする、っていうのは FAQ らしい・・・。今更・・・気付いても・・・もうじきリプレースしようしているのに・・・(笑)

再起動しDELキーでBIOS画面に入り、無効化したら、今までの不満はなんだったのか?というほど嘘みたいに普通になる・・・。ウィンドウ間の切り替えもフツーの速さに・・・。

ああ、自作機においてデフォルト設定はダメなのね・・・。やっぱり僕みたいなのは、大人しくメーカー製のPCの方がいいかもしれませんね。。。

この夏もグチで終わり。。。

WebClient派生クラスでのクッキー読み書きについて

Tweet image download agent で、致命的なエラーを放置してた件。
もともとファボったツイートの画像だけを自動ダウンロードするために書いたコード。最近はもともとの動機となった機能はほとんど使わず、ツイッター内で検索した画像を自動ダウンロードするために使っていたので、いつの間にかログインできない状態になっていて、それにも気づかず・・・。コメントで報告してもらって初めて気づいたという、お粗末さ(^^;;;

それはともかく、原因は、ログイン後のクッキーの取り扱い。それが雑だったという、二重のお粗末さ・・・。C#使いとしては失格ですえ。

何が原因なのか、VisualStudio2015のIDEでとりあえず、該当箇所をステップ実行してデバッグしてたら、HttpWebResponse.Cookies に セッションクッキーしかストアされていないことに、まず気付いた。要するに、サーバーから返されたレスポンスヘッダ Set-Cookie の Expires が設定されていないものだけが HttpWebResponse.Cookiesにストアされている・・・。

どゆこと?

いくら実行しても、セッションクッキーしか保存されない・・・。これじゃログインが成功してたとしても、だめだわ・・・。
ChromeのDevToolsでTwitterサイトへのログインのレスポンスヘッダーを眺めてたら、あれ? もしかして、Expires に記述されている日付書式のパースに失敗してんのかな???と、グーグル先生に聞いてみると、.NETのSet-Cookieヘッダのパーサーはバカだよ(超意訳)、みたいな投稿が StackOverflowに出てた。

ってなわけで、WebClient.GetWebResponseをオーバーライドして、

WebResponse.Headers[“Set-Cookie”] から自前でクッキーをパースして、CookieContainer.Add しちゃいなよ!

っていうアドバイスに従い、テキトーにパースして Add しちゃう、しちゃう。

でもなー、前はちゃんと動いてたのに・・・。やっぱり、Twitter が吐く Set-Cookieヘッダが変わったぐらいしか、原因が分からないすッ。

探せばもっとマトモなコードがあると思われるので後で探そう・・・とりあえず↓でヨシとする。(要点のみ)
※ すべてのコードは、https://osdn.jp/users/earlgreyx/pf/TwitterImageDownloadAgent/wiki/FrontPage

/********************************************************
修正:2017/08/20 WebResponse.Headers.GetValuesメソッドから取得するように変更。
修正:2017/08/22 やっぱり forループよりLinq使った方がいいか・・・。
*********************************************************/
protected override WebResponse GetWebResponse(WebRequest request)
{
  WebResponse response = base.GetWebResponse(request);
  if(response is HttpWebResponse)
    {
      var httpWebResponse = response as HttpWebResponse;
      fixCookies(httpWebResponse);
 
      cookieContainer.Add(httpWebResponse.Cookies);
    }
  return response;
}
 
private void fixCookies(HttpWebResponse response) 
{
  var cookies = Enumerable.Range(1,response.Headers.Count)
                          .Where( i => response.Headers.GetKey(i - 1).ToLower() == "set-cookie" )
                          .SelectMany(i => response.Headers.GetValues(i - 1).Select(val => val));

  foreach(var singleCookie in cookies)
    {
      string domain=null,path=null,expires=null,n=null,v=null;
      bool httponly = false,secure = false;
 
      foreach(string el in Regex.Split(singleCookie, @"\s*;\s*"))
        {
          string[] kv = el.Split(new char[] {'='},2);
          string key=null,val=null;
          if(kv.Length == 2)
            {
              key = kv[0];
              val = kv[1];
            }
          else if(kv.Length == 1)
            {
              key = kv[0];
            }
 
          switch(key.ToLower())
            {
            case "domain":
              domain = val;
              break;
 
            case "expires":
              expires = val.Replace(" UTC","Z");
              break;

            case "path":
              path = val;
              break;

            case "httponly":
              httponly = true;
              break;

            case "secure":
              secure = true;
              break;

            default:
              n = key;
              v = val;
              break;
            }
        }
      var cookie = new Cookie(n,v);
      if(!string.IsNullOrEmpty(path))
        cookie.Path = path;
 
      /* Domainがない場合は、.twitter.com にしちゃう!
         Domainプロパティを設定しないと、Addが失敗しちゃう!! */
      cookie.Domain = string.IsNullOrEmpty(domain) ? ".twitter.com" : domain;

      if(!string.IsNullOrEmpty(expires))
        {
          //パースが失敗しちゃう場合は、Expiresは無かったことにしちゃう!
          DateTime dt;
          if(DateTime.TryParse(expires,out dt))
            cookie.Expires = dt;
        }
 
      cookie.HttpOnly = httponly;
      cookie.Secure = secure;
 
      response.Cookies.Add(cookie);
    }
}