Angular frontend for Fantasy Chgk application.

Below is a deployment guide for self-hosted solution with AWS EC2 as proxy for VPN and static IP.

Actually, any cloud provider can be used, the thing is that static IP is needed which is hard to achieve in home network. The idea is to set up OpenVPN on Proxy, and then connect to this VPN from server where web app is actually hosted. Below there are steps for AWS EC2 setup.

Here are settings required for OpenVPN to work

In AWS it's called Elastic IP, just allocate one and assign it to EC2 instance. This IP will be used later to set up DNS.

Better follow this guide, it's pretty understandable. After setting up OpenVPN you'll have a fixed IPv4 address of the host machine in VPN net, this will be needed to forward traffic to it in Nginx.

Probably you'll have to install nginx, I don't think this is a big problem. After that, do the following:

sudo nano /etc/nginx/sites-available/your-website-domain

Sample nginx config:

server {
    server_name your-website-domain;

    location / {
        proxy_pass https://<server-ip-inside-vpn>:4200;
        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;
    }
}

To use the config, copy it to sites-enabled, check nginx syntax and restart:

sudo ln -s /etc/nginx/sites-available/your-website-domain /etc/nginx/sites-enabled/your-website-domain
sudo nginx -t
sudo systemctl restart nginx

After that you are ready to request SSL certificates with CertBot.

Everything is pretty simple and described here. Just install the bot with snap and run this:

sudo certbot --nginx

Just follow the instructions, this should get your website ready for HTTPS.

Pretty intuitive, just open domain settings and create A record to point map website name to server IPv4 address.

Basically, here everything is individual, but you'll have to connect the machine to OpenVPN net created earlier. After that all you need to do is launch you app on machine and it will be exposed to the Internet. You may want to create systemd service to run the app automatically, here is a sample config which needs to be stored in /lib/systemd/system/service-name.service for Ubuntu. Here is how my resume service config looks like:

[Unit]
Description=Resume Frontend Angular App
After=network.target

[Service]
Type=simple
User=pi
WorkingDirectory=/home/pi/repos/resume-frontend
Environment=PATH=/home/pi/.nvm/versions/node/v20.12.2/bin/:/usr/local/sbin:/usr>
ExecStart=/home/pi/.nvm/versions/node/v20.12.2/bin/ng serve --host 0.0.0.0
Restart=always
RestartSec=3
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=resume-frontend

[Install]
WantedBy=multi-user.target

After that, just do

sudo systemctl enable service-name
sudo systemctl start service-name

And that's it, you're up and running!