[初心者向け] Socket.IOのチャットアプリをコンテナ化してみた

アプリをコンテナ化するのって何かワクワクしますよね
2022.02.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは!コンサル部のinomaso(@inomasosan)です。

今回はSocket.IOのスタートアップガイドで作成したチャットアプリを、コンテナ化していきます。

コンテナ化の方法

Node.jsの公式ドキュメントに、Dockerコンテナにするためのガイドがありますので、そちらをベースに対応していきます。

検証環境

今回実行した環境は以下の通りです。

項目 バージョン
macOS BigSur 11.6.3
Docker Desktop 4.4.2
Node.js 16.14.0 LTS

フォルダ構成

コンテナ化した後のフォルダ構成となります。 新規作成や変更したファイルはコメントをつけたものとなります。

% tree -L 1 -a
.
├── .dockerignore      //新規作成
├── Dockerfile         //新規作成
├── index.html
├── index.js
├── node_modules
├── package-lock.json
└── package.json          //変更

新規作成・変更ファイル

.dockerignore

node_modulesフォルダのローカルモジュールや、デバッグログがDockerイメージにコピーされたり、 イメージ内にインストールされているモジュールが上書きされたりするのを防ぎます。

node_modules
npm-debug.log

Dockerfile

  • FROMnodeのLTSバージョンである16.14.0を指定
    • チャットアプリの動作確認したNode.jsのバージョンに合わせる
  • WORKDIRでイメージ内にアプリケーションコードを配置するディレクトリを作成
  • 1つ目のCOPYでパッケージの依存関係が記載されているpackage.jsonpackage-lock.jsonをコピー
  • RUNnpm installを実行し、依存関係のパッケージをインストール
  • 2つ目のCOPYでアプリケーションのソースコードを Docker イメージ内にバンドル
  • EXPOSEでコンテナが接続用にリッスンするポートに3000指定
  • CMDでコンテナ実行時のデフォルト(初期設定)としてnode index.jsを実行し、サーバを起動
FROM node:16.14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "node", "index.js" ]

package.json

ハイライト部分が追記箇所となります。

  • mainで入口となるデフォルトのスクリプトファイルを指定
  • scriptsでコマンドのエイリアスを定義
{
    "name": "socket-chat-example",
    "version": "0.0.1",
    "description": "my first socket.io app",
    "main": "index.js",
    "scripts": {
      "start": "node index.js"
    },
    "dependencies": {
        "express": "^4.17.2",
        "socket.io": "^4.4.1"
    }
}

Dockerイメージ作成

  • -tオプションで指定するイメージ名を指定
  • コマンド最後の . はDockerfileのパスを指定
docker build -t socket-chat-example:0.0.1 .

Dockerイメージからコンテナ起動

  • -pオプションでポートフォワードの指定
  • -dオプションでコンテナをバックグラウンドにて動かす
docker run -p 3000:3000 -d socket-chat-example:0.0.1

ブラウザで動作確認

ブラウザのURLにhttp://localhost:3000入力し、チャットアプリが正常に動作するか確認していきます。

まとめ

公式ドキュメントに必要な手順がまとまっているおかげで、スムーズにコンテナ化することができました。
次回はECSでコンテナを起動してみようと思います。

この記事が、どなたかのお役に立てば幸いです。それでは!