チュートリアル：アプリケーションを minikube クラスターにデプロイする

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! が表示されます。

Docker イメージをビルドする

1. プロジェクト ビューから、エディターで Dockerfile を開きます。

2. ファイルを編集します：

   • 変更

     ENV RAILS_ENV="production" \ BUNDLE_DEPLOYMENT="1" \ BUNDLE_PATH="/usr/local/bundle" \ BUNDLE_WITHOUT="development"

     to

     ENV RAILS_ENV="development" \ BUNDLE_PATH="/usr/local/bundle"

   • 変更

     EXPOSE 80 CMD ["./bin/thrust", "./bin/rails", "server"]

     to

     EXPOSE 3000 CMD ["./bin/rails", "server", "-b", "0.0.0.0", "-p", "3000"]

3. Dockerfile 内のガターで、 をクリックし、 新規実行構成 を選択します。

   

4. 実行構成の編集 ダイアログで、 イメージタグ フィールドに hello-world-docker-app を、 コンテナー名 フィールドに hello-world-docker を指定します。 次に、 実行 をクリックします。

   

WebStorm は Dockerfile 実行構成 を作成し、Dockerfile からイメージをビルドし、そのイメージに基づいてコンテナーを実行します。 プロセス全体を確認するには、 サービス ツールウィンドウの ビルドログ タブを開いてください。

Docker ドライバーで minikube を起動する

1. ターミナル ツールウィンドウを開くには、 表示 | ツールウィンドウ | ターミナル に移動するか Alt+F12 を押します。

2. ローカルの Kubernetes クラスターを起動し、minikube に Docker を仮想化ドライバーとして使用するよう指示するには、次のコマンドを実行します：

   minikube start --driver=docker

3. クラスターが起動し稼働していることを確認するには、以下のコマンドを使用します：

   minikube status

Minikube クラスターを WebStorm に追加

1. サービスツールウィンドウを開くには、 表示 | ツールウィンドウ | サービス に移動するか、 Alt+8 を押します。

2. Kubernetes ノードを選択し、 クラスターの追加 ボタンをクリックしてから、コンテキストメニューから デフォルトディレクトリから を選択します。

   

3. クラスターを追加 ダイアログで minikube を選択し、 クラスターを追加 をクリックします。

   

   追加されたクラスターは、 サービス ツールウィンドウで使用可能になります。

4. サービス ツールウィンドウで minikube クラスタを右クリックし、 クラスターの接続 を選択します。

   

Docker イメージを minikube にロードする

1. ターミナル ツールウィンドウを開くには、 表示 | ツールウィンドウ | ターミナル に移動するか Alt+F12 を押します。

2. minikube でコンテナーイメージをビルドするには、次のコマンドを実行してください：

   minikube image load <image tag>

   where <image tag> は、 実行/デバッグ構成 as described above で指定された値です。 この例の場合には次のようになります：

   minikube image load hello-world-docker-app

3. hello-world-docker-app イメージがクラスターで利用可能であることを確認するには、次のコマンドを実行してください：

   minikube image ls | grep hello-world-docker-app

   出力には docker.io/library/hello-world-docker-app:latest が表示されるはずです。

Deployment マニフェストの作成

1. プロジェクト ツールウィンドウ（Alt+1 ）でプロジェクト名を右クリックし、 新規 Kubernetes リソース を選択します。

   

2. 新規 Kubernetes リソース ダイアログで デプロイ ファイルタイプを選択し、マニフェスト名に hello-world-docker-deployment を指定して Enter を押します。

   

   指示が表示されたら、ファイルを Git に追加することに同意してください。

3. 生成されたファイルの内容を次のコードに置き換えてください：

   apiVersion: apps/v1 kind: Deployment metadata: name: hello-world-docker labels: app: hello-world-docker spec: replicas: 1 selector: matchLabels: app: hello-world-docker template: metadata: name: hello-world-docker labels: app: hello-world-docker spec: containers: - name: hello-world-docker image: hello-world-docker-app imagePullPolicy: IfNotPresent ports: - containerPort: 3000 protocol: TCP restartPolicy: Always

4. フローティングツールバーで現在のクラスターと名前空間を選択し、 適用 をクリックして変更をローカルクラスターに適用します。

   

Service マニフェストの作成

1. プロジェクト ツールウィンドウ（Alt+1 ）でプロジェクト名を右クリックし、 新規 Kubernetes リソース を選択します。

   

2. 新規 Kubernetes リソース ダイアログで サービス ファイルタイプを選択し、マニフェスト名に hello-world-docker-service を指定して Enter を押します。

   

   指示が表示されたら、ファイルを Git に追加することに同意してください。

3. 生成されたファイルの内容を次のコードに置き換えてください：

   apiVersion: v1 kind: Service metadata: name: hello-world-docker spec: selector: app: hello-world-docker ports: - protocol: TCP port: 3000 targetPort: 3000 type: NodePort

4. フローティングツールバーで現在のクラスターと名前空間を選択し、 適用 をクリックして変更をローカルクラスターに適用します。

アプリケーションにアクセスする

1. エディターで hello-world-docker-deployment.yaml ファイルを開きます。

2. - containerPort: 3000 プロパティの横にある ポートの転送 インレイヒントをクリックします。

   

3. ポートの転送 ダイアログではデフォルト値のまま、 進む をクリックします。

4. hello-world-docker-deployment.yaml ファイルで ブラウザーで開く インレイヒントをクリックします。

   

   WebStorm はデフォルトのブラウザーにリダイレクトし、ローカルの minikube クラスターでデプロイしたばかりのアプリケーションを確認できます。