22 lines
16 KiB
JavaScript
22 lines
16 KiB
JavaScript
import{_ as a,c as e,o as t,a4 as s}from"./chunks/framework.BmdFiWrL.js";const k=JSON.parse('{"title":"Install Dashboard","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"en_US/guide/dashboard.md","filePath":"en_US/guide/dashboard.md","lastUpdated":1723550104000}'),i={name:"en_US/guide/dashboard.md"},n=s(`<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-an-oauth2-provider" tabindex="-1">Using Cloudflare Access as an OAuth2 Provider <a class="header-anchor" href="#using-cloudflare-access-as-an-oauth2-provider" aria-label="Permalink to "Using Cloudflare Access as an OAuth2 Provider""></a></h2><p>If you encounter issues using GitHub, GitLab, or Gitee for admin account logins, consider switching to <a href="/en_US/guide/q8.html">Cloudflare Access as your OAuth2 provider</a> for authentication.</p><h3 id="setting-up-a-new-saas-oidc-application" tabindex="-1">Setting Up a New SaaS-OIDC Application <a class="header-anchor" href="#setting-up-a-new-saas-oidc-application" aria-label="Permalink to "Setting Up a New SaaS-OIDC Application""></a></h3><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The following steps are for users who have already started using Zero Trust. If you have not previously used Cloudflare Zero Trust, we strongly recommend that you first read the <a href="/en_US/guide/q8.html">Guide on Using Cloudflare Access as an OAuth2 Provider</a> to understand the configuration examples and setup process.</p></div><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="oidc-authentication-configuration-optional" tabindex="-1">OIDC Authentication Configuration (Optional) <a class="header-anchor" href="#oidc-authentication-configuration-optional" aria-label="Permalink to "OIDC Authentication Configuration (Optional)""></a></h2><p>Nazha supports custom OIDC authentication login. For configuration details, please refer to the documentation: <a href="/en_US/guide/q10.html">Enable OIDC authorization</a>.</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 vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">curl</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -L</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> https://raw.githubusercontent.com/naiba/nezha/master/script/install_en.sh</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -o</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> nezha.sh</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> && </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">chmod</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> +x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> nezha.sh</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> && </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sudo</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ./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 vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">./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 vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">nginx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">#PROXY-START/</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">location</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> / </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> proxy_pass </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">http://127.0.0.1:8008;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> proxy_set_header </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Host $http_host;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> proxy_set_header </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Upgrade $http_upgrade;</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">location</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ~</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;"> ^/(ws|terminal/.+)$ </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> proxy_pass </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">http://127.0.0.1:8008;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> proxy_http_version </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> proxy_set_header </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Upgrade $http_upgrade;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> proxy_set_header </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Connection </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Upgrade"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> proxy_set_header </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Host $http_host;</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">#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 vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">caddy</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>proxy /ws http://ip:8008 {</span></span>
|
||
<span class="line"><span> websocket</span></span>
|
||
<span class="line"><span> header_upstream -Origin</span></span>
|
||
<span class="line"><span>}</span></span>
|
||
<span class="line"><span>proxy /terminal/* http://ip:8008 {</span></span>
|
||
<span class="line"><span> websocket</span></span>
|
||
<span class="line"><span> header_upstream -Origin</span></span>
|
||
<span class="line"><span>}</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>`,41),o=[n];function r(l,h,d,p,c,u){return t(),e("div",null,o)}const b=a(i,[["render",r]]);export{k as __pageData,b as default};
|