うちの高専のプログラミング部のHPを作っている話
ご挨拶
はじめまして！🖐️
もっくんと申します。
インターン先の会社に技術記事書いてみるといいよって言われたので書いてみます…
春から高専5年生になる高専生です！
現在就活中……
作っているもの
技術構成
新しい技術が大好きなのでこのような構成になっています...！
今回始めてbiomeやlefthookなどを使ってみました！🤜
- Next.js (App Router)
- TypeScript
- Mantine
- sass
- biome
- lefthook
- GitHub
- GitHubActions
- microCMS
- Vercel
なぜ(この技術で)作ったのか
- プログラミング部のHPが無かった
- 就活でポートフォリオとして使えるかなと思って
- チームで開発してみたかった
- Vercelだとチームでも無課金で開発できる
- biomeを触ってみたかった
- 等々…
工夫したところ
Next.jsでのホームページ制作はいろんな人がわかりやすい記事を書いていると思うので割愛します。
今回は、私が制作中に工夫したところや、テンション上がった↑↑↑ところを書いていきます...！🔥
Branch protection rulesを追加してmainブランチを守る
mainブランチを守ることは重要です
このプロジェクトでは以下のルールを追加しています
- pr無しのマージを禁止
- 1人以上のAprpveが必要
- マージ前にciが通っている必要がある
- 最新のmainをpullしていないとマージ不可
lefthookで安全なコミットを実現
lefthookを導入して以下のことを行っています
- commit時
- biomeの実行
- cSpellの実行
- tscの実行
- comment lintの実行 (merge時はスキップ)
GitHubActionsの活用
GitHubActionsでのチェックも行っています
- push時
- biomeの実行
- tscの実行
- vercel CLIでのデプロイ
- main以外のpush時
- vercel CLIでのブランチ単位のデプロイ
- 該当PRにvercelのURLをコメント
Vercelで無課金チーム開発
VercelのデプロイをGitHubActionsで行うことで、Vercelに課金せずに開発
VercelCLIをworkflowに登録しているのでvercelプロジェクトメンバーでなくても、デプロイができます
# Vercel CLIのインストール
- name: Install Vercel CLI
run: |
npm install -g vercel
# Vercelへのデプロイ
- name: Deploy to Vercel
run: |
vercel --token ${{ secrets.VERCEL_TOKEN }} --prod --confirm
また、ブランチごとのデプロイもGitHubActionsで実現しています。
main以外のブランチにpushした時にはそのブランチ単位でのデプロイを行っています
PRのコメントに下のようにURLがコメントされます
このようにしてvercelのデプロイ先URLを持ってきてPRにコメントしています
# Vercelへのデプロイ
- name: Deploy to Vercel
run: |
echo "VERCEL_RESPONSE=$(vercel --token ${{ secrets.VERCEL_TOKEN }} --confirm)" >> $GITHUB_ENV
# PRへのコメント
- name: Comment to PR
run: |
gh pr comment ${{ github.event.pull_request.number }} --body "Deploy to here : $VERCEL_RESPONSE"
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
レスポンシブ対応
レスポンシブ対応にはmantineのAppShellを使いました
AppShellを使うことで比較的かんたんにサイドバーなどを実装できました
カルーセルなどもmantineのコンポーネントを使い、実装しています。
各ページにOGPを設定
TOPページ・お知らせ詳細ページ・作品詳細ページ
それぞれにOPGを設定しました
このような細かいところは普段意識していなかったので実装していて楽しかったです
APIキーが露出しないように自前で定義
クライアントコンポーネントではenvファイルのapikeyが露出してしまうため、自前でライブラリ付属の関数をラップしました
今後の課題＆やりたいこと
- 4月に向けて本番環境の準備
- 何を使ってデプロイするのか考え中…
- まだ実装できていないページの実装
- 部員紹介などなど….
参考
Discussion