なんか書いていこうぜー .com

Arch Linux を使っている理由は、netctl と wifi-menu があるからだ、といっても過言ではないのですが、いわゆる ステルスSSID に接続するときのやり方をすっかり忘れていたので、メモ

答え

答えは /etc/netctl/examples/wireless-wpa にある。

Description='A simple WPA encrypted wireless connection'
Interface=wlan0
Connection=wireless

Security=wpa
IP=dhcp

ESSID='MyNetwork'
# Prepend hexadecimal keys with \"
# If your key starts with ", write it as '""<key>"'
# See also: the section on special quoting rules in netctl.profile(5)
Key='WirelessKey'
# Uncomment this if your ssid is hidden
#Hidden=yes ←これを有効にする
# Set a priority for automatic profile selection
#Priority=10

Hidden=yes を追加・有効にしたプロファイルを "#{ワイヤレスインターフェース名}-#{SSID}" という名前で /etc/netctl/ 以下にプロファイルとして作成し、 sudo wifi-menu からSSIDを選択することで無線LANに接続できる。

例) /etc/netctl/wlp4s0-totate-inn0001

接続設定を思い出せなかった言い訳理由

sudo wifi-menu してその中でプロファイルを作成すると、以下のようなプロファイルが作成される。

Description='Automatically generated profile by wifi-menu'
Interface=wlp4s0
Connection=wireless
Security=wpa
ESSID=totate-inn0001
IP=dhcp
Key=XXXXXXXXX

このときに、Hidden=yes のコメントがないため、wifi-menu から作成したプロファイルをコピーして作成すると、なんだっけ？ってなる。

仮に、ステルスSSID だったとすると以下のようになる。

Description='Automatically generated profile by wifi-menu'
Interface=wlp4s0
Connection=wireless
Security=wpa
ESSID=totate-inn0001
IP=dhcp
Key=XXXXXXXXX
Hidden=yes #← これを追加する

/etc/netctl/examples 以下には、静的IPその他の例もあるので、ファイルを確認することをオススメします。

参考:
https://wiki.archlinux.org/index.php/netctl https://wiki.archlinux.jp/index.php/Netctl

2017 年にやったこと

• Electron + React.js でスライドアプリを作った
• 関西Ruby会議で発表して時間オーバーした
• シンガポールにいって、RedDotRubyConf を体験してきた
• お仕事PCも Linux になった
• インフラをごにょる機会を増やした。プロジェクト、WG、個人ワーク
• API Gateway あたりの仕様で死にかけた記憶がある…
• お仕事LinuxPCの vmlinuz が消えて起動しなくなったことがありましたね
• webpacker に PR 投げたけど、蹴られた
• ジム契約したけど、行ってない
• RubyKaigi で広島に行った
• 会社のイベントでスタッフをやった
• Google Home を無駄に使うのが楽しい。特にタイマー、天気、動画再生
• JavaScript を今年、がんばった気がする

2018 年にやりたいと思っていること(仮)

• 今年もなにかアプリを作りたい。特に動きのある感じのがいいなぁ(漠然)
• 1 ライブラリ or 1 エディタプラグインを作りたい
• golang(使うツールが golang 製が多くなってきた)
• terraform で環境作成の経験を積みたい

急に訪れた OS が起動しない問題… systemd-boot で Arch Linux を選択すると、vmlinuz-linux not found って言われて起動しない…

何が起こっているか確認する

中がどうなっているかみえないと話にならないので、USB メモリ等外部から起動できるメディアを使って起動する。私は Arch Linux インストールしたときに使ったイメージをそのまま利用した。 メディアから boot させて、/ パーティションと /boot パーティションを /mnt と /mnt/boot に mount して arch-chroot してみた。

mount した時点でわかるのであるが、/boot/vmlinuz-linux がいない…

vmlinuz-linux をつくる

https://bbs.archlinux.org/viewtopic.php?pid=1654261#p1654261 にあるとおり、pacman -S linux したった。無事 /boot/vmlinuz-linux が作成された。

なぜ消えたのかはわかっていない… 再起動したのも久しぶりだったしわからぬ… linux アップデード時に失敗した？

ついでに

ArchWiki 英語版の systemd-boot を見ていたら、 systemd-boot がアップデートされたら、bootctl update って手動で更新する必要があるとか書いてある。もちろん、手動とか忘れるんで自動で pacman hook を使って更新するようにしてみた。

Automatically にあるように、systemd-boot-pacman-hook を入れてみた。自分で書いてもいいらしいけど、こっちのほうが楽。

教訓

外部メディアからブートできる手段があるの大事

webpacker は以前は install 時にファイルを出力して直接 webpack の設定を変更できたのであるが、現在は webpack の設定を @rails/webpacker という npm package 内にあらかじめ持った loader の設定を load して利用している。

あらかじめ設定されているものをloadするので、使う側は簡単といえば簡単なのであるが、変更を加えようとすると Ruby の世界にないのでオープンクラスほどさっくりといかない。

前提

webpacker 3.0.2, もしくはこれを書いているときの master 8940b2cd8714f666cb4b2a14d5182daa976cfaa6 をもとにしている。

webpack の設定を変更する

config/webpack 以下に js ファイルがあるので、これらをいじって設定を変更する。

% ls -la config/webpack
合計 16K
-rw-r--r-- 1 muryoimpl muryoimpl  93 10月 15 01:57 development.js
-rw-r--r-- 1 muryoimpl muryoimpl 338 10月 15 04:34 environment.js
-rw-r--r-- 1 muryoimpl muryoimpl  93 10月 15 01:57 production.js
-rw-r--r-- 1 muryoimpl muryoimpl  93 10月 15 01:57 test.js

今回は全環境に対して変更を加えるものとして、environment.js に変更を入れる。

environment には、Environment class のインスタンス が入っていて、environment.loaders は webpacker/package/loaders ディレクトリのloaderの設定内容が Map になって格納されている。

それぞれのファイル名が Map の key, loader の rule が value になっているので、それを上書きするなり置換するなりしてあげれば更新されるはず。

例えば↓のような感じ。 TypeScript の tsx を jsx に変換した後の jsx を babel で処理したいと思ってこうしてみた。新しい設定はテキトーな名前の key で反映されたっぽいので特に何も考えてない。

--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1, 3 +1, 8 @@
const { environment } = require('@rails/webpacker')

+const tsloaderConf = { test: /\.(ts)?(\.erb)?$/,  loader: 'ts-loader' }
+const tsxloaderConf = { test: /\.(tsx)?(\.erb)?$/,  loader: 'babel-loader!ts-loader' }
+environment.loaders.set('typescript',  tsloaderConf)
+environment.loaders.set('tsx',  tsxloaderConf)
+
module.exports = environment

とりあえずこれで動いたっぽいのでこのままいくけど、webpacker には loader の設定を merge するような仕組み…はソースみた感じなかった気がするけど、実は公式的な方法があったりする？

アプリの開発を再開しようとしたら、JavaScript のテストが動かなくなっていたので直した。 webpacker を使っていて、webpacker自体をアップデートしたら React が 16 に上がってしまったので引きずられて直した、という事案…

このあたり の奮闘記である。

アプリ側には影響なかった

結論からいうと、(アプリ側はまだまだ作成中なのだが、)改修の必要がなかった。

テスト周りがReactのメジャーバージョンアップによっていろいろ影響を受けていたので修正の必要があった。 ちなみにテストは、Jest と Enzyme を使っていて、テストを流すとどうも component のテストでエラーが発生しているようだった。

ちょっと調べて対応したらテストが通るようになったので、記録しておく。

Enzyme のバージョンアップ と adapter の導入

どうも Enzyme の v3 を使わなければならない、かつ、v3 から “adapter” という概念が追加になっているらしい。

React のバージョンが 16 になっているので、その名も “enzyme-adapter-react-16” なる adapter を導入した。Enzyme の README に表があるので、その表にある adapter を導入すればよい。package.json にある Jest の設定に”setupFiles” を追加してテスト実行前に require しておきたいファイルを書いておく。

  "jest": {
     "testMatch": [
       "**/__tests__/**/*.test.js?(x)"
+    ],
+    "setupFiles": [
+      "./app/javascript/__tests__/helpers/setup-test-env.js"
     ]
   },

上の ./app/javascript/__tests__/helpers/setup-test-env.js に以下の記述を追加して、adapter を設定する。

+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+Enzyme.configure({ adapter: new Adapter() })

react-test-renderer のアップデート

テストを流すと以下のエラーが出た。

Cannot find module 'react/lib/React' from 'ReactShallowRenderer.js'
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:16:13)

“react/lib/React” となっているってことはなんとなーく、React 16 に対応できていないっぽい。バージョン確認したら、15.6.1 だったので yarn upgrade-interactive したら 16.0.0 になってエラーが解消された。

polyfill の導入

React は Map と Set と requestAnimationFrame が必要なので、polyfill の導入がテストでも必須っぽい。 Map と Set は babel-polyfill か core-js で、requestAnimationFrame は raf の polyfill を導入するとよいらしい。

先に Enzyme の adapter を追記したファイルに、polyfill を import する。

+import 'babel-polyfill'
+import 'raf/polyfill'

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

まとめ

React を使っていたアプリ側の変更は必要なかったが、テスト周りは影響を受けていたので修正した。 enzyme, enzyme-adapter-react-16, react-test-renderer のアップデート・導入をして、テスト実行前に polyfill と Enzyme の adapter の設定を読み込ませることで解消することができた。