Lycolog

WSL上のUbuntuで動作するnginxでHTTPSに対応したサーバーを作る方法。実機でも同様の手順でいける

確認環境

手順

1. Windows側にmkcertを入れる
2. mkcertで証明書を作る
   • mkcert sandbox.test
3. 以下のpemファイルが生成される
   • sandbox.test.pem
   • sandbox.test-key.pem
4. 生成されたpemファイルを/etc/nginx/conf.d/ssl/に移動する

5. /etc/nginx/conf.d/sandbox.test.confを作成し、以下のような記述をする

   server {
       listen       443 ssl;
       client_max_body_size 100m;
       server_name  sandbox.test;
   
       ssl_certificate     conf.d/ssl/sandbox.test+1.pem;
       ssl_certificate_key conf.d/ssl/sandbox.test+1-key.pem;
   
       access_log   /var/log/nginx/sandbox.access.log;
       error_log    /var/log/nginx/sandbox.error.log;
   
       # ファイルホスト用
       #  location / {
       #    root /usr/share/nginx/html/sandbox;
       #    index index.html;
       #    try_files $uri /index.html =404;
       #  }
   
       # APサーバーへのリバプロ用
       location ~ ^/.*$ {
           rewrite ^/.*$ / break;
           proxy_set_header X-Request-Path $request_uri;
           proxy_set_header X-Host $host;
           proxy_pass  http://127.0.0.1:9999;
       }
   
       # fastcgi用
       location ~ \.php$ {
           root  /usr/share/nginx/html/sandbox;
           fastcgi_pass unix:/run/php/php8.0-fpm.sock;
           fastcgi_index index.php;
           include fastcgi_params;
           fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
       }
   }
   

6. nginxを再起動する
   • sudo service nginx restart

他の端末に証明書を撒く方法

mkcertのRoot CAをエクスポートして他の端末に突っ込めば、他の端末でもpemが流用できる

• mkcertで作ったCA証明書をエクスポートする方法
• mkcertで作ったCA証明書をインポートする方法

ブラウザのタブがバックグラウンド状態になっているとJSの実行が止まることがあり、そうするとsetInterval()が死ぬので、これを回避する技。

結論としてはWeb Worker APIのWorkerインターフェースを使うことで解決できる。

確認環境

サンプルコード

/**
 * @param {() => void} cb 実行するコールバック
 * @param {number} interval 実行間隔
 * @returns 停止用の関数
 * */
const createWorkerInterval = (cb, interval) => {
  const src = "self.addEventListener('message', (msg) => { setInterval(() => self.postMessage(null), msg.data) })";
  const wk = new Worker(`data:text/javascript;base64,${btoa(src)}`);

  wk.onmessage = () => cb();
  wk.postMessage(interval);

  return wk.terminate;
}

"hoge", "piyo", "fuga"のように綺麗なCSVであるという前提。CSVファイルが巨大なので行読み込みする。

<?php

$db = new PDO('sqlite:./hoge.db');

$db->beginTransaction();
$fp = fopen("hoge.csv", "r");
$idx = 0;

if($fp){
  while ($line = fgets($fp)) {
    $row = createRow($line);
    $db->exec(
      'INSERT INTO hogehoge (`foo`, `bar`, `baz`)'
      . ' VALUES '
      .'(' . '"' . $row['foo'] .'", ' . '"' . $row['bar'] .'", ' . '"' . $row['baz'] .'"' . ')'
    );
    $idx++;
    echo $idx . "\n";
  }
}

fclose($fp);
$db->commit();

function createRow($text) {
  $r1 = preg_replace('/"/', '', $text);
  $row = explode(',', $r1);

  return [
    'foo' => $row[0],
    'bar' => $row[1],
    'baz' => $row[2],
  ];
}

トランザクションを張りっぱなしだが、exec毎にトランザクションを張りなおすと劇的に遅くなるのでやめたほうがいい（恐らく毎回同期処理でWriteが走っているのだと思う）

ピボットグラフで軸ラベルが長すぎると下図のようにグラフからはみ出ることがあるが、これを何とかする話。

確認環境

やり方

グラフ領域にプロット領域を手動で合わせると収まる。手動操作になるのが何とも言えないが、これが一番マシな方法だと思う。

因みにグラフエリアを拡大するとプロットエリアも追従して拡大するため、あんまり意味がない。

イマイチだったやつ

ラベルの角度を逆向きに45度にすることでも実現できたが、文字の向きが気に入らなかった。

ラベルを縦書きにすることでも実現できたが、カーニングや字の揃えがガタガタで納得いかなかった。

prettier-vscodeをPrettier v3に対応させる試みは既にあるのだが、PRがRejectされている。レビューを見た感じtypoが原因っぽいのでtypoを直してみたのだがテストが落ちる。

まずテストが通らない原因だが、これはアサーション結果とテストコード、落ちた時の結果を三点比較したときに落ちた時の結果がプラグインを反映せずprettier -wされたものであることに気が付いた。次にこの解決法だが、原因が複数あるため、その切り分けが必要だと考えている。これはテスト走行時に指定されたプラグインが正しく読み込まれていればテストを通すことができるはずだが、package.jsonの指定通りインストールされているのかや、prettier側が正常に読み込めているのかなどが解らないと、真の原因が突き止められないためだ。

見た感じ割と面倒な仕組みなテストを実行してそうだったので一旦私は諦めることにした。これはprettier v3を個別にインストールすることで基本的に解決できるためだ。とはいえ、インストールできない条件だとその回避に苦労するのでネイティブに対応してほしい思いはあるが、検証するにも本家リポジトリにPRを向けないとテスト走行すらままならず、ローカルでの検証が極めて厳しいので、正直やる気が起きない。ぶっちゃけDockerで個別テストケースごとにビルドしてやるのが一番仕組みが単純で安全に思うが、敷くほど遅くなりそうだし、イメージのメンテも大変そうだし、アホほどイメージができるはずなので、容量も食いそうでなかなか微妙そうである。

そもそも論としてmainブランチを引っ張ってきてビルドすると、この時点で型エラーを吐くので、ここからどうにかしていく必要があり、割としんどい作業になりそうだ。