1.1 nginx configuration

Install nginx and SSL certificate

We use nginx to proxy the API server, run on port 3000, and serve static files (such as guitarix.json, audio files and the client build). At the moment both are running on the same machine. preview-api.musical-artifacts.com is the subdomain used for the server and preview.musical-artifacts.com the client.

SSL certificates are provided by Let's Encrypt.

sudo add-apt-repository ppa:certbot/certbot
sudo apt update
sudo apt install nginx software-properties-common python-certbot-nginx
sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/preview.musical-artifacts.com
sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/preview-api.musical-artifacts.com

Generate SSLs certificates: sudo certbot --nginx

Edit these two files you've just created, adjusting to your setup. An example of configuration is available in the end of this page.

sudo ln -s /etc/nginx/sites-available/preview.musical-artifacts.com /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/preview-api.musical-artifacts.com /etc/nginx/sites-enabled/

Check if your configuration is OK: sudo nginx -t

Restart nginx: sudo systemctl restart nginx

Example

/etc/nginx/sites-available/preview.musical-artifacts.com:

server {
        server_name preview.musical-artifacts.com;

        location / {
                root /home/ubuntu/musical-artifacts-preview/client/build;
                index index.html;
                try_files $uri $uri/ /index.html;
        }

        listen [::]:443 ssl ipv6only=on; # managed by Certbot
        listen 443 ssl; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/preview.musical-artifacts.com/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/preview.musical-artifacts.com/privkey.pem; # managed by Certbot
        include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
        if ($host = preview.musical-artifacts.com) {
                return 301 https://$host$request_uri;
        } # managed by Certbot

        listen 80;
        listen [::]:80;

        server_name preview.musical-artifacts.com;
        return 404; # managed by Certbot
}

/etc/nginx/sites-available/preview-api.musical-artifacts.com:

server {
        server_name preview-api.musical-artifacts.com;

        location /processed_files {
                alias /home/ubuntu/musical-artifacts-preview/server/processed_files;
                add_header Access-Control-Allow-Origin *;
        }

        location /soundfonts {
                alias /home/ubuntu/musical-artifacts-preview/server/soundfonts;
                add_header Access-Control-Allow-Origin *;
        }

        location /guitarix.json {
                alias /home/ubuntu/musical-artifacts-preview/server/guitarix.json;
                add_header Access-Control-Allow-Origin *;
        }

        location /soundfonts.json {
                alias /home/ubuntu/musical-artifacts-preview/server/soundfonts.json;
                add_header Access-Control-Allow-Origin *;
        }

        location /api/ {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_pass http://localhost:3000/;
        }

        listen [::]:443 ssl; # managed by Certbot
        listen 443 ssl; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/preview-api.musical-artifacts.com/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/preview-api.musical-artifacts.com/privkey.pem; # managed by Certbot
        include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
        if ($host = preview-api.musical-artifacts.com) {
                return 301 https://$host$request_uri;
        } # managed by Certbot

        server_name preview-api.musical-artifacts.com;

        listen 80;
        listen [::]:80;

        return 404; # managed by Certbot
}