Vue CLI + Dockerで新規プロジェクトを作成する

プログラミング

こんにちは!今回はプログラミングネタです。

Vue CLIを使用して新規プロジェクトを作成する手順に関して、

サンプルプログラムを用いて解説したいと思います。

スポンサーリンク

動作環境

以下の環境で動作するサンプルを紹介します。

  • Node: 14.15.0
  • Vue CLI: 4.5.8

事前準備

事前準備として、docker-compose.yaml と Dockerfile を準備します。

以下がサンプルファイルです。

docker-compose.yaml

version: '3'
services:

  sample-front:
    build: <path-to-dockerfile>
    container_name: sample-front
    tty: true
    volumes:
      - ./../sample-front/:/app
    ports:
      - "8080:8080"

Dockerfile

FROM node:14.15.0-alpine3.12

ENV VUE_CLI_VERSION 4.5.8

RUN yarn global add @vue/cli@${VUE_CLI_VERSION}

WORKDIR /app

コンテナ立ち上げ

以下のコマンドでコンテナを立ち上げます。

$ docker-compose up

コンテナが立ち上がっているかどうかは以下のコマンドで確認できます。

$ docker ps

インストールした項目のversion確認(スキップ可)

実際にコンテナに入ってDockerfileで指定した項目がインストールされているか確認します。

以下のコマンドでコンテナに入ります。

$ docker exec -it sample-front ash

インストールしたものを確認していきます。

$ node -v
v14.15.0
$ vue --version
@vue/cli 4.5.8

NodeやVue CLIのバージョンは指定したものがインストールされていることが確認できました!

プロジェクト作成

いよいよプロジェクト作成に取り掛かります。

今回はカレントディレクトリにプロジェクトを作成するので以下のコマンドを使用します。

vue create .

カレントに作らない場合は、以下のコマンドを使用します。そうすると指定した名前のディレクトリ配下にプロジェクトが作成されます。

vue create <app-name>

次にプロジェクトの設定を選択します。

今回自分はVue 3とYarnを選択しましたが、こちらはお好みで変更可能です。

Vue CLI v4.5.8
? Generate project in current directory? (Y/n) -> Y

? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM

設定項目を選択しばらく待ちます…

🎉  Successfully created project app.
👉  Get started with the following commands:
 $ yarn serve

プロジェクトの作成に成功した様です!

サーバーを立ち上げて確認

さて最後にサーバーを立ち上げて確認してみます。docker-compose.yamlに以下の記述を追加します。

command: >
  ash -c "yarn install &&
  yarn serve"

実際に立ち上げてみます。

$ docker-compose up
sample-front    |   App running at:
sample-front    |   - Local:   http://localhost:8080/

ブラウザで以下のURLを叩いて確認してみると…

http://localhost:8080/

以下の画像の様に表示されていたら成功です!お疲れ様でした。

↓Vue.jsの勉強には以下の本がわかりやすかったです

↓Dockerの勉強には以下の本がわかりやすかったです

コメント

タイトルとURLをコピーしました