DockerでWebpackを素早く起動

DockerDesktopを使用してWebpackのプロジェクトを素早く起動していく方法を解説します。

DockerにWebpackをインストールするには、プロジェクトディレクトリを新規作成し、コンテナのベースとなるイメージを指定する必要があります。

DockerでWordpressの構築を行いたい方は別途noteで記事を書いています。

有料版ですが¥100〜と安価にてDockerでコンテナ作成をされる際の最初の練習を行なっていただけます。

質問や気になる点がございましたら、個人向けトレーニングよりご連絡をお願い致します。

こちらの全4回で、WordPressの構築がDockerコンテナ上で出来るようになります。

-----------------

利用環境

• iMac M1
• MacOS：13.0.1
• node：18.12.0
• npm：8.19.2
• Docker：20.10.20
• VScode

-----------------

今回はnpmを使用してWebpackをDockerコンテナにインストールする方法を説明します。

Dockerfileの作成

Node.js環境にWebpackをインストールするDockerfileのコンテナを作成する例です。
Node.js環境のみのコンテナを作成したい場合はこちらの記事を参照して下さい。

まず初めにプロジェクト用の新しいディレクトリを作成し、cdで移動します。
今回はプロジェクト名をdocker-webpackとしています。

ターミナルでプロジェクトディレクトリにDockerfileとdocker-compose.ymlを作成します。一行ずつ実行して下さい。

mkdir docker-webpack
cd docker-webpack
touch Dockerfile
touch docker-compose.yml

プロジェクトディレクトリが作成されたらdistフォルダとその中にindex.htmlを作成し、簡単なマークアップをしておきます。

Dockerfileを整える

Dockerfileをテキストエディターで開いてこちらの記述を行います。

FROM node:latest
 
# アプリケーションディレクトリの作成
RUN mkdir /app
 
# appディレクトリの作成
WORKDIR /app
 
# npm@5+がある場合アプリの依存関係がインストールされ、
# package.jsonとpackage-lock.jsonの両方がコピーされるように、ここではワイルドカードが使用する
COPY package*.json ./
 
RUN npm install
 
# アプリのソースコードをバンドルする
COPY . .
 
EXPOSE 8080
CMD [ "npm", "start" ]

FROM node:latest

とすることで、ベースコンテナにnodeの最新版がインストールされます。バージョン指定することも可能です。

プロジェクトディレクトリにpackage.jsonというファイルを作成し、以下の行を追加してください。

{
 "name": "my-project",
 "version": "1.0.0",
 "description": "My project",
 "main": "index.js",
 "scripts": {
   "start": "node index.js",
   "build": "webpack"
 },
 "dependencies": {
   "express": "^4.17.1"
 },
 "devDependencies": {
   "webpack": "^5.75.0",
   "webpack-cli": "^5.0.1"
 }
}

モジュールの定義

プロジェクトディレクトリにsrcフォルダとその中にmodule.jsを作成し、モジュールを定義します。
exportで3つの宣言を行っているのがわかると思います。

let message = "こんにちは、webpack！";
 
export const APP_NAME = "webpack";
 
export function hello() {
 console.log(message);
}
 
export class Figure {
 static getTriangle(base, height) {
   return (base * height) / 2;
 }
}

モジュールのインポート

先ほど定義したmoduleに対してアクセスを行うファイルを作成します。srcフォルダの中にindex.jsを作成し、記述します。

別のファイルで作成されたモジュールを読み込むにはimport命令で構文に従って記述します。

import { APP_NAME, hello, Figure } from "./module";
 
console.log(APP_NAME);
hello();
console.log(Figure.getTriangle(10, 5));

3つのexportですがimport命令の中に3つとも入れることでアクセスが可能になります。もし、import命令に存在しなければモジュールに記述されていてもアクセスはできません。
import命令には様々な記法がありますので、試してみて下さい。

Dockerイメージのビルド

ターミナルで

docker build -t my-project .

を実行すると、Dockerイメージの構築が始まります。

Dockerイメージの構築が完了したら、Dockerコンテナを実行します。

docker run -p 8080:8080 my-project

これでコンテナが起動しました。Node.jsサーバが起動し、http://localhost:8080 にアクセスできる状態まで作成できました。

Webpackのインストール

Webpack をここまでのプロジェクトに追加するには、npmを使用します。npmを利用するとコマンドを打つ手間を省くことができスムーズです。

まずは、Webpackとその依存関係をインストールする必要があります。

npm install --save-dev webpack webpack-cli

これでプロジェクトフォルダにnode_modulesが追加されたと思います。

続けて、プロジェクトディレクトリに webpack.config.js ファイルを作成し、以下の行を追加します。

module.exports = {
  entry: "./src/index.js",
  output: {
    path: `${__dirname}/dist`,
    filename: "main.js",
  },
  devServer: {
    contentBase: "./dist",
  },
};

package.json ファイルにスクリプトを追加することで、Webpackを簡単な呼び出しで実行することができます。最初に作成したpackage.jsonに"build": "webpack"を追記します。

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "build": "webpack"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

最後にWebpackを走らせバンドルしていきます。

npm run build

distディレクトリにmain.js ファイルが生成され、これを HTML ファイルにインクルードすることで、バンドルされたコードを使用することができます。

Docker Desktopの8080:8080をクリックするだけでブラウザに表示されるようになりました。