• Part 1 - RPi Setup
• Part 2 - Flask App with Docker and Portainer
• Part 3 - Domain Name Management with Cloudflare and Nginx Proxy Manager (here)

It is ok to ssh to your RPi with your network’s public IP address, but it has two problems when you want to host your own websites and applications:

• It is hard to remember random numbers to share the link. Imagine how lame it is to share your website as 112.16.12.32
• It is not safe to expose your IP address since people can track you down with website such as check-host.net

That is why we will get a domain name and set up Cloudflare and Nginx Proxy Manager to direct traffic from domain into the applications in our RPi properly.

Basic Server Security

Since we are going to expose our server to the rest of the world, there are some basic firewalls to be placed. Even though our routers has port restrictions, it’s good to have software safeguards as well. Here we install ufw (Uncomplicated Firewall)

$ sudo apt install ufw
$ sudo ufw allow 22
$ sudo ufw allow 5000 # for our website docker port
$ sudo ufw enable
$ sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
22                         ALLOW       Anywhere
5000                       ALLOW       Anywhere
22 (v6)                    ALLOW       Anywhere (v6)
5000 (v6)                  ALLOW       Anywhere (v6)

Get a Domain Name

Firstly, you need to get a domain name for your web server. If you want to keep cost as low as possible, you could get one with noip.com. For me, I simply can’t pass up my domain name so I got it off namecheap.com.

What is Cloudflare?

Cloudflare essentially is a massive worldwide network of servers in between users and a web server (interfaced by our router). First and foremost, they are a DNS (Domain Name System) provider, translating human readable domain names into numeric IP address meant for machine, which they can direct traffic to.

Providing this service means that they can also help to achieve two other things, security and speed.

Security: Because they are one of the largest network, they scan the most IP addresses worldwide and have visibility of IP address with bad intention to be blocked ASAP.

Speed: Since they have a really large network of servers, they can cache contents in your website so that users from the other side of the world will be served the content from the closest servers.

And the best part - all of these are free!

How to set up Cloudflare?

So how do we set up Cloudflare with our domain name? Rather than rewriting another guide, I found that the most comprehensive tutorial came from their community tutorial, from pointing nameservers to Cloudflare.

Step 1: Adding your domain to Cloudflare - Tutorial - Cloudflare Community

Step 2: Setting up SSL with Cloudflare - Tutorial - Cloudflare Community

Step 3: Enabling the 'Orange Cloud' - Tutorial - Cloudflare Community

After you connected your domain to Cloudflare, you can click on your domain > DNS to see all subdomain related to that domain. There might be alot of records or no records depending on your domain provider, and I usually remove all of them and create two of them:

When you add records, put your public IP address we got from Part 1 in the tutorial under it. You could choose turn on the proxy status so that people cannot find your public IP address directly.

Some additional issues I had was

• Setting SSL policies to Flexible causing too many redirects - the solution is to change it to Strict
• Redirecting www.tingwei.fans to tingwei.fans using Rules functionality in Cloudflare
• If you switch off your router, your public IP address might change. I am planning to implement this tutorial for the server to automatically detect changes to my public address and update it to Cloudflare.

What is Nginx Proxy Manager?

Nginx Proxy Manager is actually an UI for Nginx, an open sourced software for web server and reverse proxying. If Cloudflare helps mediate external traffic from the World Wide Web to your router, Nginx mediate internal traffic from your router to different applications in your server.

Why not just use the Nginx directly? If you need more complicated settings for your NGINX, you could consider doing it manually, but Nginx Proxy Manager provided me a cleaner interface for me to see what is going on, and helps with requesting SSL certificates for your domains.

How to set up Nginx Proxy Manager

The tutorials I followed was Nginx Proxy Manager - How-To Installation and Configuration - YouTube, and Full Setup Instructions | Nginx Proxy Manager. However they are not entirely just for Raspberry Pi and a Flask website, so I will elaborate further on my use case.

Before you start, you should go to Port Forwarding settings in your router that we mention in Part 1 to open up 81 or any open port.

Firstly, create a folder proxy-manager in any directory (I created under mnt), and create a docker-compose.yml file with the code below:

version: "3"                                                                                                                       docker-compose.yml                                                                                                                                  version: "3"
services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      # These ports are in format <host-port>:<container-port>
      - '80:80' # Public HTTP Port
      - '443:443' # Public HTTPS Port
      - '81:81' # Admin Web Port can be other ports if you want
      # Add any other Stream port you want to expose
      # - '21:21' # FTP
    environment:
      DB_MYSQL_HOST: "db"
      DB_MYSQL_PORT: 3306
      DB_MYSQL_USER: "npm"
      DB_MYSQL_PASSWORD: "npm"
      DB_MYSQL_NAME: "npm"
      # Uncomment this if IPv6 is not enabled on your host
      # DISABLE_IPV6: 'true'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
    depends_on:
      - db

  db:
    image: 'jc21/mariadb-aria:latest'
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: 'npm'
      MYSQL_DATABASE: 'npm'
      MYSQL_USER: 'npm'
      MYSQL_PASSWORD: 'npm'
    volumes:
      - ./data/mysql:/var/lib/mysql

Then you start up the docker image with

docker-compose up -d

You should then be able to access Nginx Proxy Manager from <private IP address>:81 The default login information is

Email:    admin@example.com
Password: changeme

After that, we can go to SSL Certificates and Add SSL Certificate

Then we go to Dashboard > Proxy Host and add a proxy host. Under Details, we put in the private IP address of our RPi, and forward the port to the flask app’s port, which is 5000 in our case. Toggle block common exploits for security sake.

Moving to SSL option:

Select the SSL certificate that you have generated previously, and turn on force SSL. An SSL secured website looks less dubious and also perform better in SEO in Google.

And tadaa! You should have a working website that shows the contents of your Flask App.

• Part 1 - RPi Setup
• Part 2 - Flask App with Docker and Portainer (here)
• Part 3 - Domain Name Management with Cloudflare and Nginx Proxy Manager

To add more content to my old personal website, I created more routes to different pages. However, considering that the future of this personal website will be where I experiment with different frameworks, not every side project I will be doing can be integrated with Flask. So I decided to take a leap of faith to experiment for Docker, which after countless hours of tutorials I am starting to realise the value of it.

Why Docker?

My old personal website was built directly into the VPS, which are essentially virtual machines. When I install packages directly into the OS such as tensorflows/sklearn/xgboost, they may run into conflicts in the version of packages that they are dependent on. Spinning up another VPS or Raspberry Pi is definitely too overkill, so one may consider isolating package installs through virtual environments (venv).

However, that only works if we are working with only Python. What if we want to set up a MYSQL or redis server to work with our Flask app? What if we need that the same MYSQL database but a different version with another programming language? That’s when things becomes complicated. Spinning up more virtual machine on a virtual machine is too expensive, and communication between these virtual machine is even harder.

That’s when Docker comes into play, and compartmentalise individual application based on their dependencies, but allow them to still “share” libraries with other applications without duplicating them. All the application will share the same host OS, without the extra layer of guest OS that is present in virtual machine set up.

Installing Docker (and Portainer - optional)

Now it’s time to install Docker! There is a simple script for that, just run:

$ curl -sSL https://get.docker.com | sh
$ sudo pip install docker-compose
$ docker ps

We also use docker-compose for multi-container Docker image, which requires python which we install previously. Run docker ps to check if docker is successfully installed. It should show you CONTAINER ID, IMAGE, COMMAND as output.

[Optional] However, I like having a GUI to have a better view of what is going on, which is why we are going to install Portainer, a docker image that help us manage our docker images 🙂

$ sudo docker run -d -p 9443:9443 --name=portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:linux-arm

To break down the command, -p 9443:9443 expose the portainer web client on the port 9443, and --restart=always make sures that portainer is always running even if something went round. The last part we are installing the community edition of portainer for raspberry pi which is an ARM chip. Here you should go to Port Forwarding settings in your router that we mention in Part 1 to open up 9443 if you choose to install Portainer.

Once portainer is running on docker, you can access the web UI through localhost:9443 or public IP address:9443. You would arrive here, and create an admin account accordingly

After setting up the admin account you should reach this website. At the home page, there are a few containers that are already running for me, but you should have no containers that are running if it’s your first setup.

Creating Flask App

First thing first, we need to update and install all the dependencies we need in the RPi, by running the commands below:

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install python3-pip
$ sudo apt-get install python3-dev
$ sudo apt-get install python3-setuptools
$ sudo apt-get install python3-venv
$ sudo apt-get install build-essential libssl-dev libffi-dev

With that we can start by creating our barebone Flask App in any directories you want in RPi with the dependencies printed out in requirements.txt

$ mkdir testflask
$ cd testflask
$ python -m venv venv
$ source ./venv/bin/activate
(venv)$ pip install wheels
(venv)$ pip install flask
(venv)$ pip freeze > requirements.txt
(venv)$ sudo nano app.py

#app.py
from flask import Flask
app = Flask(__name__)

@app.route("/")
def index():
    return "<h1>Hello World</h1>"

if __name__ == "__main__":
    app.run(host='0.0.0.0', port='5000')

After creating the file, we can run it to ensure it works.

(venv)$ python app.py
 * Serving Flask app 'app' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses (0.0.0.0)
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on http://127.0.0.1:5001
 * Running on http://192.168.10.51:5001 (Press CTRL+C to quit)
(venv)$ deactivate

With this, we know our flask app is functioning, but this is only for development purposes. Now let’s deactivate and add some files to Dockerise our flask app. Create two files Dockerfile and docker-compose.yaml with the code below.

Dockerfile

FROM python:3.11.0a6-alpine3.15
WORKDIR /code
COPY requirements.txt /code
RUN pip install -r requirements.txt --no-cache-dir
COPY . /code
CMD python app.py

docker-compose.yml

services:
    web:
        build: .
        ports:
            - "5000:5000"
        volumes:
            - .:/code

Docker compose uses the Dockerfile if you add the build command to your project’s docker-compose.yml. Your Docker workflow should be to build a suitable Dockerfile for each image you wish to create, then use compose to assemble the images using the build command. The docker-compose also determines which port is exposed, so if you are already using port 5000 for something, do change it to any other open port. You can also see that as long your application can run on Docker, even if it is a React App with Java Backend, you can still set it up this way to be hosted.

Now, you can access your website if you go to :5000. However, this is not the end, we will still need to link it up with your domain name and setup basic security for your server and website, which will be explained in the next part.

P.S.

Due to firewall settings which will be set up in the next part of the tutorial, you may need to pip install with trusted tags as seen from below if you are creating another flask app to be hosted

pip install --trusted-host=[pypi.org](http://pypi.org/) --trusted-host=[files.pythonhosted.org](http://files.pythonhosted.org/) flask

This is a three part tutorial that cites relevant tutorial guides that I found online that help me eventually achieve my final goal of self-hosting my personal website.

• Part 1 - RPi Setup (here)
• Part 2 - Flask App with Docker and Portainer
• Part 3 - Domain Name Management with Cloudflare and Nginx Proxy Manager

Hardware setup

The setup was really simple, you take out the motherboard, plug in the 32GB SD card with the Raspberry Pi OS preinstalled by the seller. With the power, monitor, mouse and keyboard plugged into it, all we need to do is the switch it on to boot it up. It can connect to the internet either by WIFI or LAN, but I chose to connect it via WIFI because I don’t want to disconnect it accidentally if I knock it over.

Setting up for SSH connections for Local Access

While you can use the Raspberry Pi like a desktop with a monitor, keyboard and a mouse, most of the time you would rather just access it via SSH like a VPS from whichever device we are more comfortable working on. Firstly, we need to enable the SSH, in my case through the OS GUI.

Once your device boots up:

1. Click on the raspberry logo at the top-left corner.
2. Select Preferences > Raspberry Pi Configuration.

1. Navigate to the Interfaces tab in the configuration window.
2. Enable SSH in the second line.

There are other ways to enable SSH without the GUI as well from the guide here: How to Enable SSH on Raspberry Pi [Definitive Guide] (phoenixnap.com)

Now you can access your Raspberry Pi (RPi) on devices that are connected on the same wifi network, by typing.

pi@raspberrypi:~$ ssh pi@raspberry

If you have changed the name of the RPi, you can still access it by looking for the private IP address of your RPi in the network by typing ifconfig. The IP address is under eth0 if you connected your RPi via LAN cable, or wlan0 if the RPi is connected via Wifi. It’s good to keep this private IP address in mind because many other frameworks are easily accessible from the internal IP address via different ports.

pi@raspberrypi:~$ ifconfig
pi@raspberrypi:~$ 
eth0: flags=4099<UP,BROADCAST,MULTICAST>  mtu 1500
        ether <IP here>  txqueuelen 1000  (Ethernet)
        ...
wlan0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet <IP here>  netmask 255.255.255.0  broadcast 192.168.18.255
        ...

Port Forwarding for Remote Access

However, this doesn’t allow us to access our RPi when you leave your home network. In order to expose port 22 in your router so for you to SSH into the RPi while you are outside of your home network, you need to set up port forwarding that is dependent on your router. At the same time, we are going to open port 80 and 443 to eventually allow HTTP and HTTPS request to our RPi later in the tutorial

I am using a Nokia Beacon, so there is a convenient phone app that allows me to adjust such settings. You can follow this guide for other routers - How to Port Forward on Your Router : HelloTech How

From my Nokia Beacon App:

1. Settings > General > Advanced > Port Forwarding.
2. Set External and Internal Port as 22 (Default Port for SSH), do it for 80 and 443 as well.

After you set that up, you can find out your public IPv4 address by going to What Is My IP Address - See Your Public Address - IPv4 & IPv6

C:\ ssh pi@<YOUR IP ADDRESS>

It’s good to remember this public IP address because many other frameworks are easily accessible from the public IP address via different ports when you are working with your RPi remotely.

This public IP address will not change unless you reset your router, so you could either request an static IP address from your provider (which is next to impossible in Singapore) or you could employ Cloudflare DDNS API to update your public IP address when it does change. That is a topic for another day.

So in this part of the tutorial we managed to do the below:

1) Set up SSH for the RPi for you to access it on the same home network via its private IP address 2) Set up Port Forwarding for you to access your RPi remotely, via its public IP address