コース一覧
Next.js公開設計:SEO・画像最適化・デプロイ
自サーバー案

Next.js公開設計:SEO・画像最適化・デプロイ

metadata、動的metadata、OGP、Image、フォント最適化、本番ビルド、マネージド環境・自サーバーへの公開、公開前チェックを扱う全13レッスンの公開プロジェクトです。fleamaを検索・SNS・表示速度まで整え、公開URLを持つ本番サービスとして完成させます。

1
メタデータ・OGP・画像
01. メタデータ15分
02. 動的メタデータ15分
03. OGP15分
04. 画像最適化15分
05. フォント最適化15分
06. つくる - 検索とSNSに強く20分
07. 第7章クイズ15分
2
デプロイと総合制作
01. 本番ビルド15分
02. マネージドへ公開15分
03. 自サーバー案15分
04. 公開前チェック15分
05. 自由拡張20分
06. 完成と次のステップ10分

自サーバー案

自前のサーバーで動かし続ける

自分のサーバーに置く道

マネージドに預けるのが今の標準ですが、置き場所を自分で決めなければならないこともあります。社内からしか見えない場所に置きたい、既に借りているサーバーに相乗りしたい、といった事情です。この回は選択演習です。今すぐ必要でなければ、読んで手順を書き出すだけで構いません。

自分のサーバーに置くと決めた瞬間、マネージドが代わりにやっていたことが全部こちらの仕事になります。中でも大きいのが動かし続けることです。

npm run start だけでは足りない

サーバーに入って npm run start と打てば、fleama は動きます。ですが、その接続を切った時点で終わります。サーバーを再起動しても戻ってきません。何かの拍子に落ちたら、誰かが気づいて手で立ち上げ直すまで止まったままです。

そこで Linux に元から入っている systemd に面倒を見てもらいます。systemd は、決められた設定どおりにプログラムを起動し、落ちたら起こし直し、サーバーの起動時にも一緒に立ち上げてくれる仕組みです。

ユニットファイルを1枚書く

面倒を見てほしい相手のことは、ユニットファイルという1枚のテキストで伝えます。fleama-next.service という名前で置きます。中身は名前と値を並べただけで、大事なのは4つです。

WorkingDirectory は、どのフォルダで動かすかです。ここが違うと .next が見つかりません。

ExecStart は、何を実行するかです。npm run start にあたるコマンドを、省略しない絶対パスで書きます。systemd はログインしたときのような環境を持たないので、npm だけでは見つけられません。

Restart は、落ちたあとどうするかです。always にしておけば、止まるたびに起こし直してくれます。

WantedBy は、いつ一緒に立ち上げるかです。multi-user.target にしておくと、サーバーの起動時に自動で始まります。

書いたら systemctl enable --now fleama-next で有効にします。この先の細かいところは「サーバー構築入門」で扱います。ここでは、ファイル1枚で常駐させられると分かれば十分です。

演習

fleama-next.service を書き、4つの設定がそれぞれ何のためのものかを画面にまとめます。

ヒント

1行は 名前=値 の形です。名前と = の間に空白は入れません

ExecStart は /usr/bin/npm run start のように、省略しない道のりで書きます

directives の1行は { key: "Restart", why: "..." } の形です

layout.tsx
page.tsx
fleama-next.service
プレビュー

できているか

  • 4つの設定を並べている
  • WorkingDirectory の説明がある
  • ExecStart の説明がある
  • Restart の説明がある
  • WantedBy の説明がある
  • 動かすフォルダを絶対パスで書いている
  • 起動するコマンドを絶対パスで書いている
  • 落ちても起こし直す設定になっている
  • サーバー起動時に立ち上がる設定になっている
エディタを読み込んでいます