⚡

Vue 3 を GitHub Pages へデプロイ [GitHub Actions]

2022/12/19に公開

Vue.js

概要

Vue 3 でプロジェクトを作成する場合、アプリケーションとしてビルドするケースと CDN を使用するケースの 2 種類があります。
それぞれを GitHub Pages へデプロイする方法を紹介します。

Vue 3 アプリケーション

アプリケーションとして作成し、ビルドした結果を GitHub Pages へデプロイします。

アプリケーションの作成

> npm init vue@latest
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

> cd <your-project-name>
> npm install

ビルドツールには Vite が設定されています。

<your-project-name>/package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
  },
}

GitHub リポジトリ (https://github.com/<USERNAME>/<REPO>) の main ブランチへプッシュします。
以下 <your-project-name> を含めてコミットしたものとして記述します。
含めない場合は <your-project-name> を無視してください。

GitHub Pages

GitHub 上で静的ページをホストできます。
以前はブランチへコミットしたものをデプロイしていたのですが、今年の夏頃にカスタムワークフローからもデプロイできるようになりました。
ソースコードと成果物を 2 重にコミットするのも整合性がとれなくなったりして微妙なのでカスタムワークフローからデプロイします。

リポジトリの Settings > Pages で Source: GitHub Actions を設定します。
そうするとテンプレートが表示されるので Static HTML の Configure をクリックします。

GitHub Actions

ワークフローが作成されるので Vue のビルドコマンドを追加し成果物のパスを指定します。

ワークフローテンプレート

.github/workflows/static.yml

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true

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@v3
      - name: Setup Pages
        uses: actions/configure-pages@v2
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload entire repository
          path: '.'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

.github/workflows/static.yml

       - name: Setup Pages
         uses: actions/configure-pages@v2
+      - run: npm ci
+      - run: npm run build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
           # Upload entire repository
-          path: '.'
+          path: '<your-project-name>/dist'
       - name: Deploy to GitHub Pages
        id: deployment

Vue ビルド設定

GitHub Pages はベース URL が / ではないので Vite の Public Base Path を https://<USERNAME>.github.io/<REPO>/ になるように設定します。
（https://<USERNAME>.github.io/ へデプロイする場合は省略できます）

vite.config.js を編集するか package.json のビルドコマンドを変更します。
（npm run dev はそのままにしておきます）

<your-project-name>/package.json

   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build --base=/<REPO>/",
     "preview": "vite preview",
     "test:unit": "vitest --environment jsdom --root src/",

CDN を使用

CDN を使用する場合はビルドは不要なのでそのまま GitHub Pages へデプロイします。
ただし、単一ファイルコンポーネント（SFC）の構文は使用できません。

静的ページ作成

docs フォルダに直接 index.html 等を作成して Vue を読み込みます。

docs/index.html

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

GitHub Pages

リポジトリの Settings > Pages で Source: Deploy from a branch と Branch: main /docs を指定したら終わりです。

概要

Vue 3 アプリケーション

アプリケーションの作成

GitHub Pages

GitHub Actions

Vue ビルド設定

CDN を使用

静的ページ作成

GitHub Pages

Discussion