Preface#
The previous text mentioned that due to certain reasons with Vercel, the front end had to be changed to local deployment. This post simply records the deployment process.
https://www.xiaohanwu.com/notes/25
[!NOTE]
- This post is only suitable for reference use on servers with 2C4G configuration or higher.
- Please ensure that your backend site has been successfully deployed and is accessible before referring to this tutorial.
1. Environment Configuration#
It is not recommended to use Windows for front-end builds, as forcing a build due to script issues may cause some unknown errors. (||Don't ask, just know I've been there||)
1. Refresh system cache and install some necessary packages
apt update && apt install git curl vim wget git-lfs -y
2. Install NVM
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh
3. Run the source ~/.profile command to reload environment variables into the current session
source ~/.profile
4. Install Node.JS 20.12.2
# Install
nvm install 20.12.2
# Check version
node -v
5. Install pnpm, pm2
npm install -g pnpm pm2
6. Install Sharp
npm i -g sharp
pnpm add sharp
# Configure sharp environment variable
export NEXT_SHARP_PATH=/root/node_modules/sharp
Configure .env file#
Copy .env.example to .env and edit the .env file
cd /opt/mx-space/Shiro
mv .env.template .env
vim .env
Example content of .env file
# Backend API address
NEXT_PUBLIC_API_URL=https://api.example.com/api/v2
# Backend gateway address
NEXT_PUBLIC_GATEWAY_URL=https://api.example.com
# TMDB information retrieval
TMDB_API_KEY=
# GitHub token, used to retrieve front-end version hash
GH_TOKEN=
Start Building#
Note: Before building, ensure that your backend site is accessible.
pnpm i && pnpm build
There may be other unexpected errors during the build process, but they are generally due to the following reasons, please check them one by one.
-
++Network error++ (usually due to font file download errors in the project)
-
++Code conflict++ (if your blog has custom content, there may be code errors)
-
++Insufficient server memory++ (literal meaning)
After the build is complete, a .next folder will be generated in the shiroi directory, which is the product of the build.
Local Run#
If there are no errors, the build is complete.
== (You will definitely know when the build is complete) ==
Nonsense ಠ_ಠ
Once the build is complete, start the frontend directly
pnpm prod:pm2
Enter the server IP + port number 2323 in the browser to browse the site.
Update#
If your front-end site has updates, simply pull the latest files with git and rebuild using pnpm i && pnpm build, then run with pnpm prod:pm2.
P.S. How to stop the site
pm2 kill
References#
The following are all very impressive and capable individuals in the group.
Arthals' ink: mx-space + Shiro: A blog as pure as paper
Hua Suiyun's Little House: Mix-Space Deploys the Latest Frontend Shiro
This article is synchronized and updated to xLog by Mix Space. The original link is https://www.xiaohanwu.com/posts/life/20241202