この記事をおすすめしたい人
- 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でウェブ開発の目次
- 第1回 Web Station導入編
- 第2回 WordPress導入編
- 第3回 Nuxt.js導入編(このページ)