This is my first attempt at getting a Remix application running on a VPS.
❗ This is not a tutorial ❗
I’m kind of following this: https://www.youtube.com/watch?v=pFxynNyz-QI. Just kind of following though. Don’t blame that tutorial for my mistakes. I’m using Nginx instead of Caddy (https://github.com/caddyserver/caddy.)
Install nvm: https://github.com/nvm-sh/nvm?tab=readme-ov-file#install–update-script
Then:
# installs node and npm
$ nvm install nodeCreate an app
I guess I need an app on my local computer:
$ npx create-remix@latestThat’s good enough for now.
Install Nginx on the VPS? Might as well go that route:
Warning ❗ I locked myself out of my VPS the first time I configured ufw – I forgot to allow ssh connections.
$ sudo apt install nginx
# then (there's nothing else on the server, going to install a cert in a bit)
$ sudo ufw allow 'Nginx Full'
# edit: to allow SSH (is this too permissive?)
$ sudo ufw allow 'ssh'
$ sudo ufw status
# hmmm, seem to remember getting stuck with this before
Status: inactive
sudo ufw enable
# edit: note that ssh connections were being blocked!
sudo ufw status
Status: active
To Action From
-- ------ ----
Nginx Full ALLOW Anywhere
Nginx Full (v6) ALLOW Anywhere (v6) 
Getting somewhere 🙂
$ sudo apt install emacs
$ emacs hello_zalgorithm_com/html/index.html
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>I’ll try serving that page:
$ sudo emacs /etc/nginx/sites-available/hello_zalgorithm_com
# create the server block
server {
listen 80;
listen [::]:80;
root /var/www/hello_zalgorithm_com/html;
index index.html index.htm index.nginx-debian.html;
server_name your_domain hello.zalgorithm.com;
location / {
try_files $uri $uri/ =404;
}
}Enable the file by linking to the sites-enabled directory:
$ sudo ln -s /etc/nginx/sites-available/hello_zalgorithm_com /etc/nginx/sites-enabled/To avoid possible hash bucket memory problems (???)
$ sudo emacs /etc/nginx/nginx.conf
# Remove the comment from this line:
#server_names_hash_bucket_size 64;$ sudo nginx -t
# looks good
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
$ sudo systemctl restart nginx
Https?
$ sudo snap install core; sudo snap refresh core
$ sudo snap install --classic certbot
$ sudo ln -s /snap/bin/certbot /usr/bin/certbot
$ sudo certbot --nginx -d hello.zalgorithm.com🙂
This Nginx config isn’t going to work for my Remix app. Haven’t figured that part out yet. I’m going to ignore the issue and try pushing the code to the server.
Deploy from local with git
Note that /var/repo and /var/www/domain.com are owned by root, but I’m sshing into the server as a regular user (with sudo). I’m getting around that for now with:
$ sudo chown -R myuser:myuser /var/www
$ sudo chown -R myuser:myuser /var/repoOh no… locked out from this:
$ sudo ufw status
Status: active
To Action From
-- ------ ----
Nginx Full ALLOW Anywhere
Nginx Full (v6) ALLOW Anywhere (v6)Fixed with the recovery console:
$ ufw allow ssh🙂
That’s enough of this for today 🙁
… skip some steps
Setup a reverse proxy
With Nginx installed, I need to setup a reverse proxy that listens to traffic at the root domain name and routes it to the process running at port 3000.
server {
server_name hello.zalgorithm.com;
# SSL configuration
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/hello.zalgorithm.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/hello.zalgorithm.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
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;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
server {
if ($host = hello.zalgorithm.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
listen [::]:80;
server_name hello.zalgorithm.com;
return 404; # managed by Certbot
}
Run the process without having to keep the terminal open
I’m going to try using pm2:
$ npm install -g pm2
$ pm2 start "npm start" -i max
-------------
__/\\\\\\\\\\\\\____/\\\\____________/\\\\____/\\\\\\\\\_____
_\/\\\/////////\\\_\/\\\\\\________/\\\\\\__/\\\///////\\\___
_\/\\\_______\/\\\_\/\\\//\\\____/\\\//\\\_\///______\//\\\__
_\/\\\\\\\\\\\\\/__\/\\\\///\\\/\\\/_\/\\\___________/\\\/___
_\/\\\/////////____\/\\\__\///\\\/___\/\\\________/\\\//_____
_\/\\\_____________\/\\\____\///_____\/\\\_____/\\\//________
_\/\\\_____________\/\\\_____________\/\\\___/\\\/___________
_\/\\\_____________\/\\\_____________\/\\\__/\\\\\\\\\\\\\\\_
_\///______________\///______________\///__\///////////////__
Runtime Edition
PM2 is a Production Process Manager for Node.js applications
with a built-in Load Balancer.
Start and Daemonize any application:
$ pm2 start app.js
Load Balance 4 instances of api.js:
$ pm2 start api.js -i 4
Monitor in production:
$ pm2 monitor
Make pm2 auto-boot at server restart:
$ pm2 startup
To go further checkout:
http://pm2.io/
To configure pm2 to start the application when the server boots:
$ pm2 startupThat’s it? https://hello.zalgorithm.com/
I’m not sure what’s going on with static assets, CSS, etc. The next step will be to add Tailwind to the project.