LoginSignup
13
15

More than 1 year has passed since last update.

【node】Xserverでnodeを使ってサーバーを建ててみる

Posted at

初書:2021/06/28
mac : 11.4
nodebrew : v16.4.0

前書き

最近nodejsを使うことが多いので、せっかく借りてるXserverでもnodejsで動かしたいなと思ったのでメモ。
ちなみに公式でサポートしてないので、参考にするときは自己責任でお願いします。

前提

・ローカルでhttpを用いてサーバーを立てる・アクセス出来る知識がある
・Xserverの基礎知識はある
・htaccessで基礎知識がある/調べたら理解できる

Xserverのセットアップ

Xserverは標準でnodejsには対応していないため、いくつか設定する必要がある。

ssh接続

まずはssh接続する準備。キーの作成方法は過去に一度やったため、割愛。作成したことない場合は以下を参照

【git】ターミナルでgithubと連携する - Qiita

キーが作成できたら、Xserverのサーバーパネルへ行き、SSH設定のところの「公開鍵登録・更新」に、.pubの中身をペーストする。

あとは、この先接続しやすいように、configに設定する。

~/.ssh/config(なければ作成)を開き、以下を追記する

Host xserver
  HostName <サーバーID>.xsrv.jp
  Port 10022
  IdentityFile ~/.ssh/<プライベートキーのファイル名>
  User <サーバーID>

これで、% ssh xserverとコマンドを打つだけで接続できるようになる。

nodebrewをインストールする

Xserverにnodebrewをインストールすることができるので、インストールしてみる。

hokaccha/nodebrew: Node.js version manager

まずは、$ curl -L git.io/nodebrew | perl - setupでインストールし、
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrcでパスを通す。
・・・のだが、~/.bashrcファイルの最後に改行が入っていない可能性があるので、その場合は改行を入れてからパスを通す。
それができれば$ source ~/.bashrcでパスを読み直す。

次に、バージョンを上げるため、$ nodebrew install stableで安定板をインストールし、
$ nodebrew listで現在インストールされているバージョンを確認
$ nodebrew use vXX.X.X(Xは先ほど確認したバージョン)で先ほどインストールしたバージョンを使用する。

その後、$ node -v$ npm -vを実行し、バージョン情報が表示できればインストールは完了。
これで、nodeを使う準備が完了した。

プロジェクトをサーバーに入れる

セットアップが終わったので次はローカルで作成したプロジェクト(package.jsonとか色々)をサーバーにアップロードする。
アップロード自体はFTPなど好きな方法で良いのだが、今回はgithub経由でアップロードしてみる。

まずはgithubでプライベートリポジトリを作成し、プロジェクトをpushする。
それが出来れば、あとはsshの方でcloneするだけ。

なお、public_html下に置いてしまうと、urlの直リンクができてしまうため、それ以外のところにおく必要がある。

プライベートリポジトリはcloneする際にユーザー名とパスワードを求められる。
その際、githubに二段階認証を入れているとログインに失敗するので、トークンを生成する必要がある。

トークンの作成

SettingsDeveloper settingsPersonal access tokens から、Generate new tokenを選択

Noteは好きな名前、Select scopesは今回pullするだけなので、repoだけでいい。
それが出来ればGenerate tokenを選択し、表示されたトークンをメモしておく。
これで、cloneする際にこのトークンをパスワードとして入れればclone、pullすることができる。

参考:GitHubに二段階認証を設定した後にGit操作できない時の解決策 - Qiita

サーバーを建ててみる

では次に実際にサーバーを建ててみる。
今回はnodeに標準であるhttpを使用する

コードを記述する

今回は単純にサーバーを立てるだけなので、アクセスすると単一のページを表示させる。

index.ts
import * as http from 'http';

http
  .createServer((req, res) => {
    if (req.method === 'GET') {
      res.writeHead(200, { 'Content-Type': 'text/plain' });
      res.end('Hello world\n');
    }
  })
  .listen(32768);

とりあえずアクセスすればHello worldと表示されるコード。
(httpについてはここでは記述しない)

htaccessを記述する

次はurlから建てたサーバーにアクセス出来るようにする。
nodeで建てたサーバーに、Xserverで直接アクセスできるようにする方法がないため、htaccessを用いてRewriteRuleでアクセスさせる方法を使用する。

まず、表示させたいディレクトリ(https://example.com/のように直下に置く場合はpublic_html)に、.htaccessを設置。

その中に以下を記述

.htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^$ http://localhost:32768/ [P,L]
</IfModule>

nodeで建てたサーバーは、localhostのlistenで指定したポートで開放するので、そこにRewriteしている。
これでサーバーを建て、Hello worldと表示されれば一通りサーバーの構築は完成した。

サーバーをデーモン化する

デーモン化とは:バックグラウンドで動くプログラムにする
大体そんな意味。今のところ、nodeで建てたサーバーはsshで接続して実行し続けないといけない
もちろんそんな事していることはできないので、デーモン化する必要がある

foreverのインストール

今回はforeverといういかにもデーモン化しますみたいな名前のモジュールを使用する。
Xserverの方で実行してもいいが、git pullすると上書きで消えるので、ローカルのプロジェクトでテスト兼用でインストールし、実行することをおすすめする。

% npm install --save-dev forever

9 vulnerabilities (5 low, 4 moderate) 。でもgithubをみる限り更新されているので、使ってもさほど問題にはならなさそう(多分)
ちなみにこの警告が出ているので、globalではなくsave-devでインストールしている。

今回主に使うのは、
npx forever start ファイル名(デーモン化)
npx forever stop ファイル名(デーモン化の解除)
npx forever list(デーモン化中のスクリプトの一覧を表示)
の3つだけ。

コマンドに追加

nodeを使用しているので、package.jsonscriptsに追加しておく。

  "scripts": {
    "server-dev": "tsc && npm run server-start",
    "server-start": "npx forever start out/index.js",
    "server-stop": "npx forever stop out/index.js",
    "server-list": "npx forever list",
  }

とりあえず4つ。typescriptを使わない場合はserver-devは不要。out/index.jsは基本的にmainと同じファイル。

これで、npm run server-startをすればバックグラウンドでサーバーを立てることができる。

終わりに

初期設定さえ出来ればあとはそこまで難しくない気がする。
git pullするときに毎回パスワードを求められるのが少し面倒かも…。

参考サイト

xserver に nodejs インストール | Hapicode

Node.jsアプリをLinux環境で常駐化させる forever編 - Qiita

13
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
15