local開発環境でhttpsの動作検証時にlocal-web-serverとmkcertが便利

何を解決するのか

mkcert

FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd like.

  • CAと証明書を作成できる
  • CAを開発マシン上にインストールできるので、開発マシン上の https サーバを正しくユーザーに検証してもらえる

開発環境を https にしておく必要がある場合に CA と証明書を管理するために openssl コマンドを覚えてくださいと言わなくて済む。

local-web-server

lwsjs/local-web-server: The modular HTTP2 web server for productive full-stack development

開発環境で便利に使えるサーバで

  • https / http2 対応
  • reverse proxy になるのでどんな開発環境とも組み合わせることができる
  • 単体でも static assets の serve はできる

ということでいくつかの環境1で開発を行う機会がある場合はそれらの https 接続を全部まかなうことができて便利。

実際に https reverse proxy として動かす際には上の mkcert で作成した cert と key をコマンドラインオプションや設定ファイルなどで与えてあげるとよい。

どのようなシチュエーションで必要になるか

HTML5 の JavaScript API は、以前はいつでも利用できたが、最近ではプライバシーの観点から https 接続を必須にする方向に変わってきている。ただし、localhost は特別扱いしてくれるため http でも利用できる。したがってサーバを動かしている PC 上ではいつでも API を利用することができるので、PC 上では動作、デバッグが可能である。

しかしモバイルデバイスでこれらの API を利用する場合、モバイルデバイス上では開発サーバが動いていないので、モバイルデバイスからは localhost でアクセスすることができない。つまり、モバイルデバイス実機での API の利用のためには開発サーバが https を喋っている必要がある。

使い方

  1. まず mkcert -install して rootCA を開発サーバ上のシステム全体(あるいは Firefox)が認識できるようにする
  2. mkcert <hostname and/or IP> で接続するアドレスに対応する証明書を作成する

2 の際はサーバへ接続する際に利用する名前、IPアドレスを列挙する必要があることに注意。例えば

  • localhost
  • 192.168.0.1

で接続するのであれば

mkcert localhost 192.168.0.1

で生成する。すると localhost+1-key.pem と localhost+1.pem ができる。

勘のいい方はお気づきだと思うが、つまり、 IP アドレスが変われば証明書も作成し直しである2

で、証明書ができたら以下のように local-web-server を起動する。

ws --cert <cert file> --key <key file> --rewrite '/* -> http://localhost:3000/$1'

これで例えば rails server への接続を https にすることができる。ws は local-web-server のコマンドの名前。デフォルトでは 8000 で立ち上がるので

https://localhost:8000

に接続すると https で rails server に繋がるということになる。

※ すべて reverse proxy 経由でのアクセスになるので、開発サーバが Host ヘッダを見ていない場合はリンクを辿った際に思ったように動作しなくなってしまう。まぁそんな環境をそのままイマドキの https 環境に持っていこうというのはそもそも無理がある。

モバイルデバイスへのCAの転送

実機から開発サーバへ https 接続するには、どうにかして rootCA.pem をモバイルデバイスへ転送してインストールする必要がある。手段は

  • mail
  • Dropbox
  • BitTorrent Sync
  • AirDrop

なんかもあるけど、

claudiodangelis/qr-filetransfer: Transfer files over wifi from your computer to your mobile device by scanning a QR code without leaving the terminal.

こういうの一つ用意しておくといいかも。

terminal 上で QRCode を表示する系のやつは設定によってはちゃんと読み取れるコードを描画できないので、デフォルトのターミナルとかじゃないとダメです。

自分で試した限りでは

svenkatreddy/qr-filetransfer: Transfer files over wifi (or) internet from your computer to your mobile device by scanning a QR code without leaving the terminal. とデフォルトの Terminal.app で転送できました。他のツールは mime/type が設定できずにテキストファイルが表示されるだけになる可能性があります。

考えなきゃいけないこと

手元の環境用の証明書の管理およびそれを .gitignore すること

mkcertは共有には使えない

Installation Warning: the rootCA-key.pem file that mkcert automatically generates gives complete power to intercept secure requests from your machine. Do not share it.

と書かれている。

共有の際は ngrok などを利用するのがよいのかもしれない。

逆に、頑張って我慢すれば ngrok だけで開発できなくはないけど、当たり前だけどかなり遅いし制限もあるので、素直に手元で https サーバ、証明書の管理ができるようになりましょう。

参考

  1. 例えば Rack / PHP / Node.js 

  2. もともとSSLが分かってる人には当たり前ですが 

Kanazawa.rb meetup #7 行ってきました

いつものように日記も兼ねているので書いた日と日付はずれています。

今回は平鍋さんを招いてのアジャイルプラクティスとプロジェクトファシリテーションの概要の話とLT大会でした。

金沢(Kanazawa.rb)でアジャイルの話をしてきました。:An Agile Way:ITmedia オルタナティブ・ブログ

上はメインスピーカーの平鍋さんのブログですが、話し終わってから「疲れたのでLTやめるわ」と言っておきながらこれだけの観察と参加を続けていればそりゃ疲れますよね。ありがとうございます。

地方の会で、独特の雰囲気があった。MC清原さんや司会渡辺さんがやわらかい場を作り上げていた(なにげなく、でもしっかりした仕事していた)。結構、最初の導入や自己紹介、全体のアジェンダの作り方ってコツと回し方があって、そこまで作りこんであったし、LTや「告知タイム」までデザインされていた!

見られてる見られてる(笑

こちらの意図はほぼ全部伝わっているようで、ありがたいことです。そうです、

平鍋さんを招いただけではmeetupはできないのです。

今回、自分の中にははっきりと目標があって、それは

メインセッション以外は平鍋さんにもオーディエンスとして楽しんでもらう。アジャイルに興味があって来たいつものメンバー以外の人にも楽しんでもらう。そしていつものメンバーも楽しむ。つまりみんなが楽しむ。

です。ここはしっかりとMCきよぽんと共有して進めています。はい。

でもこの最も大事な話を最も @hiranabe に心酔している @libero_18 と @haraguro3 は聞いていません(笑 ここはすごく残念であったよ(笑

これに近いことは meetup #6 の懇親会で酔っぱらいながら語っていました。Kanazawa.rb にとって meetup #7 はすでにあのとき始まっていたと思います。

もっとも、プログラムの組み方、準備の進め方は決して順調ではありませんでした。かなり迷走、苦労がありました。とは言え、なんとか平鍋さんには伝わったことが分かってほっとしています。みんなも楽しそうでとてもよかった。

どうですか。 Kanazawa.rb けっこういいでしょう?

もちろんこれはぼく一人でやったことではありません。出した指示をこちらの期待以上の動きで昇華してくれるメンバー、勝手に自分でタスクを引き受けてぐいぐい進めてくれるメンバーがいます。今の Kanazawa.rb は半年前のよちよち歩きのときとは違います。そして今このタイミングでの平鍋さんの話は、さらにコミュニティとして強くなるきっかけになると思っています。(実はぼくの期待は半分そっちにあります!)

平鍋さん、手伝ってくれたみんな、参加したみなさん、参加できなくて歯ぎしりしてるみなさん、遠くからこっそり RT してくれる Ruby コミュニティのみなさん、近くからいつも RT してくれる地域のコミュニティのみなさん、ありがとう!!!

次回 4/20(土) もみんなで楽しもうぜ!

Tracのチケットに時間を入れる

目前の課題はともかく、今後のことを考えるとやっぱ時間の計測は必要だなと思ったので、以下を参考にとりあえず数字を入れる場所を用意することにした。

TracTicketsCustomFields &#8211; The Trac Project

入れるだけなら以下のような記述を conf/trac.ini に書けばイケる。

[ticket-custom]
time_actual        = text
time_actual.format = text
time_actual.label  = 消費時間(h)

time_expect        = text
time_expect.format = text
time_expect.label  = 予想時間(h)

これで ticket の末尾に予想時間、消費時間がいい感じに追加される。期待通りに「予想時間」の方が「消費時間」よりも前に出てくる感じになるんだけど、なぜかは分からない。単純に key の辞書順に並んでるなら消費時間の方が前に出てきそうなもんなんだけど。

試しに ticket を作ったら ticket_custom という table に以下のようなデータが作られた。

select * from ticket_custom;
ticketnamevalue
111time_expect1
111time_actual 

※ ここで 111 は ticket ID, 1 は予想時間を1時間と入力した値。

ははぁ、なるほど。

View Tickets の query を書き直さないと実際には嬉しくないかもしれない。一応やってみたけど、これ全部の query に反映させるのはホネだし、なんかうまいこと設定ファイルかコマンドラインで変更できるのかなぁ?

SELECT p.value AS __color__,
   milestone||' Release' AS __group__,
   id AS ticket, summary, component, version, t.type AS type,
   owner, status,
   time AS created,
   changetime AS _changetime, description AS _description,
-  reporter AS _reporter
+  reporter AS _reporter,
+  e.value as expected,
+  a.value as actual
  FROM ticket t, enum p
+   LEFT OUTER JOIN ticket_custom e ON (t.id = e.ticket AND (e.name = 'time_expect'))
+   LEFT OUTER JOIN ticket_custom a ON (t.id = a.ticket AND (a.name = 'time_actual'))
  WHERE status <> 'closed'
AND p.name = t.priority AND p.type = 'priority'
  ORDER BY (milestone IS NULL),milestone, p.value, time

なんか。なんか気持ちよくない。SQLも得意じゃないので本当にこうなの?っていうすごくモヤモヤした感じ。

NeoOffice 2.1 が出た!

まだニュース見かけないからとりあえずそんだけ。

今から落とす。

public の概念と Google 八分

サイバーエージェント運営のウェブサイトの一部がGoogleから削除される (/.-j)

タレコミ文にある「公共的」という言葉に過剰反応するスレと化している…。

日本では public の概念が希薄あるいはないという話をどこかで聞いたことがあるけど、そんな感じなのかな。

ところでこのストーリーの中でも書かれているけど、Google が不正と判断した場合の対処って、削除じゃなくて pagerank を強制的に最低にするっつー処理じゃダメなのかな? 内部的にも削除じゃなくて非表示扱いとかなんだろうし、存在そのものをなかったことにするかのような操作はちょっと行き過ぎてる気がする。

Google が意図的に検索結果から特定のサイトを除外する行為そのものを否定する気はないんだけど、SEO 絡みについては pagerank の範囲内での操作にとどめるべきじゃないかってこと。他の(大人の事情などの)要因のない SEO の場合は、pagerank に始まり pagerank に終わる方が一貫性があってすっきりすると思う。

GNU grep 2.5

なんか –exclude オプションができてる。今のところ自分の使える環境では 2.5 は cygwin でしか試せないけど、このオプションは ~ ファイルができやすい CVS 環境ではかなり便利な気がする。不要なファイルが検索対象にならないので作業効率がよさそうだ。ただディレクトリまるごと exclude はできないようで、その点は残念。

Ruby 1.8.1 上げ

ふと BitChannel を動かしてみたくなって、とりあえず Ruby だけ 1.8.1_2 を make install. なぜ make install かと言うと、portinstall がうまく動かなかったから。なんでやろ。

気持ち、tDiary の反応がいい気がするけど、どうなんだろう?

風邪気味

やっべーなぁ。明らかに引き始めの症状だ。葛根湯とビタミンと野菜ラーメンだけで回復できるか? 今日は早く帰ろう。

tDiary プラグインチェック

戻ったついでにプラグインのリストからコメントへのリンクをつらつらとたどる。この辺の操作性は tDiary をアップデートして確実によくなったと思う。

さて、目的のものらしきものが見つかった。

これが使いこなせればかなり便利そうだ。あとはオリジナルテーマの作成ができればそのまま説教講座のトップページに使えるんでねーかと目論んでいる。自作 blosxom はいきなりお蔵か?

しかしなんだな。tDiary がだんだん馴染んでくるって話は本当かもしれぬと思ったり。デフォルトの使いにくさは単に自分が Wiki に慣れすぎていた&カスタマイズ疲れで内部を調べる気にならなかっただけかー?

戻った

misc/plugin/blog-style.rb と tdiary/blogio.rb を外したら blogkit 適用済みではなくなった。(もちろん conf も戻したつもり。)

あーよかった。

ついに人生初の NDA か

いけいけごーごー(意味不明)

ちょっとした野望

blosxom の Ruby 版のようなものをちまちまと作っていきたいな。説教講座の改修がもちろん終わったらだけど。何でかって言うと、何度も言うが手軽に静的 HTML が生成したいから。そのための仕組みとして tDiary も VikiWiki もどうもイマイチ使い勝手がよくない。blosxom ではコマンドラインで起動すれば静的 HTML の生成が可能だが、xrea 上じゃそんなことできないし、どうにも面白くない。

そこで最小限の機能で自作しちゃえってこと。

それか BitChannel をこのサーバで動かすってのもいいな。いざとなったらそれがいちばん簡単だろうか。

買う

Ruby 熱が冷める前に、Ruby のコードが割と読めるうちになめておきたい。

やっぱり rsync の罠

include=*/ しか書かない方法 だとカレント以下の不要なディレクトリまでコピーされる。-C での CVS ディレクトリの ignore も、内容はコピーされないが CVS ディレクトリは生成されてしまう。なんだかなぁ。やっぱ Unison か? 誰かテストしてくれー。

Windows 2000 に IIS 5 を起こしていなくても危険な穴

http://itpro.nikkeibp.co.jp/free/ITPro/NEWS/20030325/1/

うげっ。

でもね、WindowsUpdate ってときどき当てると調子悪くなるのよね。インターネット向けに大公開してる 2000 は…。えーと…。うーん、と。

About

例によって個人のなんちゃらです