DockerでVue.js+TypeScript開発環境を構築する #Docker

概要

Docker上でVue.jsの開発ができるようにする手順です。
Vue-Cliでプロジェクト作成する場合、TypeScriptやSCSS、Vuexなどを追加できるので便利です。

GitHubのリポジトリにUPしていますので、興味のある方はご参照ください。
https://github.com/kai-kou/vue-js-typescript-on-docker

手順

Dockerファイルの作成

> mkdir 任意のディレクトリ
> cd 任意のディレクトリ
> vi Dockerfile
> vi docker-compose.yml

Dockerfile

FROM node:10.8.0-stretch

RUN npm install --global @vue/cli

WORKDIR /projects

docker-compose.yml

version: '3'

services:
  app:
    build: .
    ports:
      - "8080:8080"
    volumes:
      - ".:/projects"
    tty: true

設定ファイルが準備できたらDockerコンテナを作成・実行して入ります。

> docker-compose up -d
> docker-compose exec app bash

Vueアプリの作成

vue create コマンドを実行するとPlease pick a preset と聞かれますので、Manually select features を選択して、必要なものを指定します。
ここではすべての機能を選択、設問は初期選択のままとしました。

コンテナ内

> vue create app

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM

ライブラリなどのインストールもされますので、環境によってはだいぶ時間がかかります。
お茶でも飲んで、まったりしながらお待ちください🍵

動作確認

プロジェクトが用意できたら、立ち上げてブラウザからアクセスしてみます。

コンテナ内

> cd app
> yarn serve

> open http://localhost:8080

やったぜ。

それでは良きVue.js開発ライフを^^

Vue.js+TypeScriptで開発するときの参考記事まとめ
https://qiita.com/kai_kou/items/19b494a41023d84bacc7