VIDEO LESSON

Next.jsとmicroCMSの公開・運用手順：WordPressからの移行で改ざんリスクを減らすの解説動画

再生時間 8:22動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回は、ネクストジェイエスとマイクロシーエムエスの公開と運用の手順です。
0:06ワードプレスで運用する情報サイトを、ネクストジェイエスの静的出力と、既存のウェブサーバー、
0:12そしてヘッドレスシーエムエスのマイクロシーエムエスへ移す設計例を紹介します。
0:19狙いは、公開側にピーエイチピーや管理画面、データベースを置かない構成にし、
0:23改ざんの入口を減らすことです。
0:27ただし、アカウントが侵害されれば正規の経路から改ざんされる可能性は残ります。
0:32構築、初回公開、更新の自動化、日常点検、復旧までを順番に押さえていきます。
0:38まず、なぜ静的配信が対策になるのかです。
0:41典型的なワードプレスでは、閲覧のたびにピーエイチピーが動き、プラグインやデータベースと連携します。
0:49その分、本体やプラグインの脆弱性、管理者アカウントの不正利用といった入口を守り続ける必要があります。
0:58静的出力では、ビルド時に記事をエイチティーエムエルへ変換し、公開側は出来上がったファイルの配信だけを行います。
1:07公開ワードプレスの実行環境を入口とする攻撃経路を取り除けるのが効果です。
1:13一方で、マイクロシーエムエスやギット、サーバー管理の権限が盗まれるリスクは残ります。
1:20効果は、不要な実行環境を減らし、権限を分ける設計とセットで評価してください。
1:26構成を確認します。
1:28編集者はマイクロシーエムエスで原稿を作り、ビルド環境が読み取り専用のキーで公開記事を取得します。
1:35ネクストジェイエスがアウトというフォルダーへ生成し、検証済みの成果物をサーバーへ配置して配信します。
1:43ブラウザーからシーエムエスへ直接問い合わせないため、シーエムエスが止まっても公開済みページは影響を受けません。
1:51着手前には棚卸しも必要です。
1:53記事や画像、著者、公開日を一覧にし、旧ユーアールエルと新ユーアールエルの対応表を作ります。
2:00フォームや検索などの機能は代替方法を決め、画像は移行先へ移して本文のユーアールエルも更新します。
2:07旧環境のデータは、復元できる形で先に保存してください。
2:11マイクロシーエムエスの準備です。
2:14リスト形式のエーピーアイを作り、エンドポイントの例はアーティクルズとします。
2:20最低限タイトルと本文を用意し、必要なら説明文やスラッグを追加します。
2:26まず公開済みのテスト記事を一件用意してください。
2:30権限で大切なのはキーの分離です。
2:33公開ビルドでは、必要な記事エーピーアイをゲットする権限だけを持つキーを使い、
2:39作成や変更、削除ができる管理用キーを流用しないでください。
2:44ゲット専用でも、下書きや限定公開まで取得できる設定になっていないか、エーピーアイ設定で必ず確認します。
2:53プレビューに必要な権限は、本番ビルド用キーから分けてください。
2:58ネクストジェイエスの設定です。
3:01設定ファイルに三つの項目を追加します。
3:03アウトプットにエクスポートを指定すると静的出力になり、更新には再ビルドと再配置が必要になります。
3:10トレーリングスラッシュを真にすると、アバウトのページはアウト配下のアバウト・インデックスというファイルになります。
3:17イメージズのアンオプティマイズドは、標準の画像最適化サーバーを使わない例としての指定で、
3:22画像の軽量化や寸法指定は別途行います。
3:26この記事は静的出力が対象で、サーバーで実行するエスエスアールやアイエスアールとは構成も更新方法も異なります。
3:33静的出力のままサーバー専用機能が使えると考えないでください。
3:37エーピーアイキーの置き場所です。
3:40ローカルでは、ギット管理の対象外であるドットエンブ・ローカルというファイルに、
3:44サービスドメインとエーピーアイキーを置きます。
3:49実際の値をギットや共有ログへ貼るのは厳禁です。
3:52注意点が二つあります。
3:54一つ目は、ネクストパブリックという公開用の接頭辞をキーに付けないことです。
4:00その環境変数はブラウザー側へ渡る前提だからです。
4:03二つ目は、接頭辞がなくても、キーをプロップスへ含めたりエイチティーエムエルへ埋めたりすれば漏れてしまう点です。
4:11ビルド時に使う認証情報と、閲覧者へ返す記事データを分けて考えてください。
4:17シーアイを使う場合は、そのサービスのシークレット保管機能を使います。
4:22記事取得のコード、前半です。
4:24ファイルはページズルーターのインデックス・ジェイエスエックスで、マイクロシーエムエス用のエスディーケーを使います。
4:32まず環境変数からサービスドメインとエーピーアイキーを読み、どちらか欠けていればエラーを投げてビルドを止めます。
4:41設定不足のまま空の一覧を公開しないためのガードです。
4:45次にクライアントを作り、記事の配列とオフセットを用意して、ページ分割の取得を始めます。
4:51一回で取得できる件数には上限があるため、リミット百件で少しずつずらしながら全件を集める設計です。
4:58アプリルーターではデータ取得の書き方が異なり、ゲットスタティックプロップスは使いません。
5:05コードの後半です。
5:06取得した分を配列へ追加し、オフセットを進めます。
5:10総件数へ届いたら終了し、途中で件数がゼロになったら異常としてエラーを投げます。
5:15最後に、記事の配列だけをプロップスとして返します。
5:19エーピーアイキーやクライアント自体はプロップスへ含めません。
5:23ページ本体は、見出しと記事タイトルのリストを表示するだけの最小例です。
5:28本文をエイチティーエムエルとして挿入する場合は、許可するタグや属性を定義し、
5:32サニタイザーで処理してください。
5:36管理者の入力でも、アカウント侵害を想定すると無条件には信頼できません。
5:41単純なタグ削除だけを対策にしないことも大切です。
5:44ローカルでビルドして検査します。
5:47エヌピーエム・シーアイで依存関係をそろえ、ビルドするとアウトが生成されます。
5:54一覧と詳細の件数、下書きの混入、キーや認証情報が出力へ含まれていないかを確認します。
6:02存在しない記事が適切に四百四になることも合格条件です。
6:07取得に失敗したら、空の一覧を正常な成果物として公開しないでください。
6:13初回公開では、公開するのはアウトの中身だけです。
6:18プロジェクト全体やドットエンブ・ローカル、鍵ファイルは公開フォルダーへ置きません。
6:25まず一時ディレクトリーへ転送して内容を比較し、既存の公開物を保存したうえで本番へ反映します。
6:34共有フォルダーへ削除付きの同期を無条件で実行しない点も守ってください。
6:40更新の運用です。
6:41マイクロシーエムエスで公開しただけでは、静的サイトは更新されません。
6:47最初は手動で、ビルド、検証、転送、配置、公開ユーアールエルでの確認までを確立します。
6:54失敗したら、以前の正常な公開物を維持してください。
6:58流れが安定したら、ウェブフックからシーアイのビルドを始める自動化へ広げられます。
7:05その際は送信元の検証に加え、同時デプロイの防止や、古いビルドが新しい記事を上書きしない直列化が必要です。
7:13日常運用では、公開のたびに変更記事を確認し、コミットアイディーやビルド番号を記録します。
7:20定期点検では、多要素認証と権限の見直し、依存パッケージの更新、異常通知の確認を行います。
7:28最後にバックアップと復旧です。
7:30ギットが管理するのはコードだけです。
7:33記事データや画像、エーピーアイスキーマ、公開済み成果物は別に保管し、検証環境で復元する練習まで行ってください。
7:42疑わしい更新を見つけたら、まず公開内容とログを保全し、自動ビルドや侵害されたアカウントの利用を止めます。
7:51正常な成果物を再配置して復旧を確認し、原因を調査して権限と認証情報を更新します。
7:58不正な記事がシーエムエスに残ったまま再ビルドすると、同じ内容が再び出力されます。
8:04コードの巻き戻し、データの復元、成果物の差し戻しを区別してください。
8:10まとめです。
8:11静的配信で公開側の入口を減らし、キーは読み取り専用に分け、検査済みの成果物だけを公開する。
8:19この積み重ねが改ざんへの備えになります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Next.jsとmicroCMSで静的サイトを構築し、既存サーバーへ公開し、WordPressからの移行で改ざんリスクを減らす手順。APIキー管理、初回公開、自動更新、監視、バックアップ、復旧まで解説。

解説記事・サンプルコードを読む：Next.jsとmicroCMSの公開・運用手順：WordPressからの移行で改ざんリスクを減らす →