Zenn
🔻

【Hello World⑪】Vue @ JavaScript

2024/04/13に公開
Docker
JavaScript
Vue.js
Vite
tech

VueでJavaScriptのWebアプリを作ります

Windows11のDocker環境上で
JavaScript言語のVueでシングルページアプリケーション(SPA)のアプリを作ります。

環境

Windows 11 Pro 23H2
WLS 2.1.5.0（Ubuntu 22.04.1 LTS）
Docker Desktop 4.28.0
Visual Studio Code

①フォルダ・ファイルを作成

以下の構成でフォルダとファイルを作ります。

フォルダ構成
vue
 └─compose.yaml   # コンテナ作成時の指示を記載したファイル

以下のコマンドでフォルダ・ファイルを作成します。

PowerShell
mkdir vue             ;`
cd vue                ;`
New-Item compose.yaml ;`
code  compose.yaml

ファイルに以下の内容を記載します。

compose.yaml
services:
  web:
    image          : node:18.18.2
    container_name : vue
    working_dir    : /app
    command        : bash -c "yarn dev --host"
    volumes:
      - ./app:/app
    ports:
      - "5173:5173"

②Vueのプロジェクトを作成

以下のコマンドを実行し、Vueのプロジェクトを作成します。

PowerShell
docker compose run --rm -it web `
bash -c 'yarn create vite ./ -- --template vue && npm update'
作成されるフォルダ・ファイルの構成と「package.json」の内容
フォルダ構成
vue
 ├─app
 │  ├─.vscode
 │  ├─node_modules
 │  ├─public
 │  ├─src
 │  │   ├─assets
 │  │   ├─components
 │  │   ├─App.vue        # main.jsから呼び出されるファイル
 │  │   ├─main.js        # index.htmlから呼び出されるファイル
 │  │   └─style.css
 │  ├─.gitignore
 │  ├─index.html         # Webブラウザで読み込まれるファイル
 │  ├─package-lock.json
 │  ├─package.json
 │  ├─README.md
 │  └─vite.config.js     # 設定ファイル
 └─compose.yaml
package.json
{
  "name": "app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.0"
  }
}

③設定ファイルを変更

設定ファイル（vite.config.js）にホットリロード（プログラムを変更すると直ぐにアプリに変更が反映されるしくみ）を設定します。

PowerShell
code app/vite.config.js
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: true,
    watch: {
      usePolling: true
    }
  }
})

④Vueのコンテナを起動

以下のコマンドを実行し、Vueのコンテナを起動します。

PowerShell
docker compose up -d

⑤Vite + Vueの画面が表示されることを確認

http://localhost:5173に接続して、Vite + Vueの画面が表示されていることを確認。

⑥画面表示内容を修正

HelloWorld.vue（Vite + Vueの画面内容を記述しているvueファイル）の下の方に
<p>Hello World Vite + Vue on Docker!</p>を追記します。

PowerShell
code app/src/components/HelloWorld.vue
HelloWorld.vue
省略
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+ <p>Hello World Vite + Vue on Docker!</p>
 </template>
省略

⑦Hello Worldが表示されることを確認

http://localhost:5173に接続して、Hello Worldが表示されていることを確認。
※設定ファイル（vite.config.js）にusePolling: trueを設定しているので、HelloWorld.vueの内容を変更するとコンテナの再起動やページのリロードをしなくても、自動的に表示されている内容が変わります。

Discussion