「Glitch Sync From GitHub」を使ってみた（mainにPushでGlitchに自動更新する方法）

Node.jsを使ってWebアプリを作成しており、デプロイ先に Glitch を活用しています。本記事では、GitHubの更新が即座にGlitchに反映されるようにする方法をまとめます。

内容

• GitHubにSecretを登録する
• GitHub Actionsを活用する

必要な PROJECT_ID と AUTH_TOKEN を取得し、GitHub に Secret を登録する

にある通りです。

まずはGlitch にアクセスし、「Ctrl＋Shift＋I」で開発者ツールを有効にしてください。

その後、「Network」タブを開いてください
※「Preserve log」と「Disable cache」はチェックを入れなくても大丈夫です

下にある「Tools > Import/Export」を選択

「Import from GitHub」を選択

ここに「username/repository:path」形式で入力して「OK」を押す

「githubImport?projectId=XXX&repo=XXX」となっている部分を探す

• projectId = PROJECT_ID
• authorization = AUTH_TOKEN

それらを GitHub の Secret に登録する

GitHub Actions Workflow

あとは以下のコードを書くだけで、mainブランチにPushした時に自動でGlitchも更新されるようになる

.github/workflows/deploy-to-glitch.yaml

name: Deploy To Glitch
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Deploy To Glitch
        uses: kanadgupta/glitch-sync@main
        with:
          project-id: '${{ secrets.PROJECT_ID }}'
          auth-token: '${{ secrets.AUTH_TOKEN }}'

参考資料

※以下を参考にしましたが、その通りやっても出来ないので注意が必要です。