2018年7月28日土曜日

SyntaxHighlighter v4のBlogSpotへの導入と常時HTTPS化

ふと検索結果から自分のブログへアクセスしたところ、PowerShellのコード表示に使っていたSyntaxHighlighterが崩れているのに気づき、
http://alexgorbatchev.com/SyntaxHighlighter/ でお借りしていたv3ではなく、そろそろ自分でv4を用意して、ついでにBlogspotのHTTPS化をすることにしましたので、その際の覚え書きです。

※ Blogspotの常時HTTPSを有効にすると、SyntaxHighlighterのスクリプトをお借りしていたhttp://alexgorbatchev.com/ へのリンクがHTTPだったため、Chromeでは警告が上がりそのままではスクリプトが動作しないため、今までブログ自体はHTTPのままにしていました。


今回たまたま記事の中身がhtmlそのまま出力されていた事に気付き、こりゃまずいと類似事例を探すと昨年末くらいから幾人かが実施していたので、それを模倣しました。

SyntaxHighlighter v4

SyntaxHighlighter v4は現在はGitHubで公開されており、自分でBuildする必要があります。

https://github.com/syntaxhighlighter/syntaxhighlighter

Build方法もサイトにあります。

https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Building

Photon OS 2.0でBuild環境を作る

Windows 10 のWSLでBuildするか、何か違うもので実施するかを考え、せっかくなのであまり使っている人がいないPhoton OS (v2)で試してみました。

Photon OSもGitHubで公開されているVmwareが開発主導のクラウドネイティブ・コンテナプラットフォームとしての利用を前提とした軽量Linuxです。
vCSA6.5以降など、Vmwareの仮想アプライアンス製品のベースにもなっています。

https://vmware.github.io/photon/

ISOイメージインストーラの他、最小構成で組まれたOVAがいくつか公開されています。
今回はVmware Workstationにデプロイし、SyntaxHighlighterのBuild環境にしました。

※Photon OSのセットアップ、SSHの有効化などは省略します。

Photon OS v2ではgitコマンドは最小構成でも最初から使えます

SyntaxHighlighter v4のBuild

公式のBuild手順に沿って、進めていきます。
https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Building
$ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
$ cd syntaxhighlighter
$ npm install

npmコマンドはインストールされていないので、nodejsをリポジトリから落としてきます。
※Photon OSはyum互換のtdnfがパッケージ管理ツールとなっています。



nodejsがインストール出来たら、npm install を実行します。



続いてのsetup-projectでFailします。


root@photon-01 [ ~/syntaxhighlighter ]# ./node_modules/gulp/bin/gulp.js setup-project
[12:40:50] Failed to load external module @babel/register
[12:40:50] Requiring external module babel-register
[12:40:51] Using gulpfile ~/syntaxhighlighter/gulpfile.babel.js
[12:40:51] Starting 'setup-project:clone-repos'...
[12:40:51] 'setup-project:clone-repos' errored after 1.15 ms
[12:40:51] TypeError: loadReposFromCache(...).error is not a function
    at loadRepos (/root/syntaxhighlighter/build/setup-project.js:39:48)
    at Gulp. (/root/syntaxhighlighter/build/setup-project.js:48:5)
    at module.exports (/root/syntaxhighlighter/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/root/syntaxhighlighter/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/root/syntaxhighlighter/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/root/syntaxhighlighter/node_modules/orchestrator/index.js:134:8)
    at /root/syntaxhighlighter/node_modules/gulp/bin/gulp.js:129:20
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
(node:2815) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open '/root/syntaxhighlighter/.projects-cache.json'
(node:2815) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

ググると先人達の幾人かがBlogにアップしていて、以下のスレッドで回避用のリポジトリが用意されていたのでそちらを利用してやり直しました。
https://github.com/karljacuncha/syntaxhighlighter.git

参照スレ
https://github.com/syntaxhighlighter/syntaxhighlighter/issues/428#issuecomment-360562686

元々標準テーマで利用していたのと、v4からはブラシが1つにまとめられたので、ブラシの指定はAllにしました。
./node_modules/gulp/bin/gulp.js build --brushes=all --theme=default

root@photon-01 [ ~ ]# git clone https://github.com/karljacuncha/syntaxhighlighter.git
Cloning into 'syntaxhighlighter'...
remote: Counting objects: 3507, done.
remote: Total 3507 (delta 0), reused 0 (delta 0), pack-reused 3507
Receiving objects: 100% (3507/3507), 5.93 MiB | 2.45 MiB/s, done.
Resolving deltas: 100% (1772/1772), done.
root@photon-01 [ ~ ]# cd syntaxhighlighter
root@photon-01 [ ~/syntaxhighlighter ]# npm install
npm WARN deprecated babel-preset-es2015@6.24.1: ?
                                                   Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

~省略~

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 985 packages in 131.415s
root@photon-01 [ ~/syntaxhighlighter ]# ./node_modules/gulp/bin/gulp.js setup-project
[12:52:06] Failed to load external module @babel/register
[12:52:06] Requiring external module babel-register
[12:52:06] Using gulpfile ~/syntaxhighlighter/gulpfile.babel.js
[12:52:06] Starting 'setup-project:clone-repos'...
(node:4077) [DEP0013] DeprecationWarning: Calling an asynchronous function without callback is deprecated.
git clone https://github.com/syntaxhighlighter/SyntaxHighlighter-Site.git
git clone https://github.com/syntaxhighlighter/syntaxhighlighter-match.git
git clone https://github.com/syntaxhighlighter/opts-parser.git


~省略~

oot@photon-01 [ ~/syntaxhighlighter ]# ./node_modules/gulp/bin/gulp.js build --brushes=all --theme=default
[12:53:00] Failed to load external module @babel/register
[12:53:00] Requiring external module babel-register
[12:53:00] Using gulpfile ~/syntaxhighlighter/gulpfile.babel.js
[12:53:00] Starting 'build'...
[12:53:02] Theme: default
[12:53:02] Brushes: applescript, as3, base, bash, coldfusion, cpp, csharp, css, delphi, diff, erlang, groovy, haxe, java, javafx, javascript, perl, php, plain, powershell, python, ruby, sass, scala, sql, swift, tap, typescript, vb, xml
[12:53:02] Hash: cdcdfc450da96aec935d

~省略~

   [52] ./~/domready/ready.js 1.13 kB {0} [built]
   [53] ./src/dasherize.js 526 bytes {0} [built]
[12:53:02] Finished 'build' after 2.27 s
root@photon-01 [ ~/syntaxhighlighter ]#
root@photon-01 [ ~/syntaxhighlighter ]#
root@photon-01 [ ~/syntaxhighlighter ]#
root@photon-01 [ ~/syntaxhighlighter ]# ls dist/
index.html  syntaxhighlighter.js  syntaxhighlighter.js.map  theme.css

無事にファイルが"dist"フォルダに作成されたので、CSSとJSファイルをHTTPSを有効にした個人の別のスペースにアップし、BlogSpotのテーマファイルにリンクを追記します。



これで SyntaxHighlighter の表示も正常になり、BlogSpotの常時HTTPS化も問題なく動作しました。

2018年7月19日木曜日

vCSA 6.5GA から 6.5U1までのデプロイが2018/7/1以降は不可なのでご注意を

最近いくつかvCSAがデプロイ出来ないのだが、という質問を受けているので改めて以下の不具合(?)のご紹介。

vCSA 6.5.0 ~ 6.5u1 のテンプレートに組み込まれた初期のrootアカウントのパスワードが365日でexpireする事が原因で、新規のvCSA 6.5のデプロイ、アップグレードなど失敗します。
デプロイはGUIでもCLIの場合でも失敗します。

この不具合はvCSA 6.5u1cで改修されていますので、今後も順次6.5u1a、6.5u1bもリリースから一年経過後に新規展開は出来なくなります。
vCenter 6.5u1c リリースノート


ここで注意が必要なのが、「リストア」の時です。
現在のvCSAはVAMI画面からのファイルベースバックアップがサポートされていますが、
取得したバックアップデータをリストアする際、本来はバックアップを取得したバージョンで戻すべきですが、同一バージョンに戻せなくなってしまう場合があります。
例)vCSA 6.5.0でバックアップを取得したが、vCSA 6.5u1cに戻す必要がある、など。

ドキュメントを読む限りはESXiのコンフィグリストアと異なり、厳密にBuild番号まで揃えなくても良さそうですが、vCSAが壊れてしまった非常時に安心してリストアするためにもvCenterはなるべく不具合修正された最新版で運用する事が推奨されます。