🚘

【Vue3】GitHub Pagesのデプロイだけでなくビルドも自動化する

2023/03/22に公開

GitHub

GitHub Pagesって便利ですよね〜無料ですし！

GitHub Pagesをご存知ない方へ

GitHub Pagesとは、、、

GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイルを直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。
https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages

つまり、GitHubのリポジトリからウェブサイトを公開できるってことです！

使ったことがない人は今すぐ使ったほうがいいです。
もちろん作り方も公式がドキュメント整理してくれています。

こちらを参考にぜひGitHub Pagesライフをスタートさせてください！

私はそんなGitHub Pagesをつかってポートフォリオサイトを開設しています。

なんですが、毎回ローカルでビルドして、ビルドした資源をGitHubにあげていました。
Webページのデプロイ自体はGitHubが自動でやってくれるんですが、手動ビルドの一手間が煩わしかった。。

そこで少し試したらビルドも自動でやってもらえる方法があったので整理しておきます。

ビルド自動化の方法

0. Vue3のプロジェクトを作成

以下を参考にVue3のプロジェクトを作成します。

1. Pagesの設定画面をひらく

Settingsタブを開き、左の一覧からPagesを選択します。
画像中央の「Build and deployment」が対象の設定項目です。

2. Build and deploymentを「GitHub Actions」に変更する

Sourceのプルダウンをタップし、「GitHub Actions」を選択します。

選択すると使用するworkflowをきかれます。
今回はBuild and Deploymentがデフォルトで使用しているActionsにならい、jekyllを選択しました。

Build and DeploymentのデフォルトActions

Actionsタブをひらくと「pages-build-deployment」という名のActionsが存在します。
これがデフォルトでPagesをデプロイしているActionsです。

3. workflowのymlファイルを編集する

workflowを選択すると「.github/workflows/jekyll-gh-pages.yml」が作成されます。

注目するのは以下2箇所です。
1つ目はブランチの指定。以下の記載ではmasterブランチにpushされた場合にこのActionsが実行されます。master以外のブランチでもActionsを起動したい場合はここを編集しましょう。
今回はここは変更しませんでした。

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

2つ目はこちら。ここではビルドジョブが定義されています。
ここにvueのビルドコマンドを追加して、ソースをpushすると自動でvueのビルドもしてもらえるようにします！

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Build with Jekyll
        uses: actions/jekyll-build-pages@v1
        with:
          source: ./
          destination: ./_site
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1

変更内容は以下です。

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Pages
        uses: actions/configure-pages@v3
+     - run: npm ci
+     - run: npm run build
      - name: Build with Jekyll
        uses: actions/jekyll-build-pages@v1
        with:
-         source: ./
+         source: ./dist
          destination: ./_site
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1

変更内容を補足しますね。

+     - run: npm ci
+     - run: npm run build

ここでは、"npm ci"でnode_moduleを用意し、”npm run build"でvueのビルドを実行しています。
ちなみに、”npm i”ではなく、"npm ci"を使用している点を気をつけてください。
参考：https://docs.npmjs.com/cli/v9/commands/npm-ci

      - name: Build with Jekyll
        uses: actions/jekyll-build-pages@v1
        with:
-         source: ./
+         source: ./dist

ここではビルド資源の場所を変更しています。”npm run build"を実行すると「./dist」配下に資源が作成されます。その作成された資源がデプロイ対象となるので、パスを変更しています。

「vue.config.js」でデプロイ先を明示的に指定しました。

vue.config.js

module.exports = {
  outputDir: 'dist',
  assetsDir: './',
  publicPath: './',
}

以上で準備は完了です！！

4. masterブランチに資源をpush

あとはmasterブランチに資源をpushするだけです！
pushするとActionsが走り、自動でvueのビルド→デプロイまで実施してくれました！

さいごに

これでビルドの一手間から解放されました。めでたしめでたし。
ActionsはCI/CDツールと呼ばれるもので、ビルドだけでなくテストの自動化などさまざまなことができます。
CI/CDはこれからの時代に欠かせない知識となります。
私自身も今後もActionsの勉強を続けていこうと思います！！ではまた。