zarif59/website-zarif
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
master
website-zarif/posts/npm-networking/index.html

3522 lines
59 KiB
HTML
Raw Permalink Normal View History

first commit
2023-08-30 20:07:11 +03:00
<!doctype html>
<!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="my"
data-mode="dark"
>
<!-- The Head -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta
name="viewport"
content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
>
<!-- Begin Jekyll SEO tag v2.8.0 -->
<meta name="generator" content="Jekyll v4.3.2" />
<meta property="og:title" content="Nginx Proxy Manager Networking" />
<meta property="og:locale" content="my" />
<meta name="description" content="Fungsi" />
<meta property="og:description" content="Fungsi" />
<link rel="canonical" href="https://blog.zarifhomelab.com/posts/npm-networking/" />
<meta property="og:url" content="https://blog.zarifhomelab.com/posts/npm-networking/" />
<meta property="og:site_name" content="Zarif Rani" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2022-06-08T12:25:00-05:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Nginx Proxy Manager Networking" />
<meta name="twitter:site" content="@twitter_username" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2022-06-08T12:25:00-05:00","datePublished":"2022-06-08T12:25:00-05:00","description":"Fungsi","headline":"Nginx Proxy Manager Networking","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.zarifhomelab.com/posts/npm-networking/"},"url":"https://blog.zarifhomelab.com/posts/npm-networking/"}</script>
<!-- End Jekyll SEO tag -->
<title>Nginx Proxy Manager Networking | Zarif Rani
</title>
<!--
The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
Generated by: https://realfavicongenerator.net/
-->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png">
<link rel="manifest" href="/assets/img/favicons/site.webmanifest">
<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Zarif Rani">
<meta name="application-name" content="Zarif Rani">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="/assets/lib/fonts/main.css">
<!-- GA -->
<!-- Bootstrap -->
<link rel="stylesheet" href="/assets/lib/bootstrap/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="/assets/lib/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/lib/tocbot/tocbot.min.css">
<!-- Manific Popup -->
<link rel="stylesheet" href="/assets/lib/magnific-popup/magnific-popup.css">
<!-- JavaScript -->
<!-- A placeholder to allow defining custom metadata -->
</head>
<body>
<!-- The Side Bar -->
<div id="sidebar" class="d-flex flex-column align-items-end">
<div class="profile-wrapper">
<a href="/" id="avatar" class="rounded-circle">
<img src="/assets/non-post-image/avatar.webp" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
</a>
<div class="site-title">
<a href="/">Zarif Rani</a>
</div>
<div class="site-subtitle fst-italic">Bloging dan Dokumentasi</div>
</div>
<!-- .profile-wrapper -->
<ul class="nav flex-column flex-grow-1 w-100 ps-0">
<!-- home -->
<li class="nav-item">
<a href="/" class="nav-link">
<i class="fa-fw fas fa-home"></i>
<span>LAMAN UTAMA</span>
</a>
</li>
<!-- the real tabs -->
<li class="nav-item">
<a href="/categories/" class="nav-link">
<i class="fa-fw fas fa-stream"></i>
<span>KATEGORI</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/tags/" class="nav-link">
<i class="fa-fw fas fa-tags"></i>
<span>TAG</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/archives/" class="nav-link">
<i class="fa-fw fas fa-archive"></i>
<span>ARKIB</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/about/" class="nav-link">
<i class="fa-fw fas fa-info-circle"></i>
<span>TENTANG</span>
</a>
</li>
<!-- .nav-item -->
</ul>
<!-- ul.nav.flex-column -->
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
<a
href="https://www.instagram.com/firaz.fat/"
aria-label="instagram"
target="_blank"
rel="noopener noreferrer"
>
<i class="fab fa-instagram"></i>
</a>
<a
href="https://facebook.com/zarif.fathurrahman"
aria-label="facebook"
target="_blank"
rel="noopener noreferrer"
>
<i class="fab fa-facebook"></i>
</a>
<a
href="javascript:location.href = 'mailto:' + ['zariffathurrahman59','gmail.com'].join('@')"
aria-label="email"
>
<i class="fas fa-envelope"></i>
</a>
<a
href="/feed.xml"
aria-label="rss"
>
<i class="fas fa-rss"></i>
</a>
</div>
<!-- .sidebar-bottom -->
</div>
<!-- #sidebar -->
<div id="main-wrapper" class="d-flex justify-content-center">
<div id="main" class="container px-xxl-5">
<!-- The Top Bar -->
<div id="topbar-wrapper">
<div
id="topbar"
class="container d-flex align-items-center justify-content-between h-100"
>
<span id="breadcrumb">
<span>
<a href="/">
Laman utama
</a>
</span>
<span>Nginx Proxy Manager Networking</span>
</span>
<!-- endof #breadcrumb -->
<i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
<div id="topbar-title">
Pos
</div>
<i id="search-trigger" class="fas fa-search fa-fw"></i>
<span id="search-wrapper" class="align-items-center">
<i class="fas fa-search fa-fw"></i>
<input
class="form-control"
id="search-input"
type="search"
aria-label="search"
autocomplete="off"
placeholder="Cari..."
>
</span>
<span id="search-cancel">Batal</span>
</div>
</div>
<div class="row">
<!-- core -->
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
<div class="post px-1 px-md-2">
<!-- Refactor the HTML structure -->
<!--
In order to allow a wide table to scroll horizontally,
we suround the markdown table with `<div class="table-wrapper">` and `</div>`
-->
<!--
Fixed kramdown code highlight rendering:
https://github.com/penibelst/jekyll-compress-html/issues/101
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
-->
<!-- Change the icon of checkbox -->
<!-- images -->
<!-- CDN URL -->
<!-- Add image path -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- Add header for code snippets -->
<!-- Create heading anchors -->
<!-- return -->
<h1 data-toc-skip>Nginx Proxy Manager Networking</h1>
<div class="post-meta text-muted">
<!-- published date -->
<span>
Diterbitkan
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class=""
data-ts="1654709100"
data-df="DD/MM/YYYY"
data-bs-toggle="tooltip" data-bs-placement="bottom"
>
08/06/2022
</em>
</span>
<!-- lastmod date -->
<div class="d-flex justify-content-between">
<!-- author(s) -->
<span>
Oleh
<em>
<a href="https://www.instagram.com/firaz.fat/">Zarif Fathurrahman Rani</a>
</em>
</span>
<div>
<!-- read time -->
<!-- Calculate the post's reading time, and display the word count in tooltip -->
<!-- words per minute -->
<!-- return element -->
<span
class="readtime"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="761 kata"
>
<em>4 minit</em> baca</span>
</div>
</div> <!-- .d-flex -->
</div> <!-- .post-meta -->
<div class="post-content">
<h2 id="fungsi"><span class="me-2">Fungsi</span><a href="#fungsi" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Nginx Proxy Manager berperanan sebagai reverse proxy kepada webapp dalam server.</p>
<p><a href="/assets/post-image/image-2.png" class="popup img-link "><img data-src="/assets/post-image/image-2.png" alt="image-2.png" class="lazyload" data-proofer-ignore></a></p>
<h2 id="objektif"><span class="me-2">Objektif</span><a href="#objektif" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Dapat configure static networking docker mengunakan Nginx Proxy Manager (NPM) seperti gambar di bawah.</p>
<p><a href="/assets/post-image/Gambarajah Tanpa Tajuk.drawio.png" class="popup img-link "><img data-src="/assets/post-image/Gambarajah Tanpa Tajuk.drawio.png" alt="Gambarajah Tanpa Tajuk.drawio.png" class="lazyload" data-proofer-ignore></a></p>
<h2 id="environment"><span class="me-2">Environment</span><a href="#environment" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<ul>
<li>Ubuntu 22.04 LTS</li>
<li>Docker 20.10.12</li>
</ul>
<h2 id="install-docker"><span class="me-2">Install docker</span><a href="#install-docker" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<div class="language-bash highlighter-rouge"><div class="code-header">
<span data-label-text="Shell"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
</pre></td><td class="rouge-code"><pre><span class="nb">sudo </span>apt <span class="nb">install </span>docker.io
<span class="nb">sudo </span>apt <span class="nb">install </span>docker-compose
</pre></td></tr></tbody></table></code></div></div>
<h2 id="bina-docker-compose-file-npm"><span class="me-2">Bina docker-compose file NPM</span><a href="#bina-docker-compose-file-npm" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<div class="language-bash highlighter-rouge"><div class="code-header">
<span data-label-text="Shell"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="rouge-code"><pre><span class="nb">mkdir </span>npm
<span class="nb">cd </span>npm
<span class="nb">touch </span>docker-compose.yaml
nano docker-compose.yaml
</pre></td></tr></tbody></table></code></div></div>
<div class="language-yaml highlighter-rouge"><div class="code-header">
<span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">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
</pre></td><td class="rouge-code"><pre><span class="na">version</span><span class="pi">:</span> <span class="s1">'</span><span class="s">3'</span>
<span class="na">services</span><span class="pi">:</span>
<span class="na">app</span><span class="pi">:</span>
<span class="na">image</span><span class="pi">:</span> <span class="s1">'</span><span class="s">jc21/nginx-proxy-manager:latest'</span>
<span class="na">restart</span><span class="pi">:</span> <span class="s">unless-stopped</span>
<span class="na">ports</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s1">'</span><span class="s">80:80'</span>
<span class="pi">-</span> <span class="s1">'</span><span class="s">81:81'</span>
<span class="pi">-</span> <span class="s1">'</span><span class="s">443:443'</span>
<span class="na">volumes</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">data:/data</span>
<span class="pi">-</span> <span class="s">letsencrypt:/etc/letsencrypt</span>
<span class="na">networks</span><span class="pi">:</span>
<span class="na">npm-network</span><span class="pi">:</span>
<span class="na">ipv4_address</span><span class="pi">:</span> <span class="s">172.19.0.2</span>
<span class="na">volumes</span><span class="pi">:</span>
<span class="na">data</span><span class="pi">:</span>
<span class="na">letsencrypt</span><span class="pi">:</span>
<span class="na">networks</span><span class="pi">:</span>
<span class="na">npm-network</span><span class="pi">:</span>
<span class="na">ipam</span><span class="pi">:</span>
<span class="na">driver</span><span class="pi">:</span> <span class="s">default</span>
<span class="na">config</span><span class="pi">:</span>
<span class="pi">-</span> <span class="na">subnet</span><span class="pi">:</span> <span class="s2">"</span><span class="s">172.19.0.0/24"</span>
</pre></td></tr></tbody></table></code></div></div>
<h2 id="run-docker-compose"><span class="me-2">Run docker-compose</span><a href="#run-docker-compose" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<div class="language-bash highlighter-rouge"><div class="code-header">
<span data-label-text="Shell"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre></td><td class="rouge-code"><pre><span class="nb">sudo </span>docker-compose up <span class="nt">-d</span>
</pre></td></tr></tbody></table></code></div></div>
<h2 id="list-docker-network"><span class="me-2">List docker network</span><a href="#list-docker-network" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<div class="language-bash highlighter-rouge"><div class="code-header">
<span data-label-text="Shell"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
</pre></td><td class="rouge-code"><pre><span class="nb">sudo </span>docker network <span class="nb">ls
</span>NETWORK ID NAME DRIVER SCOPE
d63470120ca8 bridge bridge <span class="nb">local
</span>2221f68bf40d host host <span class="nb">local
</span>b3bd7a7d7c41 none null <span class="nb">local
</span>a39cfebb3cfe npm_npm-network bridge <span class="nb">local</span>
</pre></td></tr></tbody></table></code></div></div>
<h2 id="bina-docker-compose-file-wordpress"><span class="me-2">Bina docker-compose file Wordpress</span><a href="#bina-docker-compose-file-wordpress" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<div class="language-bash highlighter-rouge"><div class="code-header">
<span data-label-text="Shell"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="rouge-code"><pre><span class="nb">mkdir </span>wordpress
<span class="nb">cd </span>wordpress
<span class="nb">touch </span>docker-compose.yaml
nano docker-compose.yaml
</pre></td></tr></tbody></table></code></div></div>
<div class="language-yaml highlighter-rouge"><div class="code-header">
<span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">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
</pre></td><td class="rouge-code"><pre><span class="na">version</span><span class="pi">:</span> <span class="s2">"</span><span class="s">3.9"</span>
<span class="na">services</span><span class="pi">:</span>
<span class="na">wordpress-db</span><span class="pi">:</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">mariadb</span>
<span class="na">volumes</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">wordpress-db:/var/lib/mysql</span>
<span class="na">restart</span><span class="pi">:</span> <span class="s">unless-stopped</span>
<span class="na">environment</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">MYSQL_RANDOM_ROOT_PASSWORD=yes</span>
<span class="pi">-</span> <span class="s">MYSQL_PASSWORD=wordpress</span>
<span class="pi">-</span> <span class="s">MYSQL_USER=wordpress</span>
<span class="pi">-</span> <span class="s">MYSQL_DATABASE=wordpress</span>
<span class="na">networks</span><span class="pi">:</span>
<span class="na">wordpress-back-network</span><span class="pi">:</span>
<span class="na">wordpress</span><span class="pi">:</span>
<span class="na">depends_on</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">wordpress-db</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">wordpress:latest</span>
<span class="na">volumes</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">wordpress_data:/var/www/html</span>
<span class="na">ports</span><span class="pi">:</span>
<span class="pi">-</span> <span class="m">80</span> <span class="c1"># only exposing internal port to npm-network</span>
<span class="na">restart</span><span class="pi">:</span> <span class="s">unless-stopped</span>
<span class="na">environment</span><span class="pi">:</span>
<span class="na">WORDPRESS_DB_HOST</span><span class="pi">:</span> <span class="s">wordpress-db</span>
<span class="na">WORDPRESS_DB_USER</span><span class="pi">:</span> <span class="s">wordpress</span>
<span class="na">WORDPRESS_DB_PASSWORD</span><span class="pi">:</span> <span class="s">wordpress</span>
<span class="na">WORDPRESS_DB_NAME</span><span class="pi">:</span> <span class="s">wordpress</span>
<span class="na">networks</span><span class="pi">:</span>
<span class="na">wordpress-back-network</span><span class="pi">:</span>
<span class="na">npm_npm-network</span><span class="pi">:</span>
<span class="na">ipv4_address</span><span class="pi">:</span> <span class="s">172.19.0.2</span>
<span class="na">volumes</span><span class="pi">:</span>
<span class="na">wordpress-db</span><span class="pi">:</span>
<span class="na">wordpress_data</span><span class="pi">:</span>
<span class="na">networks</span><span class="pi">:</span>
<span class="na">wordpress-back-network</span><span class="pi">:</span>
<span class="na">driver</span><span class="pi">:</span> <span class="s">bridge</span>
<span class="na">npm_npm-network</span><span class="pi">:</span> <span class="c1">#connecting to the exisisting network</span>
<span class="na">external</span><span class="pi">:</span> <span class="kc">true</span>
</pre></td></tr></tbody></table></code></div></div>
<h2 id="list-dan-inspect-docker-network"><span class="me-2">List dan inspect docker network</span><a href="#list-dan-inspect-docker-network" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<div class="language-bash highlighter-rouge"><div class="code-header">
<span data-label-text="Shell"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre></td><td class="rouge-code"><pre><span class="nb">sudo </span>docker network <span class="nb">ls
</span>NETWORK ID NAME DRIVER SCOPE
d63470120ca8 bridge bridge <span class="nb">local
</span>2221f68bf40d host host <span class="nb">local
</span>b3bd7a7d7c41 none null <span class="nb">local
</span>a39cfebb3cfe npm_npm-network bridge <span class="nb">local
</span>b3bd7a7d7c65 wordpress-back-network bridge <span class="nb">local</span>
</pre></td></tr></tbody></table></code></div></div>
<div class="language-bash highlighter-rouge"><div class="code-header">
<span data-label-text="Shell"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">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
</pre></td><td class="rouge-code"><pre><span class="nb">sudo </span>docker network inspect npm_npm-network
<span class="o">[</span>
<span class="o">{</span>
<span class="s2">"Name"</span>: <span class="s2">"npm_npm-network"</span>,
<span class="s2">"Id"</span>: <span class="s2">"a39cfebb3cfe6d82a77c69251ca4e78e02abed0a752240796bc6c96a7a0090bd"</span>,
<span class="s2">"Created"</span>: <span class="s2">"2022-06-05T12:05:38.861192412Z"</span>,
<span class="s2">"Scope"</span>: <span class="s2">"local"</span>,
<span class="s2">"Driver"</span>: <span class="s2">"bridge"</span>,
<span class="s2">"EnableIPv6"</span>: <span class="nb">false</span>,
<span class="s2">"IPAM"</span>: <span class="o">{</span>
<span class="s2">"Driver"</span>: <span class="s2">"default"</span>,
<span class="s2">"Options"</span>: null,
<span class="s2">"Config"</span>: <span class="o">[</span>
<span class="o">{</span>
<span class="s2">"Subnet"</span>: <span class="s2">"172.16.238.0/24"</span>,
<span class="s2">"Gateway"</span>: <span class="s2">"172.16.238.1"</span>
<span class="o">}</span>
<span class="o">]</span>
<span class="o">}</span>,
<span class="s2">"Internal"</span>: <span class="nb">false</span>,
<span class="s2">"Attachable"</span>: <span class="nb">true</span>,
<span class="s2">"Ingress"</span>: <span class="nb">false</span>,
<span class="s2">"ConfigFrom"</span>: <span class="o">{</span>
<span class="s2">"Network"</span>: <span class="s2">""</span>
<span class="o">}</span>,
<span class="s2">"ConfigOnly"</span>: <span class="nb">false</span>,
<span class="s2">"Containers"</span>: <span class="o">{</span>
<span class="s2">"ba23f260105e68296b4c346640774963176bc3d93dd42a1234023ea2b40bfdca"</span>: <span class="o">{</span>
<span class="s2">"Name"</span>: <span class="s2">"npm_app_1"</span>,
<span class="s2">"EndpointID"</span>: <span class="s2">"8638f90956697c900fc904e47d178531c97706290019f833196b8b2d4330ee8f"</span>,
<span class="s2">"MacAddress"</span>: <span class="s2">"02:42:ac:10:ee:10"</span>,
<span class="s2">"IPv4Address"</span>: <span class="s2">"172.18.0.2/16"</span>,
<span class="s2">"IPv6Address"</span>: <span class="s2">""</span>
<span class="o">}</span>,
<span class="s2">"f958e696d6b952b97806df0e7bebe3ea2cb3f077e8e45fb36d2c0847bf81954d"</span>: <span class="o">{</span>
<span class="s2">"Name"</span>: <span class="s2">"wordpress_app_1"</span>,
<span class="s2">"EndpointID"</span>: <span class="s2">"b3c5a33bd1118e0a7dc03e648609eb4bcc2372dda1a1a16c2e1182267fa0864b"</span>,
<span class="s2">"MacAddress"</span>: <span class="s2">"02:42:ac:10:ee:0a"</span>,
<span class="s2">"IPv4Address"</span>: <span class="s2">"172.18.0.3/16"</span>,
<span class="s2">"IPv6Address"</span>: <span class="s2">""</span>
<span class="o">}</span>
<span class="o">}</span>,
<span class="s2">"Options"</span>: <span class="o">{}</span>,
<span class="s2">"Labels"</span>: <span class="o">{</span>
<span class="s2">"com.docker.compose.network"</span>: <span class="s2">"npm-network"</span>,
<span class="s2">"com.docker.compose.project"</span>: <span class="s2">"npm"</span>,
<span class="s2">"com.docker.compose.version"</span>: <span class="s2">"1.25.0"</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">]</span>
</pre></td></tr></tbody></table></code></div></div>
<blockquote class="prompt-info">
<p>Note npm container run pada IP 172.18.0.2 dan wordpress container run pada IP 172.18.0.3</p>
</blockquote>
<h2 id="bina-docker-compose-file-nginx"><span class="me-2">Bina docker-compose file nginx</span><a href="#bina-docker-compose-file-nginx" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<div class="language-bash highlighter-rouge"><div class="code-header">
<span data-label-text="Shell"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="rouge-code"><pre><span class="nb">mkdir </span>nginx
<span class="nb">cd </span>nginx
<span class="nb">touch </span>docker-compose.yaml
nano docker-compose.yaml
</pre></td></tr></tbody></table></code></div></div>
<div class="language-yaml highlighter-rouge"><div class="code-header">
<span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="rouge-code"><pre><span class="na">version</span><span class="pi">:</span> <span class="s1">'</span><span class="s">3'</span>
<span class="na">services</span><span class="pi">:</span>
<span class="na">nginx</span><span class="pi">:</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">nginx:latest</span>
<span class="na">restart</span><span class="pi">:</span> <span class="s">unless-stopped</span>
<span class="na">ports</span><span class="pi">:</span>
<span class="pi">-</span> <span class="m">80</span> <span class="c1"># only exposing port to the npm-network</span>
<span class="na">volumes</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">./src:/usr/share/nginx/html</span>
<span class="na">networks</span><span class="pi">:</span>
<span class="na">npm_npm-network</span><span class="pi">:</span>
<span class="na">ipv4_address</span><span class="pi">:</span> <span class="s">172.19.0.4</span>
<span class="na">networks</span><span class="pi">:</span>
<span class="na">npm_npm-network</span><span class="pi">:</span> <span class="c1">#connecting to the exisisting network</span>
<span class="na">external</span><span class="pi">:</span> <span class="kc">true</span>
</pre></td></tr></tbody></table></code></div></div>
<h2 id="inspect-kembali-docker-network"><span class="me-2">Inspect kembali docker network</span><a href="#inspect-kembali-docker-network" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<div class="language-bash highlighter-rouge"><div class="code-header">
<span data-label-text="Shell"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Disalin!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">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
</pre></td><td class="rouge-code"><pre><span class="nb">sudo </span>docker network inspect npm_npm-network
<span class="o">[</span>
<span class="o">{</span>
<span class="s2">"Name"</span>: <span class="s2">"npm_npm-network"</span>,
<span class="s2">"Id"</span>: <span class="s2">"a39cfebb3cfe6d82a77c69251ca4e78e02abed0a752240796bc6c96a7a0090bd"</span>,
<span class="s2">"Created"</span>: <span class="s2">"2022-06-05T12:05:38.861192412Z"</span>,
<span class="s2">"Scope"</span>: <span class="s2">"local"</span>,
<span class="s2">"Driver"</span>: <span class="s2">"bridge"</span>,
<span class="s2">"EnableIPv6"</span>: <span class="nb">false</span>,
<span class="s2">"IPAM"</span>: <span class="o">{</span>
<span class="s2">"Driver"</span>: <span class="s2">"default"</span>,
<span class="s2">"Options"</span>: null,
<span class="s2">"Config"</span>: <span class="o">[</span>
<span class="o">{</span>
<span class="s2">"Subnet"</span>: <span class="s2">"172.16.238.0/24"</span>,
<span class="s2">"Gateway"</span>: <span class="s2">"172.16.238.1"</span>
<span class="o">}</span>
<span class="o">]</span>
<span class="o">}</span>,
<span class="s2">"Internal"</span>: <span class="nb">false</span>,
<span class="s2">"Attachable"</span>: <span class="nb">true</span>,
<span class="s2">"Ingress"</span>: <span class="nb">false</span>,
<span class="s2">"ConfigFrom"</span>: <span class="o">{</span>
<span class="s2">"Network"</span>: <span class="s2">""</span>
<span class="o">}</span>,
<span class="s2">"ConfigOnly"</span>: <span class="nb">false</span>,
<span class="s2">"Containers"</span>: <span class="o">{</span>
<span class="s2">"ba23f260105e68296b4c346640774963176bc3d93dd42a1234023ea2b40bfdca"</span>: <span class="o">{</span>
<span class="s2">"Name"</span>: <span class="s2">"npm_app_1"</span>,
<span class="s2">"EndpointID"</span>: <span class="s2">"8638f90956697c900fc904e47d178531c97706290019f833196b8b2d4330ee8f"</span>,
<span class="s2">"MacAddress"</span>: <span class="s2">"02:42:ac:10:ee:10"</span>,
<span class="s2">"IPv4Address"</span>: <span class="s2">"172.18.0.2/16"</span>,
<span class="s2">"IPv6Address"</span>: <span class="s2">""</span>
<span class="o">}</span>,
<span class="s2">"f958e696d6b952b97806df0e7bebe3ea2cb3f077e8e45fb36d2c0847bf81954d"</span>: <span class="o">{</span>
<span class="s2">"Name"</span>: <span class="s2">"wordpress_app_1"</span>,
<span class="s2">"EndpointID"</span>: <span class="s2">"b3c5a33bd1118e0a7dc03e648609eb4bcc2372dda1a1a16c2e1182267fa0864b"</span>,
<span class="s2">"MacAddress"</span>: <span class="s2">"02:42:ac:10:ee:0a"</span>,
<span class="s2">"IPv4Address"</span>: <span class="s2">"172.18.0.3/16"</span>,
<span class="s2">"IPv6Address"</span>: <span class="s2">""</span>
<span class="o">}</span>
<span class="s2">"jbqwuebwqubeuwqew7678e6wqhegwquge12tfvhvhj12ijij21j7656hgvvacttat"</span>: <span class="o">{</span>
<span class="s2">"Name"</span>: <span class="s2">"nginx_app_1"</span>,
<span class="s2">"EndpointID"</span>: <span class="s2">"b3c5a33bd1118e0a7dc03e648609eb4bcc2372dda1a1a16c2e1182267fa0864b"</span>,
<span class="s2">"MacAddress"</span>: <span class="s2">"02:42:ac:10:ee:0a"</span>,
<span class="s2">"IPv4Address"</span>: <span class="s2">"172.18.0.4/16"</span>,
<span class="s2">"IPv6Address"</span>: <span class="s2">""</span>
<span class="o">}</span>
<span class="o">}</span>,
<span class="s2">"Options"</span>: <span class="o">{}</span>,
<span class="s2">"Labels"</span>: <span class="o">{</span>
<span class="s2">"com.docker.compose.network"</span>: <span class="s2">"npm-network"</span>,
<span class="s2">"com.docker.compose.project"</span>: <span class="s2">"npm"</span>,
<span class="s2">"com.docker.compose.version"</span>: <span class="s2">"1.25.0"</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">]</span>
</pre></td></tr></tbody></table></code></div></div>
<blockquote class="prompt-info">
<p>Note npm container run pada IP 172.18.0.2, wordpress container run pada IP 172.18.0.3 dan nginx container run pada IP 172.18.0.4</p>
</blockquote>
<h2 id="langkah-akhir"><span class="me-2">Langkah akhir</span><a href="#langkah-akhir" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Login ke NPM admin page (http://localhost:81/) dan mula configure domain menuju kepada docker container.</p>
<p><a href="/assets/post-image/Tangkap layar 2022-06-09 081716.png" class="popup img-link "><img data-src="/assets/post-image/Tangkap layar 2022-06-09 081716.png" alt="Tangkap layar 2022-06-09 081716.png" class="lazyload" data-proofer-ignore></a></p>
<h2 id="link-berguna"><span class="me-2">Link berguna</span><a href="#link-berguna" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<ul>
<li><a href="https://docs.docker.com/network/">https://docs.docker.com/network/</a></li>
</ul>
</div>
<div class="post-tail-wrapper text-muted">
<!-- categories -->
<div class="post-meta mb-3">
<i class="far fa-folder-open fa-fw me-1"></i>
<a href='/categories/homelab/'>homelab</a>,
<a href='/categories/docker/'>docker</a>
</div>
<!-- tags -->
<div class="post-tags">
<i class="fa fa-tags fa-fw me-1"></i>
<a href="/tags/docker/"
class="post-tag no-text-decoration" >docker</a>
<a href="/tags/server/"
class="post-tag no-text-decoration" >server</a>
<a href="/tags/npm/"
class="post-tag no-text-decoration" >npm</a>
<a href="/tags/how-to/"
class="post-tag no-text-decoration" >how-to</a>
</div>
<div class="post-tail-bottom
d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
<div class="license-wrapper">
Pos ini dilesenkan di bawah
<a href="https://creativecommons.org/licenses/by/4.0/">
CC BY 4.0
</a>
oleh penulis.
</div>
<!-- Post sharing snippet -->
<div class="share-wrapper">
<span class="share-label text-muted me-1">Kongsikan</span>
<span class="share-icons">
<a
href="https://twitter.com/intent/tweet?text=Nginx%20Proxy%20Manager%20Networking%20-%20Zarif%20Rani&url=https%3A%2F%2Fblog.zarifhomelab.com%2Fposts%2Fnpm-networking%2F"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Twitter"
target="_blank"
rel="noopener"
aria-label="Twitter"
>
<i class="fa-fw fab fa-twitter"></i>
</a>
<a
href="https://www.facebook.com/sharer/sharer.php?title=Nginx%20Proxy%20Manager%20Networking%20-%20Zarif%20Rani&u=https%3A%2F%2Fblog.zarifhomelab.com%2Fposts%2Fnpm-networking%2F"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Facebook"
target="_blank"
rel="noopener"
aria-label="Facebook"
>
<i class="fa-fw fab fa-facebook-square"></i>
</a>
<a
href="https://t.me/share/url?url=https%3A%2F%2Fblog.zarifhomelab.com%2Fposts%2Fnpm-networking%2F&text=Nginx%20Proxy%20Manager%20Networking%20-%20Zarif%20Rani"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Telegram"
target="_blank"
rel="noopener"
aria-label="Telegram"
>
<i class="fa-fw fab fa-telegram"></i>
</a>
<i
id="copy-link"
class="fa-fw fas fa-link small"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Salin Pautan"
data-title-succeed="Pautan disalin!"
>
</i>
</span>
</div>
</div><!-- .post-tail-bottom -->
</div><!-- div.post-tail-wrapper -->
</div>
</div>
<!-- #core-wrapper -->
<!-- panel -->
<div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
<div class="access">
<!-- Get the last 5 posts from lastmod list. -->
<div id="access-lastmod" class="post">
<div class="panel-heading">Pos dikemaskini</div>
<ul class="post-content list-unstyled ps-0 pb-1 ms-1 mt-2">
<li class="text-truncate lh-lg">
<a href="/posts/quotes/">Quotes</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/internalmed/">Internal Medicine</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/pengalam-ramadan-di-mesir/">Pengalaman Ramadan di Mesir</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/home-media/">Home Media Stack</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/automatic-deploy-jekyll-website/">Automatic Deploy Jekyll Website Menggunakan Gitea Webhook</a>
</li>
</ul>
</div>
<!-- #access-lastmod -->
<!-- The trending tags list -->
<div id="access-tags">
<div class="panel-heading">Tag popular</div>
<div class="d-flex flex-wrap mt-3 mb-1 me-3">
<a class="post-tag btn btn-outline-primary" href="/tags/how-to/">how-to</a>
<a class="post-tag btn btn-outline-primary" href="/tags/server/">server</a>
<a class="post-tag btn btn-outline-primary" href="/tags/docker/">docker</a>
<a class="post-tag btn btn-outline-primary" href="/tags/medic/">medic</a>
<a class="post-tag btn btn-outline-primary" href="/tags/mesir/">mesir</a>
<a class="post-tag btn btn-outline-primary" href="/tags/alex/">alex</a>
<a class="post-tag btn btn-outline-primary" href="/tags/dns/">dns</a>
<a class="post-tag btn btn-outline-primary" href="/tags/kedihupan/">kedihupan</a>
<a class="post-tag btn btn-outline-primary" href="/tags/cdn/">cdn</a>
<a class="post-tag btn btn-outline-primary" href="/tags/gitea/">gitea</a>
</div>
</div>
</div>
<div id="toc-wrapper" class="ps-0 pe-4 mb-5">
<div class="panel-heading ps-3 pt-2 mb-2">Kandungan</div>
<nav id="toc"></nav>
</div>
</div>
</div>
<!-- tail -->
<div class="row">
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5">
<!--
Recommend the other 3 posts according to the tags and categories of the current post,
if the number is not enough, use the other latest posts to supplement.
-->
<!-- The total size of related posts -->
<!-- An random integer that bigger than 0 -->
<!-- Equals to TAG_SCORE / {max_categories_hierarchy} -->
<!-- Fill with the other newlest posts -->
<div id="related-posts" class="mb-2 mb-sm-4">
<h3 class="pt-2 mb-4 ms-1" data-toc-skip>
Pos Lain
</h3>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
<div class="col">
<a href="/posts/npm/" class="card post-preview h-100">
<div class="card-body">
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class="small"
data-ts="1654622700"
data-df="DD/MM/YYYY"
>
07/06/2022
</em>
<h4 class="pt-0 my-2" data-toc-skip>Nginx Proxy Manager</h4>
<div class="text-muted small">
<p>
Fungsi
Nginx Proxy Manager berperanan sebagai reverse proxy kepada webapp dalam server.
Environment
Ubuntu 22.04 LTS
Docker 20.10.12
Install docker
sudo apt install docker.io
sudo apt ...
</p>
</div>
</div>
</a>
</div>
<div class="col">
<a href="/posts/jellky/" class="card post-preview h-100">
<div class="card-body">
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class="small"
data-ts="1657528166"
data-df="DD/MM/YYYY"
>
11/07/2022
</em>
<h4 class="pt-0 my-2" data-toc-skip>Jellky | Static Web Generator</h4>
<div class="text-muted small">
<p>
Fungsi
Jellky adalah simple tetapi berkuasa static website generator. Saya sendiri menggunakan Jellky untuk melari website ini.
Environment
Ubuntu 22.04 LTS
Docker 20.10.12
Install docker...
</p>
</div>
</div>
</a>
</div>
<div class="col">
<a href="/posts/umami/" class="card post-preview h-100">
<div class="card-body">
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class="small"
data-ts="1657528166"
data-df="DD/MM/YYYY"
>
11/07/2022
</em>
<h4 class="pt-0 my-2" data-toc-skip>Umami</h4>
<div class="text-muted small">
<p>
Fungsi
Umami adalah webanalytic tool yang berfungsi untuk track statistik website seperti jumlah pelawat, jumlah page view dan lain lain. 
Environment
Ubuntu 22.04 LTS
Docker 20.10.12
Ins...
</p>
</div>
</div>
</a>
</div>
</div>
<!-- .card-deck -->
</div>
<!-- #related-posts -->
<!-- Navigation buttons at the bottom of the post. -->
<div class="post-navigation d-flex justify-content-between">
<a
href="/posts/nginx-webserver/"
class="btn btn-outline-primary"
prompt="Sebelum"
>
<p>Nginx Webserver</p>
</a>
<a
href="/posts/gbnetwork/"
class="btn btn-outline-primary"
prompt="Seterusnya"
>
<p>Beli Domain di GB Network</p>
</a>
</div>
<!-- The comments switcher -->
<!-- The Disqus lazy loading. -->
<div id="disqus_thread" class="pt-2 pb-2">
<p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
</div>
<script type="text/javascript">
var disqus_config = function () {
this.page.url = 'https://blog.zarifhomelab.com/posts/npm-networking/';
this.page.identifier = '/posts/npm-networking/';
};
/* Lazy loading */
var disqus_observer = new IntersectionObserver(
function (entries) {
if (entries[0].isIntersecting) {
(function () {
var d = document,
s = d.createElement('script');
s.src = 'https://blogzarifhomr.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
disqus_observer.disconnect();
}
},
{ threshold: [0] }
);
disqus_observer.observe(document.querySelector('#disqus_thread'));
/* Auto switch theme */
function reloadDisqus() {
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
/* Disqus hasn't been loaded */
if (typeof DISQUS === 'undefined') {
return;
}
if (document.readyState == 'complete') {
DISQUS.reset({ reload: true, config: disqus_config });
}
}
}
if (document.querySelector('.mode-toggle')) {
window.addEventListener('message', reloadDisqus);
}
</script>
</div>
</div>
<!-- The Search results -->
<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
<div class="col-11 post-content">
<div id="search-hints">
<!-- The trending tags list -->
<div id="access-tags">
<div class="panel-heading">Tag popular</div>
<div class="d-flex flex-wrap mt-3 mb-1 me-3">
<a class="post-tag btn btn-outline-primary" href="/tags/how-to/">how-to</a>
<a class="post-tag btn btn-outline-primary" href="/tags/server/">server</a>
<a class="post-tag btn btn-outline-primary" href="/tags/docker/">docker</a>
<a class="post-tag btn btn-outline-primary" href="/tags/medic/">medic</a>
<a class="post-tag btn btn-outline-primary" href="/tags/mesir/">mesir</a>
<a class="post-tag btn btn-outline-primary" href="/tags/alex/">alex</a>
<a class="post-tag btn btn-outline-primary" href="/tags/dns/">dns</a>
<a class="post-tag btn btn-outline-primary" href="/tags/kedihupan/">kedihupan</a>
<a class="post-tag btn btn-outline-primary" href="/tags/cdn/">cdn</a>
<a class="post-tag btn btn-outline-primary" href="/tags/gitea/">gitea</a>
</div>
</div>
</div>
<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
</div>
</div>
</div>
</div>
<!-- The Footer -->
<footer>
<div class="container px-lg-4">
<div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
<p>Dikuasakan oleh <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a> dengan tema <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>.
</p>
<p>©
2023
<a href="https://www.instagram.com/firaz.fat/">Zarif Fathurrahman Rani</a>.
<span
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Kecuali jika dinyatakan, Pos blog di situs ini dilesenkan di bawah Creative Commons Attribution 4.0 International License (CC BY 4.0) oleh penulis."
>Sebagian kandungan dilindungi.</span>
</p>
</div>
</div>
</footer>
<div id="mask"></div>
<button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
<i class="fas fa-angle-up"></i>
</button>
<div
id="notification"
class="toast"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-bs-animation="true"
data-bs-autohide="false"
>
<div class="toast-header">
<button
type="button"
class="btn-close ms-auto"
data-bs-dismiss="toast"
aria-label="Close"
></button>
</div>
<div class="toast-body text-center pt-0">
<p class="px-2 mb-3">Kandungan baharu tersedia.</p>
<button type="button" class="btn btn-primary" aria-label="Update">
Kemas kini
</button>
</div>
</div>
<!-- JS selector for site. -->
<!-- commons -->
<!-- layout specified -->
<!-- image lazy-loading & popup & clipboard -->
<script src="/assets/lib/jquery/jquery.min.js"></script>
<script src="/assets/lib/bootstrap/bootstrap.bundle.min.js"></script>
<script src="/assets/lib/simple-jekyll-search/simple-jekyll-search.min.js"></script>
<script src="/assets/lib/lazysizes/lazysizes.min.js"></script>
<script src="/assets/lib/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="/assets/lib/clipboard/clipboard.min.js"></script>
<script src="/assets/lib/dayjs/dayjs.min.js"></script>
<script src="/assets/lib/dayjs/locale/en.min.js"></script>
<script src="/assets/lib/dayjs/plugin/relativeTime.min.js"></script>
<script src="/assets/lib/dayjs/plugin/localizedFormat.min.js"></script>
<script src="/assets/lib/tocbot/tocbot.min.js"></script>
<script defer src="/assets/js/dist/post.min.js"></script>
<!--
Jekyll Simple Search loader
See: <https://github.com/christian-fei/Simple-Jekyll-Search>
-->
<script>
/* Note: dependent library will be loaded in `js-selector.html` */
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
json: '/assets/js/data/search.json',
searchResultTemplate: '<div class="px-1 px-sm-2 px-lg-4 px-xl-0"> <a href="{url}">{title}</a> <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"> {categories} {tags} </div> <p>{snippet}</p></div>',
noResultsText: '<p class="mt-5"></p>',
templateMiddleware: function(prop, value, template) {
if (prop === 'categories') {
if (value === '') {
return `${value}`;
} else {
return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
}
}
if (prop === 'tags') {
if (value === '') {
return `${value}`;
} else {
return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
}
}
}
});
</script>
</body>
</html>
Reference in New Issue Copy Permalink