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

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

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

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

https://qiita.com/inagacky/items/ad424821653067c99253

# 開発環境
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のサイトからバージョンを確認する。

https://nodejs.org/ja

次に、適切なImageを選ぶ。

https://hub.docker.com/_/node/

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

```docker:Dockerfile
FROM node:18

WORKDIR /app
```

## ymlファイルの編集
```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プロジェクト作成の流れ

最初に、プロジェクトを作成するかどうか聞かれる。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2804632/c65cb7d4-cef4-1167-8945-d2a7b1e03129.png">

次に、プロジェクト名を指定する。デフォルトでは`vite-project`となっている。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2804632/1208f451-cf97-7cf4-8a12-4ac215706a4c.png">

フレームワークの選択では、`Vue`を指定する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2804632/4856fa30-c009-70b6-8e37-6344e5e192f4.png">

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

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

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

# ④プラグインを追加する

https://ja.vitejs.dev/plugins/

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

```
$ 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を追記する。

```yml: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`を編集する。([**リンク参照**](https://ja.vitejs.dev/config/server-options.html))

```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**](http://localhost:8080)にアクセスする。

<img width="400" height="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2804632/510b0c8b-0777-4d1e-2d14-0b8752e8838d.png" alt="">

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

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

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