Docker搭建Node.js开发环境与热重载配置

<｜begin▁of▁sentence｜>--- title: "Docker で Node.js の開発環境を構築する" date: 2020-12-13T14:00:00+09:00 draft: false toc: true tags: ["docker", "nodejs"] --- ## はじめに Docker で Node.js の開発環境を構築する方法を調べたので、その備忘録です。 ## 環境 - macOS Catalina 10.15.7 - Docker Desktop for Mac 2.5.0.1 - docker-compose version 1.27.4 ## プロジェクトの作成 まずは、プロジェクトのディレクトリを作成します。 ```sh mkdir nodejs-docker-dev cd nodejs-docker-dev ``` ## Dockerfile の作成 Node.js の公式イメージをベースに Dockerfile を作成します。 ```dockerfile FROM node:14.15.1 WORKDIR /usr/src/app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD [ "npm", "start" ] ``` ## docker-compose.yml の作成 開発用に docker-compose.yml を作成します。 ```yaml version: '3' services: app: build: . ports: - 3000:3000 volumes: - .:/usr/src/app - /usr/src/app/node_modules environment: - NODE_ENV=development ``` ## .dockerignore の作成 Docker イメージに含めたくないファイルを指定します。 ```dockerignore node_modules npm-debug.log ``` ## package.json の作成 Node.js のプロジェクトを作成します。 ```sh npm init -y ``` ## アプリケーションの作成 簡単なアプリケーションを作成します。 ```javascript // index.js const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) }) ``` ## 依存関係のインストール Express をインストールします。 ```sh npm install express ``` ## アプリケーションの起動 Docker Compose でアプリケーションを起動します。 ```sh docker-compose up ``` ブラウザで `http://localhost:3000` にアクセスすると、「Hello World!」と表示されます。 ## ホットリロードの設定 開発中はコードの変更を即時反映させたいので、ホットリロードを設定します。 まず、nodemon を開発依存関係としてインストールします。 ```sh npm install --save-dev nodemon ``` package.json の scripts を変更します。 ```json { "scripts": { "start": "node index.js", "dev": "nodemon index.js" } } ``` docker-compose.yml の command を変更します。 ```yaml version: '3' services: app: build: . ports: - 3000:3000 volumes: - .:/usr/src/app - /usr/src/app/node_modules environment: - NODE_ENV=development command: npm run dev ``` これで、コードを変更すると自動でアプリケーションが再起動されます。 ## おわりに Docker で Node.js の開発環境を構築する方法を紹介しました。Docker を使うことで、環境の差異を気にせずに開発を進めることができます。また、ホットリロードを設定することで、開発効率も向上します。 ## 参考 - [Docker で Node.js の開発環境を構築する](https://matsuand.github.io/docs.docker.jp.onthefly/language/nodejs/build-images/) - [Docker で Node.js の開発環境を構築する（ホットリロード対応）](https://qiita.com/ucan-lab/items/17c806973e69792ada99)