DockerでVue.jsの開発環境を構築する

公開日:2019-07-04
最終更新:2019-07-04

概要

フロントの勉強としてVue.jsの開発環境を整備するときに、せっかくなのでDockerを使って環境を構築してみました。

手順

今回は勉強がてらdocker-composeを利用します。とは言っても「書くよ!」ってだけで複雑なことは全然やってないです。

Dockerfileの作成

FROM node:lts-alpine  
WORKDIR /app  

RUN apk update && \  
    npm install -g npm @vue/cli  

ただし、現時点(2019年7月3日)でVisual Studio CodeのRemoteはAlpine Linuxに対応していないので、Remoteを利用したい場合は別のイメージを使った方がいいと思われます(1敗)。

なお、Alpine LinuxはVS Code Insidersのみサポートされているため、そのうちに正式対応するはずなので正座して待とうと思います。

docker-compose.ymlの作成

version: '3'  
services:  
  vue_app:  
    build: .  
    ports:  
      - 1234:8080  
    volumes:  
      - .:/app  
    stdin_open: true  
    tty: true  
    command: /bin/sh  

コンテナーのビルド

docker-compose build  

コンテナーの起動

docker-compose up -d  

docker psコマンドを叩くとコンテナーが起動しているはず。

$ docker ps  
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES  
9fcc61e05285        dockapp_vue_app     "docker-entrypoint.s…"   2 minutes ago       Up 2 minutes        0.0.0.0:9000->9000/tcp   dockapp_vue_app_1  

コンテナーに入る

docker exec vue_app sh  

vueプロジェクトの作成

コンテナーに入るとプロンプトが変わるので、vueコマンドを叩いてプロジェクトを作成します。

vue create vue_app  

3系のvue cliをインストールしているのでcreateを利用します(2.x系だとinit webpack hogeだった)。特にこだわりがなければエンターを連打。しばらくすると・・・

  Successfully created project vue_app.  
  Get started with the following commands:  

 $ cd vue_app  
 $ npm run serve  

となり、準備完了です。

vueプロジェクトの起動とアクセス

コンテナー上でフォルダを移動してnpm runします。

cd vue_app  
npm run serve  

正常に起動したらhttp://localhost:1234/にアクセスする。

上記のようなページが表示されたら環境構築が完了です。

記事が少しでもいいなと思ったらクラップを送ってみよう!
22
+1
@webmaster909の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする