【備忘録】Vite + Vueでのフロントエンド開発の第一歩

前書き

Vueによるフロントエンド開発を勉強中に、同じくVueを触っている友人からViteの存在を教えてもらったので試してみることに。

この記事にはVite + Vueの環境構築の手順を備忘録として残しておきたいと思います。

Viteについては下記の記事が参考になりました。

開発環境

Ubuntu 20.04.5
Docker 23.0.5
VScode

①作業フォルダ、各種ファイルを用意する

最初のフォルダ構成は以下に示すとおりとする。

vite-demo
- Dockerfile
- docker-compose.yml

作業フォルダの準備

//フォルダ名は任意
$ mkdir vite-demo

ファイルの準備

$ cd vite-demo
$ touch Dockerfile
$ touch docker-compose.yml

//以降はVScodeを起動してファイルを編集する
$ code . 

②Dockerfile, ymlファイルの編集

Dockerfileを編集

Node.jsのサイトからバージョンを確認する。

次に、適切なImageを選ぶ。

この記事ではnode:18を使っていく。

Dockerfile

FROM node:18

WORKDIR /app

ymlファイルの編集

docker-compose.yml

version: '3'
services:
  node:
    build: .
    ports:
      - 8080:8080 #ポート番号は任意。viteのデフォルトに合わせるなら'5173:5173'
    tty: true
    volumes:
      - .:/app

コンテナの名前はnode、ポート番号は8080とした。
必ずしも上記の通りである必要はない。

③コマンドを実行してプロジェクトを作成

ビルドを実行する。

$ docker compose build

プロジェクトを作成する。

方法①

$ docker compose up -d
$ docker compose exec node bash
//node上のconsoleに遷移
$ npm create vite@latest

方法②

$ docker compose run node npm create vite@latest

方法①と②のどちらでも可。この記事では①で実行した場合で進める。

viteプロジェクト作成の流れ

最初に、プロジェクトを作成するかどうか聞かれる。

次に、プロジェクト名を指定する。デフォルトではvite-projectとなっている。

フレームワークの選択では、Vueを指定する。

諸々の設定が終わると、指定したプロジェクト名のフォルダが新たに追加されていることが確認できる。

プロジェクトの作成完了時のフォルダ構成

vite-demo
- vite-project
- Dockerfile
- docker-compose.yml

④プラグインを追加する

上記サイトを参考に、コマンドを実行する。

$ npm add -D @vitejs/plugin-vue

プラグイン追加時のフォルダ構成

vite-demo![スクリーンショット (139).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2804632/209b2610-993f-bbfa-dce1-78660aa09c56.png)

- node_modules
- vite-project
- Dockerfile
- docker-compose.yml

⑤各種ファイルを編集する

ymlファイルにcommandを追記する。

docker-compose.yml

version: '3'
services:
  node:
    build: .
    ports:
      - 8080:8080
    tty: true
    volumes:
      - .:/app
    # 追記
    command: sh -c "cd vite-project && npm run dev"

vite.config.tsを編集する。(リンク参照)

vite-project/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,
    port: 8080,
  },
})

⑥サーバーを起動して、アクセスする

$ docker compose up -d

http://localhost:8080にアクセスする。

画像のようなページに飛ぶことを確認できたら成功！

終わりに

　Dockerでの環境構築はそれなりにやっているつもりですが、まだまだ十分に理解できていない節があるので、毎回コマンドを実行するときは緊張感が拭えません(笑)

フロントエンド開発は自分のデザインセンスの無さに絶望するばかりですが、これから少しづつ磨いていければと思います。