【GatsbyJS製ブログ】GitHubActionsでブログ更新をサーバに自動デプロイ

2021年8月31日2023年12月5日

今回はGatsby製のブログをGitHub Actionsを使ってGitHubにプッシュした際に自動でレンタルサーバーにデプロイする、という挙動を実装していきます。

「その前にGatsbyの基本について、もう一度知っておきたい」という人はこちらもあわせてお読みください！

あわせて読みたい

【GatsbyJS製ブログ】インストールからブログ立ち上げとGatsbyの構造 GatsbyJS（以下Gatsby）、ご存知でしょうか？Gatsbyは今流行りの静的サイトジェネレーター、といわれるブログやHPを作るためのReactベースのフレームワークです。 Gatsb…

この記事はこんな人にオススメ

Gatsbyを使ってサイトを作っているけど、いちいちビルドしたファイルを送信するのは面倒
GitHubActionsの使い方を知りたい
Gatsbyをサーバーレスではなく、レンタルサーバーにデプロイしたい

GitHubのリポジトリと紐付ける

まずは、GitHubでリポジトリを作成し、ローカルのGatsbyプロジェクト（といっても実際はディレクトリ群）と紐づけます。ここら辺ができているorできる人は読み飛ばしてOKです。あらかじめ GitHubの登録は済ませておいてください。

1．VSCodeでローカルのGatsbyプロジェクトを開く

2．GitHubで新しいリポジトリを作成

すると、下図のような画面が出てくるはずです。赤い囲みは、この後コマンドラインで打っていきます。

3．VSCodeでコマンドラインを開き、コマンド入力

4．紐付け完了

もしcommit&pushしたときに「変更多すぎだよ」みたいなエラーが出たら、一度VSCodeを落として立ち上げ直し、「Source Control」「Open Folder」で開き直すとcommit&pushできたりします。

BearFruitのマスコットキャラ「クマ」がLINEスタンプになりました！

プログラマーの心に刺さる、「プログラミングあるある」。毎日使いたくなること間違いなし！

LINE STORE

クマのプログラミング日記

GitHub Actionsの設定

GitHubにpushしたタイミングで、設定しているワークフローをGitHub Actionsで実行します。

まずは設定ファイルを準備します。

プロジェクトのルートに./github/workflows/というディレクトリを作って、その中にymlファイルを作ります。今回はdeployment.ymlというファイルを作りました。中身は次の通り。

name: Deployment for blog
on:
  push:
    branches:
      - main
jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: 14.x
    - name: Cache dependencies
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-
    - run: npm install
    - run: npm run build --if-present
    - name: deploy to server
      # uses: AEnterprise/rsync-deploy@v1.0
      uses: AEnterprise/rsync-deploy@v1.0.2
      env:
        DEPLOY_KEY: ${{ secrets.SERVER_SSH_KEY }}
        ARGS: "-avzr --delete"
        SERVER_PORT: ${{ secrets.SERVER_PORT }}
        FOLDER: "./public/"
        SERVER_IP: ${{ secrets.SERVER_IP }}
        USERNAME: ${{ secrets.USERNAME }}
        SERVER_DESTINATION: ${{ secrets.SERVER_DESTINATION }}

※　ymlファイルはインデントを揃えないと上手く内容を認識しません。

※　uses: AEnterprise/rsync-deployは２０２３年４月末からv1.0.2にしないとエラーが出るようになりました（rsync-deployのせいではないです。念のため）。詳しくはこちらの記事を参考にしてください。

あわせて読みたい

GitHub ActionsでDebian Stretchを取得するとき404エラーが出る２０２３年５月のある日…ブログを更新しようとしたときに、 Github Actionsの実行、失敗してるぅ… こんな感じのエラーが出るようになりました。簡単な原因だったのです…

1．mainブランチにpushされたときに実行

on:
  push:
    branches:
      - main

2．「runs-on:」で実行する仮想環境を指定してあげます。今回はUbuntuで

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:

3．Node.jsをセットアップ

- uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: 14.x

node-version: 14.xとしていますが、ここはそれぞれのGatsbyがビルドできるnodeバージョンを指定してください。

4．依存関係をキャッシュ（２回目以降のワークフローを高速化する）

 - name: Cache dependencies
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-

5．コマンド実行

    - run: npm install
    - run: npm run build --if-present

「npm install」でpackage.jsonに書いてあるパッケージをインストール。「npm run build –if-present」でGatsbyのサイトをビルド。

6．rsyncを使って今ビルドしたデータとレンタルサーバーを同期

- name: deploy to server
      uses: AEnterprise/rsync-deploy@v1.0
      env:
        DEPLOY_KEY: ${{ secrets.SERVER_SSH_KEY }}
        ARGS: "-avzr --delete"
        SERVER_PORT: ${{ secrets.SERVER_PORT }}
        FOLDER: "./public/"
        SERVER_IP: ${{ secrets.SERVER_IP }}
        USERNAME: ${{ secrets.USERNAME }}
        SERVER_DESTINATION: ${{ secrets.SERVER_DESTINATION }}

「env」以降は環境変数の設定が重要になってきます。

クマ

…出ました、環境変数。いつも雰囲気で設定してエラーを吐かれまくるヤツです。今回もご多分にもれず失敗しまくりました。

まず、前提としてGitHubのSecretsに各変数を格納していきます。見てくれたらわかりますが、公にしたらまずいプライベートな変数情報も含んでいるので、外から見えないようにSecretsに各変数を格納するのがお作法です。GitHubのリポジトリの「Setting」→「Secrets」→「New repository secret」から一つずつ設定していきます。

それでは、各変数について説明していきます。

SERVER_SSH_KEY : SSH接続の秘密鍵です。rsyncはSSH接続を利用するので、レンタルサーバーと公開鍵認証でSSH接続ができるようにしておいてください。秘密鍵の内容は次のコマンドで確認できます。

$ openssl rsa -text < 秘密鍵のパス

秘密鍵のパスは大体「~/.ssh /（秘密鍵）」あたりかなぁと思います。

【躓きポイント①】秘密鍵の内容は以下のものをコピーする。

-----BEGIN RSA PRIVATE KEY-----
…
-----END RSA PRIVATE KEY-----

クマ

私は間のヤツ（…の部分のみ）がプライベートキーと思って、上下の「—–BEGIN RSA PRIVATE KEY—–」「—–END RSA PRIVATE KEY—–」を抜かしていました。ここも含めてください。

SERVER_PORT : SSH接続に利用するサーバーポートです。これは調べれば大丈夫のはず。
SERVER_IP : SSH接続に利用するサーバーIPです。参考までに、ConoHa WING では次の部分で確認できます。

「サーバー管理」→「契約情報」→「サーバー情報」の中にあります。

USERNAME : SSH接続のユーザーネーム。
SERVER_DESTINATION : サーバー側の置きたい場所へのフルパス。

【躓きポイント②】これは私が愚かでしたが、フルパスを間違えていました…。ちゃんとSSH接続してpwdコマンドなどを使って確認しましょう。（私は頭に~/…をつけることで解決しました。）

以上でレンタルサーバーに自動デプロイする環境設定は終了です。

LINEスタンプもぜひご覧ください！

レンタルサーバーのサブディレクトリにデプロイ

これがこの記事でのメインの話です。そもそもサーバー代を節約したい、という動機もあって静的サイトを選ぶケースも多いと思うので、これ以下の話は当てはまるケースが少ないかもしれません。

クマ

逆に当てはまるとしたら、他であまり情報が出てこないので見て損はないかもしれません。

ということで、次のような人向けのお話です。

レンタルサーバーを借りていて、そこにデプロイしたい。
独自ドメインの下にサブディレクトリを作って、そこでブログ運営をしようとしている。

私の場合は、そもそもブログを何種類か作って運営しようと考えていたので、こういう構成になってしまいました。

クマ

それぞれで独自ドメインを取らなかったのは、テーマが違ってもある程度統一感をもたせたかったからです。決してドメイン代をケチったわけではありません。決して。

ともかく！汗。ポイントは次の２点です。

gatsby-config.jsにpathPrefixを加える。
buildの際に–prefix-pathsのオプションを加える。

これは、自動デプロイしなくても（＝buildした後にできるpublicディレクトリの中身を、FTP等でサーバーのサブディレクトリ下に手動であげても）サブディレクトリで運用する際は、同じやり方になります。要はそこをGitHub Actionsにさせるだけです。

1．gatsby-config.jsにpathPrefixを加える。

module.exports = {
  pathPrefix: '/サブディレクトリ',
  siteMetadata: {
　　…

module.exportsの最初に「pathPrefix: ‘/サブディレクトリ’,」を加えます。

2．buildの際に–prefix-pathsのオプションを加える。

普通、ローカルでビルドする際は、以下のコマンドを叩きます。

$ gatsby build

なので、サブディレクトリを含んだ構造にしたければ、ローカルならば、

$ gatsby build --prefix-paths

とすればOKです。しかし、上記のymlファイルでは、

- run: npm run build --if-present

でビルドしているので、そのままでは–prefix-pathsを付けられません。そこで、この「-run: npm run build –if-present」の代わりに次の２つのコマンドを加えます。

name: Deployment for blog
…
    - run: npm install -g gatsby-cli
    - run: gatsby build --prefix-paths
…

まぁ、要は「npm run build」の代わりに「gatsby-cliをインストール→gatsby build –prefix-paths」を実行するだけです。

クマ

これで、GitHubにpushするだけで自動でレンタルサーバーにデプロイできるようになりました！

ちなみに上記の通り、レンタルサーバーはConoHa WING を使っています。コスパがよいので、レンタルサーバーを考えているなら検討してみてください！

ConoHa WINGをチェック！

まとめ

結構な長文になってしまいました。次回は、かねてより興味のあった、SassとCSS Modulesについて開発環境を整えていきます。

ちょっと一息…

最近本格的にCSSの勉強を始めました。

WordPressでもGatsbyJSでも必要な基本的な知識「CSS」…これが奥深い。

クマ

もちろんCSSに関する基本的な知識はあるのですが、引き出しは多くしておきたいものです。

ワンランク上のホームページ、ブログ作成を目指して、特に「これはよかった」というオススメのCSS学習教材の紹介をしていきます。

動画編

Webデザインのオンラインスクールなどは沢山ありますが、数万円〜数十万円するので、なかなかハードルが高いですよね。

そこでオススメなのはUdemy。

このブログでもちょくちょく紹介させてもらっていますが、一つの講座買い切り、というのがありがたいです。

しかも、種類もかなり豊富！GatsbyJSの講座まである、というのは他ではなかなかないです。

そのなかでもオススメのCSSに関する講座を紹介しておきます。

クマ

CSSの講座とかは沢山あるので、「これよさそう！」と思ったものを探すのも楽しいかもしれません。

書籍編

CSSを実践的に書いていくなら、書籍も便利です。

本を片手にコーディング、というのは効率もいいですよね。

こちらもオススメの本を紹介しておきます。

クマ

CSSの基本ができている人が「次のステップに行きたいなぁ…」というときにオススメです。

あわせて読みたい

【GatsbyJS製ブログ】SCSS & CSS Modulesで快適CSS開発環境を作るようやく開発環境が整ってきましたが、まだまだ快適開発環境への欲は尽きません。ということで、Gatsby製ブログをカスタマイズする記事第３弾は、以前より興味津々だっ…

あわせて読みたい

【GatsbyJS製ブログ】Gatsbyの勉強法このブログでは結構Gatsby関係の記事を書いていて、情報発信をしています。もちろん自分でもGatsby製ブログの運営をしています！ですが、Gatsbyは日本語の情報が少な…

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

【GatsbyJS製ブログ】GitHubActionsでブログ更新をサーバに自動デプロイ

GitHubのリポジトリと紐付ける

GitHub Actionsの設定

レンタルサーバーのサブディレクトリにデプロイ

まとめ

tomokichi.90