Zenn
✍️

dockerでVue環境を構築

2022/05/29に公開
Docker
JavaScript
Vue.js
Vue.js
macOS
tech

はじめに

少し前にReactでの環境構築を行なった。
今回はVueの環境を構築してみたので、備忘録として残す。
(React全然にできるようになってない…)

TL;DR

Dockerとdocker-composeでのVue環境の構築手順です。
初心者なので、かなり初歩的な内容で他の方が執筆なさった記事を参考にしています。

前提環境

pc: MacBookPro(2017)
os: Big Sur
Homebrew 3.4.10
Docker version 20.10.13
docker-compose version 1.29.2

Homebrew~docker-composeのインストールはdocker+poetryでpythonを使うの序盤に書いています。

ディレクトリ構成

下記のコマンドで作業をするディレクトリを作成します。

$ mkdir vueApp

Dockerfileとdocker-compose.yamlも空で良いので作成しておきます。作成コマンド例touch Dockerfile。
今回の例では下記のような構成となります。

構成
$ tree
.
├── Dockerfile
├── docker-compose.yaml
└── vueApp

環境構築手順

Dockerfileの作成

Dockerfile
FROM node:16.15.0
WORKDIR /usr/src/app

NodeJsのバージョンを公式サイトで確認します。その後に、該当のバージョンをDockerHubのnodeリポジトリで探します。

私が確認した時はNodeJs 16.15.0がLTSだったので、nodeイメージはnode:16.15.0-alpineを使用します。

docker-compose.yamlの作成

docker-compose.yaml
version: '3.9'
services:
  vue-app:
    build:
      context: .
      dockerfile: Dockerfile
    tty: true
    environment:
      - NODE_ENV=development
    volumes:
    - ./vueApp:/usr/src/app
    command: sh -c "cd vue-sample && npm run serve"
    ports:
    - "8080:8080"

コンテナとVueプロジェクト作成

下記のdocker-composeコマンドでコンテナを起動します。

コンテナ起動
$ docker-compose build

次のコマンドでプロジェクトを作成。
Reactでは--template typescriptオプションを付けるとtypescriptをインストールで来ましたが、Vueでは異なります。(Vue3ではVue自体がTypeScriptを使って記述されていることもあり特別な設定を行うことなくTypeScriptを利用できるそうです。)
まだ、詳しく読んでないですが、簡単な例で始めるVue3でTypeScript入門が参考になりそう？

プロジェクト作成
$ docker-compose run --rm vue-app sh -c  "npm install -g @vue/cli @vue/cli-init && vue create vue-sample"
---
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
  
---
Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies:
  Use Yarn
❯ Use NPM

---
  Creating project in /usr/src/app/vue-sample.
⚙️  Installing CLI plugins. This might take a while...


added 844 packages, and audited 845 packages in 4m

86 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
🚀  Invoking generators...
📦  Installing additional dependencies...


added 95 packages, and audited 940 packages in 44s

96 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd vue-sample
 $ npm run serve

上記のような成功メッセージが完了されればOKです。

コンテナ起動

下記のコマンドでコンテナ起動します。オプションで-dを付けるとバックグランドで動作します。

build container
$ docker-compose up (-d)

-dオプションを付けない場合は別のターミナルなどで次のコマンドを実行してログを見てみます。

display log
$ docker compose logs -f

下記のようなメッセージが表示されたらhttp://localhost:8080にブラウザからアクセスします。Vueの画面が表示されるはずです。

その他

今回はnpmやvue cliを使用したvueの環境構築を行ったが、npmやvue cliに慣れていないと最初は詰まると思う。
もし、大規模な開発をしない場合はCDN版を使ったほうが良い？
(自身の経験がないので今後使って行きたいと思います。)

参考

最後に

ReactとVueはどちらを使えば良いのかすごく迷います。
初心者はVueの方が扱いやすいんですかね…

Discussion