22 lines
15 KiB
JavaScript
22 lines
15 KiB
JavaScript
import{_ as a,o as e,c as s,R as o}from"./chunks/framework.44fd0451.js";const y=JSON.parse('{"title":"Install Dashboard","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"en_US/guide/dashboard.md","filePath":"en_US/guide/dashboard.md","lastUpdated":1718495592000}'),t={name:"en_US/guide/dashboard.md"},n=o(`<h1 id="install-dashboard" tabindex="-1">Install Dashboard <a class="header-anchor" href="#install-dashboard" aria-label="Permalink to "Install Dashboard""></a></h1><h2 id="preparation" tabindex="-1">Preparation <a class="header-anchor" href="#preparation" aria-label="Permalink to "Preparation""></a></h2><p>To set up Nezha Monitoring, you need:</p><ol><li>A server with public internet access, with firewall and security policies allowing traffic on ports 8008 and 5555. These ports are necessary for accessing and receiving data. A server with a single core and 512MB of RAM is sufficient for most use cases.</li><li>A domain with an A record set to point to your Dashboard server IP.</li></ol><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>If you want to use a CDN, prepare two domains: one configured with CDN for public access (CDN must support WebSocket protocol), and another domain not using CDN for communication between the Agent and Dashboard.</p><p>This document uses "dashboard.example.com" and "data.example.com" as example domains.</p></div><ol start="3"><li>A Github account (or Gitlab, Gitee).</li></ol><p><strong>This document uses the aaPanel for reverse proxying the Dashboard as an example. As future versions change, some features may change their entry points. This document is for reference only.</strong></p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>This project does not depend on the aaPanel; you can choose any server panel you prefer or manually install Nginx or Caddy to configure SSL and reverse proxy.<br> If you do not need to use ports 80 and 443 to access the Dashboard, you can directly use the installation script to install and run Nezha Monitoring without installing Nginx.</p></div><h2 id="obtaining-github-client-id-and-secret" tabindex="-1">Obtaining Github Client ID and Secret <a class="header-anchor" href="#obtaining-github-client-id-and-secret" aria-label="Permalink to "Obtaining Github Client ID and Secret""></a></h2><p>Nezha Monitoring uses Github, Gitlab, or Gitee as admin accounts.</p><ol><li>First, create an OAuth application. For Github, log in to Github, open <a href="https://github.com/settings/developers" target="_blank" rel="noreferrer">Github OAuth Apps</a>, and select "OAuth Apps" -> "New OAuth App".<br><code>Application name</code> - Fill in as you like.<br><code>Homepage URL</code> - Fill in with the domain for accessing the dashboard, such as "<a href="http://dashboard.example.com" target="_blank" rel="noreferrer">http://dashboard.example.com</a>" (your domain).<br><code>Authorization callback URL</code> - Fill in with the callback address, such as "<a href="http://dashboard.example.com/oauth2/callback" target="_blank" rel="noreferrer">http://dashboard.example.com/oauth2/callback</a>" (don't forget <code>/oauth2/callback</code>).</li><li>Click “Register application”.</li><li>Save the Client ID on the page, then click “Generate a new client secret” to create a new Client Secret, which will be displayed only once, <strong>please keep it safe</strong>.</li></ol><h2 id="using-cloudflare-access-as-oauth2-provider" tabindex="-1">Using Cloudflare Access as OAuth2 Provider <a class="header-anchor" href="#using-cloudflare-access-as-oauth2-provider" aria-label="Permalink to "Using Cloudflare Access as OAuth2 Provider""></a></h2><p>If you encounter issues using Github, Gitlab, or Gitee as admin login, consider switching to <a href="/en_US/guide/q8.html">using Cloudflare Access as the OAuth2 provider</a>.</p><h3 id="creating-a-saas-oidc-application" tabindex="-1">Creating a SaaS-OIDC Application <a class="header-anchor" href="#creating-a-saas-oidc-application" aria-label="Permalink to "Creating a SaaS-OIDC Application""></a></h3><ol><li>Go to <a href="https://one.dash.cloudflare.com" target="_blank" rel="noreferrer">Zero Trust Dashboard</a> and log in with your Cloudflare account.</li><li><code>My Team</code> -> <code>Users</code> -> <code><specific user></code> -> Get <code>User ID</code> and save it.</li><li><code>Access</code> -> <code>Application</code> -> <code>Add an Application</code>.</li><li>Choose <code>SaaS</code>, enter a custom application name in <code>Application</code> (e.g., nezha), select <code>OIDC</code>, and click <code>Add application</code>.</li><li>Select <code>Scopes</code>: <code>openid</code>, <code>email</code>, <code>profile</code>, <code>groups</code>.</li><li>Fill in your callback address in <code>Redirect URLs</code>, such as <code>https://dashboard.example.com/oauth2/callback</code>.</li><li>Save the <code>Client ID</code>, <code>Client Secret</code>, and <code>Issuer</code> address (protocol and domain part), e.g., <code>https://xxxxx.cloudflareaccess.com</code>.</li></ol><p><strong>If using this method, after installing the Dashboard, modify the configuration file <code>/opt/nezha/dashboard/data/config.yaml</code>, and change the <code>Endpoint</code> configuration to the <code>Issuer</code> address saved earlier, e.g., <code>https://xxxxx.cloudflareaccess.com</code>, and restart the Dashboard.</strong></p><h2 id="installing-the-dashboard-on-the-server" tabindex="-1">Installing the Dashboard on the Server <a class="header-anchor" href="#installing-the-dashboard-on-the-server" aria-label="Permalink to "Installing the Dashboard on the Server""></a></h2><p>Run the installation script on the dashboard server:</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">curl</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-L</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">https://raw.githubusercontent.com/naiba/nezha/master/script/install_en.sh</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-o</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">nezha.sh</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">chmod</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">+x</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">nezha.sh</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">sudo</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">./nezha.sh</span></span></code></pre></div><p>After Docker installation completes, enter the following values:</p><ul><li><code>OAuth provider</code> - choose one from github, cloudflare, gitlab, gitee.</li><li><code>Client ID</code> - the previously saved Client ID.</li><li><code>Client Secret</code> - the previously saved Client Secret.</li><li><code>Username</code> - the username/User ID from the OAuth provider.</li><li><code>Site title</code> - custom site title.</li><li><code>Access port</code> - public access port, customizable, default is 8008.</li><li><code>Agent communication port</code> - port for Agent and Dashboard communication, default is 5555.</li></ul><p>After inputting the values, wait for the image to be pulled.<br> When the installation completes, you can access the dashboard by visiting your domain and port number, such as “<a href="http://dashboard.example.com:8008" target="_blank" rel="noreferrer">http://dashboard.example.com:8008</a>”.</p><p>In the future, if you need to run the script again, run:</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">./nezha.sh</span></span></code></pre></div><p>to open the management script.</p><h2 id="configuring-reverse-proxy" tabindex="-1">Configuring Reverse Proxy <a class="header-anchor" href="#configuring-reverse-proxy" aria-label="Permalink to "Configuring Reverse Proxy""></a></h2><p>Create a new site in the aaPanel, with the domain filled in as the public access domain, such as “<a href="http://dashboard.example.com" target="_blank" rel="noreferrer">http://dashboard.example.com</a>”. Then click “Settings” to enter the site settings options, select “Reverse Proxy” - “New Reverse Proxy”.</p><p>Customize a proxy name and fill in <code>http://127.0.0.1</code> in the "Target URL" below, then click “Save”.</p><p>Open the “Configuration File” on the right side of the newly created reverse proxy and replace the configuration file with the following content:</p><div class="language-nginx"><button title="Copy Code" class="copy"></button><span class="lang">nginx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">#PROXY-START/</span></span>
|
||
<span class="line"><span style="color:#C792EA;">location</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">/ </span><span style="color:#A6ACCD;">{</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"> proxy_pass </span><span style="color:#A6ACCD;">http://127.0.0.1:8008</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"> proxy_set_header </span><span style="color:#A6ACCD;">Host </span><span style="color:#89DDFF;">$</span><span style="color:#A6ACCD;">http_host</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"> proxy_set_header </span><span style="color:#A6ACCD;">Upgrade </span><span style="color:#89DDFF;">$</span><span style="color:#A6ACCD;">http_upgrade</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||
<span class="line"><span style="color:#C792EA;">location</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">~</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">^/(ws|terminal/.+)$ </span><span style="color:#A6ACCD;">{</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"> proxy_pass </span><span style="color:#A6ACCD;">http://127.0.0.1:8008</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"> proxy_http_version </span><span style="color:#A6ACCD;">1.1</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"> proxy_set_header </span><span style="color:#A6ACCD;">Upgrade </span><span style="color:#89DDFF;">$</span><span style="color:#A6ACCD;">http_upgrade</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"> proxy_set_header </span><span style="color:#A6ACCD;">Connection </span><span style="color:#C3E88D;">"Upgrade"</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"> proxy_set_header </span><span style="color:#A6ACCD;">Host </span><span style="color:#89DDFF;">$</span><span style="color:#A6ACCD;">http_host</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||
<span class="line"><span style="color:#676E95;font-style:italic;">#PROXY-END/</span></span></code></pre></div><p>Click “Save”.<br> Now you should be able to access the dashboard directly using the domain, such as “<a href="http://dashboard.example.com" target="_blank" rel="noreferrer">http://dashboard.example.com</a>”.</p><h3 id="additional-content" tabindex="-1">Additional Content: <a class="header-anchor" href="#additional-content" aria-label="Permalink to "Additional Content:""></a></h3><p>CaddyServer v1 (v2 does not require special configuration):</p><div class="language-caddy"><button title="Copy Code" class="copy"></button><span class="lang">caddy</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">proxy /ws http://ip:8008 {</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> websocket</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> header_upstream -Origin</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">proxy /terminal/* http://ip:8008 {</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> websocket</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> header_upstream -Origin</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre></div><h2 id="configuring-ssl-in-the-aapanel" tabindex="-1">Configuring SSL in the aaPanel <a class="header-anchor" href="#configuring-ssl-in-the-aapanel" aria-label="Permalink to "Configuring SSL in the aaPanel""></a></h2><p>First, temporarily disable the reverse proxy.<br> Like configuring SSL certificates for other websites, enter the “SSL” in the site settings, and you can choose to automatically apply for a Let’s Encrypt certificate or manually configure an existing certificate.<br> After completing the SSL settings, go back to <a href="https://github.com/settings/developers" target="_blank" rel="noreferrer">Github OAuth Apps</a> and edit the previously created OAuth application. Change all the domain parts in "Homepage URL" and "Authorization callback URL" from <code>http</code> to <code>https</code>, such as "<a href="https://dashboard.example.com" target="_blank" rel="noreferrer">https://dashboard.example.com</a>" and "<a href="https://dashboard.example.com/oauth2/callback" target="_blank" rel="noreferrer">https://dashboard.example.com/oauth2/callback</a>". <strong>Failing to change this may result in being unable to log in to the admin panel.</strong></p><h2 id="updating-the-dashboard" tabindex="-1">Updating the Dashboard <a class="header-anchor" href="#updating-the-dashboard" aria-label="Permalink to "Updating the Dashboard""></a></h2><p>Run the script <code>./nezha.sh</code>, and select to restart and update the dashboard.</p>`,38),l=[n];function r(i,c,p,d,h,u){return e(),s("div",null,l)}const C=a(t,[["render",r]]);export{y as __pageData,C as default};
|