GitHubというBaaSで掲示板作ってみたPart1 (GitHub Pages編)
はじめに
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というものを使います。
- GitHub
- React https://ja.reactjs.org/
- Apollo Client https://www.apollographql.com/
- Mantine UI https://mantine.dev/
手順
- GitHub Pagesで静的サイトを公開してみる
- Reactを立ち上げてGitHub Pagesにデプロイしてみる (Part1ここまで)
- Apollo Clientを導入してGraphQL APIを呼び出してみる
- 掲示板を実装してみる
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するだけで自動でデプロイされます。
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管理プラットフォームを開発しています。
一緒に開発を行ってくれる各ポジションのエンジニアを募集中です。
Discussion