見出し画像

Nuxt.jsアプリをSSRモードでさくらVPS(CentOS7)にデプロイする手順メモ

さくらvpsにCentOS7をインストール完了
→ 一般ユーザー作成
→ rootユーザーでのアクセス禁止
まで完了した後の手順メモです。

・環境
Local : MacOS 10.14.6
Server: CentOS Linux release 7.7.1908 (Core) (さくらVPS)

1. ローカルから`git push` でデプロイできるように設定

ローカルで開発しているnuxt プロジェクトのディレクトリから、 git push するだけで、最新のプロジェクトファイルをvpsサーバー上にコピーして、デプロイできるように設定します。

長くなるので、大まかな手順だけ記述します。

1. vpsで `git init --bare` してリポジトリ作成
2. ローカルで `git remote add [vpsのリポジトリ]`
3. ローカルのリポジトリを `git commit & git push`
4. vpsの公開ディレクトリで `git clone [vpsのリポジトリ]`
5. vpsのリポジトリhooksを編集して、3→4を自動化

詳細手順はこちらの記事を参考に。
→ gitを使ったデプロイ方法 

2. nodebrew & nodejs をvpsにインストール

nodebrew をインストール
(node.jsのバージョン切り替えを容易にするため)

curl -L git.io/nodebrew | perl - setup
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile​
source ~/.bash_profile​

nodebrewを使ってNode.js をインストール
& インストールしたバージョンのNode.jsを使用するよう設定
(バージョンはstable(安定版)を使用しておけば問題ないはず)

nodebrew install-binary stable
nodebrew use stable

`node -v` を実行して、
`v12.13.1` のようにバージョンが表示されればインストール完了です。

3. vpsでNuxtプロジェクトを build & start

1. でvps上にcloneしたNuxtプロジェクトのディレクトリに移動して、
 `npm run build` を実行。

完了したら、
`npm run start` でサーバーを起動します。

画像1

上記画像のような表示が出たらサーバー起動は成功しています。

vps上で `curl http://localhost:3000/` を実行すると、
ターミナル上でhtmlソースが確認できます。

4. ホストを変更

しかし、これだけでは外部からアクセスができません🤔
外部からアクセスできるようにするには、Nuxt.jsのホスト設定を変更する必要があります。(ここでだいぶハマりました…)

デフォルトでは、Nuxt の開発サーバーのホストは localhost(ホストマシン内からのみアクセスが可能)です。
ホストの 0.0.0.0 は、ホストマシンの 外部 の接続(例えば LAN)にアクセス可能なホストアドレスを解決するよう Nuxt に伝えるためにデザインされています。
出典: ホストとポート番号を変更するには? - NuxtJS

package.json の scripts > start の引数に
`--hostname 0.0.0.0` を以下のように追記して、
`npm run start` で 0.0.0.0 で listen するように設定。

  "scripts": {
    ...
   "start": "nuxt start --hostname 0.0.0.0",
    ...
 },

画像2

Listenning on: http://***.***.***.**:3000/ 
のように表示されたら、
そのURLでNuxtのアプリページにアクセスできます。

5. ポート開放

まだ外部からはアクセスできません😅
centOSのポート開放が必要です。

firewall-cmd --zone=public --add-port=3000/tcp --permanent
firewall-cmd --reload

`firewall-cmd --list-ports`
を実行して
`3000/tcp`
と 表示されていればポート開放成功してます。

`netstat -tanp | grep LISTEN`
を実行して、
`tcp 0 0 0.0.0.0:3000 0.0.0.0:* LISTEN 3021/node
と 表示が出ていれば、外部からアクセスできる設定になっているはずです。

ちなみに、centOS6 ではポート開放設定は`iptables`でやっていたようですが、centOS7では`firewall-cmd`(firewalld)に変更されています。
ググる時には混同しないように注意です。

6. さくらvpsのパケットフィルタを設定

ここまでできれば外部からブラウザでNuxtアプリページにアクセスできるはずですが、、さくらvpsの場合まだ罠があります😇

サーバー管理パネルの「パケットフィルタ」です。

スクリーンショット 2019-12-04 19.03.18

このパケットフィルタ設定を「利用しない」にするか、
「カスタム接続許可ポート設定」で 「TCP 3000」を指定しないと、
外部からアクセスはできません。

参考: さくらのVPSにおけるポート開放の落とし穴

ここまでできれば、`npm run start` を実行していれば、
IPアドレスや指定したドメインをブラウザに入力すれば、
外部からアクセス可能になります!

7. Nuxt.jsをバックグラウンドで実行

npm run start だけで Nuxt.jsを実行していると、vpsからログアウトするとサーバーは停止してしまいます。

ログアウトした後もバックグラウンドでnode.jsサーバーを起動し続けるには、npm run start ではなく、

nohup  npm run start &

のように
 `nohup [コマンド] & `
で、バックグラウンドで実行します。

終了するときには、
`ps x` でプロセスID(PID)を確認して…

PID TTY      STAT   TIME COMMAND
2642 ttyS0    Ss+    0:00 -bash
3010 ?        Sl     0:00 npm
3021 ?        Sl     0:02 node /var/www/html/hogeproject/node_modules/....
5014 ?        S      0:00 sshd: user1@pts/0
5015 pts/0    Ss     0:00 -bash
6008 pts/0    R+     0:00 ps x

この場合なら `kill 3021` でnode プロセスを終了します。

参考:リモートサーバで接続切れたあともコマンド実行を続ける

——————————————————

フロントエンジニアとして、ローカルでVueやNuxtを動かすことならいつもやってましたが、本番環境デプロイの経験は少なく、さくらvps+Nuxt.js(SSR)の情報も少なくて、だいぶ苦戦しました…
誰かの参考になれば幸いです。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

10
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。