フリーランスエンジニア プログラマ 開発・基盤

vueのマテリアルデザイン Vuetify をdocker-composeで立ち上げる

概要

vueの環境をdokcer-composeで立ち上げる時の方法について解説していきたいと思います。

マテリアルデザインであるVuetifyの環境を一瞬で立ち上げる方法を記載します。

もともと、サーバーサイドエンジニアです。
そのため、DockerによるVue環境の構築をして簡単に設置できるようにします。

step
1
インストールしたいフォルダに移動し、gitからクローンしてきます。

$ git clone https://github.com/yoshis2/vue-project.git

step
2
dockerファイルが設置されているフォルダへ移動

$ cd vue-project/docker/

step
3
docker-composeをアップします。

$ docker-compose up

step
4
2、3分程度待ったあと、以下のURLに行くと画面が表示されます。

$ http://localhost:2300

Dockerの解説をします。
インストールに必要なソフトウェアは[package.json]に全て記載されています。

docker-compose.yml

contextで上層のフォルダに見にいき上層にあるVueを立ち上げるように実行されています。

version: '3'
services:
web:
build:
context: ./../
dockerfile: docker/Dockerfile
ports:
- 2300:8080
volumes:
- ../:/app/
- ../node_modules:/app/node_modules
stdin_open: true
restart: always
tty: true

Dockerfile

npm installはpachage.jsonの情報をもとにインストールされます。
ここにvueやvuetifyのインストールが書かれています。

FROM node:12-alpine

RUN rm /bin/sh && ln -s /bin/ash /bin/sh
RUN apk update

WORKDIR /app

CMD npm install && yarn serve

あとはvuetifyの開発を行ってください。

こちらが全ソースコードになります。

スポンサーリンク

にほんブログ村 IT技術ブログ IT技術メモへ にほんブログ村 IT技術ブログ Webエンジニアへ にほんブログ村 投資ブログ リップルへ

-フリーランスエンジニア, プログラマ, 開発・基盤

Copyright© スリーネクスト , 2019 All Rights Reserved.