Synology NASでNuxt.jsを動かすよ

シェアする:

この記事をおすすめしたい人

  • SynologyのNASでNuxt.jsを動かそうとしている人
  • SynologyのNASでWebサーバを構築しようとしている人
  • つまりオレ

今回はSynology社製のNAS上にウェブ開発環境を構築していく第三弾、Nuxt.js導入編です。

QNAPのNASに導入するときも、

めちゃくちゃ…

めちゃくちゃ…

めちゃくちゃ!!

詰まりましたが、今回も今回で、まぁそこそこね…。

という軌跡をお話ししながら、Synology NAS上でNuxt.jsを動かすとこまでやっていきます。

Node.jsのインストール

まずはパッケージセンターからNode.jsをインストールします。 Synology純正ではなく、サードパーティ製のパッケージです。 カテゴリは「開発ツール」。

バージョン8と12から選べます。

さて、どっちをインストールすべきか。

最終的にNuxt.jsが動かせるようになった状態で、もう一度8の方を試してみたんですが、動かせませんでした(とメモに残ってる)。

なので一応僕は12の方を推奨。 でも8の方で動かせないという確信があるわけでもないので、8希望の人は頑張ってみてください。

インストール後は特に設定は必要ありません。

SSHでNASに接続

SSHの有効化

初回のみ、SSHを有効にする作業が必要になります。

Synology NASにログインしてコントロールパネルを開きます。

右上にある「上級者モード」を選択し、「アプリケーション」グループに「端末とSNMP」が表示されている状態にし、「端末とSNMP」を開きます。

「ターミナル」タブ内の「SSHサービスを有効化する」にチェックを入れて「適用」を押します。

以上です。

Synologyの公式マニュアルを見ると、セキュリティ上、ポート番号は変えておいた方がいいようです。

SSHクライアントで接続

Windows PowerShellというのが使えるそうです。 僕はRLoginというのを使っています。

SSHクライアントソフトから以下の5つを入力してNASに接続します。

  • 接続方法→SSH
  • IPアドレス→192.168.0.10など
  • ポート→デフォルトは22、変更した場合は変更したポートを
  • ユーザ名→NASにログインするユーザ名
  • パスワード→上記ユーザのパスワード

ポートを変更した場合はポートも変更します。

ルート権限ユーザに変更

フォルダやファイルの新規作成するので、強い権限を持ったユーザに変更する必要があります。

公式マニュアルによると、以下のコマンドを実行。


ssh myadmin@192.168.0.10 -p 22

「myadmin」はルート権限のあるユーザ名、「192.168.0.10」はNASのIPアドレス、「22」はSSHのポート番号です。

その後、上記ユーザのパスワードを入力。

さらに「sudo -i」を実行して、再度パスワードの入力。

これでルート権限ユーザに変更されます。

SSHクライアントでユーザ指定している場合は「sudo -i」からでいいようです。

Node.jsのインストール状態の確認

パッケージセンターからNode.js v12をインストールした状態で、各コマンドのバージョンを確認すると次のような感じになりました。


# node -v
v12.20.1

# npm -v
6.14.10

# npx -v
-ash: npx: command not found

「npx」だけありません。

これはv8でも同様でした。


# node -v
v8.9.4

# npm -v
5.6.0

# npx -v
-ash: npx: command not found

で、ですね。

インストールされていないのかと調べたり、「npx」だけ自分でインストールしてみたりしたんですが、なんかうまくいかず。

パスが通っていないのかとパスを通す方法も考えましたが、以前、QNAPでパスの追加に失敗して大変なことになったので断念。

結局、「npx」を絶対パスで指定することでうまくいきました。 ファイル自体はちゃんとあったみたいです。


# /volume1/@appstore/Node.js_v12/usr/local/bin/npx -v
6.14.10

「volumue1」の部分はストレージマネージャで作成したボリュームの名前が入ります。 デフォルトのままだと「volumue1」。

「Node.js_v12」の部分はv8の場合は「Node.js_v8」になります。

「create-nuxt-app」のインストール

Nuxt.jsのプロジェクトを作る「create-nuxt-app」をインストールします。


npm i -g create-nuxt-app

これ、QNAPの時にやったんだったか、一度開発環境が整うといきなり「create-nuxt-app」しちゃうので全く覚えてませんでした。

考えてみれば必要ですよね。

「create-nuxt-app」をインストールしないと動かなかったです。

あとは次のようなコマンドを実行すると、「test」という名前のNuxt.jsプロジェクトが作られます。


/volume1/@appstore/Node.js_v12/usr/local/bin/npx create-nuxt-app test

この先のインストールオプションは、僕の記事でよければNuxt.jsのインストールオプションの記事を読んでください。

監視ファイル数の変更

この段階で「npm run dev」を起動すると、次のようなエラーが大量にでました。


Error: ENOSPC: System limit for number of file watchers reached

エラーメッセージでググるとこのサイトとか、Linuxのファイル監視の上限に達してますよーということだそうです。

試しに一番ファイル数の多そうな「node_modules」フォルダのファイル数を確認すると28,000越え。

監視数上限のデフォルトが「8192」らしいので全然足りていないですね。

以下、Honmushi blogさんを参考にメモ書き。

監視ファイル数の現在値の確認

監視ファイル数の現在値は次のコマンドで確認できました。


cat /proc/sys/fs/inotify/max_user_watches

「8192」と出力されました。

いくつに変更すればいいのか

上のブログでは例として「24288」を設定していましたが、開発環境が違うのでここは自分で設定しないといけません。 「node_modules」フォルダだけでこの値を超えているので既にアウトです。

で、いくつにすればいいかですが、以前のQNAP上での数値を持ってくることにしました。

値は「262144」。 26万ちょっとですね。 「node_modules」のファイル数の10倍近いので、十分に余裕があってよさそうな気がします。

QNAPの開発環境構築の際にあまりにトラブり過ぎたため、この値が当時調べて自分で設定したものなのか、QNAPでの初期値だったのかは不明です。 とにかく「以前、安定稼働していた数値」ということで採用します。

監視ファイル数の変更

監視ファイル数の値を変更するには次のコマンドらしい。


echo fs.inotify.max_user_watches=262144 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

「262144」の部分を変えたい値に変更。

コマンドの内訳は調べていないので、気になる人は各自で調べてください。

最後に、もう一度現在値の確認をして、「262144」に変更されていることを確認しました。


cat /proc/sys/fs/inotify/max_user_watches

MySQL(MariaDB)へのアクセス

WordPressの時と同じで、データベースへのアクセスはちょっと注意が必要でした。

DBへの接続部分

赤字の部分が書き換えが必要そうな部分です。


const mysql = require('mysql')

const connection = mysql.createPool({
   host  : 'localhost',
   port : 3306,
   user  : 'root',
   password: 'PASSWORD',
   database: DB_NAME,
   socketPath: '/run/mysqld/mysqld10.sock',
})

「port」はパッケージ「MariaDB」で設定したものに変更。
(「9999」でもいけるっぽい?)

「password」も同じく設定したものに変更。 MariaDBの5と10でパスワードの条件が変わったのか、10では「大文字小文字の混在」「記号」が必須になっていました。

「DB_NAME」は接続するデータベースの名前です。

「socketPath」はMariaDB 10を使う場合は必須です。 値は「/run/mysqld/mysqld10.sock」で固定(のはず)。 指定しないとMariaDB 5の方へ接続しようとします。

APIへのアクセス

axiosでAPIを叩く場合はちゃんと今回使っているNASのIPアドレスを指定。


const res = await axios.get('http://192.168.0.10:3000' + path)

新規でやる場合は問題ないと思いますが、僕は今回NAS乗換えだったのでIPアドレスが変わっていたのに気付かず、エラー箇所が不明でしばらく悩みました。

API叩く部分を共通関数化して1箇所にしか書いていなかったとは言え、やっぱりハードコードはダメですね。

まとめ

SynologyのNASでNuxt.jsを動かすにあたって、僕的に想定外だった部分をまとめます。

  • Node.jsはv12じゃないとダメかもしれない
  • npxは絶対パスで指定すべし
  • create-nuxt-appをインストールすべし
  • 監視ファイル数上限を上げるべし
  • DBへのアクセスはソケットを指定すべし

以上、WordPressからお届けしました!

Synology NASでウェブ開発の目次

シェアする: