Node.js を使用して Web プロジェクトをパッケージ化してデプロイする方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-05 09:16:19

オリジナル

2690 人が閲覧しました

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 サイトの他の関連記事を参照してください。