Nuxt.js/node.jsをVPSで動かす際によく使用する設定メモ

AWS,n,Nginx,node.js,Nuxt.js,pm2,VPS

要約

NuxtをSSRモードで利用している場合や、node.js(Expressなど)を使ってサーバ側処理を利用している場合、Vue.jsを使う感覚でJSファイルを一個上げて終わり!という訳にはいかない。

  • nodeを入れる
  • pm2でデーモン化する
  • Nginx(Apache)でリバースプロキシの設定

というような作業が必要になる。

主に仮説検証の段階や、開発中画面を手持ちのVPSで見せたい場合の話。

本番環境の運用の場合は、手元のdocker環境を多少改変してそのまま突っ込めるAWSのECS,Fargateあたりを使った方が簡単そう。Lambdaでもできるらしいがそちらはよくわからない。

nでnode.jsのバージョン管理

node.jsのバージョン管理はnvm,nodenv等いろいろあるが、最近はnでやることが多い。

npm install -g n

なんのひねりもなく上記でいれる。

$ n list
node/14.2.0
node/14.4.0

依存しているライブラリやパッケージの問題でバージョンを合わせないといけない場合以外、基本的にはn latestコマンドで最新版をいれる。

pm2でのデーモン化

デーモン化はforeverを使う方法もあるが、後発ということもありpm2の方が直感的に使いやすい。最近メンテがされていないとの話もあるので好みの問題とも言える。

npm install -g pm2
pm2 start npm -- start
pm2 status

こちらも特にひねりはない。

webサーバのリバースプロキシ設定

ありがたいことにNuxtの公式ドキュメントにも記載があり、port80(http)の利用の場合は丸々コピーしてもそのまま使える。

    //server記載を略
    location / {
        expires $expires;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # nuxt.config.jsで利用するポート番号を指定していると思うので確認
    }

443(https)の場合もほぼほぼ同じ記載で問題ないが、httpsのみを取り扱いたい場合は80(http)アクセスの場合にhttpsへリダイレクトをする処理を書く。

server {
    listen 80;
    server_name YOUR_DOMAIN; // ドメインは書き換えること
    return 301 https://$host$request_uri;
}

開発環境がdockerの場合はAWS ECS/Fargateを利用した方が楽そう

掲題の通り、資金的な余裕がある場合や、本番環境として使いたい場合は上記のような手順を踏まず開発に集中できるよう整備すべき。開発用のコンテナがそのまま動くクラウド環境を利用した方が楽。

ちなみに私は利用したことがないが、LambdaでもNuxtのSSRが動くらしい。サーバレスでサーバサイドレンダリングが動く??哲学的すぎてサーバレス関係わからん。実践する機会が欲しい。

実際にECSやFargateを利用する場合の手順は他の記事に譲る。

Qiita:Nuxt.jsでアプリ作成→Dockerfileを使ってイメージ作成→fargateでデプロイ→ドメイン設定・SSL化まで

トレンドのVuejs/NuxtをAws ECS, FargateでSSR、詳細解説します🚀

感想

なぜ今回VPSで動作環境を用意したのかというと、作成したプロダクトの検証用に簡単な環境が欲しいとの顧客要望を受けて。

クラウド環境だとどうしても費用が青天井だということを気にされる顧客に対し、事業コンセプトやニーズの検証用環境であるならば、例え帯域やデータ容量の制約があったとしても上限価格が決められている方が安心してもらえるかと思い採用した。

プロダクト自体はNuxt.js + Express + socket.ioの構成。websocketを利用したリアルタイムな双方向通信アプリケーションで、契約上の納品形式はソースだけでOKという条件だった。契約上はソースだけでOKとはいえ、エンジニアがいない企業では最低限のビジネス検証用に動く環境を用意するのも一苦労だと思うので善意で用意することにした。

新卒1年目、お金がない時期に"自分への投資は惜しむな"という格言を真に受けてヒーヒーいいながら個人勉強用さくらVPSを借りた記憶を頼りに、最低限のセキュリティ設定をした。

  • ユーザ作成
  • rootログイン禁止
  • パスワードログイン禁止
  • 鍵認証設定
  • firewalld設定
  • VPS管理画面でのポート開放設定
  • sshポート変更

やはり当時の「踏み台にされたり何かやっちゃって訴えられたらヤバイ」という危機感は金銭的な困窮から相当強かったようで、当時参考にしたサイトも設定した項目の記憶も割と鮮明で助かった。世の中で言われているように、"自分ごと意識"というのはなかなか重要なものなのかもしれない。