前言#
前文で述べたように、Vercel のいくつかの理由により、フロントエンドをローカルデプロイに変更せざるを得なくなりました。この投稿では、デプロイプロセスを簡単に記録します。
https://www.xiaohanwu.com/notes/25
Note
1. この投稿は 2C4G 以上の構成サーバーの参考用です。
2. このチュートリアルを参考にする前に、あなたのバックエンドサイトがすでに成功裏にデプロイされ、アクセス可能であることを確認してください。
一、環境配置#
Windows でフロントエンドのビルドを行うことは推奨しません。スクリプトの問題により、強制的にビルドを行うと、いくつかの未知のエラーが発生する可能性があります。（|| 聞かないで、聞かれたら落とし穴にハマったと言うだけ ||）
1. システムキャッシュをリフレッシュし、必要なソフトウェアパッケージをインストールする
apt update && apt install git curl vim wget git-lfs -y
2.NVM をインストールする
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh
3.source ~/.profileコマンドを実行して環境変数を現在のセッションに再読み込みする
source ~/.profile
4.Node.JS 20.12.2 をインストールする
# インストール
nvm install 20.12.2
# バージョンを確認
node -v
5.pnpm、pm2 をインストールする
npm install -g pnpm pm2
6.Sharp をインストールする
npm i -g sharp
pnpm add sharp
# sharpの環境変数を設定
export NEXT_SHARP_PATH=/root/node_modules/sharp
.env ファイルの設定#
.env.example をコピーして.env を作成し、.env ファイルを編集します。
cd /opt/mx-space/Shiro
mv .env.template .env
vim .env
.env ファイルの内容例
# バックエンドAPIのURL
NEXT_PUBLIC_API_URL=https://api.example.com/api/v2
# バックエンドゲートウェイのURL
NEXT_PUBLIC_GATEWAY_URL=https://api.example.com
# TMDB情報取得
TMDB_API_KEY=
# GitHubトークン、フロントエンドのバージョンハッシュを取得するため
GH_TOKEN=
ビルドを開始する#
注意：ビルド前に、あなたのバックエンドサイトが成功裏にアクセス可能であることを確認してください。
pnpm i && pnpm build
ビルド中に他の予期しないエラーが発生する可能性がありますが、一般的には以下の理由によるものですので、順に確認してください。
-
++ ネットワークエラー ++（一般的にはプロジェクト内のフォントファイルのダウンロードエラー）
-
++ コードの衝突 ++（あなたのブログにカスタムコンテンツがある場合、コードエラーが発生する可能性があります）
-
++ サーバーメモリ不足 ++（文字通りの意味）
ビルドが完了すると、shiroi ディレクトリに.nextフォルダが生成され、これがビルド後の成果物です。
ローカル実行#
エラーがなければ、ビルドが完了したことになります。
==（ビルドが完了したとき、あなたは必ずビルドが完了したかどうかを知るでしょう）==
余計なことಠ_ಠ
ビルドが完了したら、直接フロントエンドを起動します。
pnpm prod:pm2
ブラウザにサーバーの IP + ポート番号 2323 を入力すれば、サイトを閲覧できます。
更新#
あなたのフロントエンドサイトに更新がある場合は、直接 git で最新のファイルをプルした後、再度pnpm i && pnpm buildを実行してビルドし、pnpm prod:pm2で実行すればよいです。
P.S. サイトを停止する方法
pm2 kill
参考文献#
以下はグループ内で非常に優れた方々です。
Arthals' ink：mx-space + Shiro：紙のように純粋な新しいブログ
華歳云小屋：Mix-Space 最新フロントエンド Shiro のデプロイ
この記事は Mix Space によって xLog に同期更新されました
元のリンクは https://www.xiaohanwu.com/posts/life/20241202