本投稿は TECOTEC Advent Calendar 2024 の19日目の記事です。
こんにちは。次世代デジタル基盤開発事業部の武田です。普段はエンジニアとしてTypescriptでWeb開発を行なっています。
突然ですが、皆さんはエンジニアスキルを高めるためにどのような学習をしていますか？参考書や記事を読むこと、有識者に質問することで得られる知識はもちろん多くあります。様々学習の方法はありますが、私は手を動かして実際に使用してみることが一番多く得るものがあると感じています。そんな中、「個人開発をしてみたい！」と思っているが、環境構築の方法が分からないという悩みを持った方は多くいると思います。そこで、本記事で自分が作成したフロントエンド開発用サーバーの環境を紹介したいと思います。
作成した開発環境
作成するのはフロントエンド開発用サーバーです。これをDockerを使用し、作成します。
Dockerを使用するメリット
今回Dockerを使用する理由としては、以下の3点です。
構築したい環境をコンテナ毎に作成し管理できるため
比較的簡単に環境構築できるため
自分が見てきたほとんどのプロジェクトでDockerが使用されていたため
Dockerを使用すると、構築したい環境をコンテナ単位で作成できます。そのため、開発環境や本番環境などの環境の切り分けがしやすくなります。 複数のプロジェクトを取り扱う場合においても、コンテナを分けて作成しておくことで作業したい環境の切り替えが簡単に行うことができ、とても便利です。
また、Dockerを使用せずにサーバーを構築しようとすると意外と大変です。サーバーの導入やポートの指定など、コマンド入力するのに苦労しますが、Dockerだと比較的簡単に行えます。 さらにチーム開発において、メンバー間の環境が統一できること等、メリットは他にも多くあります。
Dockerの構築
では、実際にDocker環境を作成していきます。
準備として、開発用ディレクトリを作成し、開発環境構築のため compose.yamlやDockerfileを記述する必要があります。
開発用ディレクトリの構成は以下の通りです。
project
-front // フロントエンド作業ディレクトリ
-docker // Dockerfile格納場所
-front
-Dockerfile
-compose.yaml // Dockerコンテナを管理するための設定ファイル
frontディレクトリはフロントエンドの開発をするにあたっての作業ディレクトリになります。私は今回、Nuxt3を導入しプロジェクトを作成しました。
docker
dockerディレクトリはDockerfileの格納場所として用意しました。今回、フロントエンド開発用サーバーしか用意しないため以下のような構成になります。
front/Dockerfile：フロントエンド開発用Dockerfile
front/Dockerfileはフロントエンドの開発環境を構築するためのファイルです。本来であれば、ベースイメージというものを記述し、ローカル開発で利用するイメージを記述するのですが、簡単にベースイメージのみで進めていきます。
ここでイメージとはDockerの実行環境を作成するための要素であり、実行に必要なライブラリなどがまとめられています。 その中のベースイメージは、様々環境分ける上での土台になるイメージとなります。例えば、開発環境と本番環境を作成する場合、ベースイメージを基に開発環境と本番環境のイメージを作り上げていきます。
そのため、ベースイメージは開発環境や本番環境で土台として使用できるように、開発用や本番用のイメージよりも一般的な環境になるように記述します。
私はベースイメージを以下のように設定しました。
# ベースイメージ FROM node:22.12-slim AS base ENV TZ Asia/Tokyo WORKDIR /app RUN apt-get update \ && apt-get install -y \ curl \ && rm -rf /var/lib/apt/lists/* RUN rm -f /tmp/nitro/*.sock COPY --chown=node:node ./front . RUN set -eux; \ yarn install --production=false; \ chown -R node:node .
最初にバージョン22.12のNode.js環境をベースにし、日本時間に設定しました。その後、必要なパッケージのインストールとキャッシュのクリアを行い、開発環境で使用する依存関係のインストールをしています。
上記のベースイメージのNode.jsの記述を各プロジェクトに合わせて的確なバージョンにし、ローカル開発イメージに必要なパッケージを組み込むなどして独自の開発環境を構築することができるようになります！
compose.yaml
このファイルは開発環境をDockerコンテナ上に構築するためにあり、実際にDockerfileで設定したイメージをコンテナ（実行環境）にビルドするファイルとなっています。
複数イメージを作り連携する必要がなければ、Dockerfileだけでコンテナを立ち上げることできますが、今回はcompose.yamlを使用していきたいと思います。
実際に記述したcompose.yamlは以下になります。
services: front-test: container_name: front-test build: context: . dockerfile: docker/front/Dockerfile target: base working_dir: /app user: node volumes: - ./front:/app:cached - nuxt_node_modules:/app/node_modules - ./tmp:/app/tmp ports: - '3000:3000' tty: true environment: - HOST=0.0.0.0 - CHOKIDAR_USEPOLLING=true command: sh -c "yarn && yarn dev" volumes: nuxt_node_modules:
front-testという命名でコンテナを作成しており、build部分でコンテナのビルド設定をしています。そこで、Docker イメージをビルドする際に参照するディレクトリとして、compose.yamlファイルのパスと、作成したいイメージが記述されているDockerfileのパスを指定しています。
またビルドするイメージのターゲットとして、ベースイメージを指定しています。ローカル開発用のイメージ等、他にも用途別にイメージを作成しておくと、目的に応じてビルドしたいイメージを選定することができます。
後の記述は、コンテナ内の作業ディレクトリ（/app）の指定や、ローカルに存在するディレクトリをコンテナの作業ディレクトリ（/app）のどこにリンクさせるか等の記述がされています。
開発サーバーの起動
ここまで、記述するとビルドし開発サーバーを起動することでとりあえず動かすことができます。
docker compose up -d --build
でビルドし、frontディレクトリで
yarn dev
することで開発サーバーを起動できるはずです！
実際に開発する時には、フロントエンドだけでなくバックエンドやDBに関するイメージを作成しビルドすることで必要なサーバーを揃えることができます。
その時はdockerディレクトリにfrontだけでなくbackやdbといったディレクトリを追加し、Dockerfileを作成しそれぞれのイメージをcompose.yamlによってビルドする流れになります。
このようにDockerfileなどの動きや意味を理解して、役割を切り分けながら環境構築を考えるのも楽しそうですよね！
また、開発用のサーバーを別で用意して、gitなどのツールをインストールし、コンテナ内でのみ開発する方が、開発環境をメンバー間で統一できるので良さそうですね！
Dockerは整えるのに難しい印象がありますが、一度環境を作成してみてテンプレートを用意することで開発環境を作成するストレスが大きく減少できるのではと感じました。これから、よりDockerの良いところを引き出した利用ができるように勉強しながら個人開発していきたいですね！
テコテックの採用活動について
テコテックでは新卒採用、中途採用共に積極的に募集をしています。
採用サイトにて会社の雰囲気や福利厚生、募集内容をご確認いただけます。
ご興味を持っていただけましたら是非ご覧ください。
tecotec.co.jp
