Node.js を使用して Web プロジェクトをパッケージ化してデプロイする方法

Node.js は、多くの便利なライブラリとツールを提供する活気のあるオープン ソース プラットフォームであり、最新の Web アプリケーションに推奨される環境の 1 つとなっています。この記事では、Node.js を使用して Web プロジェクトをパッケージ化してデプロイする方法を紹介します。

1. 概要

Web プロジェクトをパッケージ化してデプロイする前に、まずいくつかの基本的な概念とツールを理解する必要があります。 Node.js はサーバーサイドの JavaScript ランタイム環境です。 V8 エンジンを使用して JavaScript コードを解釈し、実行します。これを使用して、高性能でスケーラブルな Web アプリケーションを構築できます。

npm (ノード パッケージ マネージャー) は、Node.js パッケージ マネージャーです。これは、Web アプリケーション開発のためのさまざまな依存関係を検索、インストール、管理するのに役立ちます。

Webpack は、Web アプリケーションのデプロイメントのために JavaScript、CSS、画像、その他のファイルをまとめてパッケージ化できる強力なパッケージ化ツールです。

2. Node.js と npm をインストールする

開始する前に、Node.js と npm をインストールする必要があります。公式 Web サイト (https://nodejs.org) で Node.js インストーラーをダウンロードし、プロンプトに従ってインストールします。 npm はすでに Node.js にバンドルされているため、個別にインストールする必要はありません。

インストールが完了したら、コマンド ライン ツールを開き、次のコマンドを入力して、Node.js と npm が正しくインストールされているかどうかを確認します。

$ node -v
$ npm -v

バージョン番号が正しく表示されていれば、インストールは成功しています。

3. Web プロジェクトの作成

Web プロジェクトのパッケージ化とデプロイを開始する前に、まず Web プロジェクトを作成する必要があります。 React、Angular、Vue など、使い慣れたフレームワークを使用できます。

この記事では、例として React フレームワークを使用します。コマンド ラインで次のコマンドを入力して、新しい React プロジェクトを作成します。

$ npx create-react-app my-app

このうち、「my-app」はプロジェクトの名前です。それに応じて独自の名前を選択できます。

React プロジェクトが作成されたら、プロジェクト ディレクトリに入ります。

$ cd my-app

プロジェクト ディレクトリには、package.json ファイル、src フォルダー、パブリック フォルダーなど、多くのファイルとフォルダーが表示されます。このうち、package.json ファイルはプロジェクト構成ファイルです。 src フォルダーには、プロジェクトのソース コードとコンポーネントが含まれています。パブリック フォルダーには、アイコンや HTML テンプレートなどのいくつかのパブリック リソースが含まれています。

4. React プロジェクトのパッケージ化

React プロジェクトのデプロイを開始する前に、それをデプロイ可能なパッケージにパッケージ化する必要があります。 Webpack を使用してこのタスクを実行できます。 Webpack は、JavaScript、CSS、画像、その他のファイルをパッケージ化して、Web アプリケーションを簡単に展開できます。

コマンド ラインで次のコマンドを入力して Webpack をインストールします。

$ npm install webpack webpack-cli --save-dev

インストール後、新しい Webpack 構成ファイルを作成します。プロジェクトのルート ディレクトリに webpack.config.js というファイルを作成し、次のコードを追加します。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

この設定ファイルは、エントリ ファイルが src/index.js であり、パッケージ化されたファイルが dist/bundle.js に出力されることを Webpack に伝えます。

次に、コマンド ラインで次のコマンドを入力して React プロジェクトをパッケージ化します。

$ npx webpack

パッケージ化が完了すると、生成された Bundle.js はプロジェクトのルート ディレクトリの dist フォルダーにあります。

5. React プロジェクトをデプロイする

React プロジェクトを実稼働環境にデプロイする前に、まずテストする必要があります。 Express.js を Web サーバーとして使用して、パッケージ化された React アプリケーションをテストするための単純なサーバーを作成できます。

コマンド ラインで次のコマンドを入力して、Express.js をインストールします。

$ npm install express --save

インストールが完了したら、server.js という名前のファイルをプロジェクトのルート ディレクトリに作成し、次のコードを追加します。

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(8080);

このコードは Express アプリケーションを作成し、パッケージ化された React アプリケーションを静的ファイルとして提供します。ブラウザで http://localhost:8080 にアクセスすると、React アプリケーションが実行されていることが確認できるはずです。

6. React プロジェクトをリリースする

React プロジェクトのテストが成功したら、実稼働環境にデプロイできます。この時点で、プロジェクトを Web サーバーにアップロードして、一般の人がアクセスできるようにする必要があります。

この時点で、任意の Web サーバーを使用して React アプリケーションをホストできます。パッケージ化後に生成された dist フォルダーをサーバーの Web ルート ディレクトリにマージするだけです。

7. 概要

この記事では、Node.js を使用して React プロジェクトをパッケージ化してデプロイする方法について説明しました。 Node.js、npm、Webpack、Express.js などの基本的な概念とツールを学びました。この記事に従うことで、React アプリケーションを簡単にパッケージ化して運用環境にデプロイできるようになります。

以上がNode.js を使用して Web プロジェクトをパッケージ化してデプロイする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。