メインコンテンツにスキップ

Node.js

概要​

Node.js は、JavaScript で記述されたアプリケーションを実行するサーバープラットフォームです。

まず、Node.js をインストールする必要があります：

  • "Settings" -> "Applications" に移動します

FASTPANEL のアプリケーション管理メニュー

  • 必要な Node.js バージョンの "Install" ボタンをクリックします

FASTPANEL での Node.js バージョンのインストール

ウェブサイトを作成します：

  • Node.js ウェブサイト用のテンプレートを選択します

FASTPANEL の新しいサイト設定

  • ドメインと関連パラメータを指定します。 設定段階では、DB、FTP ユーザー、および Backend を変更できます

FASTPANEL の新しいサイト設定

  • アプリケーションファイルをウェブサイトディレクトリにアップロードします
  • 依存関係をインストールするには、Terminal で npm20.15.1 install を実行します（FASTPANEL® 用の ttyd アプリケーションのインストールが必要です）

Node.js の依存関係をインストール

  • サイトダッシュボードに移動し、"Services" セクションを開いて Node.js を再起動します。

Node.js サービスの再起動

Express フレームワーク​

Express フレームワークを例として、簡単なウェブサーバーを作成してみましょう：

  • サイト所有者のユーザーとして SSH 経由でサーバーに接続します（FASTPANEL® 用の ttyd アプリケーションも使用できます）
  • ウェブサイトディレクトリに app.js ファイルを作成し、次のコードを記述します。
const express = require('express');
const app = express();
const PORT = process.env.SERVICE_PORT;

app.get('/', (req, res) => {
  res.send('Hello! This is my first server on Node.js + Express 🚀');
});

app.listen(PORT, () => {
  console.log(`Server is running at http://localhost:${PORT}`);
});

  • ウェブサイトディレクトリで、express をインストールするコマンドを実行します
npm20.15.1 install express
  • サイトダッシュボードに移動し、Services セクションを開きます
  • サービスを再起動します
  • ウェブサイトを確認します

Docusaurus​

Docusaurus ウェブアプリケーションを例として、設定を構成してみましょう：

  • サイト所有者のユーザーとして SSH 経由でサーバーに接続します（FASTPANEL® 用の ttyd アプリケーションも使用できます）
  • ウェブサイトディレクトリで、Docusaurus のインストールを実行します
npx20.15.1 create-docusaurus -j ./docs

  • テンプレートの選択を求められたら、classic (recommended) と回答します

  • インストール後、ファイル docs/package.json 内の 1 行を置き換えます

"start": "docusaurus start",
# replace with 
"start": "docusaurus start --port $SERVICE_PORT",

$SERVICE_PORT は FASTPANEL® で設定されるシステム変数です

  • コントロールパネルで、"site settings" -> "Backend" に移動します

  • Standalone または PM2 ハンドラーを選択します。

  • 希望する Node.js バージョンを選択します。

  • 作業フォルダー docs を指定します

  • Launch command フィールドに次を入力します: npm run start

  • 保存します。 アプリケーションのコンパイルが完了するまで待ちます（情報はログに表示されます）。 ウェブサイトを確認します

Next.js​

Node.js 20.19 での Next.js を例として、簡単なウェブサーバーを作成してみましょう：

  • ウェブサイト所有者のユーザーとして SSH 経由でサーバーに接続します（FASTPANEL® の ttyd アプリケーションも使用できます）。
  • ウェブサイトディレクトリで、プロジェクト初期化コマンドを実行します:
yarn20.19.4 init -y
yarn20.19.4 add next react react-dom
  • package.json ファイルに scripts ブロックを追加します:
"scripts": {
  "dev": "next dev -p $SERVICE_PORT",
  "build": "next build",
  "start": "next start -p $SERVICE_PORT"
}
  • pages ディレクトリを作成し、その中に index.js という名前のファイルを追加します:
mkdir pages
cat <<EOF > pages/index.js
export async function getServerSideProps() {
  return {
    props: {
      nodeVersion: process.version,
      port: process.env.SERVICE_PORT || 3000,
    },
  };
}

export default function Home({ nodeVersion, port }) {
  return (
    <div style={{
      fontFamily: 'sans-serif',
      textAlign: 'center',
      marginTop: '20vh'
    }}>
      <h1>✅ It works!</h1>
      <p>Next.js app running on Node.js {nodeVersion}</p>
      <p>Port: {port}</p>
    </div>
  );
}
EOF
  • プロジェクトをビルドします。
yarn20.19.4 build
  • コントロールパネルで、"site settings" -> "Backend" に移動します
  • Standalone または PM2 ハンドラーを選択します。
  • 希望する Node.js バージョンを選択します。
  • Launch command フィールドに次を入力します: yarn run start。
  • 保存します。 アプリケーションのコンパイルが完了するまで待ちます（情報はログに表示されます）。 ウェブサイトを確認します

追加情報​

Standalone モードでは、スクリプトを実行するために Node.js プロセスが起動されます。

PM2 モードでは、Node.js プロセス、ログ、およびシステム負荷を管理するために PM2 プロセスマネージャーが使用されます。
このモードでは、ワーカー数、つまりサーバーへの受信リクエストを処理する Node.js プロセス数を指定することもできます。
さらに、このモードには Enable file watch オプションがあり、現在のディレクトリまたはそのサブディレクトリ内のファイルが変更されると、PM2 がアプリケーションを自動的に再起動します。 このモードでは追加のシステム負荷が発生するため、本番環境には推奨されない点にご注意ください。

同様に、NPM ではなく YARN を必要とするアプリケーションも設定できます

FASTPANEL® から直接、YARN または NPM を使用して package.json に記載されたプロジェクトの依存関係をインストールできます。 これを行うには、ウェブサイトカードを開き、Services セクションに移動します：

Node.js サービス

ログ​

Node.js アプリケーションはログを生成できます。 FASTPANEL® では、サイトダッシュボードの Logs セクションにある "Backend log" タブで確認できます

コンソールコマンド​

FASTPANEL® に Node.js をインストールすると、ユーザーは次のようなコンソールコマンドを使用してプロジェクトを操作できます：

  • pm2
  • yarn20.15.1
  • npx20.15.1
  • npm20.15.1
  • node20.15.1

例:

$ npm20.15.1 list
node-socket-port-server@1.0.0 /var/www/node_user/data/www/node.site
└── express@4.21.2
$ pm2 ls
┌────┬─────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name        │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├────┼─────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0  │ amazing_site│ default     │ 1.0.0   │ cluster │ 9355     │ 2m     │ 0    │ online    │ 0%       │ 62.4mb   │ user     │ disabled │
│ 1  │ amazing_site│ default     │ 1.0.0   │ cluster │ 9362     │ 2m     │ 0    │ online    │ 0%       │ 62.5mb   │ user     │ disabled │
└────┴─────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

各コマンド名には、インストールされた Node.js のバージョン番号が含まれます。 この例では、利用可能なバージョンは Node.js 20.15.1 です。