チュートリアル: Node.js Express アプリケーションを Docker 化する

Node.js で空のプロジェクトを作成する

1. Welcome 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択してください。

2. 開いたダイアログで、左側のペインで Node.js を選択します。

3. アプリケーションの場所と名前（例: hello_world_docker ）を指定します。

4. 使用するローカル Node.js ランタイムを指定します。 推奨インストールを承認するか、リストから別のものを選択するか、まだマシンに Node.js がインストールされていない場合は ダウンロード をクリックしてください。 詳しくは 新しい Node.js アプリケーションを作成するを参照してください。

   

5. 作成 をクリックしてください。

アプリケーションを実装する

1. アプリケーション用に別のフォルダーを作成しましょう。これにより、後でローカルフォルダーをコンテナー内のフォルダーにマッピングしやすくなります。

   そのためには、 プロジェクト ツールウィンドウ Alt+1 を開き、プロジェクトフォルダーを右クリックし、コンテキストメニューから 新規 を選択し、 ディレクトリ を選択します。 表示されるポップアップダイアログで、フォルダー名（例: app ）を指定します。

   

2. ここで、アプリケーションのコードを配置するための JavaScript ファイルを作成します。

   app フォルダーのコンテキストメニューから、コンテキストメニューから 新規 を選択し、次に JavaScript ファイル を選択します。

   

   表示されるポップアップダイアログで、ファイル名 (例: hello_express.js ) を指定します。

   

3. 新しく作成された hello_express.js ファイルをエディターで開き、次のコードを入力します。

   const express = require('express'); const app = express(); app.get('/', function(req, res) { res.send('Hello World!') }); app.listen(3000,function() { console.log('Example app listening on port 3000!') });

4. ご想像のとおり、 express 参照は解決されておらず、エラーとしてハイライト表示されています。 ただし、参照にマウスオーバーすると、WebStorm がクイックフィックスを提案します：

   

   「エクスプレス」をインストールする リンクをクリックすると、 package.json ファイルに express が追加され、インストールされます。

   

アプリケーションをローカルで実行する

アプリケーションをローカルで実行して、期待どおりに動作するか確認してみましょう。

• hello_express.js ファイルを開き、エディタータブ内の任意の場所を右クリックし、コンテキストメニューから 実行 'hello_express.js' を選択します。

  

  実行 ツールウィンドウが開き、 Example app listening on port 3000! が表示されます。

  http://localhost:3000 でブラウザーを開くと、予想どおりページに Hello World! が表示されます。

  

Dockerfile を作成する

1. プロジェクトフォルダーのコンテキストメニューから、 新規 を選択し、次に Dockerfile を選択します。

   

2. 新しく作成された Dockerfile を開き、次のコードを入力します。

   FROM node:22-alpine WORKDIR /tmp COPY package*.json . RUN npm ci --omit=dev COPY ./app/ ./app/ CMD ["node","./app/hello_express.js"]

   この Dockerfile には、 Docker Hub(英語) の node:22 イメージに基づいてイメージを構築するための手順が含まれています。

   このイメージからコンテナーを実行すると、Docker はコンテナー内の /app/ ディレクトリの内容を /tmp/app/ ディレクトリにコピーします（この例では、 /app/ ディレクトリに hello_express.js ファイルが含まれています）。 package.json ファイルは /tmp/ にコピーされます。

   次に、Docker は現在の作業ディレクトリを /tmp に設定し、 node ./app/hello_express.js を実行します。 その結果、コンテナーログには Example app listening on port 3000! が表示されます。

Dockerfile からイメージをビルドして実行する

1. エディターで Dockerfile を開き、 ガターアイコンをクリックして、 実行 を選択してから、 'Docker' で実行する を選択します。

   

2. WebStorm は Dockerfile 実行構成 を作成し、Dockerfile からイメージをビルドし、そのイメージに基づいてコンテナーを実行します。

   

   プロセス全体を確認するには、 サービス ツールウィンドウの ビルドログ タブを開いてください。

   

3. たとえば、Node.js をインストールしなくても、アプリケーションがどのように実行されるかを正確に示すために、イメージを他のユーザーと共有できます (Docker のみが必要です)。

コンテナーのポートを公開する

• Dockerfile を開き、次の行を追加します。

  EXPOSE 3000

  これで、Dockerfile は次のようになります。

  FROM node:22-alpine WORKDIR /tmp COPY package*.json . RUN npm ci --omit=dev COPY ./app/ ./app/ EXPOSE 3000 CMD ["node","./app/hello_express.js"]

Node.js Express アプリケーションを作成する

1. Welcome 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択してください。

2. 開いたダイアログで、左側のペインで Express を選択します。

3. アプリケーションの場所と名前（例: node_express_docker ）を指定します。

4. 使用するローカル Node.js ランタイムを指定します。 推奨インストールを承認するか、リストから別のものを選択するか、まだマシンに Node.js がインストールされていない場合は ダウンロード をクリックしてください。 詳しくは 新しい Node.js アプリケーションを作成するを参照してください。

   

5. ビューエンジン および スタイルシートエンジン のデフォルト設定を受け入れます。

6. 作成 をクリックしてください。

WebStormはシンプルな Express アプリケーションを生成し、 package.json に記載された依存関係をインストールします。

アプリケーションをローカルで実行する

自動生成されたアプリケーションが動作することを確認するために、まずはローカルで実行してみましょう。 WebStorm によって、 Node.jsタイプの bin/www実行 / デバッグ構成も生成されています。

1. ツールバーの 実行 ウィジェットから bin/www 実行 / デバッグ構成を選択し、その横にある をクリックします。

   

   実行 ツールウィンドウが開き、アプリケーションの出力が表示されます。

   

2. ブラウザーで http://localhost:3000 を開きます。 ページにウェルカムメッセージが表示されます。

   

3. ブラウザーを開かずに、コンソールでアプリケーションからのレスポンスを取得できるように、コードを少し変更してみましょう。 そのためには、 bin/www を開き、たとえば onListening() 関数内に次の行を追加します。

   console.log("Hello world");

   アプリケーションを再実行すると、 実行 ツールウィンドウは次のようになります。

   

Dockerfile を作成する

1. プロジェクト ツールウィンドウで、プロジェクト名を右クリックし、 新規 をポイントして、 ファイル をクリックします。

2. 新規ファイル… ダイアログで、 Dockerfile と入力し、 Enter を押します。

3. 次のコードを新しい Dockerfile に貼り付けます：

   FROM node:22-alpine WORKDIR /tmp COPY package*.json . RUN npm ci --omit=dev COPY ./bin/ ./bin/ COPY ./public/ ./public/ COPY ./routes/ ./routes/ COPY ./views/ ./views/ COPY ./app.js . CMD ["npm","start"]

   ご覧のとおり、ここではローカルフォルダーを段階的に個別にコピーします。

4. Dockerfile に EXPOSE 3000 を追加してコンテナーポートを公開しましょう。

   FROM node:22-alpine WORKDIR /tmp COPY package*.json . RUN npm ci --omit=dev COPY ./bin/ ./bin/ COPY ./public/ ./public/ COPY ./routes/ ./routes/ COPY ./views/ ./views/ COPY ./app.js . EXPOSE 3000 CMD ["npm","start"]

アプリケーションをデプロイして実行する

• アプリケーションをデプロイして実行するには、 ガターアイコンをクリックし、 実行 を選択してから 'Docker' で実行する を選択します。 これで、アプリケーションはコンテナー内で実行されます。

  

バインドポート

アプリケーションを Docker コンテナーの外部からアクセスできるようにするには、コンテナーポート (この例では 3000) をホスト上のポートにバインドする必要があります。

上記のように、実行中のコンテナー内または Dockerfile 実行 / デバッグ構成内でこれを実行できます。

• ダッシュボード タブで、 ポート エリアの 追加 をクリックし、コンテナーポートを指定します。例では 3000 です。

  

  オプションを変更 をクリックし、 ホストポート の横にチェックを入れ、追加されたフィールドにホストポートを指定します。 この例では、 3001 とします。