Deploy website traffic statistics background based on Tencent cloud lightweight application server and umami

These days , How can there be no head picture (**-**)

Website traffic statistics

Want to know your website , How many people browse every day ？ Or you want to view the visitor statistics of your website more intuitively ？ A lot of people use Google Analytics And other tools . General statistical data ：

• Number of website visitors per day
• Average page length of visitors
• Source of visit （ Jump from what website to your own website ）
• ……

however , Some third-party tools , Access is complex , And the data is not in your own hands , Worry about personal data being optimized by third-party platforms 、 User modeling, etc .

Come and try Umami, One is based on Nodejs Development of the website browsing statistics system , Build your own website statistics background , Even a complete victory .

official Demo chart

Umami

Umami be based on Node.js Development , All data is stored in their own Mysql（ Of course , Support MariaDB） or Postgresql Inside . Don't worry about your data being “ Whoring for nothing ” Or abuse .

Very curious , use separately MySQL database ,Umami How to solve the problem of high concurrency ,“ Fantasy reading ” perhaps “ Dirty reading ” The problem of ？ Have the opportunity to study the source code ～～

Umami Open source address ：https://github.com/mikecao/umami

Umami Official document address ：https://umami.is/docs/about

Lightweight application servers

Unami You need your own server , Tencent cloud lightweight application server is recommended here , At the same time, if you haven't filed your domain name , Hong Kong, which can use Tencent cloud lightweight application server first 、 Singapore server , At a very low price , Fast build .

Compared with traditional CVM, Faster deployment , More wallet friendly , and Use lightweight application servers , Deploy an application , perfect , I bought a lot of servers myself , Deploy multiple applications ：

Small and exquisite , Easy to deploy

preparation

In terms of core hardware , Only one server is needed . But if you want to improve the experience , It is recommended that ：

• domain name ： Easy to use domain name and HTTPS Visit the Umami backstage , Safer and more convenient .
• CDN： Use CDN（ Like Tencent cloud CDN） Domain name access , Speed up website access , At the same time, the server is protected to a certain extent IP.

The second is software , need ：

• MySQL/MariaDB：Umami Data storage .
• Nginx： Use Nginx, Yes umami Default 3000 Port for reverse proxy .
• Nodejs： If you have not installed Nodejs, You can read this article =>https://www.mintimate.cn/2021/07/26/nvmNode/

This tutorial , To take care of Xiaobai ; Demonstrate both conventional and pagoda methods ; If you haven't used any servers before , You can use the pagoda method to build .

Server purchase

The first is to purchase Tencent cloud lightweight application server , I suggest you buy a pagoda image version , Or pure Debian edition ：

Pagoda mirror

Debian System image

A little friend who uses pagoda image , You can initialize the server , Visit the pagoda panel , install ：

install Nginx and Mysql（ Free version ）

install umami

after , We need to SSH Remote connection to our Linux The server ;

If this is your first time using Linux The server , I don't know how to connect to the server , Can view tutorials ：

• How to explain in detail SSH Log in to your own Linux The server

clone umami Warehouse

After connecting to our server remotely , We need to clone umami The warehouse of ：https://github.com/mikecao/umami

We just use git Just clone ：

git clone https://github.com/mikecao/umami

If your server cannot connect GitHub, have access to Github Speed up

clone umami Warehouse

Installation dependency

Installation dependency , need Nodejs Support for , If you do not install Nodejs, You can view articles ：

• https://cloud.tencent.com/developer/article/1812323

after Enter the newly cloned warehouse Inside , We can then install the dependencies ：

#  Enter the newly cloned warehouse 
cd umami
#  Use NPM Do dependency installation 
npm install

umami Installation dependency

Here we are , Dependent installation ends , We need to initialize the database .

Initialize database

Initialize database , Here are two ways to show you ：

• Conventional methods ： Configure and install by yourself MySQL Database situation .
• Pagoda method ： Using pagoda to install database .

If you don't want to use pagoda panels , But I don't know how to configure it manually MySQL/MariaDB, Reference article ：

• An article , Four ways to teach you in Linux Installation on MariaDB
• An article 、 There are three ways Debian Easy to install on Nginx

Conventional methods （ Non Xiaobai is recommended ）

Conventional methods , Make sure you have installed MySQL perhaps MariaDB, I am out of personal habit , Installation is MariaDB：

Installed MariaDB edition

It's simple , I initialize the database ： Log in to the database - Create a new database - Create a new user - Bind database - use umami Self contained SQL initialization .

If you have any other needs , You can change （ such as ： If safety is not required , It can be used directly root User initiated database ）.

Logging into the database is too easy , I set the database to log in locally without a password , therefore ：

#  Log in to the database 
mariadb

Sign in MariaDB

Database and users

I believe that the little friend who looks at the conventional method , It must be true SQL I know something about it , Let me just say something roughly ：

#  Create a user , And allow the local machine to access 
CREATE USER 'umami'@'localhost' IDENTIFIED BY 'E51H1c1c';
#  Create a database 
CREATE DATABASE umami;

Create databases and users

among ：

• E51H1c1c： The database password I set .
• Database and user? I name them both umami, Easy to classify .
• I only allow local login , Convenient for safety management .

User rights are granted to

after , We put the newly created database , Leave it to the new user to manage ：

GRANT ALL ON umami.* TO 'umami'@'localhost';

Then quit MariaDB Interaction ：

Exit interaction

SQL initialization

umami Bring their own SQL file , Let's initialize the database ：

Self contained SQL file

therefore , We can extract and run ：

mariadb -u umami -p umami < sql/schema.mysql.sql

among ：

• -u umami： Use umami Account ;
• -p umami： Theoretically -p Represents the use of a password , But this represents using a password to access ,umami Represents the database accessed .

SQL initialization

Here we are ,SQL The initialization of is completed , You can log in. MariaDB Look at the ：

SQL initialization

Pagoda method （ Recommend Xiaobai ）

The pagoda method is very simple , In the pagoda , Create a new database ：

Create a new database in the pagoda panel

Acquired data

after , go back to Terminal Inside , Using umami Self contained SQL File for database initialization ：

mysql -u umami -p umami < sql/schema.mysql.sql

SQL initialization

among , The password will be hidden automatically , Directly copy the pagoda in the background , Paste here .

Here we are ,SQL The initialization of is completed .

Configuration environment

umami We need to configure a .env The environment of umami root directory , after umami Meeting Read this file to connect to the database “Hash Add salt ”.

vim .env

We just use vim Create , And write ：

DATABASE_URL=mysql://umami:[email protected]:3306/umami
HASH_SALT=Mintimate

Configuration environment

among ：

• first umami Username
• E51H1c1c For the user password
• the second umami For the database
• HASH_SALT by Hash Salt character , Any string can .

Once configured , Save and push . If you don't know vim The operation of , The operation panel can be used , Or check out the article ：

• Terminal text editing artifact --Vim Detailed command . How to configure Vim as well as Vim plug-in unit ？

Or directly use the pagoda panel to operate ：

Tencent cloud lightweight application server pagoda image

Because I bought two lightweight application servers for demonstration at the same time （ A pagoda mirror , a Debian）, therefore Umami The installation address of is sometimes different ; Everyone should remember their own Umami Installation address .

structure umami

Last , We can have our own configuration （ database ）, Conduct umami The construction of , It's simple , Use command ：

npm run build

Be careful , Here you need to download the dependency package , There are no nodes in Chinese Mainland depending on the package download address ; therefore , Continental servers may be slow to build , Even build failure .（ Tencent cloud lightweight application server in Hong Kong 、 Singapore will be faster ）

Build failed , Just run it again npm run build

In the building ……

Building a successful ……

function umami

after , We can use ：

npm run start

start-up umami：

Successful launch ……

This is the time , You can access it with a browser . But in order to be more convenient , We use Nginx Reverse proxy .

Background operation

in addition , It is recommended to run in the background umami, have access to screen：https://cloud.tencent.com/developer/article/1844735

Of course , You can also register as systemctl service , Registration content reference ：

[Unit]
Description=NodeServer

[Service]
ExecStart=/……/npm start
Restart=always
Environment=PATH=/usr/bin:/usr/local/bin:/……node/bin
Environment=NODE_ENV=production
WorkingDirectory=/YourWorkPath/umami/

[Install]
WantedBy=multi-user.target

The final result ：

Use systemctl

This …… Have the opportunity to video this article , Let me show you ; Or another article Systemctl The tutorial is for you .

Nginx Reverse proxy

In order to be able to use Https visit , Or use 443、80 Port access , Not strange IP+3000 port , This strange way to access umami. We use Nginx Reverse proxy ：

Normal operation

Normal operation , We compile and install it ourselves Nginx, We compile Nginx To configure , Add reverse proxy configuration ：

location /{
    proxy_pass http://127.0.0.1:3000/;
}

Nginx To configure

Pagoda operation

Of course , You can also use the pagoda to operate ：

First, add the domain name to the pagoda ：

Pagoda add domain name

Then reverse proxy ：

Nginx To configure

If you don't know the domain name resolution , You can refer to Tencent cloud's DNS file ：https://cloud.tencent.com/document/product/302/2589

How to use

First , Let's go backstage , Create a website ：

Add a website

after , We copy the trace code , To your own website <head> Just paste it inside ：

Add a website

Add site tracking code

I am a Vue project , Put it in the root directory index.html that will do ; Redeployment ：

Website head

You can track website data ：

Website data starts tracking

Final effect

Final effect

Of course , You can also look at the source of users ：

Final effect 2

It is convenient for us to..., according to user preferences , Write something users like , Or adjust the development direction of your website 、SEO Optimization, etc. . Like in the picture , Most users are bing From the search engine , Why doesn't Baidu search engine ？ May be SEO optimization problem , Or Baidu article content , Baidu crawler doesn't like it... Etc .

The only deficiency is ,IP The library is not complete （ Capable little friends , You can change it (*≧ω≦)）：

Final effect 3

END

Here we are ,Umami Just install and deploy the website . Do you have any friends who want to know how to OTA Upgrade ？

In fact, the government also provides methods , Only need Umami Without operation , again pull And install and build dependencies that will do ：

#  here Umami Is not running ,Terminal be in Umami inside address 
git pull
#  Dependent on reinstallation 
npm install
#  Rebuild project 
npm run build
#  Restart project （ If you have configuration Systemctl, have access to ）
npm run start