🔖

GitHubというBaaSで掲示板作ってみたPart1 (GitHub Pages編)

2022/12/02に公開約4,100字

はじめに

Xbit Advent Calendar 2022の2日目を担当する高橋です。
最近はらくしふ労務管理というプロダクトで主にフロントエンド開発をしています。

本記事はPart2まであります。
Part2はXbit Advent Calendar 2022の22日目に書きます。

概要

GitHubを利用して掲示板を開発します。
GitHubにコードを上げるという意味の利用ではなく、GitHubのAPI,Pages機能などを利用して掲示板を開発します。

GitHubというBaaS

ところでGitHubというBaaS(Backend as a Service)を知っていますか?
このBaaSで掲示板を作ってみようと思います。
Backend as a Serviceの略称です。読み方はきっと「ばーす」だと思います。
Backendの機能、例えばアカウント管理,データストア管理,サーバーサイド処理などを担ってくれるようなものです。

GitHubではrepositoryという掲示板群とそれに内包されるissueという掲示板を作成することができ、commentというコメントを投稿することができる機能があります。
これらは上記のBaaSの機能のうちデータストア管理,サーバーサイド処理にあたります。
さらにGitHub Pagesという静的サイトのホスティング機能もあります。

使用技術

フロントエンドフレームワークにReact、UIライブラリとしてMantine UIを選択しました。デプロイツールにgh-pagesというものを使います。

手順

  1. GitHub Pagesで静的サイトを公開してみる
  2. Reactを立ち上げてGitHub Pagesにデプロイしてみる (Part1ここまで)
  3. Apollo Clientを導入してGraphQL APIを呼び出してみる
  4. 掲示板を実装してみる

GitHub Pagesで静的サイトを公開してみる

GitHub Pages用のリポジトリを作る

好きな名前で新規のpublicリポジトリを作ります。
本記事では message-boards というリポジトリ名にします。

一旦適当に公開してみる

[repo-name][user-name] を適宜置き換えてください

$ mkdir [repo-name]
$ cd [repo-name]
$ git init
$ touch index.html
$ echo "<h1>Hello World</h1>" >> index.html
$ git add .
$ git commit -m "Add index.html"
$ git branch -M main // default branchが`master`なら実行
$ git remote add origin git@github.com:[user-name]/[repo-name].git
$ git push -u origin main

次にGitHub Pagesの設定をします。
リポジトリのページの、Setting>Pagesから以下のように設定してください。(後でまた変えます)

しばらく(数秒〜数十秒?)待ってから https://[user-name].github.io/[repo-name] にアクセスするとサイトが見れるようになっていると思います。

Reactを立ち上げてGitHub Pagesにデプロイしてみる

create-react-appでReactを立ち上げる

$ cd [repo-name]
$ rm index.html // create-react-appの邪魔になるから削除
$ npx create-react-app . --template typescript

最後に Happy hacking! と出たらReactの立ち上げは完了です。

Custom WorkflowでGitHub Pagesにデプロイする

ではビルドしてデプロイしてみます。
ReactのデプロイにはGitHub PagesのCustom Workflowを利用します。
理由は二つあり、「Reactのビルド成果物をコミットする必要がなくなる」のと、「GitHub GraphQL APIのための環境変数を利用できる」ためです。

GitHub Pagesの設定を行います。
Setting>Pages から SourceにGitHub Actionsを選択してください。

次に以下のファイルを追加してcommitします。
mainブランチにpushするだけで自動でデプロイされます。

.github/workflows/deploy-pages.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: ["main"]

permissions:
  contents: read
  pages: write
  id-token: write

# Actionsが重複した時に先に走っているものをキャンセルしてくれる
concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/configure-pages@v2
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Build
        run: npm ci && npm run build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: "./build"
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

またしばらく待つとReactの初期ページが見れるようになってると思います。

Part1はここまでです。
Reactを書ける下地が整ったので、Part2ではがっつり書いていきます。

さいごに

株式会社クロスビットでは、デスクレスワーカーのためのHR管理プラットフォームを開発しています。
一緒に開発を行ってくれる各ポジションのエンジニアを募集中です。

https://x-bit.co.jp/recruit/
https://herp.careers/v1/xbit/requisition-groups/2e95da36-0045-469f-b92e-c648f701ed5a
https://note.com/xbit_recruit

Discussion

ログインするとコメントできます