Engineer's Way

主にソフトウェア関連について色々書くブログです。

WebpackでビルドしたElectronアプリをVSCodeでデバッグする方法

 

(Visual Studio Code 1.21時点)
以下のように .launch.jsonpackage.json を書きます。

.launch.json

{
  "name": “browser process debug",
  "type": "node",
  "request": "launch",
  "outFiles": [
    "${workspaceRoot}/app/build/bundle_main.js",
  ],
  "stopOnEntry": false,
  "cwd": "${workspaceRoot}”,
  "runtimeExecutable":"${workspaceRoot}/app/node_modules/.bin/electron",
   "windows": {
       "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
    },
  "runtimeArgs": [
    "--remote-debugging-port=9223”,
    “."
  ],
  "protocol": "inspector",
},
{
  "name": "renderer process debug",
  "type": "chrome",
  "request": "attach",
  "port": 9223,
  "webRoot": "${workspaceRoot}",
  "timeout": 30000
}

package.json

{
  "main": "./app/build/main.js"
  :

ポイントは次の点です。

  1. outFileでバンドル後のファイルを指定すること。
    • バンドル後のファイルが複数あるなら、それら全部を指定します。globパターンもOK。
  2. ソースマップはinlineでも.mapファイルでもOKです。
  3. webpack:// を置換しないといけないという情報をよく見かけましたが、少なくともinspectorプロトコルデバッグする分には置換しなくても問題なかったです。

Jenkinsスレーブをセットアップするときに「Unable to launch the application」というエラーが出る

  f:id:matsnow:20180319025016j:plain

f:id:matsnow:20180319021757p:plain

Jenkinsスレーブを用意するときに少しハマりました。
ワークスペースを設定しないで slave-agent.jnlpをダウンロード・実行しようとすると、上のエラーが発生します。

f:id:matsnow:20180319021810p:plain

このリモートFSルートに何かしら設定してあげればOKです。

OSSライブラリのライセンスをチェックしてくれるGitHub製ツール「licensed」

 

github.com

商用のプログラムを作っていると、面倒なのがOSSライブラリのライセンスの取り扱いです。
例えばJavaScriptで開発していると、大抵 npm でライブラリを入れますが、入れたライブラリの著作権表示とライセンス条項をどこかに明示しないといけません。
それだけならまだしも、いわゆる「コピーレフト」のライセンス ( GPL とか) のライブラリが混じっていると、そのままだと事実上、パッケージとして配布できなくなります。
さらに、ライブラリは別のライブラリに依存していたりするので、それを全部人手で追跡してライセンスをチェックするのはかなり大変だし、生産的な作業でもないです。

この辺りの面倒臭さを一挙に解決してくれるのが licensed です。

1. 特徴

  • npmやgemなどでインストールしたOSSライブラリのライセンスを集めてリストを作ってくれる。
  • 自分たちが許可してないライセンス(商用プロダクトにおけるGPLとか)が含まれていると教えてくれる。
  • 自分たちが直接使っているライブラリだけでなく、そのライブラリが依存している先のライブラリもどんどん掘り下げて集めてくれる。
  • GitHubの社内ツールがOSSとして公開されたもの。
  • rubyで書かれている。

2. インストール方法

前提

ruby、bundleをインストールしておきます。
参考:https://qiita.com/ikep/items/23b17d7ec60014958bc9

インストール手順

bundleを使ってインストールすることができます。

% cd `HOGE_DIR`  # プロジェクトのトップディレクトリ
% bundle init
% echo "gem 'licensed', :group => 'development'" >> Gemfile
% bundle install --path vendor/bundle

3. 動かしてみる

サンプルとして、appディレクトリを作り、その中にnpmで適当なライブラリをインストールしてみます。 ディレクトリ構成はこんな感じになります。

% tree -aL 2          
.
├── .bundle
│   └── config
├── Gemfile
├── Gemfile.lock
├── app
│   ├── node_modules
│   └── package.json
└── vendor
    └── bundle
実行手順

.licensed.yml をプロジェクトのルートディレクトリに作成します。以下は一例。 *1

name: 'My App' # デフォルトはsource_pathの名前
source_path: './app' # デフォルトはカレントディレクトリ
cache_path: './cache' # source_pathからの相対パス。デフォルトは .licenses

sources:  # 今回はnpmを使います
  npm: true

allowed:  # 以下のライセンスならOKとします
  - mit
  - apache-2.0
  - isc
  - bsd-3-clause

その後で bundle exec licensed cache を実行すると、package.jsonをもとに依存関係が解決され、依存ライブラリのリストが出てきます。
今回の例では、自分でインストールしたのは fs-extrarequest だけですが、55個のライブラリが出力されます。

% bundle exec licensed cache
Caching licenes for app:
  npm dependencies:
    Using fs-extra (5.0.0)
    Using graceful-fs (4.1.11)
    Using jsonfile (4.0.0)
    Using universalify (0.1.1)
    Using request (2.85.0)
   :
    Using tunnel-agent (0.6.0)
    Using uuid (3.2.1)
License caching complete!
* app npm dependencies: 55

「License caching complete!」と書かれているように、各ライブラリのライセンス情報が自動で収集され、cache_pathの中にtxtファイルが置かれています。

% ls app/cache/npm 
ajv.txt                         core-util-is.txt                fs-extra.txt                    json-schema-traverse.txt        request.txt
asn1.txt                        cryptiles.txt                   getpass.txt                     json-schema.txt                 safe-buffer.txt
assert-plus.txt                 dashdash.txt                    graceful-fs.txt                 json-stringify-safe.txt         sntp.txt
asynckit.txt                    delayed-stream.txt              har-schema.txt                  jsonfile.txt                    sshpk.txt
aws-sign2.txt                   ecc-jsbn.txt                    har-validator.txt               jsprim.txt                      stringstream.txt
aws4.txt                        extend.txt                      hawk.txt                        mime-db.txt                     tough-cookie.txt
bcrypt-pbkdf.txt                extsprintf.txt                  hoek.txt                        mime-types.txt                  tunnel-agent.txt
boom.txt                        fast-deep-equal.txt             http-signature.txt              oauth-sign.txt                  tweetnacl.txt
caseless.txt                    fast-json-stable-stringify.txt  is-typedarray.txt               performance-now.txt             universalify.txt
co.txt                          forever-agent.txt               isstream.txt                    punycode.txt                    uuid.txt
combined-stream.txt             form-data.txt                   jsbn.txt                        qs.txt                          verror.txt
% cat app/cache/npm/ajv.txt
---
type: npm
name: ajv
version: 5.5.2
summary: Another JSON Schema Validator
homepage: https://github.com/epoberezkin/ajv
license: mit
---
The MIT License (MIT)

Copyright (c) 2015 Evgeny Poberezkin

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
 :

ライセンスのキャッシュを作った後に bundle exec licensed status を実行すると、各ライブラリのライセンスが .licensed.ymlのallow に指定した中に含まれるかどうかをチェックしてくれます。 出力結果は以下のように出てきます。

% bundle exec licensed status
Checking licenses for app: 55 dependencies
...............................F....FF.................

Warnings:

cache/npm/json-schema.txt:
  - missing license text
  - license needs reviewed: none.

cache/npm/bcrypt-pbkdf.txt:
  - missing license text

cache/npm/tweetnacl.txt:
  - license needs reviewed: unlicense.

55 dependencies checked, 3 warnings found.

今回の場合だと、ライセンス情報が無いものが警告として出てきています。

4. サポートしているパッケージ管理ツール

以下のパッケージ管理ツールをサポートしてくれています。

  • Bower
  • Bundler (rubygem)
  • Cabal
  • Go
  • Manifest lists
  • NPM

言語で言えば、JavaScriptRubyGolangHaskellになります。
Manifest lists は該当するパッケージ管理ツールが無い場合に使います。
自分でmanifest.jsonというファイルを作って、そこにインストールしたライブラリのライセンスが置かれているFIle Pathを手書きするようです。

licensed/manifests.md at master · github/licensed · GitHub

5. 注意点

  • Disclaimerに書いてある通り、完璧な保証はしていないので、使用は自己責任です。
    それでも手作業で全部やるより、よっぽど楽になると思います。
  • もともとGitHubの社内ツールなので、エラー内容はやや不親切感があります。

*1:.licensed.yaml や .licensed.json という名前でもOK