-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathself-host-plausible.html
292 lines (244 loc) · 15.9 KB
/
self-host-plausible.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta description="Why it's worth it to save $1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>toe knee</title>
<link rel="shortcut icon" href="/img/planet.png">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.5.0/modern-normalize.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/styles.css">
<script async defer data-domain="cha0sg0d.github.io" src="https://plausible.one/js/plausible.js"></script>
</head>
<body>
<div class="navbar">
<a href="/"> <img src="/img/planet.png" alt="cha0splanet" width="16" height="16"></a>
<a href="https://twitter.com/cha0sg0d11" target="_blank" class="right"><i class="fa fa-twitter"></i></a>
<a href="https://github.com/cha0sg0d" target="_blank" class="right"><i class="fa fa-github"></i></a>
<a href="/wikis.html" class="right"><i class="fa fa-wikipedia-w"></i></a>
<a href="/projects.html" class="right"> <i class="fa fa-laptop"></i></a>
</div>
<div class="main">
<article class="blog">
<header>
<h1>Self-Hosting Plausible Analytics </h1>
</header>
<div class="markdown-body">
<h3 id="why-plausible-for-website-analytics">Why Plausible for website analytics?</h3>
<p><a href="plausible">Plausible Analytics</a> is a lightweight, open source analytics platform for basic website data. They have a bunch of <a href="reasons">reasons</a> why they're better than Google Analytics.</p>
<h3 id="why-self-host">Why self host?</h3>
<ul>
<li>Learn about <code>Docker</code>, <code>remote hosting</code>, <code>SMTP</code>, <code>DNS</code>, <code>https</code>, and <code>nginx</code></li>
<li>Save $1</li>
</ul>
<p>This article will attempt to explain key concepts about web programming and share the steps I took to get Plausible working. However, if you're just here for the code, each section that is explaining a concept or why it works will be minimized so you can expand as you'd like.</p>
<h3 id="1-get-plausible-running-locally">1. Get Plausible running locally.</h3>
<p>The Plausible team has an <a href="https://github.com/plausible/hosting">example repository</a> for how to self-host their service. The code is run via Docker and Docker Compose.</p>
<details>
<summary>What is Docker?</summary>
<h2 id="docker">Docker</h2>
<p>Docker is a technology for writing code that can run on any machine. Normally, if I write a program on a Mac operating system and try to run that code on Ubuntu, I need to follow a different procedure to get the code running (<code>apt-get</code> instead of <code>brew install</code> for packages, etc...).</p>
<p>However, with Docker, I can spin up a virtual machine called a <em>container</em> that allows me specify what OS to use, what packages to install, and what code to run. Once code works for one container, anyone can run it immediately by creating a copy of that container. This has removed the massive headache of developing software for multiple system configurations.</p>
<p>In Docker terminology, an <em>image</em> is the steps required to create a specific docker container and a <em>container</em> is when you actually run the image. The image is defined by something called a Dockerfile, which is a text file that specifies the image configuration.</p>
</details>
<details>
<summary>What is Docker Compose?</summary>
<h2 id="docker-compose">Docker Compose</h2>
<p>Docker Compose is a technology that allows you to run multiple Docker containers that can interact with each other. For example, if I was just running Docker and I had a front end web page and a database, I would need to run multiple services in one container. This could get messy for debugging purposes, so Docker Compose allows me to run each service in one container, but have the containers talk to each other.</p>
<p>A Docker Compose file tells Docker which containers to create and governs how the containers will interact with each other. Most web applications need multiple containers, so Docker Compose is a common tool.</p>
</details>
<ol>
<li>Follow steps 1, 2, and 3 from Plausible's self-hosting <a href="https://plausible.io/docs/self-hosting">docs</a>. Pause when you get to this line:</li>
</ol>
<blockquote>
<p>You can now navigate to http://{hostname}:8000 and see the login screen.</p>
</blockquote>
<p>Make sure hostname (<code>BASE_URL</code>) <code>= http://localhost:8000</code>. You should now able to see Plausible running on your machine.</p>
<ul>
<li>My <code>plausible-conf.env</code> initally looks like this:
<pre><code> ADMIN_USER_EMAIL=agoss98@gmail.com
ADMIN_USER_NAME=tony
ADMIN_USER_PWD=goss01
BASE_URL=http://localhost
SECRET_KEY_BASE=Uwtj/n2mrNzUMDo9hypcpOsYd1+JP0JwunIPgcTSJLA8wLOrFe5w4COtxF0ZicTj
CgQXCJ9+FJpZVQzHIN65Sw==
</code></pre>
</li>
<li>Note: the password must be > 5 characters.</li>
</ul>
<ol start="2">
<li>Login with your email and password, then request to be emailed the activation code.</li>
</ol>
<p><strong>This didn't work for me</strong>. I kept getting the following error:</p>
<pre><code>```bash
243 Connecting to gmail-smtp-in.l.google.com [2607:f8b0:400d:c00::1b]:25 ... failed: Cannot assign requested address
243 LOG: MAIN
243 H=gmail-smtp-in.l.google.com [2607:f8b0:400d:c00::1b] Cannot assign requested address
</code></pre>
<pre><code>
* Note: I'm still not sure why the standard SMTP container wasn't able to send mail directly.
3. Clearly, the SMTP mail server wasn't working with the default settings.
<details>
<summary>What is SMTP?</summary>
## SMTP (Simple Mail Transfer Protocol)
SMTP is an internet standard communication protocol for electronic mail transmission. Simply put, SMTP sets a standard for how computers that send e-mail should talk to each other. Mail servers typically run SMTP.
</details>
&nbsp;
To solve this issue, I examined the Docker image for [`bytemark/smtp`](https://github.com/BytemarkHosting/docker-smtp), the mail server Plausible uses.
The following configuration in the `hosting/docker-compose` file solved my issue:
```yaml
mail:
image: bytemark/smtp
restart: always
environment:
SMTP_HOST_PORT: 587
RELAY_HOST: smtp.gmail.com
RELAY_PORT: 587
RELAY_USERNAME: agoss98@gmail.com
RELAY_PASSWORD: MY_PASSWORD
```
* Note that the `RELAY_PASSWORD` is my Google App Password, not my standard password.
4. I needed two extra steps to get Gmail to allow this mail to send:
1. Allow less-secure apps to [access](https://support.google.com/accounts/answer/6010255) my account
2. Set an app [password](https://support.google.com/accounts/answer/185833) that allows access to Gmail.
### 2. Get Plausible running on a remote host
<details>
<summary>What is remote hosting?</summary>
## Remote hosting
If I wanted to host Plausible on my own computer I could... but I would be using precious battery life, CPU power, and RAM to run the code. For short-term instances of putting something online, local hosting is fine, but because I want Plausible to always be running, I don't want to spend my computer's resources.
Good news! For $5/month, Digital Ocean, a cloud service provider, let's me run software on one of their servers.
</details>
&nbsp;
1. Get a Digital Ocean [account](https://www.digitalocean.com/?refcode=d2a3afe52625&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=CopyPaste)
2. Set up a [basic Droplet](https://docs.digitalocean.com/products/droplets/) at the cheapest level ($5/month)
3. Connect remotely to your Droplet via your own console via [ssh](https://docs.digitalocean.com/products/droplets/how-to/connect-with-ssh/).
* After running `ssh root@DROPLET_ID_ADDRESS`, you should see the following in your Terminal:
</code></pre>
<pre><code>Welcome to DigitalOcean's 1-Click Docker Droplet.
To keep this Droplet secure, the UFW firewall is enabled.
All ports are BLOCKED except 22 (SSH), 2375 (Docker) and 2376 (Docker).
* The Docker 1-Click Quickstart guide is available at:
https://do.co/3j6j3po#start
* You can SSH to this Droplet in a terminal as root: ssh root@DROPLET_ID_ADDRESS
* Docker is installed and configured per Docker's recommendations:
https://docs.docker.com/install/linux/docker-ce/ubuntu/
* Docker Compose is installed and configured per Docker's recommendations:
https://docs.docker.com/compose/install/#install-compose
For help and more information, visit https://do.co/3j6j3po
</code></pre>
<pre><code>
<details>
<summary>What is SSH?</summary>
## SSH
1. What is it?
The SSH key command instructs your system that you want to open an encrypted Secure Shell Connection to access a remote server over the Internet.
2. How does it work?
SSH relies on multiple cryptographic techniques, including symmetric encryption, asymmetric encryption, and hashing. This provides guarantees about the security of the connection to the remote server.
</details>
&nbsp;
4. Send the `plausible/hosting` repo to the Droplet via `scp` (secure copy):
`scp -r /hosting root@DROPLET_ID_ADDRESS:/hosting`
5. Make the following edits to the `plausible-conf.env` file:
</code></pre>
<pre><code>BASE_URL=http://DROPLET_ID_ADDRESS:8000
</code></pre>
<pre><code>* Note: You can edit remote files on your local text editor with [SFTP](https://www.digitalocean.com/community/tutorials/how-to-use-sftp-to-securely-transfer-files-with-a-remote-server)
6. Run `docker compose up -d` from the `/hosting` repo. You should now see Plausible at `http://DROPLET_ID_ADDRESS:8000` on the Internet!
7. Follow the instructions and copy the following snippet into your website:
```js
<script async defer data-domain="my-website" src="http://DROPLET_ID_ADDRESS:8000/js/plausible.js"></script>
</code></pre>
<ul>
<li>Note that <em>my-website</em> is the name of the website you'd like to get analytics for.</li>
</ul>
<ol start="8">
<li>Identify problem: Because modern web browsers won't <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content">allow</a> you to run a script on your website that is not served with HTTPS, the Plausible script won't run on your website. This brings us to our final task:</li>
</ol>
<h3 id="3-add-https-to-remote-host">3. Add HTTPS to remote host</h3>
<details>
<summary>What is HTTPS?</summary>
<h2 id="https">HTTPS</h2>
<p><strong>What is HTTP?</strong></p>
<p><em>Hyper Text Transfer Protocol</em></p>
<p>First pioneered by Tim Berners-Lee, this protocol defines how to Hyper Text documents -- documents that can link to other documents -- should be shared between computers. This protocol is the <em>lingua franca</em> of the Web. Every website we visit is eventually represented in Hyper Text (HTML).</p>
<p><strong>How does it work?</strong></p>
<p>HTTP is handles the communication between a web client and a server. If I want to load <code>http://espn.com</code>, my web browser requests the content located at <code>http://espn.com</code>. ESPN receives that request and returns content to my browser. HTTP provides the rules for engaging in this <code>request / response</code> transaction.</p>
<p><strong>Sounds great! Why is HTTP dangerous?</strong></p>
<blockquote>
<p>In HTTP all this data is sent in plaintext for anyone to read.</p>
</blockquote>
<p>This can be credit card info, passwords, etc..</p>
<blockquote>
<p>HTTPS is HTTP with encryption. The only difference between the two protocols is that HTTPS uses TLS (SSL) to encrypt normal HTTP requests and responses.</p>
</blockquote>
<p>So, Instead of sending HTTP over a basic TCP/IP stack, Netscape Communications (the founders of Firefox) created an additional encrypted transmission layer on top of it. This simply allows the client and server to guarantee that:</p>
<ol>
<li>the server is who they say they are</li>
<li>no one can read the data sent between client and server</li>
<li>the data sent from server to client can be verified as <em>untampered</em>.</li>
</ol>
<p>This layer, <strong>HTTP + S(ecure), is called HTTPS!</strong></p>
</details>
<ol>
<li>Get a website name. Right now, my Plausible instance is hosted at the IP address <code>DROPLET_ID_ADDRESS:8000</code>. This is a problem because</li>
</ol>
<blockquote>
<p>One of the main functions of SSL is to prove to the user that they are really connecting to the site they requested, and not to an attacker masquerading as the end site. Without linking the domain name to the certificate this would not be possible</p>
</blockquote>
<p>So, an IP address is nice, but I need to connect it to a <em>domain name</em> to set up HTTPS.
2. For $2, I bought <code>plausible.on</code> from Namecheap, a domain purchasing service.</p>
<details>
<summary>What's DNS </summary>
<h2 id="dns">DNS</h2>
<p><a href="https://www.digitalocean.com/community/tutorials/an-introduction-to-dns-terminology-components-and-concepts">DNS</a> is the system for mapping human readable names to the IP address of the computer.</p>
</details>
<ol start="3">
<li>Verify my domain via email. This is the most basic level of certification: I control the name I bought.</li>
<li><a href="https://www.digitalocean.com/community/tutorials/how-to-point-to-digitalocean-nameservers-from-common-domain-registrars">Connect</a> my domain name to my hosted Plausible instance via Digital Ocean</li>
</ol>
<blockquote>
<p>To set up a domain name, you need to purchase a domain name from a domain name registrar and then set up DNS records for it. Registrars are organizations that have completed an <a href="https://www.icann.org/resources/pages/accreditation-2012-02-25-en">accreditation process</a> that allows them to sell domain names. DigitalOcean is not a domain name registrar, but you can manage your DNS records from the DigitalOcean Control Panel</p>
</blockquote>
<p>This allows Digital Ocean to manage my domain's DNS record.</p>
<ol start="5">
<li>Wait 30 min - 2 hrs</li>
</ol>
<blockquote>
<p>It will take some time for the name server changes to propagate after you’ve saved them. During this time, the domain registrar communicates the changes you’ve made with your ISP (Internet Service Provider)</p>
</blockquote>
<ol start="6">
<li>Configure nginx.</li>
</ol>
<details>
<summary>What's a reverse proxy </summary>
<pre><code>## Reverse proxy
Read this fantastic [tutorial](https://www.freecodecamp.org/news/docker-nginx-letsencrypt-easy-secure-reverse-proxy-40165ba3aee2/):
A reverse proxy allows you to direct all incoming traffic to your server. We want all requests for `plausible.on` to be secured with HTTPS.
</code></pre>
</details>
<ol>
<li>
<p>Follow the steps listed in this fantastic self-hosting <a href="https://theselfhostingblog.com/posts/completely-self-hosting-plausible-io-a-privacy-friendly-alternative-to-google-analytics/#configuring-nginx">tutorial</a>:</p>
</li>
<li>
<p>Add to your snippet website and celebrate:</p>
</li>
</ol>
<pre><code class="hljs language-js"><script <span class="hljs-keyword">async</span> defer data-domain=<span class="hljs-string">"my-website"</span> src=<span class="hljs-string">"https://DROPLET_ID_ADDRESS/js/plausible.js"</span>></script></code></pre>
<ul>
<li>Note: Now that you're using a reverse proxy, you don't need to specify the port number because the proxy routes all traffic to port 8000 as specified in the <code>server</code> template you added to <code>nginx.conf</code></li>
</ul>
<h3 id="4-conclusion">4. Conclusion</h3>
<p>As you can see, the simple act of self-hosting Plausible required me to learn about a variety of web-based concepts. When the dust settled, I learned a lot and saved $1 per month (woohoo!)</p>
</div>
</article>
</div>
</body>
</html>