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

前回、サーバ公開して、外部から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をコピーしました