Docs
Deployment

Deployment

Instructions for deploying the application.

Vercel Deployment

Connect Your Repository

Link your GitHub, GitLab or Bitbucket repository to Vercel.

Configure Project Settings

In the Vercel dashboard:

  • Set Framework Preset to Next.js
  • Configure Root Directory if needed
  • Set Node.js version to 20.x

Environment Variables

Add necessary environment variables in Vercel project settings:

  • Database connection strings
  • Authentication provider API keys
  • Other sensitive or environment-specific configurations

Deploy

Click "Deploy" in the Vercel dashboard. Vercel will:

  • Install dependencies
  • Build the project
  • Run database migrations (if configured)
  • Deploy to the Vercel Network

Self-Deployment

You can self-host Achromatic on your own infrastructure. This guide covers the essential steps for self-deploying your application.

Before you begin, ensure you have:

  • A server with SSH access
  • (Optional) Domain name for your application

Installation

  1. Update your server:

    sudo apt update && sudo apt upgrade -y
  2. Install Node.js:

    curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
    sudo apt-get install -y nodejs
  3. Install PostgreSQL:

    sudo apt install postgresql postgresql-contrib
  4. Install Nginx:

    sudo apt install nginx
  5. Install PM2 globally:

    sudo npm install -g pm2

Database

  1. Switch to PostgreSQL user and create a database and user:

    sudo -u postgres psql
    CREATE DATABASE pro;
    CREATE USER postgres WITH PASSWORD 'password';
    ALTER USER postgres WITH SUPERUSER;
    \q
  1. Update your .env file with the database connection string.

  2. Run database migrations:

    npx prisma migrate deploy

Process management

  1. Create an ecosystem file:

    nano ecosystem.config.js

    Add the following content:

    module.exports = {
      apps: [
        {
          name: 'web',
          script: 'npm',
          args: 'start',
          instances: 'max',
          exec_mode: 'cluster',
          autorestart: true,
          watch: false,
          max_memory_restart: '24G',
          env: {
            NODE_ENV: 'production'
          }
        }
      ]
    };
  2. Build your application:

    npm run build
  3. Start your application:

    pm2 start ecosystem.config.js
  4. Set PM2 to start on system reboot:

    pm2 startup
    pm2 save

Reverse Proxy

  1. Create a new Nginx configuration:

    sudo nano /etc/nginx/sites-available/web

    Add the following basic configuration for certbot:

    server {
        listen 80;
        server_name yourdomain.com;
     
        location / {
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
  2. Enable the site:

    sudo ln -s /etc/nginx/sites-available/web /etc/nginx/sites-enabled/web
  3. Test and reload Nginx:

    sudo nginx -t
    sudo systemctl reload nginx
  4. Install Certbot:

    sudo apt install certbot python3-certbot-nginx
  5. Obtain and install a certificate:

    sudo certbot --nginx -d yourdomain.com

    Follow the prompts to configure HTTPS.

  6. Replace the Nginx configuration at /etc/nginx/sites-available/wev:

    server {
        listen 80;
        listen [::]:80;
        server_name yourdomain.com www.yourdomain.com;
        return 301 https://$host$request_uri;
    }
     
    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name yourdomain.com www.yourdomain.com;
     
        ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
        include /etc/letsencrypt/options-ssl-nginx.conf;
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
     
        root /var/www/html;
        index index.html index.htm;
     
        location / {
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_cache_bypass $http_upgrade;
        }
     
        location /_next/image {
            proxy_pass http://localhost:3000/_next/image;
        }
     
        location /_next/static {
            proxy_pass http://localhost:3000/_next/static;
        }
    }
  7. Test and reload Nginx:

    sudo nginx -t
    sudo systemctl reload nginx

Remember to adapt these instructions based on your specific server environment and requirements.