この記事をおすすめしたい人
- WordPress以外何も知らないのにNuxt.jsを始めたい人
- Telnet?SSH?なのにNAS上にNuxt.jsの開発環境を構築したいと思ってる狂人
- つまりオレ
前回、とりあえずWindowsにNuxt.jsのインストールしてみた話をしました。
今回はNAS上に開発環境を構築するお話です。 もう気が狂うほど詰まりました。
Dメールがあるならあの時のオレに言いたい。
オマエニハ無理
アキラメロ
身ノ程ヲ知レ
というわけで今回は、何も知識がないままNAS(QNAP)上にNuxt.jsの開発環境を構築しようとして、もがき苦しみまくったお話をしたいと思います。
WordPressの上でな!
※ このブログはWordPress製です
前情報としてオレのNASへの理解度
一般的にNASってどういう位置づけなんでしょうか。
僕は「なんかすごい人が使ってる外付けハードディスク」みたいなイメージだったのが、「メディアサーバとして有用だよ」と言われて安いの買ってみたら便利すぎて、メディアサーバ、ファイルサーバ、Webサーバとして利用してる状態です。
知らない人からしたら「君、すごいな!」と思ってくれるかもしれませんが、全然そんなことありません。 あなたも買えばその日にできます。
たぶんこれはNASの表面をなでているだけで、全く使いこなせていないと思います。 NASマイスターがもし見てたら「俺にもそんな時代あったよw」と優しく笑ってもらえることでしょう。
まぁそんなナンチャッテNAS使いの僕が、なんでNuxt.jsをNASにインストールしようと思ったかというと、
- なんとなくメインPCとは分けておきたかった
- 他のWebプロジェクトは全部NAS上でやっていた
くらいのしょーもない理由です。
無知すぎてこれが効率的なのかどうかもわかんねー。
ちょこちょこ調べた感じだとNAS上でも出来そうだったので、やってみることにします。
オレの使っているNAS
QNAPのTS-453Beという機種です。
なぜこれを使っているかはおいおいお話する機会があるかもしれません。
用途はメディアサーバ、ファイルサーバ、Webサーバです。 WordPressの開発環境は割と簡単に構築できます。
WordPressが簡単だったせいで今回も同じように考えてドツボにはまりました。
まずはQNAP上にNode.jsをインストール
ワタシ、前回の記事で学びました。
Nuxt.jsを動かすにはまずNode.jsをインストールしないといけないんです。
というわけでNASにNode.jsをインストールするところから始めていきます。
QNAPへNode.jsをインストール
QNAPは…って他のNAS知らないんですが、スマホと同じくアプリのような感じでインストールしていけます。
App Centerを開き、「Node」と検索するとこの↓ように3つのバージョンが出てきます。
(QNAP TS-453Be、QTS4.4.2)
先日、Windowsにインストールしたバージョンは12だったので、ちょっと古めですね。
なので一番新しいv8をインストールしました。
さっそくコマンドプロンプトでインストールの確認を…と思ったんですが、コマンドプロンプトってWindows上のコマンドを動かすやつですよね?
NAS上でコマンド走らせるのはどうするんだ…?
QNAPへSSH接続
QNAPはサーバ(実はこれもよく分かっていない)として稼動しているので、SSHとかいうので接続するそうです(さらに分かっていない)。
「SSHはサーバへ接続するコマンドプロンプト」ととりあえず理解しました。
SSH接続できるフリーソフトを探していたらRLoginというのがいいよと書いてあったのでこれを使ってみることにします。
[/home] # node -v
-sh: /usr/local/bin/node: Permission denied
バージョン情報を表示しようとしたら弾かれました。 権限がないもよう。
「chmod」というコマンドで権限付与できるらしいのでやってみます。
[/home] # chmod +x node
chmod: node: No such file or directory
そんなファイルありませんよ、と。 フルパスじゃないとダメなんでしょう。
[/home] # chmod +x /usr/local/bin/node
特に何も表示されずに次のコマンドの待機状態になりました。 オッケーってことかな?
[/home] # node -v
v8.9.4
ちゃんとバージョンが表示されました。 オッケーのようです。
npmも同様に権限与えないといけないみたいで、同じ流れでバージョン情報を確認しようとすると…。
[/home] # npm -v
-sh: /usr/local/bin/npm: Permission denied
[/home] # chmod +x /usr/local/bin/npm
[/home] # npm -v
Error: Cannot find module '../lib/utils/unsupported.js'
エラーが出てしまいました。
npxに至ってはそもそもそんな物ないよと言われます。
[/home] # npx -v
-sh: npx: command not found
困りました。
エラー出ながらでも動けばいい(よくない)ですが、Nuxt.jsをインストールするのはnpxです。 エラー以前の問題。
QNAPへNode.jsをインストール(再び)
上の状態からドハマリしました。
エラーメッセージの内容で検索して「npmが破損してんじゃないか」という情報を見つけ、
インストールしたとこなのに破損ってどういうことやねん!!
となりながらも手動やらコマンドやらで再インストールしてみたり。
モジュールがないって言ってるんだからその場所にモジュールを配置しようと、慣れないコマンド操作でNASの中をうろちょろしまくったり。
(Linuxのディレクトリ構造とか全然知らないため)
App Centerにあったv8がダメなのかと、v6とv4も試してみたり。
結局全部ダメでした。
ネットで見てる感じだとできてる人もいるみたいなので、なんか僕のやり方が間違ってんでしょう。
ですがその間違いを特定する能力が僕にないのと、この状態のまま数日経過するほど詰まってしまっていたのでアプローチを変えます。
非公式アプリとしてNode.jsをインストール
QNAP公式のQNAP Storeにあるものではなく、非公式?のアプリとしてNode.jsをインストールすることにしました。
やり方が2つ3つあったようで、最初に試したのは「Container Station」。 これはDocker?とかなんかそういう機能らしくて丸一日トライしましたが、全く先へ進めず断念。
次に、QNAP CLUBのリポジトリ(分からない)を追加するという方法。 QNAP CLUBというサイトが集めた非公式アプリの一覧を追加して、そこからインストールできるようにする方法なんでしょう。 操作も楽で、割と簡単に成功しました。
非公式と聞くとちょっと怖いですが、QNAP CLUBは以前から名前をよく見かけていたので信用することにします。
QNAPへ非公式のリポジトリを追加する方法
QNAPの管理画面にて、「App Center」を開きます。
右上の歯車アイコン(設定)を開きます。
「一般」タブ内の「正しいデジタル署名なしでのアプリケーションを許可する」にチェックを入れます。
(非公式アプリ使用のリスクへの同意だと思われ)
「アプリリポジトリ」タブ内の「追加」ボタンを押します。
「名前」はテキトー(「QNAP CLUB」にしました)。
「URL」は「https:// www.qnapclub.eu/ en/ repo.xml」。
(折り返しの都合、スペースが入っているのでコピペする場合は消してください)
「ログイン詳細」は設定不要です。
最後に「追加」ボタンを押します。
追加後、App Center左側に「QNAP Store」などと並んで「QNAP CLUB」が追加されます。
(先ほど設定した「名前」がここに表示されます)
「QNAP CLUB」から「Node」と検索すると「NodeJS 14.1.0」がインストールできます。
(出てこない場合は右上の更新ボタンを押すと出てくるかもしれません)
コマンドを叩いてみると…。
[/home] # node -v
v14.1.0
[/home] # npm -v
6.14.5
[/home] # npx -v
6.14.5
無事にバージョン情報を確認できました。
今のところ僕の環境では問題は起きていませんが、
非公式アプリのインストールは自己責任で!
また、機種によってはリポジトリを追加してもNode.jsが表示されないケースを確認しました。
該当した場合は別の手段を探さないといけないんだと思います。
(がんばって!)
QNAP上にNuxt.jsをインストール
Windows編と同様に、Nuxt.jsをインストールします。
$ npx create-nuxt-app nuxt-test
上記コマンドはプロジェクト名が「nuxt-test」の場合です。 好きな名前に変えてください。
このまますんなり行って欲しかったんですが…。
またもやエラーが!
ここから先の経過をメモり忘れているのでちょっと曖昧ですが、最終的に「User identifier does not exist: nobody」という問題さえクリアすればよさそうな状況になりました。
「nobody」ってユーザがいませんよ、ってことなのでnobodyさんを追加します。
コマンドで追加する場合はこの↓ように。
adduser -D -H nobody
「adduser」がユーザ追加のコマンドで、「-D」はパスワード不要のオプション?「-H」はユーザ用のディレクトリを作らないオプション?
みたいな感じでした。
試していませんがQNAPのコントロールパネルから追加でもいいならGUIあるので操作が楽ですね。
無事にNAS上にも開発環境を構築できたので、次回からはようやくNuxt.js自体のお話になります。
その他、試したこと
後半の流れをメモり忘れていたので、解決するために得た知識とか、試したことを書きます。
追加したリポジトリにNode.jsが表示されない…?
これは今回の作業中に発生したことではなく、追試用に前に使っていたTS-431P2にインストールしようとした際に発生しました。
機種依存というかCPU依存?
QNAP CLUBのリポジトリを追加しても、Node.jsが表示されません。
手動で「Dev tools」内を確認してもありません。
リポジトリ追加の際に使用したXMLファイルの中身を見てみると
<item>
<name>NodeJS</ name>
<internalName>NodeJS</ internalName>
<changeLog>https:/ / www.qnapclub.eu/ en/ qpkg/ releasenotes/ 234</ changeLog>
<category>QnapClub</ category>
<type>Dev tools</ type>
<icon80>https:/ / cdn.qnapclub.eu/ storage/ qpkg_artifacts/ NodeJS_4.2.4_x86_64/ qpkg_icon_80.gif</ icon80>
<description><![CDATA[NodeJS]]></ description>
<fwVersion>4.2.1</ fwVersion>
<version>14.1.0</ version>
<platform>
<platformID>TS-X41</ platformID>
<location>https:/ / www.qnapclub.eu/ en/ qpkg/ model/ download/ 469977/ NodeJS_14.1.0_arm-x41.qpkg</ location>
</ platform>
<platform>
<platformID>TS-X31</ platformID>
<location>https:/ / www.qnapclub.eu/ en/ qpkg/ model/ download/ 469978/ NodeJS_14.1.0_arm-x31.qpkg</ location>
</ platform>
<platform>
<platformID>TS-X32U</ platformID>
<location>https:/ / www.qnapclub.eu/ en/ qpkg/ model/ download/ 469980/ NodeJS_14.1.0_arm_64.qpkg</ location>
</ platform>
<publishedDate>2020/ 05/ 01</ publishedDate>
<maintainer><![CDATA[Guerithault Stephane (QoolBox)]]></ maintainer>
<developer><![CDATA[Guerithault Stephane (QoolBox)]]></ developer>
<forumLink><![CDATA[]]></ forumLink>
<icon100></ icon100>
<language><![CDATA[English]]></ language>
<snapshot></ snapshot>
<bannerImg></ bannerImg>
<changeLog></ changeLog>
<tutorialLink><![CDATA[]]></ tutorialLink>
</item>
※ ↑は折り返しの都合、スラッシュの後にスペースを入れています
「platformID」とかで「互換性なし」と判断されて非表示になっているんでしょうか。
幸い、「TS-X31」という該当しそうなものがあるので、上記URLから直接ダウンロードして手動でインストールしてみます。
(App Center右上の「手動でインストール」から)
[App Center] Failed to install NodeJS14.1.0. The installation package is incompatible. Use the compatible package.
え、あかんの!?
互換性なしと怒られてしまいました。
ですが、これで互換性がない場合は蹴ってもらえることが分かったので、残りのパッケージもインストールトライしてみます。
すると「TS-X41」向けのパッケージがインストール通りました。 「TS-X32U」は同じく互換性なんたらでインストール不可。
しかしいざ実行してみると、この↓ように。
[~] # node -v
node: error while loading shared libraries: libatomic.so.1: cannot open shared object file: No such file or directory
共有ライブラリのlibatomic.soが見つからないって言ってるんですかね。
libatomic.soをインストールすればいけるのかもしれませんが、この先は諦めました。
共有ライブラリは置いておいて、これがどういうことかというとですね…。
リポジトリ追加の方法ではNode.jsをインストールできない機種がある!
ってことなんです。
(TS-431P2はできなかった)
その場合は、Container Station使う方法やEntware使う方法もあるみたいなんで、調べてみてください。
sudoコマンドが強い
スーパーユーザーという権限でコマンドを実行できるようになるみたいです。
使い方は簡単。 実行したいコマンドの前に「sudo」とつけるだけです。
$ sudo npx create-nuxt-app nuxt-test
Nuxt.jsのインストールの場合だとこんな↑感じ。
権限の問題?でエラーが出ている場合はおそらくこれで解決できるんでしょう。 割とうまくいくケースがありました。
ただし!
たぶんこれって、どこかに間違いがあるのに、スーパーユーザーという強権で無理矢理実行してるだけだと思うんですよね。
内容を理解せずに濫用するのはハイリスクなのではないかと思います。
でも無理矢理いける場合があるので強いです。
とにかくエラーメッセージでググれ
エラーメッセージをそのままコピーしてGoogle検索。
地道ながら最強です。
同じことで困っている人のログが出てきます。
(残念ながら英語が多いです…)
めんどくさいですが一番手堅い方法だと思います。
まとめ
今回のやり方はQNAPの中でもさらに機種依存があったので、QNAPでNuxt.jsの開発しようとしている全ての初心者への回答とはなりませんでしたが、機種の条件付きでいいなら…。
- まずはNode.jsをインストール!
- Node.jsはQNAP Storeのものではなく、QNAP CLUBのリポジトリから!
- コマンド入力はSSH接続するツールから!
- 不明なエラーに遭遇したらとにかくエラーメッセージでググれ!
- 最終手段sudoのご利用は慎重に!
他の機種でも基本的な方針は変わらないと思います。
ただ、NASへのNode.jsのインストールは下手すると機種固有の難しさがあるかもしれないので、めちゃくちゃ手間取るかもしれません。
僕はどうにかうまくいったので、あとは頑張って!
以上、WordPressからお届けしました!
Nuxt.js 開発環境構築編の目次