Vue3(Vite)をGitHub Pagesにデプロイする

概要

ローカルで開発していたものをどこかにデプロイしたくなったときに、フロントエンドについてはGitHub Pagesが無料で使えそうだったのでデプロイまでやってみる。

前提

ViteベースのVueプロジェクトはできていること。

手順

公式サイトを参考にした

Vueビルド設定

vite.config.js に base を設定する。

設定する内容は '/<REPO>/’ なので、今回だとRecipeaseリポジトリが対象なので以下の内容を設定する。

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// <https://vitejs.dev/config/>
export default defineConfig({
  base: '/Recipease/',  // ★追加
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

GitHub Pagesの設定

デプロイ対象のリポジトリを開く
[ Settings ] > [ Pages ] をクリックする。
Build and deploymentのSourceから [ GitHub Actions ] を選択する。
テンプレートから Static HTML の Configure をクリックする。
ワークフローが作成されるので Vue のビルドコマンドを追加し成果物のパスを指定する。
サンプルがここにあるので持ってくる。今回はbranchesに好きなブランチを指定する。

# 静的コンテンツを GitHub Pages にデプロイするためのシンプルなワークフロー
name: Deploy static content to Pages

on:
  # デフォルトブランチを対象としたプッシュ時にで実行されます
  push:
    branches: ['develop']

  # Actions タブから手動でワークフローを実行できるようにします
  workflow_dispatch:

# GITHUB_TOKEN のパーミッションを設定し、GitHub Pages へのデプロイを許可します
permissions:
  contents: read
  pages: write
  id-token: write

# 1 つの同時デプロイメントを可能にする
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # デプロイするだけなので、単一のデプロイジョブ
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # dist リポジトリのアップロード
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

これで設定完了で、対象ブランチが更新されるたびにビルドとデプロイが自動で実行されるようになる。

今回の例だと以下のURLでデプロイされたものを確認できる。

Recipease

ただ、今回画面は見えるけれどバックエンド側はローカル環境を向いているのでバックエンドとのやりとりがあるところはエラーになる。

GithubpagesのActionsで環境変数の利用

APIキーや認証トークンなどの機密情報は、環境変数を利用して設定することができる。

なのでけっしてGithub上にはこれらの機密情報を直接あげないこと！

[ Settings ] >[ Environments ] >[ github-pages ] をクリック
Environment secretsに環境変数をkey-value形式で登録今回は仮で「VITE_APP_KEY」と「VITE_APP_URL」を登録
Actionsのワークフローで環境変数を利用

- name: Build
    run: npm run build
    env: 
      VITE_APP_API_KEY: ${{ secrets.VITE_APP_API_KEY }}
      VITE_APP_URL: ${{ secrets.VITE_APP_URL }}

サンプルとしてフロント側のコードサンプルものせておく。

const xxxUrl = import.meta.env.VITE_APP_URL 
const xxxApiKey = import.meta.env.VITE_APP_API_KEY

備考

「Deploy from a branch」と「GitHub Actions」の違いについて

GitHub Actionsは、2022の7月にリリースされた新機能。

それまでは、

コードの修正
ビルド実行
任意のブランチにpush

といった、ローカルでビルドまで実行してからpushした対象ブランチに対して、デプロイしていた。

これが、GitHub Actionsではローカルでのビルドが不要になる。

トラブルシューティング

Github Actionsが失敗する。

まず第一にログを見る。

[ Actions ] タブから確認可能。

typescriptの型エラーでデプロイが失敗していることもあるので、一度ローカルでビルドしてエラーがないことを確認してかpushするのがいいかも。

おわりに

お金をかけることなく“”完全無料””で、静的サイトを公開することができた。

個人開発かつ個人利用のものにお金はあまりかけたくなかったのでとてもありがたい

この調子で次はバックエンド側も無料で公開できないか調査してみる。