Zenn
😆

DockerでVite+vue.js+Typescript動作環境構築

2022/04/18に公開
Docker
TypeScript
Vue.js
frontend
Vite
tech

今回はDockerを使ってVite+vue.jsの開発環境を構築していきます！

Viteとは

ViteはVue CLI等に比べ高速で動作するビルドツールです。

  • 開発時、バンドルが不要。
  • HMRの統合があるため、修正した内容が即座に反映させれます。
    この２点が一番の利点だと思います。
    ちなみに今回はVue.js環境をつくりますが、Reactでも使えるようです。

Vite環境構築

それでは構築をしていきましょう！
まずは任意の場所にフォルダを作成します。

mkdir DockerVite
cd DockerVite

Dockerfileとdocker-compose.ymlファイルと作成します！

touch Dockerfile
touch docker-compose.yml

Docker構築

Dockerfileを編集していきます。

Dockerfile
FROM node:12
# install app
RUN apt update \
    && apt install -y git
WORKDIR /vite-projects

次にdocker-compose.ymlを編集していきます

docker-compose.yml
version: '3'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/vite-projects
    command: sh -c "cd vite-projects && npm run dev"
    ports:
        - "3000:3000"

VUE.js環境構築

Viteを使ってVue.js環境を構築しましょう！

docker-compose build 
docker-compose run node npm create vite@latest

そうすると色々と聞かれるかと思います。
最初はプロジェクト名を聞かれます。
入力したらEnterで進みます。

Creating network "dockervite_default" with the default driver
npx: installed 6 in 3.187s
? Project name: › vite-projects

次に言語を聞かれます。
今回はVue.jsをいれるのでvueを選択します。

? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
❯   vue
    react
    preact
    lit
    svelte

次にTypescriptを入れたいので、vue-typeを選択します。

? Select a variant: › - Use arrow-keys. Return to submit.
    vue
❯   vue-ts

すると一瞬でプロジェクトが作成されるかと思います！！
dockerでviteを導入している場合、vite.config.tsファイルを下記のように修正が必要です。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
  host: true
  }
  })

ここまでできたら下記コマンドを実行します！

docker-compose run node npm --prefix ./vite-projects install

インストールができたら確認実行できるか確認してみます！

docker-compose up -d

http://localhost:3000/にアクセスして下記画面が表示されれば成功です！！

終わり

最後まで見てくださりありがとうございました！！
HMRはやっぱり便利ですね！

ツイッターもやっているのでぜひフォローもお願いします！
https://twitter.com/TatsuyaFujisaw6

Discussion