【初心者向け】DockerでVueの環境を構築する手順を解説

こんにちは、インフラエンジニアのryuです。

今回の記事は、Dockerを使用してVueの環境を構築する方法を解説します。結論から言うと、Dockerfileとdocker-compose.ymlの2つのファイルを用意して、コマンドを3回実行するだけで完成します。

Dockerを使用すれば、簡単にVueの環境を構築することができます。今回の記事では、初心者向けに難しい内容は抜きにして、Vueの環境を作る手順を詳しく解説します。

DockerでVueの環境を構築する手順を解説¶

Vueの実行環境がうまく作成できないと悩んでいませんか。Node.jsのインストールやバージョンの違いでつまずく方は、実はとても多いです。

Dockerを使えば、簡単に構築することができます！Vueのアプリを実行するために、自分のPCにNode.jsをインストールするなど、めんどくさい作業を無くして、簡単にVueが使えるようになります。

VueはWebの画面づくりで広く使われている、JavaScriptのフレームワークです。学習しやすいと評判で、日本でも人気があります。

この記事のゴールは、コンテナの中でVueの開発サーバーを動かして、ブラウザからデフォルトページを表示させることです。手順は執筆時点で公式に推奨されている、Vue 3とcreate-vueを前提に解説します。

今回の記事では、Dockerの操作方法は知っている前提で進めます。まだDockerの使い方を知らない方は、Dockerとは何かをわかりやすく解説した記事を先にご覧ください。

Dockerそのもののインストールがまだの方もいますよね。その場合は、Dockerの環境をセットアップする手順から始めましょう。

なぜDockerでVue環境を構築すると楽なのか¶

そもそも、なぜわざわざDockerを使うのでしょうか。理由は、環境構築のめんどうな部分を、まるごとコンテナに閉じ込められるからです。

Vueの開発にはNode.jsが必要ですが、プロジェクトによって求められるバージョンが違うことがあります。ホストのPCに直接インストールすると、バージョンの切り替えや競合に悩まされがちです。

Dockerなら、Dockerfileに書いたバージョンのNode.jsが、コンテナの中だけで動きます。環境を作り直したくなったら、コンテナとイメージを削除するだけで元通りです。

チーム開発でも効果は絶大です。設定ファイルを共有するだけで、メンバー全員がまったく同じ環境を再現できます。

事前に準備するものとディレクトリ構成¶

必要なものは、DockerとDocker Composeが動くPCだけです。Docker Desktopをインストールしてあれば、どちらも使える状態になっています。

作業用のフォルダを1つ作って、その中にファイルを置いていきます。最初に全体像を確認しておきましょう。

vueappフォルダは、自分で作る必要はありません。あとで実行するコマンドが、自動で生成してくれます。

Vue環境に必要なDockerファイルの準備¶

ここからは、実際にファイルを作成していきます。どちらも数行の短いファイルなので、身構えなくて大丈夫ですよ。

Dockerfileの準備¶

まずは、Dockerのイメージを作成するためのDockerfileを作成しましょう。Dockerイメージとは、Vueが動く環境の基を定義するファイルです。

イメージとコンテナの関係は、設計図と実際に建てた家のようなものです。1つのイメージから、同じコンテナを何個でも作れます。

Dockerfileの中身は下記の通りです。

FROM node:22
WORKDIR /app

今回は、Vueを動かすためだけの最低限の設定にしております。FROMの行は、Node.js 22が入った公式イメージを土台にするという意味です。

Node.js 22は、執筆時点でサポート中のLTS版です。記事の公開当初はnode:14を使っていましたが、すでにサポートが終了しているため、新しいバージョンに更新しています。

WORKDIRの行では、コンテナ内での作業ディレクトリを/appに設定しています。以降の操作は、この場所を起点に実行されるようになります。

Dockerfileの書き方をもっと詳しく知りたい方もいますよね。Dockerfileの書き方とイメージの作成方法で丁寧に解説しています。

docker-compose.ymlの準備¶

次にdocker-compose.ymlファイルです。内容は以下の通りです。

services:
  node:
    build:
      context: .
    tty: true
    environment:
      - NODE_ENV=development
    volumes:
      - ./:/app
    command: sh -c "cd vueapp && npm run dev -- --host 0.0.0.0"
    ports:
      - "5173:5173"

それぞれの項目の意味を、表で整理しておきます。意味が分かると、他のアプリの構築にも応用できるようになりますよ。

volumesの共有は双方向です。ホスト側でコードを編集すればコンテナへ即座に反映されて、コンテナ側で作られたファイルもホストから見えます。

以前のdocker-compose.ymlでは、冒頭にversionという行を書くのが一般的でした。現在のDocker Composeでは不要になったため、この記事でも省略しています。

commandに付けた--host 0.0.0.0は、忘れやすい重要ポイントです。この指定がないと、開発サーバーがコンテナの中からしか見えず、ブラウザからアクセスできません。

docker-composeの役割そのものを整理したい方は、docker-composeとは何かを解説した記事もあわせてどうぞ。ファイルの作成が完了したら、コンテナを起動させましょう！

DockerコンテナにVueのインストール¶

先ほどまで、Dockerファイルの準備をしました。準備したファイルを元にコンテナを作成して、このコンテナにVueに必要なものをインストールしていきます！

以下の画像のような手順で実施します。

では、詳しく解説します。ターミナルで実行するコマンドは、全部で3つだけです。

Dockerイメージのビルド¶

Vueをインストールするためには、Dockerファイルからイメージを作成して、コンテナを起動させる必要があります。まず、Dockerのイメージを作成しましょう。

イメージの作成には、docker compose buildコマンドを使用します。Dockerfileの内容が読み込まれて、Node.js入りのイメージが手元に作られます。

初回はDocker Hubからイメージのダウンロードが走るため、数分かかることがあります。エラーが出ずにプロンプトが戻ってくれば成功です。

Vueプロジェクトの作成¶

イメージができたら、コンテナの中でVueのプロジェクトを作成します。次のコマンドを実行してください。

docker compose run --rm node sh -c "npm create vue@latest vueapp && cd vueapp && npm install"

npm create vue@latestは、Vue公式が推奨しているプロジェクト作成コマンドです。vueappという名前でプロジェクトの雛形を作り、続けて必要なパッケージをインストールしています。

実行中に、TypeScriptを使うかといった質問がいくつか表示されます。迷ったら、すべてそのままEnterを押してデフォルトを選べば大丈夫です。

ちなみに、--rmは処理が終わったコンテナを自動で削除するオプションです。使い捨てのコンテナでコマンドだけ実行する、Dockerらしい便利な使い方ですね。

完了すると、作業フォルダの中にvueappフォルダが生成されています。volumesで共有しているため、コンテナで作ったファイルがホスト側にもしっかり残っています。

vueappの中には、画面の部品を置くsrcフォルダや、パッケージを管理するpackage.jsonが並んでいます。いきなり全部を理解する必要はないので、まずは動かすことを優先しましょう。

コンテナを起動して動作確認¶

最後にdocker compose upコマンドを入力して終わりです。docker-compose.ymlのcommandに書いた通り、Vueの開発サーバーが自動で立ち上がります。

ターミナルにViteのバージョンとURLが表示されたら、準備完了です。ブラウザからhttp://localhost:5173にアクセスできれば成功です！

画面にVue 3のWelcomeページが表示されているはずです。ここまでくれば、DockerによるVueの環境構築は完了です。

試しに、vueappの中のソースコードをエディタで少し書き換えてみてください。開発サーバーが変更を検知して、ブラウザの表示にも自動で反映されます。

コンテナを止めたいときは、Ctrl + Cで停止できます。次回からはdocker compose upを実行するだけで、すぐに同じ環境が立ち上がりますよ。

旧バージョンのVue CLIで構築する場合¶

この記事の公開当初は、Vue CLIというツールを使った手順を紹介していました。検索すると古い情報も多く見つかるので、現在の手順との違いを整理しておきます。

Vue CLIは現在メンテナンスモードへ移行していて、新規プロジェクトでの利用は公式に推奨されていません。旧世代のVue 2も、2023年12月31日でサポートが終了しています。

当時の手順では、npm install -g @vue/cli @vue/cli-initでCLIをインストールしてから、vue create vueappコマンドを使用してvueのアプリを作成していました。インストール中に下記のような画面が出たら、デフォルトの状態でEnterを押します。

インストールが完了したら、npm run serveで開発サーバーを起動します。ポート8080へアクセスすると、以下のようなデフォルトページが表示されていました。

昔のプロジェクトを引き継ぐ場合を除いて、これから作るならcreate-vueを選びましょう。作業の流れ自体は、今回紹介した手順とほとんど同じです。

Vueのインストールに失敗した場合¶

vueのインストールに失敗した場合は、コンテナに直接入って、インストールを実施しましょう。コンテナの中に入れば、エラーの状況を直接調査できるようになります。

ちなみに、私は、下記のエラーで失敗しました。。。

npm ERR! request to https://registry.npmjs.org/vue failed, reason: self signed certificate

このような場合、docker compose run --rm node shコマンドでDockerのコンテナに入ることができます。コンテナ内に入ることで、エラーを調査することが可能になります。

ちなみに、上記エラーの場合は、npmの証明書チェックを無効化する方法で解決しました。コンテナ内でnpm config set strict-ssl falseを実行すると、vueをインストールすることができました。

ただし、この設定は通信の安全性チェックを止めてしまうため、あくまで開発環境での一時しのぎです。プロキシなどの原因が解消されたら、npm config set strict-ssl trueで必ず元に戻しておきましょう。

インストールが完了したら、docker compose upコマンドを入力して完了です。エラーの文面をよく読んで原因を切り分ける経験は、インフラエンジニアの仕事でも必ず活きてきますよ。

DockerでVueを開発するときに知っておきたいポイント¶

基本の構築ができたら、あわせて知っておきたいポイントも紹介します。どれも、実際の開発で地味に効いてくる内容です。

node_modulesの置き場所を分離する¶

今回の構成では、ホストの作業フォルダをそのままコンテナと共有しています。そのため、npm installで作られるnode_modulesフォルダも、ホスト側に生成されます。

環境によっては、この共有が原因でインストールや起動が遅くなることがあります。気になる場合は、docker-compose.ymlのvolumesの下に- /app/vueapp/node_modulesという1行を追加してみてください。

この1行を足すと、node_modulesだけがコンテナ専用の領域に分離されます。大量の細かいファイルをホストと共有せずに済むので、動作が軽くなる効果が期待できます。

.dockerignoreでビルドを軽くする¶

イメージのビルド時には、作業フォルダのファイル一式がDockerへ送られます。node_modulesのような巨大なフォルダが含まれると、ビルドが遅くなる原因になります。

対策として、.dockerignoreというファイルを作り、その中にnode_modulesと書いておきましょう。ビルドの対象から除外されて、docker compose buildの動作が軽くなります。

本番環境ではどう動かす？¶

npm run devで立ち上がる開発サーバーは、あくまで開発専用です。本番環境でそのまま公開する用途には向いていません。

本番では、npm run buildで生成した静的ファイルを、Webサーバーから配信する構成が一般的です。まずは開発環境に慣れて、本番用の構成は次のステップで学んでいきましょう。

DockerとVueの環境構築でよくある疑問¶

最後に、初心者の方がつまずきやすい疑問に答えておきます。同じところで悩んでいないか、確認してみてください。

ホストのPCにNode.jsのインストールは必要？¶

結論としては、不要です。Node.jsはコンテナの中に入っているので、ホスト側にはDockerさえあれば動きます。

ホストの環境を汚さずに済むのが、Dockerを使う最大のメリットでしたね。Node.jsのバージョンを変えたいときも、Dockerfileの数字を書き換えてビルドし直すだけです。

docker-composeとdocker composeはどちらを使えばいい？¶

これから始めるなら、スペース区切りのdocker composeを使いましょう。ハイフン区切りのdocker-composeは旧世代の書き方で、現在はDockerに統合されたdocker composeが標準になっています。

古い記事のコマンドを試すときは、ハイフンをスペースに読み替えれば大丈夫です。この記事のコマンドは、すべて新しい書き方に揃えています。

コンテナを削除すると作ったコードも消えてしまう？¶

消えません。ソースコードは、volumesの設定でホスト側のフォルダに共有されているからです。

コンテナやイメージを削除しても、vueappフォルダはホストにそのまま残ります。環境を何度壊してもコードは無事という安心感が、Dockerで開発する気持ちよさでもあります。

ブラウザでページが表示されないときは？¶

まずは、アクセスしているポート番号を確認してみてください。Viteベースの現在のVueは5173番が既定なので、昔の記事にある8080番ではアクセスできません。

また、他のアプリが同じポートを使っていると、address already in useというエラーで起動に失敗します。ポートの競合については、Nuxt3とDockerで発生するaddress already in useエラーの対処方法で詳しく解説しています。

DockerでVueの環境を構築する手順まとめ¶

最後にまとめです。今回の手順は以下の通りでした。

dockerを活用すれば、アプリの環境構築が簡単になります。ぜひDockerを使えるようになりましょう！

同じ要領で、他のフレームワークの環境もDockerで構築できます。次のステップとして、DockerでDjangoの環境を作成する手順に挑戦してみるのもおすすめです。

環境ができあがったら、次はVueそのものの学習ですね。教材選びに迷ったら、Vue.jsのおすすめ参考書のまとめを参考にしてみてください。

【参考】Dockerの使い方を１から勉強したいという方は、Udemyの講座が分かりやすいです。

ゼロからはじめる Dockerによるアプリケーション実行環境構築