はじめに

前回の記事では、Rails6 + PostgreSQLの開発環境をDockerで構築しました。

当面の目標であるRails6 + Vue3 + PostgreSQLの環境構築を実現するために、次のステップとしてVue3単独の開発環境をDockerで構築してみます。

(2022.9.18追加)
Rails6 + Vue3 + PostgreSQLの開発環境をDockerで構築するまでが完了したので、続きを記事にまとめました。

1. 開発環境

macOS Monterey 12.3.1
Docker 20.10.13
docker-compose 1.29.2

2. 今回のゴール

DockerでVue3の開発環境を構築すること

3. 本編

今回、構築したいVue3については、前回のRails + PostgreSQLのようにDockerの公式サイトにチュートリアルがなかったので、Vueの公式サイトを見ながら進めていきたいと思います。

3-1. 事前準備

まずは作業ディレクトリを準備します。

$ mkdir docker-vue
$ cd docker-vue

作業ディレクトリ内に以下のDockerfileを作成します。

Dockerfile

FROM node:16.16

RUN apt-get update -qq

WORKDIR /app
COPY . /app

CMD ["/bin/bash"]

今回作成したDockerfileはNode.jsのベースイメージのみであり、追加でライブラリ等はインストールしていません。
なお、apt-get updateは今後ライブラリをインストールすることに備えて、ライブラリの一覧を更新しているだけです。
ここから、実際にコンテナ内でコマンドを実行しながらVue3を導入していきます。

そして、Vueを起動することができれば、そのコマンドをDockerfileに反映させるという手順で進めていきます。

3-2. コンテナを起動

それでは早速以下のコマンドを実行して、イメージのbuild、コンテナの起動をします。

$ docker image build . -t node_sample
$ docker container run --rm -it -p 8080:8080 node_sample

-p 8080:8080は、ローカルの8080番ポートからコンテナの8080番ポートに接続するための設定です。
Vueのプロジェクトを作成し、起動できていることを確認するために設定しています。

3-3. Vueをインストール

ここからは先ほど起動したコンテナ内での作業となります。
yarnを使ってVueをインストールしたいので、まずはyarnが入っているかを確認します。

$ yarn -v
# 1.22.19

今回使用したNode.jsのベースイメージには、初めからyarnがインストールされていました。

それではVueの公式サイトに沿って進めていきます。
公式サイトによるとVueの導入にはいくつかの方法があるようですが、今回はCLIを使いたいと思います。

まずは以下のコマンドを実行します。

$ yarn global add @vue/cli

インストールが完了したので、確認してみます。

$ vue -version
# @vue/cli 5.0.8

3-4. プロジェクトを作成

Vue CLIが導入できたので、コンテナ内でプロジェクトを作成します。
作成方法は、こちらのVue CLIの公式のとおりです。
途中で選択肢が出てくるので、Vue3とYarnを選択します。

$ vue create my-project

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)  # これを選択
  Default ([Vue 2] babel, eslint) 
  Manually select features 
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn   # これを選択
  Use NPM 

🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ yarn serve

プロジェクトの作成が完了しました。
ご丁寧に、プロジェクトを起動させるためのコマンドまで教えてくれています。

3-5. プロジェクトを起動

指示どおりにコマンドを入力して、プロジェクトを起動させます。

 $ cd my-project
 $ yarn serve

プロジェクトが起動したら、localhost:8080にアクセスしてみます。

無事プロジェクトの起動が確認できました！やった！

3-6. Dockerfileの修正

無事プロジェクトが起動した喜びで満足しかけていましたが、Dockerfileへの反映がまだ残っていました。

早速、以下のとおり修正します。

Dockerfile

FROM node:16.16

RUN apt-get update -qq && yarn global add @vue/cli # ここを修正

WORKDIR /app
COPY . /app

CMD ["/bin/bash"]

結局、Vueをインストールしただけなので、ほとんど修正する箇所はありませんでした。

3-2. コンテナを起動から3-5. プロジェクトを起動（3-3. Vueをインストールを除く）をあらためて実行すると、同じようにプロジェクトが起動することを確認できました。

4. さいごに

もっと詰まるだろうと思って始めてみたら、意外とあっさりVueプロジェクトが起動できて拍子抜けしているというのが正直なところです。

他人の作ったDockerfileを見ずに自分で書いてみる
→エラーが出まくって一つ一つ解消していく
→エラーを解消する中で理解を深めるという
という目的もあったのですが、こちらの効果は薄かったようです。

さて、次は前回作成したRails6 + PostgreSQLと今回作成したVue3の開発環境をdocker-comoseでまとめて管理できるようにしていきたいと思います！

DockerでVue3の開発環境を構築する