プロジェクトデプロイ

これまでの章での改良を経て、私たちが作成した TaskHub プロジェクトの機能は非常に充実しました。今、最後の一歩を踏み出します：それをローカル開発環境から本番サーバーへと移行します。

エンタープライズ級の導入では、コードが異なる環境（テスト、本番）で自動的に設定を切り替え、かつ読み込み速度が極めて速いことを保証する必要があります。

環境変数管理：一つのコードで、複数の環境で実行

実際の開発では、API アドレスや一部の設定は開発環境と本番環境で異なります。

Vite はデフォルトでサポートしています.envファイル。

プロジェクトのルートディレクトリに2つのファイルを作成します：

.env.development（ローカル開発）

VITE_API_BASE_URL=http://localhost:3000/api
VITE_APP_TITLE=TaskHub (Dev)

.env.production（本番環境）

VITE_API_BASE_URL=https://api.taskhub.com
VITE_APP_TITLE=TaskHub

説明：

  • Vite では変数は必ずVITE_で始まる必要があり、そうすることでクライアントコードに公開されます。
  • コード内ではimport.meta.env.VITE_API_BASE_URLを使用してアクセスします。

ビルド最適化：究極の読み込み速度

プロジェクトに Vue Router や Pinia などのライブラリを導入すると、ビルドで生成されるindex.jsは非常に大きくなります。「分割」と「圧縮」によって最適化する必要があります。

分割戦略（手動チャンク）

修正するvite.config.jsサードパーティのライブラリを独立したJSファイルにビルドし、ブラウザのキャッシュを活用します。

例

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // vue 関連ライブラリをまとめてビルド
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          // その他のサードパーティライブラリ（今後導入する axios や echarts など）
          // 'utils-vendor': ['axios'],
        }
      }
    }
  }
})

Gzip 圧縮設定

プラグインをインストール：npm install -D vite-plugin-compression

例

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    // ...
    viteCompression({
      threshold: 10240, // 10kb を超えるファイルのみ圧縮
      algorithm: 'gzip',
      ext: '.gz'
    })
  ]
})

自動デプロイ（CI/CD）

最も人気のあるGitHub Actionsを例にします。コードを GitHub にプッシュすると、自動でビルドし、GitHub Pages やあなたのサーバーにデプロイしてくれます。

Workflow スクリプトの作成

プロジェクトのルートディレクトリに作成します.github/workflows/deploy.yml：

name: Deploy TaskHub

on:
  push:
    branches: [ main ] # 监听 main 分支的推送

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4

      - name: Install and Build 🔧
        run: |
          npm install
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: dist # 打包产物目录
          branch: gh-pages # 部署到这个分支

Docker コンテナ化の実装（上級）

会社がコンテナクラウドを利用している場合、必要になるのはDockerfileです。これにより、TaskHub があらゆるサーバー上でまったく同じ実行環境で動作することが保証されます。

ルートディレクトリに作成しますDockerfile：

# 1. 使用 Nginx 镜像作为基础
FROM nginx:alpine

# 2. 将打包后的 dist 目录复制到 Nginx 的静态资源目录
COPY dist/ /usr/share/nginx/html/

# 3. 复制自定义 nginx 配置（解决单页面应用路由 404 问题）
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

TaskHub プロジェクト全体のロードマップまとめ

ここまでで、あなたはゼロから始めて、Vue 3 (JavaScript) + Tailwind v4に基づくエンタープライズ級の実践プロジェクトを完成させました：

  1. アーキテクチャ層：Vite + Tailwind v4 + Vue Router + Pinia。
  2. ロジック層：Composition API + カスタム Composables の再利用。
  3. パフォーマンス層：shallowRef + v-memo + ビルド分割。
  4. エンジニアリング層：環境変数 + CI/CD 自動デプロイ。

プロジェクト全体のディレクトリ構造：

src/
├── assets/          # 静态资源
├── components/      # 高复用原子组件 (Header, Input, Item, Filter)
├── composables/     # 自定义逻辑钩子 (useLocalStorage, useNotification)
├── router/          # 路由配置与权限守卫
├── stores/          # Pinia 状态仓库 (TaskStore)
├── views/           # 页面级组件 (Dashboard, Login)
├── App.vue          # 全局容器与页面过渡动画
└── main.js          # 项目入口

関連コマンド：

# 安装依赖
npm install

# 本地开发
npm run dev

# 生产打包
npm run build
その他の拡張