Docker×docker-composeを使用し簡単にVue/Nuxt.js開発環境を構築する

本記事の対象

Nuxt.js環境をDockerで構築したい方
※本記事はNuxt.js環境構築の記事になります！Next.jsの環境構築が知りたい方は下記をご覧ください。

ローカルで用意する環境

Docker 20.10
docker-compose 1.27.4
git 2.25

Macの方

ダウンロードした後下記コマンドでバージョンが確認できればOKです。

$ docker -v
Docker version 20.10.1, build 831ebea
$ docker-compose -v
docker-compose version 1.27.4, build 40524192

※gitについてはMacは最初から入っていると思いますが最新版にしたい場合は各自でお願いいたします。

Windowsの方

MacよりDocker環境の構築がややこしいので記事にまとめております。
下記を御覧ください。下記記事はWSL2上にDocker環境を構築する記事になっています。

Docker Desktop Windowsを使用されている方はそちらでも可能です。

docker-composeで構築する環境

Node.js: 14.15.4（現在のLTSバージョン）

Dockerfileリポジトリをクローン

Nuxt.js環境構築用のDockerfileなどをgithubにあげていますのでそれをまずはCloneします。
下記がgithubのリポジトリです。

GitHub - E-handson/docker-nuxt

Contribute to E-handson/docker-nuxt development by creating an account on GitHub.

ターミナルを起動し、下記コマンドを実行します。

$ git clone https://github.com/E-handson/docker-nuxt.git

cloneに成功したら「docker-nuxt」ディレクトリが作成されます。
作成されたディレクトリに移動しましょう。下記コマンドを実行します。

$ cd docker-nuxt

docker-nuxt配下にはdocker-compose.ymlがあると思います。
docker-composeコマンドはdocker-compose.ymlがあるディレクトリ直下で実行できます。

Dockerサービスの立ち上げ

まずはDockerサービスを構築するために下記コマンドを実行します。

$ docker-compose build

Nuxtアプリケーションを作成

下記コマンドを実行します。

$ docker-compose run --rm nuxt npx create-nuxt-app

Nuxtアプリを作成するにあたり設定をきかれるのでよしなに設定していきましょう。

プロジェクト名の設定

? Project name: nuxt_app  #ここでは「nuxt_app」と指定

使用言語の設定

? Programming language: TypeScript  #今回はTypeScriptにしました。

パッケージマネージャー（nmp or yarn）の設定

? Package manager: Yarn　#今回はYarnにしました。

UIフレームワークの設定

? UI framework: Vuetify.js #今回はVuetify.jsしました（有名どころだとBootstrap-vue,Buefyあたり）

利用するmodulesの設定（複数選択可）

? Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA) #非同期通信にはAxiosは必須のため選択しました。PWAはノリで入れました。

ソース解析ツールの設定

? Linting tools: ESLint, Prettier #今回はESLintとPrettierを選択しました。

テストフレームワークの設定

? Testing framework: Jest #テスト詳しくないので一番有名なJestを選択しました。

(SSR / SSG)とSPAの設定

? Rendering mode: Single Page App #今回はSPA（シングルページアプリケーション）を選択しました。

デプロイ先の設定

? Deployment target: Static (Static/JAMStack hosting)

エディタの設定

? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript) #VScodeよく使うためこれにしました。

CIツール使用有無

? Continuous integration: GitHub Actions (GitHub only) #GitHub Actionsのみ選択可能

GitHubアカウント名の設定

? What is your GitHub username? #任意のユーザー名を入力

バージョン管理方法の設定

? Version control system: Git #今回はGitを選択しました。

これで設定&インストール完了です。
正直設定に関してはあとで変更も可能とのことなので個人開発であればそんなに悩まなくてもよさそうです。

Dockerサービスの起動

次にDockerサービスを起動するために下記コマンドを実行します。

$ docker-compose up

docker-compose.ymlで「command: yarn run dev」と設定しているのでdocker-compose upをすればすぐにブラウザで起動していることを確認できます。
下記リンクをクリックしてウェルカムページが表示されればOKです。

http://localhost:9000/

Docker構成の説明

ここからはDocker構成の説明になります。興味のある方だけ御覧いただければと思います

リポジトリ構成

まずは今回使用したリポジトリ構成を紹介します。

docker-nuxt
├── docker-compose.yml
├── docker
│    └── nuxt
│         └── Dockerfile
└── src(nuxt.jsのソースコード)

./srcディレクトリはgit cloneした段階では存在していません。
Nuxt.jsをインストールした後に作成されます。

コンテナの構成

今回は下記コンテナのみ作成しています。

nuxtコンテナ – Node.js: 14.15.4をインストールしているコンテナ

nuxtコンテナ

実際にNuxt.jsをインストールしているコンテナです。

nuxtコンテナの/workspace配下にインストールしたNuxt.jsのソースはローカルの./src配下にマウントされています。マウントとは同期しているという意味になります

そのため./src配下のファイルを編集すると実際にNuxtを動かしている/workspace配下のソースにも反映されるということになります。
編集する場合は./src配下を修正してももちろん良いですがおすすめはVS codeを使用してコンテナ側の/workspace配下を修正する方法です。
詳細は下記ブログに記載していますので興味がある方は御覧ください。