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

ここから、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でアクセスしてみましょう。

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

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

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