SynologyNASでVue.jsを動かしてみた。外部からアクセスできるところまで。

SynologyNASでVue.jsを動かしてみた。外部からアクセスできるところまで。 NAS

前回、サーバ公開して、外部からDDNSでアクセスできるところまで行いました。

SynologyNASの仮想マシンで外部に公開するサーバを構築した。
SynologyNASを使用して外部に公開するサーバを構築します。 早速ですが、注意点です。 本記事はDSMのパッケージを使用してサーバを構築し、 FWやDoS対策など設定で、ある程度のセキュリティは担保できているかと思いますが、...

今回は、Node.jsを使いVueを動かそうかと思います。
バックエンドはPHPで、フロントエンドはVue.jsを使いたく。

所々で詰まったので、備忘録として記します。

前提

既に外部からのアクセスできる環境があるのが前提です。

SynologyNASの仮想マシンで外部に公開するサーバを構築した。
SynologyNASを使用して外部に公開するサーバを構築します。 早速ですが、注意点です。 本記事はDSMのパッケージを使用してサーバを構築し、 FWやDoS対策など設定で、ある程度のセキュリティは担保できているかと思いますが、...

Synologyのホストでも可能ですが、
なるべくOSを壊したりセキュリティホールを作ってしまったりと
失敗しないように私は、virtual machine上に、DSMの仮想ホストを生成し
その中で設定をしています。

仮想環境でDSMを使っている理由は、楽で安心だからです。
Docker等でもっと楽にできるとは思いますが、設定漏れ等が怖く、
また、バージョン管理など面倒です。DSMのアップデートはWeb画面で
ポチポチで済みます。また、セキュリティの設定もポチポチです。

※ここからの設定は全て仮想ホスト側の設定です。

Node.jsをインストール

まず、パッケージセンターからNode.jsをインスールしましょう。

バージョンは、自分の環境に合うものを選択しましょう。
nodejs

私は、v16をインストールします。
インストールが完了した後の設定は特にありません。

注意点ですが、複数バージョンのNode.jsをインストールしている場合は
注意が必要です。環境変数のパスがどのバージョンに当たっているか、
きちんと把握しましょう。バージョンによっては、vueがインストールできないことも。

SSHを有効にする。

Web画面からコントロールパネルを開き、「端末とSNMP」をクリックします。

SynologyNAS

「SSHサービスを有効化する」にチェック
②ポート番号を変更する。

※ポート番号は変更しなくても実装可能ですが、
セキュリティ対策として変更が推奨されます。

SSHで仮想ホストに接続

sshで仮想ホストに接続しましょう。

ssh 接続するユーザ名@仮想ホストのIPアドレス -p ポート番号

使用するシェルにもよりますが、bashだと上記の記述になります。

Node.jsの確認

sshで接続した後、Node.jsのバージョンを確認しましょう。
正しくインストールされているか、バージョンを確認します。

node -v

と入力をして正しくバージョンが表示されれば成功です。

もし、権限不足であれば、root権限に変更します。
下記のコマンドを打てば昇格できます。

sudo su

このあとパスワードを求められます。
現ユーザがAdministratorグループに属していれば、同様のパスワードを入力します。

npmの確認

Nodeのパッケージ管理システムであるnpmを確認します。

npm -v

npmもローカルかグローバルか悩むところですが。

vueのインストール

Vueをインストールをします。
私はグローバルの方にインストールしました。

npm install -g @vue/cli

プロジェクトを作成

では、プロジェクトを作成するディレクトリを作成します。
私は、webstationで使用されるwebフォルダ内に作成しました。

例えば下のようにfrontフォルダ配下に作成していきます。

/volume1/web/project/front
例えば、 /volume1/web/project を公開する場合注意が必要です。
front内に作成した環境もパスを辿れば見えてしまいます。
そのため、WebStationで生成されるweb配下に作成は
ナンセンスかもしれません。

ここから、vueの準備をしていきます。
既にroot権限になっているかと思いますが、
していなければ、sudo suにて昇格しましょう。

create vue app

もし、インストールが失敗する場合は、
npmやnodeのバージョン、パスの確認をしましょう。

サーバを建てる

vueアプリが作成できたら、アプリに入りサーバを起動させます。
まず、作成したappに入ります。

cd ./app

続いて、サーバを起動させます。
恐らく、下記を実行すれば起動できますが、コマンドが違う場合は、
package.jsonのscripts欄を確認します。

npm run serve

実行に成功すれば下のように表示されます。

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: unavailable

Network:unavailableに違和感を感じましたがこれで正常でした。

試しに、ローカルIP:8080でアクセスしてみましょう。

vue画面

問題なく表示されました。
続いて外部からアクセスできるよう設定していきます。

外部からアクセスできるように設定

80/443で公開。としたいところですが、それはできませんでした。
Synologyが予約済みというか使っているからです。

WebStationのデフォルトサーバが80/443ポートを使用しており、
WebStationを停止/アンストすれば開放されるのでは?と考え実行してみましたが、
ムリでした。

ということでリバースプロキシをいじらなければなりません。
(せっかくGUIで色々できるし、リバプロも簡単に設定できればいいのにって思いますし、
とにかく環境を汚したくない)
…色々葛藤がありつつ実装しますた。

▼nginxの設定ファイル

/etc/nginx/nginx.conf

▼ルート設定ファイルにincludeする子ファイルのフォルダ

/etc/nginx/conf.d/

nginx.confにリバプロの記述をするわけですが、
既にWebStationや管理画面用の記述がしてありました。
ルート設定ファイルにincludeとしてそれぞれでconf.d配下の設定ファイルがある感じでした。
それに従ってconf.d配下に設定ファイルを記述します。

設定ファイルを作成

ファイルを作成・編集します。

vi node.service.conf
location / {
  proxy_ignore_headers    X-Accel-Redirect;
  proxy_read_timeout      3600s;
  proxy_set_header        X-Forwarded-By  $server_addr;
  proxy_set_header        X-Real-IP       $remote_addr;
  proxy_set_header        X-HTTPS         $https;
  proxy_set_header        X-Port          $server_port;
  proxy_set_header        X-Real-Port     $remote_port;
  proxy_set_header        Host            $http_host;
  proxy_set_header        Upgrade         $http_upgrade;
  proxy_http_version       1.1;
  proxy_intercept_errors  off;

  error_page 502 /_webstation_/$status.html;
  proxy_pass  http://127.0.0.1:8080/;
  proxy_redirect default;
 }

webstationでnodeを動かしたいぐらい設定を揃えたいので
内容としてはほぼ、WebStation用の設定ファイルに合わせています。

nginx.confを編集

nginx.confに記述をしていきます。
今回は80番ポートのみに追記します。

下記のような記述が既にあるかもしれません。
この上にserver{}を作成します。

server {
   listen 80 default_server;
   listen [::]:80 default_server;
     ...........

▼追加する内容

server {
    listen  80;
    server_name  ホスト名;
    include conf.d/node.service.conf;
}

編集が終わったら、
保存をして、nginxのサービスを再起動します。

nginx -s reload
80番ポートの中に記述するのではなく、
その上に追記する理由は、
WebStationの記述が優先されてしまうからです。locationの書き方によって優先順位が異なります。
nginx locationの評価順序
例えば、location / {…}とするならば、
location /aaa/ {…} やlocation = / {…}より優先順位が
下がってしまうというわけです。
WebStationは、基本sockファイルを扱ってるので
知識もない私は太刀打ちできません。もっとよい記述方法があると思います。
ぜひ、ご教授お願いします。

上記の理由から、nginx -s reloadをすると、警告がでます。
重複してると。
ただし、server内でserver_name(ホスト名)を指定しているることから、
こちらが優先されます。
(webstationの記述消してもいいのでは….?)ホスト名は外部からのアクセスする予定の名前にします。

サーバを起動

最後にサーバを起動します。
プロジェクトを作成したフォルダに移動します。

そこで、

nohup npm run serve &

とサーバを起動させます。

これは、npm run serveと入力してしまうと、
SSHで接続を切ると同時にサーバも停止してしまうからです。

そのためnohupコマンドでサーバを起動させてあげることで
常駐することができます。

これで、SSHを切り、
Wi-Fiをオフり、外部からアクセスします。

下の画像のような画面になれば成功です。

synologyでvue

反省と注意点

nginxのリバプロは少し強引なやり方になりました。
もう少し理解を深めて正しいと思える記述に改修したいなと。

また、注意点もあります。
DSMのセキュリティ等のアップデートで、
nginx周りの設定が吹き飛ぶ恐れがあります。

具体的にnginx.confが上書きされ、
追記した部分がなくなるかもしれません。
あまり設定ファイルに追記はしたくないものです。。

 

以上、ありがとうございました。

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました