Vite+Vue3のSPAをGitHub Pagesで公開する

Vue3の練習として、すべて無料のAPIを使って天気予報Webアプリを作成しました。
SPAでサーバーサイドのない簡単なアプリなので、GitHub Pagesでさくっと公開してしまおうと思ったところ、少々詰まったので備忘録として書いておきます。

この記事は2026年6月11日時点の情報です。

手順

1. Vite+Vue3を使ってプロジェクトを作成する
2. npm run devでプロジェクトが問題なく動くことを確認する
3. GitHubにリポジトリを「公開」で作成し、リモートリポジトリとしてプロジェクトと紐づける
4. リポジトリ名をプロジェクトの「vite.config.js」「package.json」に記述する
5. npm run buildする
6. GitHubのリポジトリに「node_modules」「dist」フォルダを含めてpushする
7. リポジトリの「Setting」→「Pages」と選択し、「GitHub Actions」を使ってデプロイを設定する
8. 数秒〜数分でデプロイ完了

今回は、詰まった部分である手順4と7について詳しく解説します。

手順4：リポジトリ名をプロジェクトの「vite.config.js」「package.json」に記述する

例えば、「test-project」というリポジトリを作成したとします。
その場合は、上記2つのファイルにそれぞれ以下のように記述します。

vite.config.js

// base: の行を追加
export default defineConfig({
  base: '/test-project/',
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

package.json

// build:の行を書き換え
"scripts": {
　"dev": "vite",
　"build": "vite build --base /test-project/",
　"preview": "vite preview"
},

この状態でnpm run buildすれば、ビルド後に生成されるdist内のファイルで、既にリポジトリ名が入った状態でビルドできます。デプロイ前に書き換えるなどの必要がありません。

手順7：リポジトリの「Setting」→「Pages」と選択し、「GitHub Actions」を使ってデプロイを設定する

Settingを選択する

左のメニューからPagesを選択する

Build and deploymentのSourceから「GitHub Actions」を選択します。

スクリーンショットを撮り忘れてしまったのですが、GitHub Actionsを選択した後、HTMLの方を選択してテンプレワークフローを作成します。

そのワークフローymlファイルの記述のうち、pathの部分にdistフォルダを指定します。

static.yml

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: 'dist' // ここ
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v5

ymlファイルをCommitしたら、数秒〜数分待てばデプロイが完了します。
デプロイが完了すると、リポジトリ右メニューのDeploymentsに完了チェックがつきます。完了したらページが公開されています。

カスタムドメインなどを設定していなければ、https://<yourname>.github.io/test-project/というURLでアクセスできるはずです。

参考URL

おわりに

Vue3のWebアプリを自分で公開するのは初めてだったので、どこがいいか迷ったのですが、サーバーサイドを動かす必要がないページだったので、GitHub Pagesにしました。

HTML/CSSのみのページなどであれば、普通にブランチからのデプロイでもいけるようです。今回はdistのところを見なさいよと設定しないといけないので、GitHub Actionsを使いました。（というよりもブランチからのデプロイだとどうしてもうまくいかなかったのでActionsに切り替え、パス指定の方向にしました）

Vite+Vue3で作成したフロントエンドアプリを公開したい方、同じように詰まってしまった方の手助けになれば幸いです！