GitHub Actionsのビルド&デプロイに時間がかかってしまいます。解決方法はありますか？
GitHub Actionsのビルド&デプロイに時間がかかってしまう要因として、以下が考えられます。
GitHub ActionsのCPU性能とI/O性能が影響している場合
GitHub ActionsのCPU性能とI/O性能に関しては、変更が難しいものになりますが、以下のような制限があります。
generateのinterval設定が影響している場合
Nuxt.jsの場合、nuxt.config.jsのgenerateプロパティでintervalを設定している場合は、intervalの値によってはgenerateの時間が増加します。
APIリクエスト数が影響している場合
SSGの場合、generateで各ページを生成する度にAPIリクエストを行うため、1ページを生成する際のAPIリクエスト数が多いと、生成するページが増える度にAPIリクエスト数が増えてしまい、generateの時間にも影響が発生します。
以下のページで、SSGでgenerateする際にAPIリクエスト数を減少させるサンプルを紹介しておりますので、ご参照ください。
APIリクエストのレスポンス速度が影響している場合
APIのレスポンス速度が遅い要因として以下が考えられます。
- APIのキャッシュ設定が有効になっていない
- APIレスポンスのデータサイズが大きい
APIのキャッシュ設定が有効になっていない
APIのエンドポイントにキャッシュを設定することでAPIを高速に配信できます。
エンドポイントのキャッシュ設定については以下のページをご参照ください。
APIレスポンスのデータサイズが大きい
必要のない項目などはAPIの後処理のホワイトリスト設定などで項目を絞りましょう。
また、例えば、Kurocoのコンテンツ定義でWYSIWYGエディタを使用している場合に、テキストを貼り付けた際、文字の装飾がインラインのスタイル属性に記述されてしまうことが原因でデータが大きくなってしまう場合があります。
例：テキストをコピー＆ペーストした際に文字の装飾が引き継がれてしまい、インラインのスタイル属性に記述される
Wordファイル、PDFファイル、外部サイト等からテキストをコピーすると、スタイルを引き継いでしまいます。一度、別のテキストエディタに貼り付けて文字の装飾を外す方法があります。もしくは、貼り付けのショートカットキーを以下の方法で行うと、文字の装飾を引き継がずにテキストを貼り付けることができます。
Windowsの場合
Shift + Control + V
Macの場合
Shift + Command + V
Artifactsのファイルサイズが影響している場合
GitHub Actionsでgenerateが完了した際に生成されるArtifactsのファイルサイズが大きい場合、デプロイの時間が増加してしまいます。 以下にファイルサイズを削減する方法をご案内いたします。
静的なリソースファイルをKurocoFilesに移行する
KurocoFilesとは、管理画面から更新ができるファイルアップロード機能です。
画像などの静的なリソースファイルをKurocoFilesに移行することで、ソースファイル全体のファイルサイズを削減できます。
また、KurocoFilesにアップされているファイルはCDNキャッシュされているため、高速に配信されます。
参考
HTMLファイルのファイルサイズを減らす
構築しているサイトがSSGの場合、HTMLファイルのファイルサイズを減らすことでArtifactsのファイルサイズを削減できます。
また、APIから配信されるデータにWYSIWYGエディタの内容が含まれる場合、テキストにインラインのスタイル属性が記述されている場合があります。そのスタイル属性もHTMLに含まれてしまうため、HTMLファイルのファイルサイズ増加の影響になってしまいます。
SVG Spriteをファイル化して読み込む
アイコンの表示にSVG Spriteを利用しており、SVGのコードをHTMLのソースに記載している場合、ビルドした際に生成されるページの全てにSVGのコードが記載されてしまうため、ページのサイズが肥大化してしまいます。
その場合は、SVG Spriteのコードをsvg-sprite.svgとして読み込むことでHTMLのファイルサイズを削減することが出来ます。
例
<svg>
<use xlink:href="/assets/svg/sprite.svg#icon-hoge"></use>
</svg>
ページの内容を非同期処理で表示する
構築しているサイトがSSGの場合、サイト全体のページ数が多いとビルドの際に生成されるファイルの量も増えてしまいます。
一覧系ページの2ページ目以降のページを静的に生成している場合、axiosを利用し非同期処理にて2ページ目以降を表示することで生成するページ数を少なくできます。
サポート
お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。