この記事はKMC Advent Calendar 15日目の記事です。(2日遅れです。すみません……)
14日目の記事はnonyleneさんのRenovate で Flux 配下の Helm Chart をアップデートするでした。
KMC45期のortです。スマホゲームと競馬を生きがいにしています。
元々使っていたオルタというハンドルネームを、本名をもじった形にしたのがortなので、正しい読み方はおそらく「おるた」なのですが、大体「おると」と呼ばれています。
最近は自分でも「おると」と名乗ることの方が多いです。
さて、さっそくですが、このサイトの記事一覧をご覧ください。
あれ……
こいつ、この記事以前には何も書いていない……？
と思った、そこの貴方！！
はい、正解です。
これが初めて書いた記事です。
というか、この記事を書くためにこのサイトを作りました。
12月7日
勢いでアドベントカレンダーに登録しちゃったものの、ブログサービスのアカウントを持っておらず、掲載する媒体がない状態。
しかも書く内容のアイデアもない。せや！
今から個人サイト作って、その記録を記事にしてしまおう！！
……と、まぁそれっぽいアイデアが浮かんでしまったので、今回は表題にある通り、microCMS+Next.js+GitHubActions+Conoha WINGでブログを作ったお話をします。
こういった記事を書くのは初めてですので「何か文章おかしくね？」と思っても、どうかお手柔らかに……
ちなみにデザインには一切手を付けていないので、できあがったものは質の悪いメモ帳です。これを改修するネタだけで、あと数年はアドベントカレンダーが書けるな！
実際の手順はmicroCMSさんのチュートリアルに則って行いました。
https://blog.microcms.io/microcms-next-jamstack-blog/
わかりやす……
上のチュートリアルがとても丁寧なので、特に苦しむことなくできました。
強いて詰まったところを挙げるならば、チュートリアル内の手順5で、以下のような記述がありましたが、Next.js13以降ではLinkタグ内にaタグを入れることはできないらしく、<a></a>を消して対応しました。
<Link href={`/blog/${blog.id}`}>
<a>{blog.title}</a>
</Link>
ここまではよかったんですよ。ここまでは(作業時間：約2時間)
問題は次でした。
できあがったworkflowがこちらになります。
name: Deploy FTP CI
on:
push:
branches: [ main ]
repository_dispatch:
branches: [ main ]
workflow_dispatch:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
env:
API_KEY: ${{ secrets.API_KEY}}
strategy:
matrix:
node-version: [16.x]
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: Install NPM package
run: npm ci
- name: Install sass
run: npm i sass
- name: Build Next.js App
run: npm run build --if-present
- name: Export Next.js App
run: npm run export
- name: Deploy FTP
uses: SamKirkland/FTP-Deploy-Action@4.3.1
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD }}
protocol: ${{ secrets.FTP_PROTOCOL }}
port: ${{ secrets.FTP_PORT}}
server-dir: ${{ secrets.FTP_REMOTE_ROOT }}
local-dir: ./out/
dangerous-clean-slate: trueあー。そーゆーことね。完全に理解した(例の画像)
嘘です。
GitHub Actionsは初めて触ったので、全部が手探りでした。めっちゃ改行してるのも、そうしないと全然読めなかったからです。
トリガーイベントには、push, repository_dispatch, workflow_dispatchを設定しています。
microCMSはwebhookを外部サービスに通知してくれるのですが、GitHub Actionsではrepository_dispatchに対応しているので、これを設定しています。
他2つはそれぞれpushに反応する、GitHubから手動で走らせられるトリガーイベントです。
runs-on: ubuntu-latest
env:
API_KEY: ${{ secrets.API_KEY}}ローカルで開発していた時はmicroCMSのAPIキーは.envファイルで管理していました。
.gitignoreによってgitの管理下から外れていますから、そのままではビルドできません。気づくのに1時間かかりました……(小声)
なのでSecretsにAPI_KEYの名前で登録して使えるようにしています。(これで管理はあっているのか……？)
その他の必要な環境変数(FTP関連)も同様にしています。
これで記事の更新等のトリガーに反応して、github上のNext.jsアプリケーションをビルド。それをサーバーの対象ディレクトリにFTPでアップロード。という仕組みが完成しました。
これ書くのだけで1日使いました。見通しが甘すぎる。
ブログを作るのは初めての経験だったので、苦労はしましたが、かなり達成感がありました。って言いたいんですけど、さすがにこのメモ帳状態だと……
デザインって大事ですね。ここからぼちぼち改修していきます。
来年はもっといいサイトになってるといいね！
駄文でしたが、ここまで読んでくださりありがとうございました！アドベントカレンダーの他の記事もぜひ読んでみてください！