TECHNOLOGY
- Nuxt.js/Vue.js

2023.10.27

ポートフォリオサイトをNuxt3でJamstack化してみた【GitHub Actions編】

こんにちは、中谷です。

前回【Nuxt×WP REST API編】を書きましたが、今回はWordPressのリニューアルのGitHub Actions編に入ります！

要件

サーバー	Xserver
CI/CD ツール	GitHub Actions
ヘッドレスCMS	WordPress(REST API)
フロントエンド	Nuxt3
Node	v18.4.0

SSG 静的ジェネレート

さて、Nuxtの動的サイトは完成しましたが、これをレンタルサーバーにFTPアップロードできる静的ファイルにする必要があります。

静的ファイル化すればアクセス時に余計なAPI通信が発生しなくて済むのでページを高速表示することができます。

ローカルでnpm run generateをすれば.output配下に静的ファイル群が生成されます。

が！しかし、htmlファイルが生成されて成功したかと思いきや、動的ページを検証ツールのネットワークタブで調べてみるとAPIリクエストが飛んでいるではないか！
動的ページをリロードするとエラーになるなどの事象も発生。

このままではちゃんと静的化されていないので、Nuxt.js 3で動的ルーティングのFull static generationをするを参考にnuxt.config.tsに追記していきます。

import axios from 'axios'

export default defineNuxtConfig({
  hooks: {
    // slugページのGenerate
    async 'nitro:config'(nitroConfig) {
      if (nitroConfig.dev) {
        return
      }

      // データをFetch
      async function fetchData(apiUrl: string, perPage: number) {
        try {
          // ページ総数を取得
          const response = await axios.get(apiUrl)
          const totalPages = Number(response.headers['x-wp-totalpages'])

          // 毎ページごとのデータを返す
          const dataList = []
          for (let page = 1; page <= totalPages; page++) {
            const pageResponse = await axios.get(`${apiUrl}?per_page=${perPage}&page=${page}`)
            dataList.push(...pageResponse.data)
          }
          return dataList
        } catch (error) {
          console.error('Error fetching data:', error)
          return []
        }
      }

      // Fetchしたデータのパスを配列にする
      function getPages(name: string, pageRoutes: string[], perpage: number) {
        const pageArray = []
        let pageNum = 1
        if (pageRoutes.length % perpage > 0) {
          pageNum = pageRoutes.length / perpage + 1
        }

        for (let page = 1; page <= pageNum; page++) {
          if (page !== 1) {
            pageArray.push(`/${name}/page/${page}`)
          }
        }
        return pageArray
      }

      // カスタム投稿タイプの全ページをFetch
      async function fetchAndProcessData() {
        const photoList = await fetchData('https://manage.shalcan.com/wp-json/wp/v2/photo', 10)
        const newsList = await fetchData('https://manage.shalcan.com/wp-json/wp/v2/news', 10)
        const artList = await fetchData('https://manage.shalcan.com/wp-json/wp/v2/art', 10)

        const photoRoutes = photoList.map((photo) => `/photo/${photo.id}`)
        const photoPages = getPages('photo', photoRoutes, 36)
        const newsRoutes = newsList.map((news) => `/news/${news.id}`)
        const newsPages = getPages('news', newsRoutes, 10)
        const artRoutes = artList.map((art) => `/art/${art.id}`)

        const pageRoutes = photoRoutes
          .concat(photoPages)
          .concat(newsRoutes)
          .concat(newsPages)
          .concat(artRoutes)

        return pageRoutes
      }

      if (nitroConfig.prerender?.routes === undefined) {
        return
      }

      // すべてのページURLの配列を渡す
      nitroConfig.prerender.routes = await fetchAndProcessData()
    },
  },
})

これで再度generateするとAPIリクエストが発生せず、完全に静的化されました！

ポイント

nitroConfig.prerender.routes = await fetchAndProcessData()

ここですべての動的ページURLの配列を渡すことで完全な静的ジェネレートができました。
[‘/photo/1′,’/photo/2′,’/art/1′,’/photo/2’]的な感じですね。

静的GenerateするとAPIレスポンスをファイルにまとめた_payload.jsonが各ページごとに生成されます。
ページアクセス時にAPIを読むかわりにローカルの_payload.jsonを読ませることで高速表示することができます。

検証ツールで違いを確認してみてください。

※ちなみにいろいろやった結果アーカイブページのpage/hoge/page/[slug].vue以外はnitroConfigに渡さなくても静的化できるようになってて謎でした。
とりあえず動作がおかしくなるページだけnitroConfigに渡す形でもいい気がします。

GithubActionsを動かす

Nuxt側の準備が整ったので次はCI/CDツールのGitHub Actionsを使っていきます。

GitHubActionsとは

GitHubのイベントをトリガーにして様々な処理を行うことができるサービスです。
今回はGitHub上でビルドやFTPアップロードなどを自動で行う仕組みをつくります。

今回やりたいことはこの２つです。

GitをPushしたらActionsを動かす
WordPress側でActionsを動かせるようにする

PushしたらActionsを動かす

GitHub側の準備

GitHubのsettingsにてFTP情報を設定します。

Secrets and variablesタブからActionsを選択して、アップロード先のサーバー情報を入力します。

FTP_USERNAME
FTPサーバのアカウント名
FTP_SERVER
FTPサーバのホスト
FTP_PASSWORD
FTPサーバのパスワード

Xserverの管理画面に行けばFTP情報が載っています。

ローカルファイルでの対応

まずはmainブランチをPushしたときにGitHubでCI/CDが動くようにします。

ルートに.github/workflowsフォルダを作成してワークフローを構成するYAMLファイルを作成します。

push.ymlとしていますが名前はなんでもいいです。

.github/workflows/push.yml

name: Node.js CI

on:  # トリガー
  push:
    branches: ["main"]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.4.0]

    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - name: npm install # パッケージをインストール
        run: npm install
      - name: generate # SSG
        run: npm run generate

      - name: List output files
        run: ls -la dist/ # ファイルリストを表示

      - name: Deploy via FTP⏫
        uses: SamKirkland/FTP-Deploy-Action@4.0.0
        with:
          server: ${{ secrets.FTP_SERVER }}      # FTPサーバのホスト
          username: ${{ secrets.FTP_USERNAME }}  # FTPサーバのアカウント名
          password: ${{ secrets.FTP_PASSWORD }}  # FTPサーバのパスワード
          server-dir: /hogehoge.com/public_html/ # アップロード先のリモートパス
          local-dir: ./dist/ # ローカルのアップロードしたいフォルダのパス

このワークフローの流れとしては

mainブランチにpushされたらActionsを動かす
Node.jsのv18.4.0を使用する
npm install
npm run generate
ファイルリストを表示
XserverにFTPアップロード

これでPushされたらアップロードする仕組みができました。

実際にPushをして動くかどうか確認してみてください。

このようにGitHubの管理画面のActionsタブからビルドの状況を見ることができます。

ちなみにロリポップサーバーはFTPにIPアクセス制限がかかっていて今回の目的には使えませんでした。

Xserverでの注意点

XserverではREST APIのアクセス制限があります。

これをOFFにしないとGitHubからAPIの取得ができないので注意してください。

WordPress側からActionsを動かす

WordPressで記事や写真を投稿したらActionsを動かしたいと思ったのでこちらも設定を行います。

ローカル側

github/workflowsフォルダにYAMLファイルを作成します。

.github/workflows/save.yml

name: After saving wordpress

on:  # トリガー
  repository_dispatch:
    type: after_saving_wordpress

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.4.0]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
      - name: npm install # パッケージをインストール
        run: npm install
      - name: generate # SSG
        run: npm run generate

      - name: List output files
        run: ls -la dist/ # ファイルリストを表示

      - name: Deploy via FTP⏫
        uses: SamKirkland/FTP-Deploy-Action@4.0.0
        with:
          server: ${{ secrets.FTP_SERVER }}      # FTPサーバのホスト
          username: ${{ secrets.FTP_USERNAME }}  # FTPサーバのアカウント名
          password: ${{ secrets.FTP_PASSWORD }}  # FTPサーバのパスワード
          server-dir: /hogehoge.com/public_html/ # アップロード先のリモートパス
          local-dir: ./dist/ # ローカルのアップロードしたいフォルダのパス

GitHub側

管理画面でGitHubトークンを取得します。

Settingsページのサイドメニュー下部の「Developer settings」をクリックします。

今までのトークンはclassicとなり、Fine-grained tokensが新しく出来ていたのでこちらの解説をします。

Fine-graind tokens

きめ細やかなアクセス権の制御ができるセキュリティの観点が向上したトークンです。

Beta版となっていますが、現在はこちらの使用が推奨されているのでこちらを使いましょう。

右上のGenerate new tokenで新規作成します。

Expirationはとりあえず更新がめんどいので90日にしますが、30日にしておいた方がセキュリティ上はよさそうですね。

今回使用しているリポジトリを選択します。

PermissionsのRepository permissionsを開いて、Contentsの項目でRead and writeを選択。
GithubActionsを動かしたいだけなのでこれを変更するだけでOK。

トークンを発行したら使用するのでコピーしてメモっておきましょう。

WordPress側

記事を公開したタイミングでデプロイしてもいいのですが、写真を複数アップロードしたかったのでWordPressの管理画面にフックの実行ボタンをつけたいと思いました。

ここではウェブスタジオTANIさんの記事を参考にさせて頂きます！
WordPress＋Nuxt(SSG)＋GitHub Actionsでレンタルサーバーに自動デプロイする方法

※ちなみにリンク先には実行ボタンのほか、WordPressの記事を投稿した段階で自動でデプロイできるようにする方法も載っているのでチェック！

WordPressテーマでおなじみfunctions.phpに以下を追記します。

/* -------------------------- */
/* GitHub ActionsのHookを実行 */
/* -------------------------- */
function dispatch_github_actions() {
  $token = 'xxxxxxxxxxxxxxxxxxxx'; // トークンを設定
  $url = 'https://api.github.com/repos/{User}/{Repository}/dispatches'; // repos/ユーザー名/リポジトリ名/dispatches
  $headers = [
    'Authorization: bearer ' . $token,
    'Accept: application/vnd.github.v3+json',
    'User-Agent: after_saving_wordpress',
    'X-GitHub-Api-Version: 2022-11-28'
  ];
  $data = [
    'event_type' => 'after_saving_wordpress',
    'client_payload' => [
      'unit' => false,
      'integration' => true
    ]
  ];

  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
  curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
  curl_setopt($ch, CURLOPT_HEADER, true);
  curl_setopt($ch, CURLOPT_POST, true);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_exec($ch);
  curl_close($ch);
}

/* -------------------------- */
/* GitHub ActionsへのHook実行を管理画面に追加 */
/* -------------------------- */
add_action('admin_menu', 'custom_menu_page');
function custom_menu_page() {
  add_menu_page(
    'GitHub Actions',
    'GitHub Actions',
    'manage_options', // WPのアカウント権限を変えたい場合はここを変更する
    'custom_menu_page',
    'add_custom_menu_page',
    'dashicons-admin-generic',
    30 // メニュー項目の表示位置
  );
}
function add_custom_menu_page() {
  if ( !current_user_can( 'manage_options' ) ) { // WPのアカウント権限を変えたい場合はここを変更する
    wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
  }

  echo '<div class="wrap">';
  echo '<h2>GitHub Actionsフック実行画面</h2>';

  if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty( $_POST['run'] ) && $_POST['run'] === 'run') {
    dispatch_github_actions();
    echo "GitHub Actionsのフックが実行されました。";
  } else {
    echo '<form method="post" action="">';
    echo '<button type="submit" name="run" value="run">実行を開始</button>';
    echo '</form>';
  }
  echo '</div>';
}

これでActionsがWordPress側から実行できるようになりました。