aaP_denis.webdevil
Hello Denis,
Regarding the website looking broken, I also experienced this issue. However, I found a solution that helped me resolve it. I hope it helps you as well!
How It Works:
This script pulls the latest updates from your repository and copies the Next.js code into a new temporary folder. It then builds the website in that new folder. Once the build is complete, it removes the old folder, renames the new folder to replace it, and finally reloads PM2.
If you're using GitHub Actions, add the following to your deploy.sh file:
This method ensures zero downtime and prevents crashes during deployment. 🚀
`#!/bin/bash
APP_DIR="/www/wwwroot/website/frontend"
BUILD_DIR="/www/wwwroot/website/frontend-new"
echo "Starting deployment..."
cd "$APP_DIR"
Pull the latest changes from the repository
echo "Pulling latest changes from Git..."
git reset --hard
git pull origin main # Replace 'main' with your branch if different
cd ..
Remove old build directory if exists
if [ -d "$BUILD_DIR" ]; then
echo "Removing old temporary build directory..."
sudo rm -rf "$BUILD_DIR"
fi
Copy current frontend to a new directory
echo "Creating a new temporary build directory..."
sudo cp -r "$APP_DIR" "$BUILD_DIR"
Change ownership and permissions
sudo chown -R www-data:www-data "$BUILD_DIR"
sudo chmod -R 775 "$BUILD_DIR"
Navigate to the new build directory
cd "$BUILD_DIR"
Install dependencies
echo "Installing dependencies..."
npm install --legacy-peer-deps
Build the Next.js application
echo "Building the application..."
npm run build
Ensure .next/cache/images exists
sudo mkdir -p "$BUILD_DIR/.next/cache/images"
Swap old frontend with new build
echo "Swapping directories..."
sudo mv "$APP_DIR" "${APP_DIR}-old"
sudo mv "$BUILD_DIR" "$APP_DIR"
Remove old frontend
echo "Cleaning up old frontend..."
sudo rm -rf "${APP_DIR}-old"
Gracefully restart the PM2 process
echo "Restarting PM2 process..."
pm2 reload website --wait-ready --update-env
Check if the restart was successful
if [ $? -eq 0 ]; then
echo "Deployment successful! PM2 process restarted."
else
echo "Deployment failed. Check PM2 logs for details."
pm2 logs website --lines 100
exit 1
fi
`
