【Vue.js】アプリをGitHub Pagesにデプロイする方法

GitHub

GitHub PagesにVue.jsのアプリをデプロイした際の記録と解説です。

この記事のゴール

  • Vue.jsアプリをGitHub Pagesにデプロイして動くようにする

前提条件

  • Ubuntu ＋ VS Codeで作業をしています。
  • node.js(18.0以上)インストール済
  • GitHubアカウントを持っている
  • リポジトリのPagesにデプロイします

デプロイの選択肢

GitHub Pagesにデプロイする方法はいくつかあるようですが、ここでは次の２つの方法を扱います。

  • 選択肢１：[docs/]にビルド & プッシュ
  • 選択肢２：[dist/]にビルド & プッシュ & GitHubActions

GitHub公開リポジトリの作成

デプロイ先のGitHubリポジトリを作成します。

公開リポジトリにしておかないと無料版ではPagesの作成ができません。

今回はREADMEを作らない方が楽です。

Vue.jsアプリケーション作成

今回、適当に簡単なものを作成します。

npm init vue@latest

「Project name:」にリポジトリ名を入力したら後の選択肢は全て「No」でOK。

プロジェクトフォルダに入ってモジュールをインストールして開発WEBサーバを起動します。

cd my-ex-github-pages-vue02
npm install
npm run dev

表示されているURLをブラウザで開きます。

では、少し改造していきましょう。

「src/App.vue」を開いて編集します。

<script>～</script> と <template> ～ </template> の箇所だけ編集して上書き保存します。

<script setup>
import {ref} from 'vue'

const text = ref('')

function onInput(e) {
  text.value = e.target.value
}
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  </header>

  <input :value="text" v-on:input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

ブラウザの表示が次のようになっていると思います。

「Type here」と表示されているテキストボックスに入力すると、その直下に入力した文字列がリアルタイムで表示される簡単なものです。

一応、Vue.jsアプリの準備はできました。

GitHubリポジトリへの統合

では、作ったアプリをGitリポジトリにコミットしてから、先程作成したGitHubリポジトリに統合していきます。

まずは、ローカルのプロジェクトフォルダをGitリポジトリにコミットしておきます。

git init
git add .
git commit -m "first commit"

「main」ブランチが作成されていることを確認します。

git branch

先程作成したGitHubリポジトリを紐づけしていきます。

GitHubリポジトリのページからURLをコピーしてきます。

次のコマンドで紐づけます。

git remote add origin https://github.com/macocci7/my-ex-github-pages-vue02.git

プルする前にリベースの設定をしておきます。

git config pull.rebase true

プルします。

git fetch origin
git pull origin main

これでGitHubリポジトリとの統合ができました。

選択肢１：[docs/]にビルド & プッシュ

ここからは作業が分かれます。

まずは、[docs/]フォルダにビルドしてプッシュする方法です。

プロジェクトトップにある「vite.config.js」に次の内容を追記します。

  ,
  base: './',
  build: {
    outDir: 'docs'
  }

ビルドします。

npm run build

「docs/」フォルダが作成されて、その中にビルドファイルが作成されました。

一応、「docs/index.html」を開いて確認してみましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="./favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="module" crossorigin src="./assets/index-dIYC1Voy.js"></script>
    <link rel="stylesheet" crossorigin href="./assets/index-XrQ7uZ9o.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

javascriptとcssの参照先が、デフォルトでは絶対パスになりますが、ここでは相対パスになっていることが確認できます。

では、ビルドファイルをコミットしてプッシュします。

一応、お作法としてブランチ作成＆プルリクエスト方式で行きましょう。

git checkout -b dev#1
git add .
git commit -m "Create docs"
git push origin dev#1

GitHubリポジトリ側でプルリクエストを作成してマージします。

マージが完了したら、リポジトリの「Settings」タブを開いて、サイドメニューから「Pages」を選択します。

「Build and deployment」のセクションで、

「Source」が「Deploy from a branch」になっていることを確認してから、「Branch」のプルダウンで「main」ブランチを選択し、その右側のプルダウンで「/docs」フォルダを選択してから「Save」ボタンをクリックします。

これで公開設定が完了です。

「Code」タブ（リポジトリのデフォルトページ）に移動すると、

「Deployments」の欄に結果が表示されています。

ここのリンクをクリックして詳細を見ます。

「github-pages」の箇所のリンクをクリックしてVue.jsアプリの表示を確認します。

表示されましたね。では動作確認もしてみます。

ローカルで作成した通りに動いていますね。

以降、更新時の手順は次の通りです。

  • Vue.jsアプリ更新＠ローカル
  • テスト＆ビルド＠ローカル
  • コミット＆プッシュ
  • プルリクエスト＆マージ
  • ブラウザ表示確認

選択肢２：[dist/]にビルド & プッシュ & GitHubActions

アプリが完成している状態から、プロジェクトトップフォルダにある「vite.config.js」に次の内容を追記します。

,
base: '/<REPO>/'

<REPO>の部分はリポジトリ名で置き換えます。

保存したら、ビルドします。

npm run build

「dist/」フォルダ内にビルドファイルが作成されていますね。

npmのデフォルトで「dist/」フォルダはgitの管理対象外になっているので、「.gitignore」の「dist」の箇所をコメントアウトして保存します。

では、コミットしてプッシュします。

git checkout -b dev#2
git add .
git commit -m "Repo Pages"
git push origin dev#2

プッシュしたら、GitHub側でプルリクエストを作成してmainブランチへマージしてください。

マージが完了したら、リポジトリの「Settings」タブを開き、サイドメニューの「Pages」を選択します。

「Build and deployment」セクションで「Source」のプルダウンメニューから「GitHub Actions」を選択します。

ワークフローの提案が2択で出てくるので、「Static HTML」の方の「Configure」をクリックします。

ワークフロー定義ファイルの編集画面が表示されるので、最後から４行目あたりの「path」の設定だけを修正します。

▼修正前：

path: '.'

▼修正後：

path: './dist'

修正したら「Commit changes」ボタンをクリックします。

確認ダイアログが表示されるので、ワークフローを実行させるために、「Create a new branch for this commit and start a pull request」を選択してから、「Commit changes」ボタンをクリックします。

mainブランチへのマージを完了させたら、

リポジトリの「Actions」タブを開いて、「Summary」から「Jobs」の「deploy」を選択して、ワークフロー実行結果の確認をしておきましょう。

各セクションを開くと詳細を見ることができます。

特にエラーは無さそうなので、ブラウザで確認してみましょう。

無事デプロイされています。

以降、更新時の手順は選択肢１と同じく次の通りです。

  • Vue.jsアプリ更新＠ローカル
  • テスト＆ビルド＠ローカル
  • コミット＆プッシュ
  • プルリクエスト＆マージ
  • ブラウザ表示確認

今回は、ワークフローをいじって動作確認するのが面倒だったのでローカルでビルドしましたが、ワークフローを修正すれば、プッシュ後にGitHub Actionsでビルド＆テスト＆デプロイすることが可能です。

以上、お疲れさまでした。

コメント

タイトルとURLをコピーしました