nodebrewをインストール

いきなりNode.jsはインストールできないようなので、nodebrewとかいうのを先にインストールします。

nodebrewはNode.jsのバージョン管理をするツールだそうです。 今回はバージョン管理がしたいわけではありませんが、nodebrewからインストールできるそうなので問題ありません。

まずはnodebrewをダウンロード。

$ wget git.io/nodebrew

次にnodebrewをセットアップ。

$ perl nodebrew setup

このままではパスが通っていなくて実行できません。

$ nodebrew -v
-bash: nodebrew: コマンドが見つかりません

通すパスはセットアップ終了時に提示されていました。

Export a path to nodebrew:

export PATH=$HOME/ .nodebrew/ current/ bin:$PATH

(折り返しの都合/の後にスペースを入れています)

これを利用してこの↓ように。

$ echo 'export PATH=$HOME/ .nodebrew/ current/ bin:$PATH' >> ~/.bashrc
$ source ~/.bashrc

何をやっているのかさっぱり分かりませんが、パスを通す作業だそうです。 不安な人は自分でやり方を見つけてください。

$ nodebrew -v
nodebrew 1.0.1

はい、ちゃんとパスが通り、無事にnodebrewが実行できました。

Node.jsをインストール

nodebrewインストール時にどうも最新版のNode.jsは用意されているようで、「list」をつけるとそれ↓が確認できます。

$ nodebrew list
v14.4.0

current: none

v14.4.0が用意済みだけど、「current: none」から有効にはなってないよ、ってことなんでしょう。 試しにコマンド叩いてみましたがダメでした。

$ node -v
-bash: node: コマンドが見つかりません

というわけでv14.4.0をアクティブにします。 他のバージョンが良い場合はもしかすると先にダウンロード作業とか必要かもしれません。 僕はバージョンの違いなんかよく分かんないのでv14.4.0。

$ nodebrew use v14.4.0

無事にNode.jsが動きました↓。

$ node -v
v14.4.0

まずはディレクトリ構造を確認

SSH接続後、「ls」というコマンドを叩くとその階層に次のようなフォルダがあることが確認できました。

• Maildir
• nodebrew
• ore-shika.com
• ssl
• (サーバーID).xsrv.jp

いつもFTPでログインしているところですね。

「ore-shika.com」というのはこのブログのルートドメインです。

「ore-shika.com/dev/」にHTMLやPHPファイルを置けばこのサイトのアドレスでアクセスできるようになります。

ですが、Nuxt.jsはそういう形式で動いているわけではないようなので、「ore-shika.com/dev/」にインストールしても「https://dev.ore-shika.com/」からアクセスできるようにはなりません。

じゃーどこに…。 どこでもいいのか…。

どこにインストールしてもいいらしい

いつものアニキに教えてもらったっところ、権限的に許可されている場所ならどこでもいいそうです。

提示された例にならって、「nuxt」フォルダをまず作り、その中にルートドメインの「ore-shika.com」、サブドメインの「dev」と作りました。 視覚的にどのサイトのプロジェクトなのか分かりやすいようきっちり作りましたが、「/nuxt/nuxt-site1/」みたいなのでもよさそう。 「/nuxt/」の部分もなんでもよさそう。

今回は「/nuxt/ore-shika.com/dev/」。 サブドメインに作るケースは希だと思うので、サンプルとして「/nuxt/nuxt-test/」へインストールする例で紹介します。

最後の「nuxt-test」はNuxt.jsインストール時に作られるので、カレントディレクトリを「/nuxt/」へ移動してからインストール。

$ cd nuxt
$ npx create-nuxt-app nuxt-test

この先はWindowsやNASへインストールする時と同様です。 インストール時に聞かれる選択肢はインストールオプションの記事を見てください。

Successfully created project nuxt-test

  To get started:

        cd nuxt-test
        npm run dev

  To build & start for production:

        cd nuxt-test
        npm run build
        npm run start

無事にインストールできました。

.htacessを使う

エックスサーバーは3000番ポートが開いていない…。
nginxからnuxt.jsにアクセスを中継させる…。

謎な回答が帰ってきました。

ですがアニキは僕のお馬鹿っぷりをよく知っているので、

「/ore-shika.com/dev/の.htacessにリダイレクトを設定すればいいよ」

と教えてくれました。

指示通り以下のように設定します。

RewriteRule ^(.*)$ http://localhost:3000/$1 

すると…。

エックスサーバーでとうとうNuxt.jsが動きました。

どういう原理か無知なりに考えてみた

まずですね。

Listening: http://localhost:3000/

ここから分かる通り、僕が契約しているエックスサーバーのアカウント？内で、「http://localhost:3000/」というアドレスでNuxt.jsのデモ画面が起動しています。

これを前提に、まずは「https://dev.ore-shika.com/」へアクセスします。

するとそこに配置されていた「.htacess」が読み込まれます。

中には「ここにきたアクセスは全部http://localhost:3000/にリダイレクトしてね」と書いてあります。

Nuxt.jsが待機している「http://localhost:3000/」へリダイレクトされてきます。

Nuxt.jsのデモ画面が表示されます。

たぶんこんな感じなんでしょう。

SSH切ったら切断されない？

開発モードの「npm run dev」の時は接続を切るとページが表示されなくなっていました。

今は「npm run start」で起動していますが、同様だととても困ってしまいます。

「npm run stop」のようなコマンドはないようなので、Ctrl+Cキーで待機状態に戻します。
→ ページは見えています。

SSH接続を切断してみる。
→ ページは見えています。

ターミナルソフトの終了。
→ ページは見えています。

オッケーです。 「start」したら切断しても動き続けるようです。

ファイルを更新する場合はどうするのか？

切断してもページが見えているということはずっと実行され続けているわけじゃないですか？

ってことは、ファイルを更新して上書きする際にこういう↓感じのことが起きるんじゃないの？

実験しなくては話が進まないので、とりあえず上書きしてみます。 対象は「/pages/index.vue」。 トップページの中身ですね。

特にエラーは出ずに上書きできました。

ですがサイトの方が更新されていません。 startが参照してるファイルは別にあるってことか。

再度「build」して「start」すると更新内容が反映されました。

つまり、buildで表示用のファイルをビルドし、startでそれを表示開始、みたいな？

build→startのどの段階で更新されるのか

build中
→ 前バージョンが表示されている。

build終了後
→ 前バージョンが表示されている。

start
→ 新しいバージョンが表示されている。

ふむ。 つまり、startしない限りは前バージョンで表示されると。

開発用、buildしたもの、startで表示するものの3つがあるってことですかね。

「.nuxt/dist/」以下にそれっぽいファイルがあったからそれかな…。

foreverモジュールのインストール

まずはプロジェクトフォルダへ移動(cdコマンド)し、公式サイトの例に習い次のコマンドを叩くだけです。

$ npm install forever -g

foreverの実行

公式を参考に、foreverからNuxt.jsを実行してみます。

$ forever start "npm run start"

無事に動きました。

1日、2日経過とみてみましたが、しっかりと永続化されています。

ところが1週間後…

今度は停止させてみようとforeverを停止したところ、サイトが止まりません。 表示されたままです。

foreverはデフォルトでログを取っていたようでそちらを確認してみると、なんと700MBものログが！

内容を見てみるとこんな↓ログが大量に…。

Error: Address `localhost:3000` is already in use.  

どういうことなのかは分かりませんが、foreverでNuxt.jsの再起動？がかかって、でも最初のが動いたままなので新たにNuxt.jsを起動して…みたいなことを繰り返してたのかな。

Nuxt.jsのプロセスも多数立ち上がっていたので、サーバのプロセスを落とす方法を調べて無事に停止させることができました。

う～ん…。

設定が悪かったのか…。

それとも、やっぱできないのか？

初心者が勉強したVPS

何やらよく分かりませんが、調べた印象としては…。

まずレンタルサーバから。 これは1台のサーバを複数のアカウントでシェアする方式です。 サーバのOSやハードウェア、使えるプログラム、設定など、自由に選べない。

それに対して専用サーバ。 サーバのパソコンをまるまる1台レンタルします。 まるごとレンタルしてるので設定は自由自在。 ただしめちゃくちゃ高い。 エックスサーバーだと安い方のプランでも初期費用10万円、月額4万円くらい。

最後にVPS。 仮想的に専用サーバを作る仕組みらしいです。 1台のサーバに仮想化された複数のVPSがある感じ？ お値段はさくらの一番安いので月額585円。 レンタルサーバなら131円。 ちょっと高いです。

VPSだと管理者権限でいろいろ触れるので、Node.jsやらのプログラムを自由に入れられるんだそうです。

なぜエックスサーバーでNode.jsを動かせたのか

ごめん、わかんない。

SSHが使えるから？
実はこっそりVPS寄りのサービス？

理由は不明ですが、高いだけあって高機能だったのかな。

とりあえず動きました。

ホスティングサービスは何か？

レンタルサーバ＝ホスティングサービス、と考えていたのでちょっと違いが分からないです。

Nuxt.jsの記事を読んでいると「サーバーレス」なんて言葉を見かけるので、ホスティングサービスはレンタルサーバからサーバ機能を抜いたもの？

テキトーですが、Webサイトを公開できてなおかつPHPやPerlが動く仕組みを持っているのがレンタルサーバ、Webサイトを公開する機能しかないものがホスティング？

そんな印象を受けました。

きっと値段が安くて、Nuxt.jsで静的出力する場合にはPHPなんかが不要なのでホスティングサービスが人気？なのかな？