How to deploy a React / Next JS / Tailwind app

Question

I've modified a Tailwind 'Template' site. The README instructions are good for running it locally but don't mention anything about deploying it in a Production environment. I'm looking for step by step instructions on how to deploy it. I've tried to deploy on a shared hosting site but given up and now on netlify but still not having any joy.

Locally the app builds almost immediately. In netlify the build takes an age. Log:

12:09:35 PM: $ npm run dev
12:09:36 PM: > [email protected] dev
12:09:36 PM: > next dev
12:09:36 PM: - info Loaded env from /opt/build/repo/spotlight-ts/.env.local
12:09:36 PM: - ready started server on [::]:3000, url: http://localhost:3000
12:09:37 PM: - info automatically enabled Fast Refresh for 1 custom loader
12:09:37 PM: - event compiled client and server successfully in 224 ms (20 modules)
12:09:38 PM: - wait compiling...
12:09:38 PM: - event compiled client and server successfully in 116 ms (20 modules)
12:09:38 PM: - info Loaded env from /opt/build/repo/spotlight-ts/.env.local
12:09:38 PM: - info Loaded env from /opt/build/repo/spotlight-ts/.env.local
12:27:43 PM: Execution timed out after 18m10.00140564s
12:27:43 PM: Error running command: Command did not finish within the time limit
12:27:43 PM: Failing build: Failed to build site
12:27:43 PM: Finished processing build request in 18m27.841s
12:27:43 PM: Failed during stage "building site": Command did not finish within the time limit

===========================================

Tailwinds README:

## Getting started

To get started with this template, first install the npm dependencies:

```bash
npm install
```

Next, create a `.env.local` file in the root of your project and set the `NEXT_PUBLIC_SITE_URL` variable to your site's public URL:

```
NEXT_PUBLIC_SITE_URL=https://example.com
```

Next, run the development server:

```bash
npm run dev
```

Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.

Answer 1

The deploy process is different in VPS and Host. If you use Host, please contact the support section. But if you want to deploy on VPS, I will tell you how to do it step by step. Please change the theNewUser, yourDomainName.com, theStrongPassword and .... with your vars.

Please pay attention that some libs like Prisma NOT work on CentOS, so you have to choose Ubuntu 18 or later version. And you can pass some steps if you don't want it.

Connenting to server with ssh in terminal:

ssh root@ip -p22

Update the server:

apt update
apt upgrade

Configure SSH:

Change the #Port 22 to other thing

nano /etc/ssh/sshd_config

Change password of ssh:

Enter code and type new password in terminal for root user

passwd

Restart the ssh:

systemctl reload sshd

Connect the server with new pass!

Allow new port on ufw:

ufw allow [Newport]/tcp

Installing necessary deps:

node:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
apt install nodejs

npm:

apt install npm

pm2:

npm i -g pm2

Mysql + phpMyAdmin:

Installing

apt install mysql-server
apt install phpmyadmin php-mbstring php-zip php-gd php-json php-curl php-fpm php-mysql
apt install libapache2-mod-php
a2enmod php7.4
systemctl restart apache2

Configurations

Apache2

nano /etc/apache2/apache2.conf

Add this to last line and save it: Include /etc/phpmyadmin/apache.conf

Mysql

mysql -uroot -p

In mysql:

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'TheStrongPassword';
CREATE USER 'TheNewUser'@'localhost' IDENTIFIED WITH mysql_native_password BY 'TheStrongPassword';
GRANT ALL PRIVILEGES ON * . * TO 'TheNewUser'@'localhost';
FLUSH PRIVILEGES;

Run this to secure mysql

mysql_secure_installation

Create shortcut phpmyadmin folder to nginx folder

ln -s /usr/share/phpmyadmin/var/www/yourDomain.com/phpMyAdmin

phpmyadmin security options

cd /var/www/yourDomain.com/
mv phpmyadmin StrongPassword

Edit config file to secure phpMyAdmin

This should be set to a random string of at least 32 chars nano /etc/phpmyadmin/conf.d/pma_secure.php

<?php
    $cfg['blowfish_secret'] = 'random32Chars';
    
    $i=0;
    $i++;
    
    $cfg['Servers'][$i]['auth_type'] = 'cookie';
    $cfg['Servers'][$i]['AllowNoPassword'] = false;
    $cfg['Servers'][$i]['AllowRoot'] = false;
    
?>

(Optional security function)

For new other server creating authentication gateway in terminal enter and confirm the 8 char pass to get codded pass openssl passwd

Enter the username and codded pass nano /etc/nginx/pma_pass newUser:strongPass

Nginx:

First we remove apache2

systemctl stop apache2
apt-get purge apache2 apache2-utils apache2-bin apache2.2-common
apt-get autoremove

Installing nginx

apt install nginx
ufw allow 'Nginx Full'
rm /etc/nginx/sites-enabled/default

Make main domain

mkdir /var/www/yourDomain.com
chown -R $USER:$USER /var/www/yourDomain.com

Installing ssl

nano /etc/ssl/cert.pem Paste ssl certification >>IN ORIGIN SECTION<<

nano /etc/ssl/key.pem Paste ssl key >>IN ORIGIN SECTION<<

Edit nginx main server

nano /etc/nginx/sites-available/yourDomain.com

    server {
        listen 80;
        listen [::]:80;
        server_name yourDomain.com www.yourDomain.com;
        root /var/www/qlotter.com;
        index index.php  index.html index.htm index.nginx-debian.html;
        return 302 https://$server_name$request_uri;
    }
    server {
        # SSL configuration
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        ssl_certificate         /etc/ssl/cert.pem;
        ssl_certificate_key     /etc/ssl/key.pem;

        server_name yourDomain.com www.yourDomain.com;

        root /var/www/yourDomain.com;
        index index.php  index.html index.htm index.nginx-debian.html;

        location / {            
            proxy_set_header X-FORWARD-FOR $remote_addr;
            proxy_set_header Host $http_host;
            proxy_pass http://localhost:3000;
    }
    
    # next 12 upgrade
    location /_next/webpack-hmr {
        proxy_pass http://localhost:3000/_next/webpack-hmr;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    location ~ /\.ht {
        deny all;
    }

    }   

Unlink and reload server

ln -s /etc/nginx/sites-available/yourDomain.com /etc/nginx/sites-enabled/
unlink /etc/nginx/sites-enabled/default
nginx -t
systemctl reload nginx

Git

git config --global user.name "yourUserName"
git config --global user.email "yourEmail"

Get repository from Git

git clone yourRepoAddress

Deploy and save in pm2

Go to your repo folder and do these steps: First you have to delete packaje-lock.json file. We use pm2 because if we close the ssh, app will run automatically

npm i
npx prisma migrate deploy  // If you use prisma
npm run build
pm2 start npm --name=nextjs -- start

pm2 startup
pm2 save