JetsonNanoでLookingGlassを動かす - JetsonNano上にローカルサーバーを建てる

2019年6月16日 17:44

はじめに

今回は普段お仕事でやっているフロントエンド開発の内容が存分に入っています。アプリエンジニアの方(特にUnityサイドの人)には覚える内容が多いため結構大変かと思います。
今回はJetsonNano側のターミナルを触るため、一部Linuxのコマンドが登場するのですが、細かい解説は省きますので、コマンドの意味などは各自で調べてください。

Windowsな人へのお願い

Windows10だとmDNSを使ったsshログインでうまくいかないケースがあります。下記の内容を満たしているか、ウィンドウズのバージョンとネットワーク設定に気を付けてください。

1. ネットワークプロファイルがプライベートになっていること
2. Windowsのバージョンが1803、もしくは1903(Insider Preview)であること

上記内容を満たしても見つからない場合がありますが、一度PCを再起動すると解決するかもしれません（ほかにもうまくいかないケースがあるかも）。セキュリティの都合などで上記の設定にできない場合はssh接続時のホスト名をJetsonNanoのIPアドレスにしてください。(username@192.168.1.*** という感じです)

テキストエディタ(VSCode)をインストール

作業を円滑に進めるため、テキストエディタを準備します。汎用のテキストエディタをお使いでない場合は、WindowsとMac両方のプラットフォームに対応している Visual Studio Code(以下VSCode) が良いかと思います。VSCode以外にもsshfsかsftpでリモートのディレクトリが開けるエディタであれば大丈夫かと思います。

VSCodeをセットアップする

SSH FSをインストールする
拡張機能(Ctrl+Shift+X)からSSH FSをインストールします。検索ボックスから "ssh" と打てば候補の上位に出てくるので、 INSTALL をクリックしてインストールします。
SSH FSに対する設定そのものは、またあとで紹介します。

ローカル側にプロジェクトフォルダを作る

ローカルにはほとんどファイルを必要としませんが、SSH FSの設定情報を記録するためのプロジェクトフォルダを作成し、メニューバーから開きます。ファイルダイアログが開くので、プロジェクトフォルダにしたいフォルダ（例:lkg-demo）を作成して開いておきます。

リモート側にフォルダを作成する

統合ターミナルを開く
Ctrl+Shift+Pを押して "terminal" と入力、候補項目の "View: Toggle Integrated Terminal" を選択し、ウィンドウ下部にターミナルウィンドウを表示します。

下のようにVSCodeに設定されたターミナルが出てきます(Windowsの場合はPowerShell、Macの場合はbash)。一度画面をクリックして、赤枠の箇所に下記以降に出てくるコマンドを入れていきます。

SSHでJetsonNanoに接続する
JetsonNano側にプロジェクトフォルダを作成します。この作業はSSH FSで使いやすくするための作業になります。統合ターミナルから以下のようにコマンドを入力します。(例：ssh username@your-desktop.local) ユーザー名(Pick a username)とコンピューター名(Your computer's name)は前回の記事で入力したユーザー名とコンピュータ名を参考にしてください。わからなくなった場合は、JetsonNano本体側でターミナル(Windowsキーをおして、terminalとタイプ、Terminalを選ぶ)を起動すれば左側に<ユーザー名>@<コンピュータ名>:~$と表示されます。

ssh <ユーザー名>@<コンピュータ名>.local

パスワードを聞いてくるので、JetsonNanoに設定したパスワードを入力し、エンターキーを押します。(パスワード入力時何も表示されませんが、これは仕様なので、気にせずパスワードを入れてエンターキーを押します。間違って入力した場合はBackspaceが使用できるので、連打して消してください。パスワード入力後、下記のように表示されればJetsonNanoにログインできています。

<ユーザー名>@<コンピュータ名>:~$

プロジェクトフォルダを作成
ログイン時は /home/<ユーザー名>/ にディレクトリがあり、この下にディレクトリを作成します。下のコードでは git-root というプロジェクトのルートフォルダを作成し、その中にlkg-sample というプロジェクトフォルダを作成しています。以降このフォルダ(git-root/lkg-sample)のことをプロジェクトフォルダと呼びます。 git-root にしているのは、自分がよくgitでプロジェクト管理をしているので、ルートフォルダとしてこの名前にしています。実際は好きな名前にして大丈夫です。

mkdir git-root
cd git-root
mkdir lkg-sample
cd lkg-sample

JetsonNanoにNode.jsをインストールする

curlをインストール
JetsonNanoはデフォルトではcurlがインストールされていないので、インストールしておきます。下のコマンドを実行後、JetsonNanoにログインした時と同様にパスワードを聞いてくるので、パスワードを入力してください。また、途中でインストール確認をしてくるので、エンターキーを押して続行してください。

sudo apt install curl

Node.jsをインストール
続けてローカルWebサーバーを立てるため、Node.jsをインストールします。おすすめのバージョンは v10.x です。v12は出たばかりなので、Node.jsを初めて使用する方にはおすすめしません。
Node.jsのインストール方法はいくつかありますが、UbuntuやJetsonNanoで同じ作業をするときは、ここの Installation instructions にある Node.js v10.xでのインストール方法を参考にしてください。現時点でv10.xをインストールするコマンドは以下の通りです。note.muのシンタックスハイライトがおかしくなっていますが、暗くなっている部分も含め、すべて入力してください。

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs

holoplay.jsをダウンロードする

https://lookingglassfactory.com/devtools/three-js-library/からholoplay.jsをダウンロードします。(記事を書いた時点のバージョンは0.2.3でした。)

今回はJetsonNanoに直接holoplay.jsをダウンロードさせるため、以下のコマンドを実行していきます。この作業はプロジェクトフォルダ内で実行します。publicのフォルダを作成して、その中にholoplay.js, holoplay.min.js のファイルを保存します。下記コマンドは不要なファイルを省いたり、展開後はzipファイルを消去するようにしています。

mkdir public
curl -sLO https://s3.amazonaws.com/static-files.lookingglassfactory.com/ThreeJSLibrary/v0.2.3/HoloPlay.zip
unzip -j HoloPlay.zip -x __MACOSX/* HoloPlay/.DS_Store HoloPlay/package.json HoloPlay/HoloPlay_JS_License_5_28_19.pdf -d public
rm HoloPlay.zip

Three.jsをダウンロードする

下記コマンドからthree.min.jsをダウンロードします。バージョンはLookingGlassで指定されているr202.1をダウンロードします。holoplay.jsと同じくpublicフォルダ内に保存します。

curl -sLO https://raw.githubusercontent.com/mrdoob/three.js/r102/build/three.min.js
mv three.min.js public/

SSH FSの設定を行う

サイドバーメニューのExplorer(Ctrl+Shift+E)から、SSH FILE SYSTEM のタブを開きます。

開いたタブを右クリックするか、Ctrl+Shift+P で "ssh" で検索して、「Create a SSH FS configuration」のメニューを選択します。

【Create new configuration】という項目が出てくるので、【Name】には適当な名前を入力します。これは後程見出しとして表示されるので、わかりやすい名前にしておいてください。【Location】はこの設定を保存するファイルをどこに置くかを指定するもので、【Workspace setting.json】を指定します。もう一方の【Global setting.json】のほうは全ワークスペースで共通となるため、あまり使い勝手がよくないです。入力が終わったらSaveを押します。

続いて詳細の設定を行います。項目が多くて面食らうかもしれませんが、設定が必要なのはHost、Root、Username、Passwordだけで良いです。
【Host】は<コンピュータ名>.localを入力、【Root】にはプロジェクトフォルダを設定します(例: ~/git-root/lkg-sample)。"~/" はホームディレクトリ(/home/<ユーザー名>/)の省略記法です。【Username】はユーザー名、【Password】はログインパスワードを入力します。設定が終わったらSaveを押します。

保存が終わると、SSH FILE SYSTEMSのタブの下に項目が現れます。この項目を右クリックするかCtrl+Shfit+Pから "ssh" と入力して、「Connect as Workspace folder」を選択します。検索からの場合はさらに設定を選ぶので、設定した項目をクリックします。エラーが出た場合は、項目を右クリックして「Edit configuration」から設定を見直すか、先ほどと同様、一度Windowsを再起動してみてください。

うまく接続できると、Explorerに、リモートのプロジェクトフォルダが開かれます。ローカル側のフォルダ(lkg-demo)の中にsetting.jsonというファイルが作られていますが、これは先ほど設定したJetsonNanoへの接続設定が保存されているので、消さないようにしてください。以降、ターミナルの操作などでVSCode外で新規にファイルが作成された際、Explorerに追加したファイルが表示されないことがあります。その場合は赤枠で囲まれた「Reflesh Explorer」ボタンを押すことでファイル一覧を更新します。この操作はたびたび行います。

package.jsonを作成する

Node.jsで依存するライブラリなどを記述するpackage.jsonを作成します。
再度統合ターミナルから以下のコマンドを実行します。念の為、現在のディレクトリがプロジェクトフォルダ(git-root/lkg-sample)になっているかを確認してください。ターミナルの右側に~/git-root/lkg-sample$)と入っていれば大丈夫です。)

npm init

実行するとユーザーの入力を求めてくるため、以下のように適当に入力します。特に気にしなければ、エンターキー連打で大丈夫です。最後に Is this OK? (yes) と聞いてきます。これもエンターキーを押して進みます。

package name: (lkg-sample) <<ENTER押す>>
version: (1.0.0) <<ENTER押す>>
description: <ENTER押す>
entry point: (index.js) <<ENTER押す>>
test command: <<ENTER押す>>
git repository: <<ENTER押す>>
keywords: <<ENTER押す>>
author: <<ENTER押す>>
license: (ISC) <<ENTER押す>>
About to write to /home/***/git-root/lkg-sample/package.json:

{
  "name": "lkg-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes) <<ENTER押す>>

終わったらディレクトリにpackage.jsonが追加されているか以下のコマンドを押して確認します

ls

コマンド実行後、以下のようにファイルとフォルダ名が出ていれば大丈夫です。。(publicはholoplay.jsもろもろが入っているフォルダです。)

package.json  public

開発用のパッケージを追加する

依存するパッケージを追加します。ターミナルで以下のコマンドを実行します。

npm install -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env

続いてwebpackとbabelのコンフィグファイル(webpack.config.js, .babelrc)を用意します。今回は予め用意されたものを使用します。リポジトリはここにおいています。
https://gist.github.com/blkcatman/c702e741ed61ee3ef07c732d618c5b9b
https://gist.github.com/blkcatman/aa9ba8a3b0b0521b8b95e5db61d15275
Jetson側でcurlで直接rawファイルを以下のように保存します。

curl -sLO https://gist.githubusercontent.com/blkcatman/c702e741ed61ee3ef07c732d618c5b9b/raw/97ef252673349ea28d7420d20607859aa4f4183b/webpack.config.js
curl -sLO https://gist.githubusercontent.com/blkcatman/aa9ba8a3b0b0521b8b95e5db61d15275/raw/ea197b10926a4a4fce658b59d91e9132907817c1/.babelrc

index.htmlを作成する

テスト表示用のhtmlを用意します。リモートのファイルはExplorerから作成することができます。publicフォルダに入れたいので、publicフォルダを右クリックして、New Fileを選びます。

続けてファイル名を入力します。index.html とします。

index.htmlの中身を書きます。(noteだとハイライトが効かないのできついですね…)。保存し忘れがよくあるので、Ctrl+S(Macだと⌘+S)で保存してください。

<!DOCTYPE html>
<html>
<body>
  <script src="./three.min.js"></script>
  <script src="./holoplay.min.js"></script>
  <script src="./bundle.js"></script>
</body>
</html>

index.jsをプロジェクトフォルダ直下に作成します。やり方は先ほどと同様ですが、今度は SSH FS - <SSH FSで付けた名前> の箇所を右クリックして「New File」を選択します。index.js にします

下記のコードを入力します。以下のコードはthree.min.jsとholoplay.min.jsが正しく読み込めているかを確認するコードになります。こちらも忘れずに保存してください。

const div1 = document.createElement('div');
div1.innerText = 'TRHEE v' + THREE.AlphaFormat;
document.body.appendChild(div1);

const div2 = document.createElement('div');
div2.innerText = HoloPlay.name;
document.body.appendChild(div2);

これまで作成したファイルのディレクトリ構造を確認します。以下のようになっていれば大丈夫です。（node_modules以下はファイルが多いので省略しています）階層はプロジェクトフォルダ(~/git-root/lkg-sample)が基準になっています。

.
├── .babelrc
├── index.js
├── node_modules
├── package.json
├── package-lock.json
├── public
│   ├── holoplay.js
│   ├── holoplay.min.js
│   ├── index.html
│   └── three.min.js
└── webpack.config.js

package.jsonを書き換える

package.jsonの一部を書き換えます。下記の部分が書き換え対象です。書き換えたら保存します。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },

ここを以下のように書き換えます。これでローカルhttpサーバーを立てる準備ができました。

  "scripts": {
    "start": "webpack-dev-server",
  },

ローカルサーバーを建てる

ターミナルで以下のコマンドを実行します。

npm start

実行するとターミナル画面に以下のように表示されます。以下のように最後に"｢wdm｣: Compiled successfully." と出ていればこれまでの処理が成功しています。

Built at: 06/16/2019 4:32:51 PM
       Asset     Size  Chunks             Chunk Names
   bundle.js  345 KiB     app  [emitted]  app
bundle.js.map  395 KiB     app  [emitted]  app
Entrypoint app = bundle.js bundle.js.map
[./index.js] 229 bytes {app} [built]
   + 33 hidden modules
ℹ ｢wdm｣: Compiled successfully.

ターミナル側でプロセスが生きていますので、ローカルサーバーを終了したい場合はターミナル画面で Ctrl+C を押します。(これはMacでも同様です。)

サーバーの動作確認をする

JetsonNanoのデスクトップからChromiumを起動して、localhost:8000にアクセスします。TigerVNCを使うと開発が楽になるかもしれません。以下の記事が参考になるかと思います。

TigerVNCを使用していると、ターミナル画面上でx0vncserverのアプリが起動しっぱなしになるので、ターミナルの画面分割をするとやりやすくなるかもしません。画面分割ターミナルの右上にあるアイコンのうち、赤枠で囲まれた部分をクリックすると分割されます。右隣のゴミ箱マークをクリックすると、現在アクティブになっているターミナルの画面を消去します。

Chromiumからアドレス localhost:8000 を打ち込みます。うまくいけば次のような画面が表示されるはずです。うまくいかない場合はこれまでの内容を見直してみてください。

他コマンドなど

ターミナルからJetsonを再起動したいときは以下のように入力します。パスワード入力を求められますので、入力します。

sudo shutdown -r now

入力後は以下のようにログイン状態が途切れますので、再度接続したい場合はsshコマンドから接続してください。

Connection to blkcatman-desktop.local closed by remote host.
Connection to blkcatman-desktop.local closed.

電源を落としたいときはhaltモードにしてから、電源を落とします。(ACアダプタを抜きます)

sudo shutdown -h now

次回について

次回はLookingGlassを実際に扱えるようにコードを書いていきます。

この記事が気に入ったらサポートをしてみませんか？