Vue3の開発環境をDocker上に構築した際の覚え書き

毎度、覚え書きばっかりですが。

もともとPHPはそこそこ使えて仕事でWebアプリも作ったりしていたんですが、やっぱり最近の #駆け出しエンジニア さんにも負けないよう勉強しないと付いていけないと思い、今月に入ってからボチボチ調べていました。

X (旧Twitter)ではつぶやいていたんですが、Pythonはあのインデント縛りのコーディングやその他にもどうにも受け入れられない環境のため、忌避していました。
じゃぁどうするのよ、、ということで白羽の矢を立てたのが JAVAScript です。

このNoteの最初の頃にも書いたように、私が最初にホームページを作ったのは20世紀時代だったので、当時も動くHPということで、JSスクリプトを公開しているHPからコードをダウンロードして自分のHPに組み込んだりしてみたんですが、どうにも動きがおかしい。。。かといってコードを眺めてもブラウザ依存の記述も多くて、だんだんイヤになっちゃったんですね。そこで調べたらPHPというのがあるぞというのを知って、その後はPHPにのめり込んで行ったのですが、その話はまた今度。

すでに四半世紀も時間は過ぎ、、、JSも整備されて、よし、じゃぁこれからはJSだ！と思ったんですが、そのJS自身も TypeScript やら フレームワークやらと進化していて、どこから手をつければいいのかネット上をうろうろしたり ChatGPT先生に尋ねたりで、その解として Vue.js を覚えようとなりました。
(前置きが長すぎ、、、)

ではまずは開発環境を整えようと思ったところ、普段使いの Macbook Pro にいろいろインストールするのもイヤだなぁと思ったらこれまた Docker というモノがある。。
このDockerの話も長くなりそうなので割愛😆
やっと本題に入ります。。。

dockerもよくわからないし、必要な node.js もわからないし、ChatGPT先生に尋ねても Vue2 の環境やらそもそも間違っているやらで、でもおかげで周辺知識も少しは身についたということで、以下に記します。

VisualStudioCode を使うことを前提としています。
まずディレクトリ構成

project
├─ app
│   └─ vue_study (実行後生成される)
├─ docker-compose.yml
├─ run.sh
└─ project.code-workspace (VScodeのワークスペースファイル)

docker-compose.yml

version: '3.8'
services:
  vue3:
    image: node:20-slim
    container_name: vue_study
    volumes:
      - ./app:/app
      - ./run.sh:/run.sh
    ports:
      - "5173:5173"
    command: /bin/sh -c "chmod +x /run.sh && /run.sh"
    environment:
      - TZ=Asia/Tokyo
      - NODE_ENV=development

run.sh

#!/bin/sh

workProj=vue_study	# 作業ディレクトリを指定

# package.jsonが存在しない場合、Vueプロジェクトを初期化
if [ ! -f "/app/$workProj/package.json" ]; then
	cd /app	# appディレクトリに移動

	# create時の質問は テンプレートを適用
 	npm create vite@latest $workProj -- --template vue
fi

cd /app/$workProj	# 作業ディレクトリに移動
npm install			# 依存関係のインストール
npm run dev			# 開発サーバーの起動

これで、VSCodeの docker-compose.yml を右クリック「compose up」でインストールしてくれます。
で、 localhost:5173 にアクセスすれば Vite + Vue の画面が表示される。はず。。。？
なぜだ？？
またいろいろ調べて、この環境はdocker上では動かないといういうことがわかり、以下のファイルに以下のコードを追記する必要があるとのこと。
/app/vue_study/vite.config.ts

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

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

Vite + Vue

これでやっとプログラムを作る環境ができました😊
3連休はこれだけで終わりましたorz

もっと俺の方がうまく構築できるぜ！という先輩方、私の今の知識ではこれが精一杯なので、どうかお手柔らかに。。