前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

luffyZh發表於2020-02-15
前端Docker

前言

前端監控一直開發生產中很重要的一環，因為組內原本的專案監控機制不能通用以及新專案暫時還沒有完善的前端監控，所以想著自己研究搭建一下可行的前端監控方案。所以就有了這篇文章，小公司節約成本，收費的監控方案就不考慮了，採用的就是免費方案中最主流的 sentry～?

此篇文章建議與下面這篇文章一起看，本篇初步接觸前端監控方案的相關核心技術，下一篇是監控方案的詳細使用細節以及案例實踐～

前端監控 Sentry 進階篇 —— Next.js 專案監控實踐

【注意️】：如果你已經在本地（伺服器）成功搭建了 Sentry，那麼請直接點選左上角（右上角）關閉按鈕，本文會浪費你的時間～

Docker

關於 Docker 相關知識，邊寫邊學我並不能給大家講什麼，如果想了解更多，大家可以去社群查閱更多文章～結尾也會給大家推薦幾篇，所以這裡只是記錄一下自己的使用過程，因為搭建 Sentry，Docker 環境是必須的，並且 Docker 現在在前端也確實比較火～

第一步：安裝 Docker

我是根據官網教程，註冊賬號，一步一步走過來的，官方提供非常人性化的入門引導，所以在這裡，不多說什麼，只要你最後根據官方指引，實現瞭如下所示的步驟，就表示我們倆水平已經一致了，別管知不知道為啥，反正我是跑起來了（小頭一揚，哼～?）：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

第二步：利用 Docker 部署 Node.js 應用

迴歸本質，學 Docker 是為了搞 Sentry 的監控，而監控的內容呢就是前端應用，我這邊以 Next.js 專案為例，所以本質上是一個 Node.js 應用。

其實還可以是任意型別的應用。

Dockerfile

Docker 部署應用的核心是 Dockerfile 檔案 了，基本上所有的配置項都在這裡書寫，相關的 Docker 部署命令會找尋該檔案執行相應命令。在這裡，我利用 next-antd-scaffold 腳手架來做演示進行 Docker 本地部署 Node.js 應用。

# Dockerfile
FROM node:8.14 As builder    # 基礎依賴
LABEL maintainer="luffyZh"   # Label - 專案維護者
COPY . .                     # 本機根目錄所有檔案拷貝到容器的根目錄下 這個可以根據喜好調節路徑
RUN yarn install             # 安裝依賴
CMD yarn start               # 在容器環境執行的命令

複製程式碼

構建映象

# 構建映象的命令
docker build -t [imageName]:[imageVersion] . // 注意，必須帶著最後的 .（表示當前工程目錄）
複製程式碼

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

構建過程如上圖所示，emm，別擔心，紅色部分是腳手架裡面的 warning 警告，並不是出錯了，我第一次構建也下了一跳，希望 docker 能把 warning 配色改改?。最後 successfully 了表示構建成功。使用docker images來檢視一下本地映象列表：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

可以看到，列表裡出現了剛才構建的映象。

本地執行

# 執行命令
docker run -it -p 8080:3006 luffyzh/next-antd-scaffold:v1

    -i: 以互動模式執行容器，通常與 -t 同時使用；
    -t: 為容器重新分配一個偽輸入終端，通常與 -i 同時使用；
    -p: 指定埠對映，格式為：主機(宿主)埠:容器埠，這裡將容器的3006埠與宿主機的8080埠對映
    -it: -i -t 的合併命令

複製程式碼

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

程式輸出如圖所示，但是千萬記住！！！我們要訪問的地址是http://localhost:8080而不是http://localhost:3006，因為我們進行了埠對映，控制檯輸出的就是 docker 容器內啟動的的偽終端的輸出，程式啟動如下圖所示：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

上面執行的是一個開發環境，正常來說我們肯定是生產環境部署，那麼問題來了，開發環境yarn install + yarn start專案就啟動了，而生產環境是yarn install + yarn build + yarn prod。我們的啟動命令是 CMD，那麼前面的兩個命令該怎麼辦呢？好吧，去查文件

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

發現，原來 RUN 命令是可以連續使用多條的，自上而下的執行～那麼修改一下 Dockerfile

# Dockerfile
FROM node:8.14 As builder
LABEL maintainer="luffyZh"
COPY . .
RUN yarn install
RUN yarn build
CMD yarn prod
複製程式碼

相關問題小探究

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

上面這三張圖，我分別執行了三個docker run命令：

# 第一個，不帶埠號

結果：容器內成功啟動專案，但是本地瀏覽器無法訪問，5999或者其他埠都不行，
也就是說需要設定 -p [宿主埠]:[容器埠] 的對映

# 第二個，對映容器錯誤的埠

結果：容器內成功啟動專案在5999埠，而對映的是5888埠到本地8080，
訪問本地8080並沒有服務啟動

# 第三個，正確對映

結果：容器內成功啟動5999 -> 本地8080，啟動後程式正常執行。

複製程式碼

也就是說，這個-p命令算是剛需了，必須要對映一下宿主機與容器的埠，這樣外部才可以訪問～

push 到 docker 倉庫

上面我們的第一個 node 映象已經生成成功了，這個 image 暫時只存在於本地，如果想所有人都能 pull 下來並執行，就需要推送到 docker hub 上，命令就是 push。

## 命令
docker push [OPTIONS] NAME[:TAG]
複製程式碼

用來用去發現 docker 的命令跟 git 的很像，當然了，畢竟都是倉庫。

使用docker push luffyzh/next-antd-scaffold:v1將本地 image 推送到了遠端，命令列輸出如下：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

推送完成，去 docker hub 上看看，果然已經推送成功，所有人都可以使用了。

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

那麼，如果是別人的倉庫的映象該怎麼查詢呢？在這裡可以使用docker search來進行查詢，比如下圖：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

搜尋 'luffyzh'，就會將匹配到的映象全部列印出來，關鍵字越精確匹配結果就越準，並且查詢結果裡也看到了我們剛剛推送上去的映象。

Sentry

上面 Docker 的簡單學習已經完成了，下面就開始搭建前端監控系統的核心部分 Sentry 內容了。

嗯，沒看錯，搭建 Sentry 依賴的是 Docker 環境，並且，上面的內容基本就夠用了。

先去 Sentry 官網白嫖一下免費版，看看效果咋樣。這裡依然使用 Next.js 專案作為實踐。

官方監控

  • 第一步：註冊賬戶登入，新建專案

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

如上圖，這裡我選擇新建的是 node.js 應用，你可以新建任何型別的應用。

  • 第二步：插入 Sentry 程式碼到程式裡

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

新建完專案後， Sentry 會提供給我們一個 DSN 地址，這個地址十分的重要，用來標識每一個應用，並且上傳錯誤資訊等。我們將程式碼嵌入工程裡。

具體程式碼在專案裡，就不貼上了，因為下一篇文章會更詳細介紹。

  • 寫錯誤丟擲異常看看

上面專案建好了，程式碼也插入進去了，所以我們就可以檢視監控效果了，我們寫幾個異常看看，具體效果如下圖：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

從上圖可以看到，Sentry 捕獲到了我們丟擲的異常，並且還有詳細的錯誤上下文資訊，而且還提供郵件提醒服務，真的是 NB 的不行。真香～愛了！！

Sentry 官方其實為我們提供很完善的監控服務，但是呢，重點是它是收費的，因此對於小型公司或者個人開發者來說，可能負擔不起，Sentry 可能考慮到這一點了，提供了免費的開源服務，並且文件教程真的是很完善很友好～

這裡有一點感觸，強大的開發團隊有責任的開發團隊真的厲害，即使是開發文件部署文件，也是寫的很棒。這裡感覺真的與語言沒關係，就是無論中英文，看的沒什麼代溝，根據核心指示基本都能成功，值得我們學習～Docker 和 Sentry 都是如此。

本地使用 Docker 搭建 Sentry

鋪墊到現在，終於要開始搭建自己本地的 Sentry 服務了。其實本地和伺服器搭建沒有什麼太大區別，所以這裡為了方便說明，就用本地環境來做講解。

筆者是 Mac OS 系統，其他系統可能有出入，以官方文件為主～

官方部落格地址：docker install sentry

安裝前準備

  • Docker 17.05.0+
  • Docker Compose 1.19.0+
  • A dedicated (sub)domain to host Sentry on (for example, sentry.yourcompany.com).
  • At least 2400MB memory
  • 2 CPU Cores

上面幾點要求在我們安裝完 Docker 之後都基本滿足了，接下來就可以來使用 Docker 本地部署 Sentry 服務了。

第一步：拉取官方倉庫並安裝

git clone https://github.com/getsentry/onpremise.git
複製程式碼

因為官方已經幫助封裝好了安裝檔案，所以和之前的其他教程不一樣，很簡單的執行該檔案就行：

這一版直接自動安裝的是官方大概咋 2019年7月份 左右更新的，7月份之前還需要自己進行一些相關操作。

# 安裝配置
cd onpremise && ./install.sh
複製程式碼

如果你執行完沒有任何報錯，那麼就很好，筆者這邊報瞭如下錯誤，實力打臉，剛剛還說基本條件都滿足了呢?：

Checking minimum requirements...
FAIL: Expected minimum RAM available to Docker to be 2400 MB but found 1998 MB
複製程式碼

使用docker info發現 docker 的可用最大記憶體在電腦上確實只有1.952G = 1998MB。

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

翻了半天只知道是 docker 記憶體不夠，但是電腦記憶體還有很多，查閱各種資料（Baidu/Google/Stack Overflow）也沒有答案如何設定 docker 記憶體，最後發現 Mac OS 要這麼設定：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

如上圖設定好就可以開始繼續安裝了。最後如果不出意外，應該是下面這樣。

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

如果不出意外，但是其實還是會出意外的，具體意外我給作者提了 install.sh Issue，並且也解決了，你如果看完文章才開始安裝的，應該不會再遇到了～對了，在安裝過程中，會有註冊賬號的過程，輸入郵箱和密碼即可～

成功安裝後按圖所示，執行命令docker-compose up -d，然後訪問http://localhost:9000（Sentry 預設啟動埠號 9000）如下圖所示就表示我們本地的 Sentry 服務已經搭建完成了：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

然後使用我們剛才的使用者名稱和密碼登入即可。

第二步：配置郵件服務

其實簡單的監控需求，我們通過日誌也能完全 Cover，Sentry 更為強大的功能在於錯誤警報，比如線上錯誤發報警郵件，自動提 Jira 等等。在這裡簡單配置一下郵件服務，因為也有一些坑在這裡。

這裡我使用 163 郵箱的 SMTP 服務，所以需要先開啟 163 郵箱的 SMTP 授權碼，具體就不在這裡介紹了，很簡單～

然後，再次開啟上面的onpremise目錄：

# 第一步
cd onpremise && cd sentry

# 第二步
vi config.xml
複製程式碼

然後找到 Mail Server，將對應的服務修改成自己的郵件服務：

###############
# Mail Server #
###############

# mail.backend: 'smtp'  # Use dummy if you want to disable email entirely
mail.host: 'smtp.163.com'
mail.port: 465                       // 開啟 TLS，不開的話郵件服務預設 25
mail.username: 'your@163.com'        // 你的郵箱地址
mail.password: 'your smtp secret'    // 這裡是你的 SMTP 授權碼
mail.use-tls: true                   // 開啟 TLS
# The email address to send on behalf of 
mail.from: 'your@163.com'            // 發件人是誰，一般和 mail.username 一致
複製程式碼

配置好之後，需要重新安裝一下cd onpremise && ./install.sh，安裝完成後，我們可以去Admin/Manage/Mail頁面進行檢視：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

點選傳送測試郵件服務，如果沒問題就會傳送一封測試郵件到你的郵箱裡。當然了，我也說了，如果沒問題，人生道路多坎坷，哪有那麼容易一次成功的...實際效果，失敗了，如下圖：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

出錯了不要怕，我們不恥下問啊（臭不要臉啊），就又去人家下面提 Issue 去了，Mail Issue，然後友好的交流以及查閱相關文獻，最後找到解決辦法 —— 使用django_smtp_ssl作為郵件後臺來傳送郵件：

  • 第一步：安裝django_smtp_ssl
# 1 - 進入目錄
cd onpremise && cd sentry

# 2 - 編輯依賴檔案
vi requirements.txt

# 3 - 鍵入如下內容：

# Add plugins here
# 發郵件支援SSL協議
django-smtp-ssl~=1.0
redis-py-cluster==1.3.4
複製程式碼
  • 第二步：修改config.yml
# mail.backend: 'smtp'  # Use dummy if you want to disable email entirely
mail.backend: 'django_smtp_ssl.SSLEmailBackend'   // 新的郵件後臺
mail.host: 'smtp.163.com'
mail.port: 587                                    // 465 -> 587（465/587 兩個是 163 合法的埠，但是確實只有 587 正常使用，具體 issue裡有解釋）
mail.username: 'your@163.com'
mail.password: 'your smpt sceret'                 // 注意，不是你的郵箱密碼
mail.use-tls: true
# The email address to send on behalf of
mail.from: 'your@163.com'
複製程式碼
  • 第三步：重新安裝
cd onpremise && ./install.sh
複製程式碼

然後我們再發一下：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

成功了哦～到這裡基本就可以了。但是呢，其實有時候可能會出現下面的問題：

前端監控基礎篇 — Docker + Sentry 搭建前端監控系統

經查閱，表示郵件服務其實是走通了的，只不過163郵箱那裡覺得這是個垃圾郵件，就沒有發。但是，經過大量的測試，我發現跟網路有關，如果在公司裡使用內網，就容易出問題，如果使用個人手機熱點，就可以傳送。可能是內網閘道器埠限制之類的吧，有研究過的小夥伴可以評論留言一下，我好補充一下～

這裡一定要使用 TLS，因為一般的 linux 伺服器並不會開放 SMTP:25 埠，而且使用 TLS 也更安全。

推薦文章

Docker

我這篇並不是 docker 入門文章，而是記錄自己的使用過程而已?，而上面幾篇寫的都很好，感興趣的可以去看看，如果是大佬請跳過，當我什麼也沒說，。

Sentry

關於 Sentry，實際上寫的都差不多，因為官方文件介紹的確實很詳細了，這裡我覺得大家還是直接去官網看看吧～

總結

這一篇只是初試水，具體的專案部署監控實踐在下一篇會更加詳細的介紹～兵馬未動，糧草先行，至少我們得先把環境搭出來不是～?

前端監控 Sentry 進階篇 —— Next.js 專案監控實踐

相關文章