ビルドして公開 — Vercel にデプロイ

この章では、ローカルで開発したブログプロジェクトをビルドし、無料でインターネット上にデプロイして、公開アクセス用のリンクを取得する方法を学びます。

本番用パッケージをビルドする

開発時に実行するとnpm run dev、Vite はローカルで開発サーバーを起動し、ホットリロードに対応します。

ただし、デプロイ時に必要なのは最適化された小容量のファイルです——これが本番ビルドです。

$ npm run build

実行すると、プロジェクトのルートディレクトリにdist/フォルダが生成されます：

dist/
├── index.html                # 入口 HTML（资源引用已被替换为构建后的路径）
├── assets/
│   ├── index-Df3aBc9x.js    # 打包后的 JS（代码已压缩、tree-shaking）
│   ├── index-Gh7jKl2m.css   # 打包后的 CSS（已提取、压缩）
│   └── ...                   # 其他资源
├── posts.json                # public 目录的文件原样复制
└── favicon.ico               # 其他静态资源

いくつかの重要な変更点に注意してください：

• ファイル名にハッシュが付いています（例：Df3aBc9x）、内容が変わるとハッシュも変わるため、ブラウザのキャッシュ制御に使用されます
• コードは圧縮と Tree-shaking が施されています（未使用のコードを削除します）
• JS と CSS は独立したファイルに分割されます
• public/ディレクトリの内容はそのままルートディレクトリにコピーされます

ビルド結果をプレビューするには、次のコマンドを実行しますnpx vite preview、ローカルで本番モードのサービスが起動し、本番環境をシミュレートします。

プロジェクトを GitHub にプッシュする

デプロイプラットフォーム（Vercel など）は通常、Git リポジトリからコードを取得して自動的にビルドするため、まずプロジェクトを GitHub にアップロードする必要があります。

ステップ1：GitHub リポジトリを作成する

GitHub サイトの右上にある + ボタン → New repository をクリックし、以下を入力します：

• Repository name：blog-app
• Public に設定（無料デプロイ）
• Initialize this repository with a README にはチェックを入れない（ローカルにすでにプロジェクトファイルがあるため）

ステップ2：ローカルで Git を初期化してプッシュする

$ cd blog-app
$ git init
$ git add .
$ git commit -m "初始化博客项目"
$ git branch -M main
$ git remote add origin https://github.com/你的用户名/blog-app.git
$ git push -u origin main

プッシュが成功したら、GitHub のページを更新すると、すべてのプロジェクトファイルが表示されます。

プッシュ前に確認：.gitignoreファイルに以下が含まれていることnode_modulesとdist。node_modules はアップロードしないでください（`npm install` で復元できます）。`dist` はビルドプラットフォームが自動生成します。

Vercel にデプロイする

VercelVercel は現在最も人気のあるフロントエンドデプロイプラットフォームで、Vue/Vite プロジェクトをゼロ設定でサポートします。

デプロイの手順

1. アクセスし、vercel.comGitHub アカウントで登録/ログインします
2. 「New Project」→「Import Git Repository」をクリックし、blog-app リポジトリを選択します
3. Vercel はプロジェクトが Vite（Vue）であることを自動的に認識するため、設定は一切不要です。
4. 「Deploy」をクリックし、数十秒待つとビルドが完了します。
5. デプロイが成功すると、次のようなリンクが取得できます：https://blog-app.vercel.app

自動デプロイ

以降、ローカルでコードを変更して GitHub にプッシュするたびに（git push）、Vercel は自動的に以下を実行します：

1. リポジトリに新しいコミットがあることを検出する
2. 最新のコードを取得して `npm install` を実行する
3. `npm run build` を実行してビルドする
4. 本番環境にデプロイする

プロセス全体で操作は一切不要です。プッシュするだけで公開されます。

カスタムドメイン（任意）

Vercel は.vercel.appの無料サブドメインを提供しています。独自のドメインをバインドすることもできます。

1. Vercel プロジェクトの Dashboard → Settings → Domains で
2. 自分のドメインを入力します（例：blog.example.com）
3. 指示に従って DNS プロバイダーで CNAME レコードを追加し、次の宛先を指定しますcname.vercel-dns.com
4. DNS の反映を待つと（通常数分から数時間）、Vercel が自動的に SSL 証明書を取得します。

次の学習ステップ

あなたは Vue3 のコアスキルをすでに習得しました。以下は、目標別のステップアップのロードマップです：