docker-compose + vue.js + typescript 環境構築 #TypeScript

元々知っているvue.jsに
最近仕事で使うdocker + typescriptを合わせた環境構築を行ってみた

基本参照はここかなり見ました。

os ubuntu 18.04

docker-compose用のyml生成

cd your/dev/dic
touch docker-compose.yml

docker-compose.yml

version: '3'
services:
  node:
    image: node:12.7.0-alpine
    volumes:
      - .:/vuejs

nodeのversion指定 + マウント先はvuejsに指定

コンテナ内に入る

入った後にcli起動して初期インストール

docker-compose run node sh
cd vuejs
yarn global add @vue/cli

cli終わったら
vueのプロジェクトを作成

vue create .

vue/cil経由で環境構築(注意点有)

対話型で処理を進めて行くのですが、please pick a presetのときに
Manually select features を選んでください
(そうじゃないとtypescript入らない)

Vue CLI v4.1.1
? Generate project in current directory? Yes


Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◉ TypeScript
 ◉ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
 ◉ E2E Testing

作る環境によって必要なmoduleが違うでしょうが
とりあえず今回は全部チェック入れ

後は細かい設定聞かれますがわからないやつは基本ググってほしい
たぶんtest toolを jestとかフォーマット設定まともにしておけば
大丈夫そう

Vue CLI v4.1.1
? Generate project in current directory? Yes
Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vu
ex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode
, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server set
up for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS 
Modules are supported by default): Sass/SCSS (with node-sa
ss)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select,
 <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, et
c.? In dedicated config files
? Save this as a preset for future projects? No

コンテナに戻るとプロジェクトが生成されているはず

dockerで動かす

対象ディレクトリ直下にdockerfileを作成

dockerfile

FROM node:12.7.0-alpine

WORKDIR /myapp

COPY package.json ./
COPY yarn.lock ./

RUN yarn install

docker-compose.yml

version: '3'
services:
  view:
    build: .
    command: yarn run serve
    volumes:
      - .:/myapp
      - /myapp/node_modules
    ports:
      - "8000:8080"

docker-compose up -d

後はlocalhost:8000でサイトが開けるようになっているはずです！