Nodeのバージョン管理ツールVOLTA⚡

naoyukikコメントをどうぞ

WindowsのNodeバージョン管理を探して三千里

みなさんWindowsのNodeのバージョン管理ってどうしてますか？

私はNodistを使っていたのですが、WSL環境と相性が悪い（npmのコンフィグが一部Windowsのパスと混在して壊れた）ので、ひとまずWinもLinuxも同じ管理ツールがないものか、と探していたところ、VOLTA⚡がRustで書かれていて早いしマルチプラットフォームだぞ、ということで使用してみました。

VOLTA Install

新進気鋭なためか、MS開発の新進気鋭のパッケージ管理ツールWingetや毎度おなじみChocolateyには残念ながら対応していません。

そういうわけでGitHubからインストールしよう。.msiファイルで良いでしょう。

今回入れたバージョンは1.0.1。メジャー昇格おめでとう。みたいなタイミング。

Node Install

他のNodeバージョン管理ツールに付いているような現在のNodeのリストをババーンと列挙するコマンドはないようです。

NodeのLTSをインストールもしくは別バージョンからセット

C:\>volta install node

Nodeの最新版をインストールもしくは別バージョンからセット

C:\>volta install node@latest

インストールしたい時とバージョンをセットしたい時、どちらもinstallで行うのがシンプルで漢らしい感あります。

Yarnの最新版をインストールしたい

C:\>volta install yarn@latest

npmやYarn、pnpmあたりのツールもinstallコマンドでインストール可能。

（npmはnodeと共にインストールされます）

現在インストール済みのNode（とツールチェイン）を確認するとき

C:\>volta list all

プロジェクトでバージョン指定するPin止め

C:\Project>volta pin node@10.15

pinってのがモダンなツールっぽいおしゃれ感あります。

このコマンドを使用するとpackage.jsonにvolta向け設定が記載されます。

voltaを使用しているメンバーがこのプロジェクトをデプロイする際、自動で指定したバージョンがインストールされ、使用される仕組みです。自然な流れでいいですね。

この指定方法、そろそろNodeパッケージ管理ツール界隈で合わせてもらいたいよねー、とか思っちゃう今日この頃。

インストールしちゃったnodeのアンインストール

C:\Project>volta uninstall node
error: Uninstalling node is not supported yet.

helpには「The tool to uninstall, e.g. node, npm, yarn, or <package>」って書いてあるけど、現状アンインストールできないようです。

アンインストール手段はあってGitHubでサポートされてました。
サマって訳すと

~/.volta/tools/image/node/ (Windows上は%LOCALAPPDATA%\VOLTA\tools\image\node)配下のバージョン番号ディレクトリーを消せばおk

という感じで。

WebStormに設定する実体

（追記: 2021/02/13）

~\AppData\Local\Volta\tools\image\packages\pnpm\node_modules\pnpm

WebStormでpnpm等のパッケージ管理ツールのパスを設定するとき、自動で読み取ります。
また、WebStormはコマンドラインを自動生成するとき、bin/pnpm.jsを叩きます。そのため、自動で抽出してきたパスの場所がずれると、動作しません。

VOLTAが設定するグローバルなツールのパスは ~/.volta/bin/pnpm です。
このファイルの中身はコマンドが書いてあり、実質的にはショートカット的な働きになっています。そして、このファイルの配下にはpnpm.jsは存在しないのです。

上記のパスはpnpmの例ですが、他のツールの場合もpackages配下を確認してください。

まとめ

使用感としては軽快で扱いやすいです。

シンプルなコマンド体系ですが、逆に大量のコマンドを覚える必要はなく、VOLTAがやれることに集中できるという選択のためで、そういった面もまた扱いやすさになってますね。

気に入ったのでしばらくはWindowsもWSLもVOLTA使っていきます。

VOLTAの現場からは以上でーす。

参考

https://volta.sh/

https://github.com/volta-cli/volta

Xdebug3.xでProfilerを動かす雑な設定

naoyukik1件のコメント

Profilerを動かす

偶然にも関わっているお仕事で「APIあたりのレスポンスタイムがよろしくない」という事象にぶち当たり「Profilerで確認してくれない？」というリーダーからのお達しが別のメンバーに来たものの「設定をしたことがない」というので私の方でProfilerの設定を調べました。

せっかくなので動作した設定をここに記しておきます。

設定

xdebug.mode=profile
xdebug.start_with_request=trigger
xdebug.trigger_value=""

簡単に説明します。

mode

xdebug.mode=profile

modeでXdebugの各種動作モードを設定します。

Profilerの場合、時間などを計測しているので、もしかしたら他の機能は削除した方が良いかもしれないです。

start_with_request

xdebug.start_with_request=trigger

start_with_requestはリクエストが来たときにスタートするタイミングを設定します。

valueとしては3つ。

  • yes
  • リクエスト開始と共に自動で開始
  • no
  • 何もしない設定。ただし、xdebug_start_trace()やxdebug_break()でトレースは可能。リクエストで無条件では何もしないということ。
  • trigger
  • Cookie等にトリガー用のパラメーターが存在すれば動作する。パラメーターにはXDEBUG_PROFILE/XDEBUG_TRACE/XDEBUG_SESSION/XDEBUG_SESSION_START等があり、それぞれの機能に紐付く

trigger_value

xdebug.trigger_value=""

valueが設定してあれば、リクエスト時にそれを指定して動作させることが可能になります。

参考のように空の場合、XDEBUG_PROFILE={任意の値}のように好きな値を設定できます。おそらくこの挙動は「値が設定されたらトリガーオン！」ということだと思います。

コンバート表

以前の設定 新しい設定
profiler_enable_trigger xdebug.mode=profileかつxdebug.start_with_request=trigger
profiler_enable_trigger_value trigger_value

Xdebug Helper

リクエストトリガーの設定はブラウザの場合、各種ブラウザ向けの拡張機能が使えます。

拡張に関してはPhpStormのマニュアルにまとまっているのでリンク先を参照してください。

ブラウザーのデバッグ拡張機能

（ちなみにMicrosoft Edge用にはすでにMicrosoft Storeでも公開されてました）。

Xdebug2.xからXdebug3.xの設定コンバートについては

ここに書かれていないXdebug2.xからXdebug3.xの雑な設定コンバートに関しては1つ前の記事もゼヒ参照してください。

Xdebug3.0.0がリリースされたので、ver2からの雑な設定コンバート

以上。

Xdebug3.0.0がリリースされたので、ver2からの雑なコンバート

naoyukik1件のコメント

Xdebug 3.0.0 is out!

11/25にXdebug 3.0.0 is out!されたわけですが、pecl install xdebugと記載していて、まんまと勝手にver3がインストールされてしまい、まんまと以前の設定で動かず焦っている今日この頃ですが皆さんいかがお過ごしでしょうか？

そんなわけで、私が使用している設定をコンバートし、ひとまず変更を加えて動くところまで雑にやって、雑にまとめました。

mode設定

ver2.x系でとりあえずステップデバッグを使うためには、下記の設定を行っていたと思います。いや、むしろこれがほぼすべてと言ってもよいくらい。

xdebug.remote_enable=1
xdebug.default_enable=0
xdebug.profiler_enable=0
xdebug.auto_trace=0
xdebug.coverage_enable=0

ver3.x系では

xdebug.mode=debug

となります。

modeにいくつかの設定が集約されたようで、そのvalueの記載でフラグを管理していく感じです。

以前の設定とmodeのvalueのコンバートはこう。

以前の設定 modeのvalue
default_enable develop
profiler_enable profile
remote_enable debug

同時に設定したい場合はvalueをカンマ区切り。

xdebug.mode=develop,debug

その他コンバートが必要だったもの

xdebug.remote_autostartを設定する場合、下記の2つを設定するようです。

  • xdebug.mode=debug
  • xdebug.start_with_request=yes.

だいたいの人が必要そうな設定はこちらです。

以前の設定 新しい設定
profiler_output_dir output_dir
remote_host client_host
remote_port client_port

output_dir系はoutput_dirにまとめられたっぽいです。

ここまでの設定でブレークポイントまでは動かすことができました。

ポート番号

私はポートを指定していたので引っかからなかったのですが、デフォルトのポート番号が9003へ変更になっています。

参考

参考にしたのは公式ドキュメント。
結局、必要な設定を検索しながらポチポチ地道に書き換えていくしかなさそうです。

動いたini

最期にXdebugが動作したiniを記載しておきます。
開発環境はPhpStormで、Dockerサーバーです。

xdebug.idekey=PHPSTORM
xdebug.client_host=host.docker.internal
xdebug.client_port=9010
xdebug.idekey=PHPSTORM
xdebug.mode=debug,develop

Profilerの設定

Xdebug3.xでProfilerを動かす雑な設定を公開しましたので合わせてご覧ください。

Pengwinでマウントが解除されていたら…

naoyukikコメントをどうぞ

どうやらPengwinは再起動したりするとマウントが解除されるっぽい

（と書いたけど、もしかしたらWSL2の仕様（もしくは問題）かも）

たまにアップデートのタイミングやらIPアドレスが変わったらやらでPengwin（WSL2）が再起動されるんだけど、そのときにドライブのマウントが解除されてしまう。

ちょっと悩んだけどひとまずWSL上でLinuxのドライブマウントコマンドで解決。

$ sudo mount -t drvfs Z: /mnt/z

（追記:2020/09/30）もしWSL上のnpmとかpnpmでエラーが出る場合は、こちらの感じで。

$ sudo mount -t drvfs C: /mnt/c -o metadata,uid=1000,gid=1000,umask=22,fmask=111

（もちろんドライブレターは自分の環境に合わせる）

「-t drvfs」というのは、WindowsのドライブをWSLでマウントするときのお決まりのオプションということで、何も考えずに付けておく。

参考
Windows 10の「WSL」でネットワークドライブなどをマウントする

tar EPERM: operation not permitted, futime

Windowsコマンドプロンプトを起動と共に文字コードをUTF-8に設定する

naoyukikコメントをどうぞ

今更感満載な話題ですが

昨今のWebやプログラム界隈では、UTF-8がデフォルトの文字コードとなっている。

にもかかわらず、日本のWindows 10のコマンドプロンプトはデフォルト文字コードShift-JIS。

そんなわけで、コマンドプロンプト上でコマンドラインツールの文字を出力しようとすると文字化けが発生する。

なんとかならんもんかと検索したところ、これで解決。

これで解決

$ cmd.exe /K "chcp 65001"

コマンドライン起動時にオプションを渡す。

/Kは、コマンドを実行する引数。

Intellijファミリーでは「File | Settings | Tools | Terminal | Application settings | Sell path」に上記のコマンドをそのまま入力すればOK。

WSL で React Tutorial が開始できなかったのをなんとか出来るようにした

naoyukikコメントをどうぞ

create_react_app のスタートが出来なかった

$ npx create_react_app アプリ名

は問題なかった。
次の段階で、yarn start せよ、とあったのだが、ここでエラーが発生。

Error: spawn cmd.exe ENOENT

こんな感じのエラーが発生し、WSL上で作業しているのに cmd.exe が出るのはどういうことだと。

そして起動方法

結論から言うと、スタート時にブラウザ起動のコマンドを実行するみたいなんだが、WSL 上だと cmd.exe が見つからずエラーになってる模様。

解決策としては、2つあって

  1. cmd.exe へのPATHを設定するらしい
    ※出来るのか未確認
    $ export PATH=$PATH:/mnt/c/Windows/System32
  2. ブラウザ起動をしないようにする
    $ BROWSER=none yarn start

自分の場合「2. ブラウザ起動をしないようにする」で無事に起動した。

他にも同様の理由で起動できないコマンドとかありそう……

参考: https://github.com/facebook/create-react-app/issues/7251

Jetbrains の Intellij 製品に WSLを自分で追加する

naoyukikコメントをどうぞ

開発界隈でちょっと肩身が狭いWindows

会社でPCを支給されるんですが、開発が全員 Mac だそうで、ただそれだとどう考えても今からMacに変更して技術を覚えるコストが人生と割に合わない。

そんなわけで駄々こねて Windows 10 を支給してもらってる。

今やWSLの選択肢がある中で、そもそも Mac にするメリットも個人的にはあまり思いつかないので個人的には強く推奨していきたいWindows 10。

iOS系アプリの開発する場合は別だけど、ことWeb開発においてはどっちでもイイレベル。

WLinux は Pengwin に名前が変わりました。

で、今回は WLinux が Pengwin に名称が行われた関係でWSLとして認識されなくなっているのを修正する。

下記のファイルを変更する。

C:\Users\ユーザー名\AppData\Roaming\JetBrains\使用中IDEバージョン\options\wsl.distributions.xml
（2020/09/16更新:パスを変更）

<descriptor>
  <id>PENGWIN</id>
  <microsoft-id>WLinux</microsoft-id>
  <executable-path>pengwin.exe</executable-path>
  <presentable-name>Pengwin</presentable-name>
</descriptor>

descriptorを追加するか、もはや使えないWLinuxを変更するかはお好みで。

おそらくIntelliJ(WebStorm, PhpStorm, Pycharm…)製品共通だろうと思われ。

参考
WSLを使ってリモートインタープリターを設定する

XPERIA XZ Premium

naoyukikコメントをどうぞ

とうとうSIMフリーにXPERIAがやってきた

(nuroモバイルでは以前から発売されています)
IIJmioでXPERIA XZ Premium が発売されたので購入。
すでに発売から1年以上経ってる端末。

4Kディスプレイだけどいつもは強大な力ゆえ封印されている

この端末は4Kディスプレイなんだけど、一部のアプリ(動画・写真系)くらいしか4K解像度で表示されないというもったいない仕様。
(実際には常時4Kで稼働させるとバッテリー持ちがしんどいのと、ディスプレイの画角が小さく、フォント表示とかむっちゃ小さくなるので常用に耐えられるような設定になっているらしい)

改造は自己責任です

解像度を変更する方法が発見されているので、より高精細な解像度へ変更した。
設定自体は海外の方が発見したようだけど、今回は価格.comの書き込みで「このくらいが良さそう」というのがあったのでその設定にした。
端末のUSBデバッグをON(説明割愛)にして、下記のコマンドを打ち込む。

$ adb shell wm size 1620x2880
$ adb shell wm density 541

※修理・改造を行うとメーカーのサポートが受けられなくなることがあります。その点ご留意頂いた上で、自己責任で設定変更等を行ってください。

付録: 元に戻す設定

$ adb shell wm size 1080×1920
$ adb shell wm density 403

付録: adbのインストール

adbが入っていなかったのでインストール。

$ choco install adb

chocolatey という開発者向けのパッケージツールでインストール。
(chocolateyのインストール方法は割愛)

Fabric 2 で接続周りをシンプルにしたい

naoyukikコメントをどうぞ

Fabric 2 で env を fabric みたいに何も考えずに設定して接続というのをやろうとしてたんだけど下記のように出来なさそう。
global は、バッドノウハウな匂いしかしないんだけど、他にやる方法ないのかな。
おとなしく .ssh/config を設定してそれを読み込ませるようにするのがベターなのかしら？


# -- coding:utf-8 --
from fabric import Connection
from invoke import task

env = {}
conn = None

@task
def env_vagrant(c):
global conn
env['host'] = 'localhost'
env['user'] = 'vagrant'
env['kwargs'] = {
'key_filename': '/home/vagrant/.ssh/id_rsa',
}
conn = Connection(
env['host'],
user=env['user'],
connect_kwargs=env['kwargs'])

@task
def info(c):
conn.run('pwd')
conn.run('python --version')
conn.run('pipenv --version')
conn.local('ls')

OpenSUSE on Windows 10 へのSSH接続

naoyukikコメントをどうぞ

WSLでLinux使えるようにしたい

Microsoft Store からインストールが出来、手軽に使えるようになった気がするのでLinux環境を構築したい。

仕事でCentOSを使っているのでyumを採用しているディストリビューション使いたかったけど、まだ公開されていないのでOpenSUSEをインストールしてみた。OpenSUSEは使うのも初めて。

とにかく何も入ってない

かなりピュアに近い状態のOSなので、ことある毎に”インストールされてない”みたいなエラーメッセージが出てくる。

必要な物がリストになっているならいいけど、そうでないならコマンド叩く毎に毎回インストールを繰り返すことになる。

ひとまずsshで接続

とりあえずWindows から sshで接続出来るところまでを今回はやってみます。

$ zipper install openssh

OpenSSH を入れただけだと各種ホストキーが存在しないのでこれを生成。

$ ssh-keygen -A

次にアカウントのssh 接続用鍵をWindowsでしたいところだけど、環境によって発行できないのでOpenSUSE上で生成して、id_rsaの中身を表示する。

$ cd ~/.ssh
$ ssh-kegen -t rsa
$ cat ~/.ssh/id_rsa
$ cat id_rsa.pub &gt;&gt; authorized_keys

pubファイルはauthorized_keysへの登録を忘れずに。

中身をコピーしたら、ローカルの適当な場所に鍵ファイルとして保存。

ちなみにOpenSUSE上からWindowsのファイルへアクセスするには
/mnt/c/ でCドライブへアクセスできる。あとはファイルをコピーなりなんなりすることも可能。

接続時の設定は下記の感じで行けるはず。

Host opensuse
User ユーザー名
Port 22
HostName 127.0.0.1
identityFile .ssh/id_rsa

各種設定は、環境に合わせて変更よろしく。

これでひとまずOpenSUSEへの ssh アクセスが可能になるはずです。