この記事は<a href="https://adventar.org/calendars/8005" target="_blank" rel="noopener noreferrer">KMC Advent Calendar</a> 15日目の記事です。(2日遅れです。すみません……) 14日目の記事はnonyleneさんの<a href="https://nonylene.hatenablog.jp/entry/2022/12/14/000000" target="_blank" rel="noopener noreferrer">Renovate で Flux 配下の Helm Chart をアップデートする</a>でした。 <h2 id="h10c32d2bad">初めまして</h2>KMC45期のortです。スマホゲームと競馬を生きがいにしています。 元々使っていたオルタというハンドルネームを、本名をもじった形にしたのがortなので、正しい読み方はおそらく「おるた」なのですが、大体「おると」と呼ばれています。 最近は自分でも「おると」と名乗ることの方が多いです。 さて、さっそくですが、このサイトの記事一覧をご覧ください。 あれ…… こいつ、この記事以前には何も書いていない……？ と思った、そこの貴方！！ はい、正解です。 これが初めて書いた記事です。 というか、この記事を書くためにこのサイトを作りました。 12月7日 勢いでアドベントカレンダーに登録しちゃったものの、ブログサービスのアカウントを持っておらず、掲載する媒体がない状態。 しかも書く内容のアイデアもない。せや！ 今から個人サイト作って、その記録を記事にしてしまおう！！ ……と、まぁそれっぽいアイデアが浮かんでしまったので、今回は表題にある通り、microCMS+Next.js+GitHubActions+Conoha WINGでブログを作ったお話をします。 こういった記事を書くのは初めてですので「何か文章おかしくね？」と思っても、どうかお手柔らかに…… ちなみにデザインには一切手を付けていないので、できあがったものは質の悪いメモ帳です。 <s>これを改修するネタだけで、あと数年はアドベントカレンダーが書けるな！</s> <h2 id="h2220f0ef7d">やったこと</h2><ol><li>microCMSとNext.jsでブログを作成</li><li>GitHub Actionsでレンタルサーバー(Conoha WING)に自動デプロイできるようにした</li></ol><h2 id="hcf83e1357e"> </h2><h3 id="ha2af44c938">1. microCMSとNext.jsでブログを作る</h3>実際の手順はmicroCMSさんのチュートリアルに則って行いました。 <a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/microcms-next-jamstack-blog/</a> わかりやす…… 上のチュートリアルがとても丁寧なので、特に苦しむことなくできました。 強いて詰まったところを挙げるならば、チュートリアル内の手順5で、以下のような記述がありましたが、Next.js13以降ではLinkタグ内にaタグを入れることはできないらしく、&lt;a&gt;&lt;/a&gt;を消して対応しました。<pre><code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Link href={`/blog/${blog.id}`}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a&gt;{blog.title}&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;&nbsp;</code></pre> ここまではよかったんですよ。ここまでは(作業時間：約2時間) 問題は次でした。 <h3 id="h051a53b2d2">2.GitHub Actionsでレンタルサーバー(Conoha WING)に自動デプロイする仕組み</h3>できあがったworkflowがこちらになります。<pre><code>name: Deploy FTP CI


on:
&nbsp; push:
&nbsp; &nbsp; branches: [ main ]
&nbsp; repository_dispatch:
&nbsp; &nbsp; branches: [ main ]
&nbsp; workflow_dispatch:
&nbsp; &nbsp; branches: [ main ]


jobs:
&nbsp; build:


&nbsp; &nbsp; runs-on: ubuntu-latest
&nbsp; &nbsp; env:
&nbsp; &nbsp; &nbsp; API_KEY: ${{ secrets.API_KEY}}


&nbsp; &nbsp; strategy:
&nbsp; &nbsp; &nbsp; matrix:
&nbsp; &nbsp; &nbsp; &nbsp; node-version: [16.x]


&nbsp; &nbsp; steps:
&nbsp; &nbsp; &nbsp; - name: Checkout repository
&nbsp; &nbsp; &nbsp; &nbsp; uses: actions/checkout@v2


&nbsp; &nbsp; &nbsp; - name: Use Node.js ${{ matrix.node-version }}
&nbsp; &nbsp; &nbsp; &nbsp; uses: actions/setup-node@v3
&nbsp; &nbsp; &nbsp; &nbsp; with:
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; node-version: ${{ matrix.node-version }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cache: 'npm'


&nbsp; &nbsp; &nbsp; - name: Install NPM package
&nbsp; &nbsp; &nbsp; &nbsp; run: npm ci
&nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; - name: Install sass
&nbsp; &nbsp; &nbsp; &nbsp; run: npm i sass


&nbsp; &nbsp; &nbsp; - name: Build Next.js App
&nbsp; &nbsp; &nbsp; &nbsp; run: npm run build --if-present


&nbsp; &nbsp; &nbsp; - name: Export Next.js App
&nbsp; &nbsp; &nbsp; &nbsp; run: npm run export


&nbsp; &nbsp; &nbsp; - name: Deploy FTP
&nbsp; &nbsp; &nbsp; &nbsp; uses: SamKirkland/FTP-Deploy-Action@4.3.1
&nbsp; &nbsp; &nbsp; &nbsp; with:
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; server: ${{ secrets.FTP_SERVER }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; username: ${{ secrets.FTP_USERNAME }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; password: ${{ secrets.FTP_PASSWORD }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; protocol: ${{ secrets.FTP_PROTOCOL }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; port: ${{ secrets.FTP_PORT}}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; server-dir: ${{ secrets.FTP_REMOTE_ROOT }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; local-dir: ./out/
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dangerous-clean-slate: true</code></pre>あー。そーゆーことね。完全に理解した(例の画像) 嘘です。 GitHub Actionsは初めて触ったので、全部が手探りでした。めっちゃ改行してるのも、そうしないと全然読めなかったからです。 トリガーイベントには、push, repository_dispatch, workflow_dispatchを設定しています。 microCMSはwebhookを外部サービスに通知してくれるのですが、GitHub Actionsではrepository_dispatchに対応しているので、これを設定しています。 他2つはそれぞれpushに反応する、GitHubから手動で走らせられるトリガーイベントです。 <h4 id="h903631cde3">環境変数の管理</h4><pre><code>&nbsp; &nbsp; runs-on: ubuntu-latest
&nbsp; &nbsp; env:
&nbsp; &nbsp; &nbsp; API_KEY: ${{ secrets.API_KEY}}</code></pre>ローカルで開発していた時はmicroCMSのAPIキーは.envファイルで管理していました。 .gitignoreによってgitの管理下から外れていますから、そのままではビルドできません。気づくのに1時間かかりました……(小声) なのでSecretsにAPI_KEYの名前で登録して使えるようにしています。(これで管理はあっているのか……？) その他の必要な環境変数(FTP関連)も同様にしています。 これで記事の更新等のトリガーに反応して、github上のNext.jsアプリケーションをビルド。それをサーバーの対象ディレクトリにFTPでアップロード。という仕組みが完成しました。 これ書くのだけで1日使いました。見通しが甘すぎる。 <h2 id="hcbec2bf0d9">終わりに</h2>ブログを作るのは初めての経験だったので、苦労はしましたが、かなり達成感がありました。って言いたいんですけど、さすがにこのメモ帳状態だと…… デザインって大事ですね。ここからぼちぼち改修していきます。 来年はもっといいサイトになってるといいね！ 駄文でしたが、ここまで読んでくださりありがとうございました！アドベントカレンダーの他の記事もぜひ読んでみてください！