Docker環境でVue3+TypeScriptの環境を構築する

docker-compose.yaml

version: '3'
services:
  nodejs:
    build: .
    volumes:
      - .:/srv/front/src/app
    ports:
      - "8080:8080"
    tty: true

Dockerfile

FROM node:lts-alpine3.12

WORKDIR /srv/front/src/app

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

CMD ["/bin/sh"]

docker環境の起動

$ docker-compose build
$ docker-compose up -d

vue アプリケーション作成

• dockerにログインする

$ docker exec -it <docker コンテナID指定> ash

• Yarnをインストールするかの有無でインストールするにする

vue create /srv/front/src/app # vue create example
?  Your connection to the default yarn registry seems to be slow.

• Vue3を指定する

Vue CLI v4.5.8
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 

• Yarnを指定する

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

• サーバーの起動

 # cd example
 # yarn serve

動作確認

• ブラウザからアクセスすると下記のエラーが発生する

Invalid Host header

• 解決方法は下記のファイルを作成して再度サーバーを起動する

cat > vue.config.js <<EOF
module.exports = {
    devServer: {
        port: 8080,
        disableHostCheck: true,
    },
};
EOF

typescriptをインストール

• 下記のコマンドを実行する

 # vue add typescript

• 全部Yesを選択する

? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Convert all .js files to .ts? Yes
? Allow .js files to be compiled? Yes
? Skip type checking of all declaration files (recommended for apps)? Yes

再度サイトにアクセスする

• typescriptもプラスした状態でサイトにアクセスできるようになった。

• main.jsを指定していたmain.tsファイルに変換になっていた

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')