【環境構築】Dockerで Vue.js の開発環境を整える【速習】

その他
目標:Dockerを利用して、ローカル環境を汚さずにVue.js の開発環境を整える

半分備忘録も兼ねていますので、ご了承ください。

前提条件は以下になります。

  • macOS: 10.15.6
  • docker: 17.09.0-ce-mac35(19611)

Dockerとは?

仮想環境の一種です。使い捨ての環境を用意できるソフトです。現在は多種多様な用途で利用されており、Webサイト作成から果ては機械学習、深層学習の実験まで利用されています。

非常に用途が幅広いため、Webサイト作成用にここでは実践的に解説していきます。

Docker for Macのインストール

公式サイトからDockerのアカウントを作成し、DockerHubからダウンロードしてインストールを行います。
Docker for Macのダウンロード
(参考: DockerをMacにインストールする(更新: 2019/7/13))

以下コマンドで正しくインストール出来ているかを確認しておきます。

$ docker version
Client:
 Version:      17.09.0-ce
 API version:  1.32
 Go version:   go1.8.3
 Git commit:   afdb6d4
 Built:        Tue Sep 26 22:40:09 2017
 OS/Arch:      darwin/amd64

Server:
 Version:      17.09.0-ce
 API version:  1.32 (minimum version 1.12)
 Go version:   go1.8.3
 Git commit:   afdb6d4
 Built:        Tue Sep 26 22:45:38 2017
 OS/Arch:      linux/amd64
 Experimental: true

Dockerの概念については、以下が分かりやすいです。ここでは記事の主旨とかけ離れるために割愛します。
参考: Docker入門(第一回)~Dockerとは何か、何が良いのか~

Vue.jsの開発環境をDockerで作成する

前提条件はDocker for macをインストール済であること

Dockerfileとdocker-compose.ymlを作成します。

Dockerで作る仮想環境コンテナの構成を記述した物が、Dockerfileとdocker-compose.ymlとなります。

まず、これらファイルを置くフォルダを作成し移動します。

$ mkdir プロジェクト名
$ cd プロジェクト名

次に, Dockerfileを作成します。

※ベースイメージのnode.jsのバージョンを、どれを選べば良いのか分からなかったため、軽く調べました。
(参考: node.jsのバージョンごとの違い)
(参考: https://github.com/nodejs/Release)

Nodejsは末尾奇数バージョンが新規機能を取り入れたバージョン、末尾偶数がLTS(Long Time Support)となっています。
記事を書いている2020/10/08現在ではActiveなLTSは12.x系となっていますが、2020/10/27からActive-LTSが14.x系に変更されます。

従って、14.x系のベースイメージを利用して、Dockerイメージを作成します。
ベースイメージは以下リンクより確認することが出来ます。
DockerHub(node)

ここで、ベースイメージに対していくつかのタグが確認できます。

  • node:version:
    全部入りであるため、良く分からない場合はこれを利用。
  • node:version-slim:
    必要最小限のパッケージのみ
  • node:version-alpine:
    AlpineLinuxプロジェクトに基づいたイメージ
    gitやbashなど何も入っていない。

今回はnode:versionを利用します。
Node:versionにも”buster”や”stretch”などのタグがついている場合がありますが、これはDebianのリリース時のスイートコードです。

今回は14.13.0を利用します。ltsが良い方は”node:lts”を利用してください。

以下に従ってファイルを作成します。

$ vi Dockerfile

~~vi~~

# ベースイメージ
FROM node:14.13.0
# vue-cliインストール
RUN npm install --global @vue/cli
# 作業ディレクトリを/appに指定
WORKDIR /app

# 8080ポートを開放
EXPOSE 8080
~~~~~~~
$ vi docker-compose.yml

~~vi~~
version: '3'

services:
  app:
    # ビルドパス
    build: .
    # ポート指定
    ports:
      - "8080:8080"
    # マウント指定
    volumes:
      - ".:/app"
    # 起動状態のままにする
    tty: true
~~~~~~~

Dockerfileに基づいてイメージをビルドします。

$ docker-compose up -d
この際、”Bind for 0.0.0.0:8080 failed: port is already allocated”というエラーが出た場合、他のdockerコンテナが8080番ポートを専有しています。
削除するなりポート番号を変えてリビルドしましょう。

## 邪魔なコンテナを削除する場合
# 全てのDockerコンテナを確認
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
236cf27819f1        testapp2_app        "docker-entrypoint..."   20 seconds ago      Created                                      test2
2475925f96fa        testapp1_app        "docker-entrypoint..."   1 days ago          Up 1 days           0.0.0.0:8080->8080/tcp   test1

# 8080番ポートを専有しているコンテナが要らない場合削除
$ docker stop 247 # CONTAINER IDの最初の3文字で指定
$ docker rm 247

続いて、作成したコンテナに入ります。

$ docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
236cf27819f1        testapp_app         "docker-entrypoint..."   20 seconds ago      Created                                      testapp_app1

$ docker start CONTAINER_ID & docker exec -it  CONTAINER_ID /bin/bash

root@CONTAINER_ID:/app#

以上になれば成功です。

以下は実用の際に必要となるコマンドです。

// コンテナから出たい場合
root@CONTAINER_ID:/app# exit

// 再度コンテナに入りたい場合
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
236cf27819f1        testapp_app         "docker-entrypoint..."   20 seconds ago      Created                                      testapp_app1

$ docker start CONTAINER_ID & docker exec -it  CONTAINER_ID /bin/bash

Vue.jsのアプリを作成する

既にDockerfileで指定して、vue-cliをインストールしてありますので、dockerコンテナ内で以下を実行すると、アプリを作成できます。

ネットでよく見る”vue init~”は最新のVue.js3系では古いコマンドです。 Createを使っていきましょう。

# vue create プロジェクト名

途中で以下のような事を聞かれますので、それぞれ解説していきます。

?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n) Y

パッケージ参照先をnpm package registryから変更することで、インストール速度が上がるそうです。
Yesで良いでしょう。

Vue CLI v4.5.7
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

これはDefaultのVue 3 Previewで良いと思われます。

? Pick the package manager to use when installing dependencies:
❯ Use Yarn
  Use NPM

パッケージマネージャを選択する必要があります。

npm:
遅い
バージョン違いの依存プログラム/パッケージをインストールしてしまう可能性あり

yarn:
早い
yarn.lockファイルにより、バージョン違いの依存プログラム/パッケージのインストールは起こらない

(参考: npmとは yarnとは)

という事なので、yarnの使い方になれる意味合いも兼ねて、yarnを選択します。

アプリ起動・確認

アプリを起動して、実際に動くか確かめます。

# cd app
# yarn serve

手元のブラウザで、localhost:8080(Dockerで開放したポート)にアクセスします。

以下の画面が表示されれば終了です。お疲れさまでした。

次はfirebaseとの連携を行っていきます。

まふとら
まふとら
アイキャッチ自動生成サイトをn番煎じで作りたいな。

コメント