My blog site. 2026-03-27T00:00:00+00:00 https://thadaw.com/posts/feed.xml 2026-03-27T00:00:00+00:00 2026-03-27T00:00:00+00:00 https://thadaw.com/posts/elysia-prisma-spa-template/ <p>ตอนที่ไปงาน BKK.JS 24 มีโอกาสได้พูดคุยกับออม แล้วก็ถามข้อสงสัยเกี่ยวกับ Elysia หลายอย่างเลยครับ ทำให้เข้าใจความตั้งใจในการออกแบบของออมมากขึ้น ทั้งเรื่องการออกแบบ Framework, การเขียน TypeScript, รวมถึงการ Optimize ต่างๆ</p> <p>ก่อนหน้านี้ผมมี <a rel="nofollow noreferrer" href="https://github.com/thaitype/thaitype-stack-mongodb-template">Template ที่ใช้อยู่เป็น Next.js + tRPC + MongoDB</a> ซึ่งใช้งานได้ดีครับ แต่พอได้คุยกับออมแล้วเลยคิดว่าน่าจะลองทำ Template อีกตัวที่ใช้ Elysia ดูบ้าง โดยเฉพาะให้มัน AI Friendly ด้วย เพราะตอนนี้ผมใช้ Claude Code กับ <a rel="nofollow noreferrer" href="https://github.com/thaitype/chief-agent-framework">Chief Agent Framework</a> ในการเขียนโค้ดเป็นหลักอยู่แล้ว</p> <p>จุดที่ทำให้ตัดสินใจเลยก็คือตอนที่ออม Demo ให้ดูว่าเราสามารถ infer Type จาก Prisma ได้โดยตรง ทำ Type-Safety ตั้งแต่ระดับ Database จนถึง Frontend เลยทีเดียวครับ</p> <h2 id="type-safety-chain">Type-Safety Chain<a class="zola-anchor" href="#type-safety-chain" aria-label="Anchor link for: type-safety-chain" style="visibility: hidden;"></a> </h2> <p>flow ของ type ใน template ตัวนี้จะเป็นแบบนี้ครับ</p> <pre data-lang="text" class="language-text z-code"><code class="language-text" data-lang="text"><span class="z-text z-plain">prisma/schema.prisma (single source of truth) </span><span class="z-text z-plain"> -&gt; Prisma Client (TypeScript types) </span><span class="z-text z-plain"> -&gt; Prismabox (TypeBox schemas สำหรับ Elysia validation) </span><span class="z-text z-plain"> -&gt; Elysia routes (body/response validation) </span><span class="z-text z-plain"> -&gt; Eden Treaty (type-safe RPC ฝั่ง frontend) </span><span class="z-text z-plain"> -&gt; React Query hooks (typed data fetching) </span></code></pre> <p>ก็คือ define ที่ Prisma schema ที่เดียว แล้ว type มันก็ไหลไปทั้ง stack เลยครับ ไม่ต้องมานั่งเขียน interface ซ้ำกันทุกชั้น</p> <p>ตัวอย่างเช่น ใน <code>schema.prisma</code> เรา define Todo model ไว้แค่ที่เดียว แล้วพอรัน <code>prisma generate</code> มันจะ generate ทั้ง Prisma Client types และ TypeBox schemas ผ่าน Prismabox ให้เลย</p> <pre data-lang="prisma" class="language-prisma z-code"><code class="language-prisma" data-lang="prisma"><span class="z-text z-plain">generator prismabox { </span><span class="z-text z-plain"> provider = &quot;prismabox&quot; </span><span class="z-text z-plain"> typeboxImportDependencyName = &quot;elysia&quot; </span><span class="z-text z-plain"> typeboxImportVariableName = &quot;t&quot; </span><span class="z-text z-plain"> inputModel = true </span><span class="z-text z-plain"> output = &quot;../generated/prismabox&quot; </span><span class="z-text z-plain">} </span></code></pre> <p>พอมาฝั่ง route ก็ไม่ต้องเขียน <code>t.Object({...})</code> เองครับ import จาก prismabox แล้วใช้ <code>t.Pick</code> เอา field ที่ต้องการได้เลย</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">TodoPlain</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-alias z-ts">TodoPlainInputCreate</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>#generated/prismabox/Todo<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">CreateTodoBody</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">t</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">Pick</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">TodoPlainInputCreate</span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>title<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>description<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-meta z-brace z-round z-ts">)</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">post</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>/<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">user</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-parameter z-ts">body</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">todoService</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">create</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">user</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">id</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">body</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">withAuth</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-language z-boolean z-true z-ts">true</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">body</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-readwrite z-ts">CreateTodoBody</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">response</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-readwrite z-ts">TodoPlain</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></code></pre> <p>ฝั่ง frontend ก็ไม่ต้อง declare Todo type เองเลย ใช้ Eden infer type ให้ได้เลยครับ</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">GetTodosResponse</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-module z-ts">Treaty</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-ts">Data</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">ReturnType</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-keyword z-operator z-expression z-typeof z-ts">typeof</span> <span class="z-entity z-name z-type z-module z-ts">api</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-module z-ts">api</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-module z-ts">todos</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-ts">get</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"></span><span class="z-meta z-type z-declaration z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Todo</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">GetTodosResponse</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-paren z-cover z-ts"><span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">T</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span> </span></span></code></pre> <h2 id="cchudthiiwaaw-macro-kab-plugin-kh-ng-elysia">จุดที่ว้าว: Macro กับ Plugin ของ Elysia<a class="zola-anchor" href="#cchudthiiwaaw-macro-kab-plugin-kh-ng-elysia" aria-label="Anchor link for: cchudthiiwaaw-macro-kab-plugin-kh-ng-elysia" style="visibility: hidden;"></a> </h2> <p>จุดที่ว้าวมากๆ ก็คือการที่ออมออกแบบให้มี Escape Hatch สำหรับ Type-Safety ที่ยืดหยุ่นมากครับ</p> <p>ปัญหาที่เจอใน template ตัวนี้คือผมใช้ Better Auth ซึ่งมัน mount handler แบบ <code>.mount(auth.handler)</code> ทำให้ type ที่ return ออกมาจากฝั่ง server เป็น union type แบบ <code>PayloadType | Response</code> ก็คือ payload ที่เราอยากได้จะ union กับ Response ของ Better Auth ที่ทำพวก <code>/api/auth/*</code> ต่างๆ</p> <p>ปกติถ้าเจอแบบนี้ก็ต้องมาทำ type cast ใช้ <code>as</code> หรือเขียน type guard วุ่นวายครับ</p> <p>แต่ Elysia มี Macro ที่ทำให้เรา confirm type จากฝั่ง server ได้เลย แถมสามารถ inject type ลงไปแต่ละ route ได้อีก ผมเลยทำเป็น auth plugin แบบนี้ครับ</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">authPlugin</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Elysia</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>auth<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span></span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">mount</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">auth</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">handler</span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">macro</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">withAuth</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-method z-declaration z-ts"><span class="z-storage z-modifier z-async z-ts">async</span> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">resolve</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">status</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-object z-property z-ts">request</span><span class="z-punctuation z-destructuring z-ts">:</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">headers</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">session</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">auth</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">api</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">getSession</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">headers</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-operator z-logical z-ts">!</span><span class="z-variable z-other z-readwrite z-ts">session</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">status</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-constant z-numeric z-decimal z-ts">401</span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">user</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-object z-ts">session</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">user</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></code></pre> <p>พอเอาไปใช้ใน route ก็แค่ใส่ <code>{ withAuth: true }</code> แล้ว <code>user</code> ก็จะอยู่ใน context ให้เลย type safe ทั้งหมด ไม่ต้อง cast อะไรเลยครับ</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">get</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>/<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">user</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">todoService</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">getAll</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">user</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">id</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">withAuth</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-language z-boolean z-true z-ts">true</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">response</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">t</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">Array</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">TodoPlain</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></code></pre> <p>แบบนี้ route handler return แค่ <code>Todo[]</code> ไม่มี <code>Response</code> มา union ให้วุ่นวาย Eden ฝั่ง frontend ก็เห็น type ถูกต้องไปด้วยเลยครับ</p> <h2 id="stack-thanghmd">Stack ทั้งหมด<a class="zola-anchor" href="#stack-thanghmd" aria-label="Anchor link for: stack-thanghmd" style="visibility: hidden;"></a> </h2> <p><strong>Backend &amp; API</strong></p> <ul> <li>Elysia -- Type-safe web framework on Bun runtime</li> <li>Prisma v7 -- ORM with SQLite (libsql adapter สำหรับ Bun)</li> <li>Better Auth -- Authentication library</li> <li>Prismabox -- Auto-generate TypeBox schemas จาก Prisma</li> <li>Pino -- Structured logging</li> </ul> <p><strong>Frontend &amp; UI</strong></p> <ul> <li>React 19 -- UI library with Vite bundler</li> <li>TanStack Router -- File-based routing</li> <li>Eden Treaty -- Type-safe RPC client สำหรับ Elysia</li> <li>React Query -- Data fetching and cache management</li> <li>shadcn/ui -- Component library on Radix + Tailwind CSS v4</li> </ul> <p>ตัว template เป็น SPA ครับ ใช้ TanStack Router อยู่ ใครอยากจะย้ายไปใช้ TanStack Start หรือ React Router ก็ได้ตามถนัดเลย</p> <h2 id="l-ngelnkanaid">ลองเล่นกันได้<a class="zola-anchor" href="#l-ngelnkanaid" aria-label="Anchor link for: l-ngelnkanaid" style="visibility: hidden;"></a> </h2> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> clone https://github.com/thaitype/thaitype-stack-spa-react-elysia-prisma-template.git</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-cd z-shell">cd</span></span><span class="z-meta z-function-call z-arguments z-shell"> thaitype-stack-spa-react-elysia-prisma-template</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">bun</span></span><span class="z-meta z-function-call z-arguments z-shell"> install</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">cp</span></span><span class="z-meta z-function-call z-arguments z-shell"> .env.example .env</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">bun</span></span><span class="z-meta z-function-call z-arguments z-shell"> run db:push</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">bun</span></span><span class="z-meta z-function-call z-arguments z-shell"> run dev</span> </span></code></pre> <p>เปิด http://localhost:3000 สมัครสมาชิก แล้วลองเพิ่ม Todo ดูได้เลยครับ</p> <p>ก็ถือว่าเป็น Template แรกที่ทำกับ Elysia ครับ อาจจะยังไม่ชำนาญมาก ฝากชี้แนะด้วยนะครับ เดี๋ยวผมเอาไปใช้จริงแล้วจะกลับมาทยอยอัพเดทเรื่อยๆ</p> <p>GitHub: <a rel="nofollow noreferrer" href="https://github.com/thaitype/thaitype-stack-spa-react-elysia-prisma-template">thaitype-stack-spa-react-elysia-prisma-template</a></p> <p>สวัสดีครับ</p> 2026-03-16T00:00:00+00:00 2026-03-16T00:00:00+00:00 https://thadaw.com/posts/agent-skill-teach-ai-to-do-what-it-cant/ <p>สวัสดีครับ ช่วงนี้ผมใช้ AI agent ในการเขียนโค้ดเยอะขึ้นมากครับ ไม่ว่าจะเป็น Claude Code, Gemini CLI, Codex หรือ OpenClaw ซึ่งพวกนี้มันฉลาดก็จริง แต่มันก็มีเรื่องง่ายๆ ที่มันทำไม่ได้อยู่หลายอย่าง ผมเลยเริ่มทำสิ่งที่เรียกว่า Agent Skill ขึ้นมาครับ</p> <p><img src="https://thadaw.com/posts/agent-skill-teach-ai-to-do-what-it-cant/cover.jpg" alt="" /></p> <h2 id="agent-skill-khuue-aair">Agent Skill คืออะไร<a class="zola-anchor" href="#agent-skill-khuue-aair" aria-label="Anchor link for: agent-skill-khuue-aair" style="visibility: hidden;"></a> </h2> <p>ผมมองว่า Skill ก็คือ unit of work ที่เราเขียนไว้ให้ agent เรียกใช้ครับ อารมณ์เหมือนเราเขียน README ให้คนใหม่ในทีมอ่าน บอกว่า "ถ้าเจอเรื่องนี้ ให้รัน script นี้นะ" แต่คนอ่านเป็น AI agent แทน</p> <p>เวลาเราสั่งอะไร agent มันจะดูก่อนว่าตัวเองมี skill อะไรบ้างที่ตรงกับสิ่งที่เราขอ ถ้ามีก็หยิบมาใช้ ถ้าไม่มีก็ทำแบบ general purpose ไป ซึ่งบางทีก็โอเค แต่บางทีก็พลาด</p> <p>ตัว skill จริงๆ แล้วก็แค่ไฟล์ markdown ที่อธิบายว่า skill นี้ทำอะไรได้ มี script อะไรให้เรียก พร้อม parameter อะไรบ้าง แล้วก็อาจจะมี script แนบมาด้วย</p> <pre data-lang="text" class="language-text z-code"><code class="language-text" data-lang="text"><span class="z-text z-plain">skill-name/ </span><span class="z-text z-plain">├── SKILL.md # คำอธิบาย + คำสั่งใช้งาน </span><span class="z-text z-plain">└── scripts/ </span><span class="z-text z-plain"> └── some_script.py # script ที่ agent จะเรียก </span></code></pre> <p>แนวคิดนี้ไม่ได้ผูกกับ agent ตัวไหนตัวนึงครับ Claude Code เรียกว่า skill, ตัวอื่นอาจจะเรียกว่า custom instruction หรือ tool definition แต่หลักการเดียวกัน คือเราเขียนคำอธิบายให้ agent อ่าน แล้วมันก็ตัดสินใจเองว่าจะเรียกใช้ตอนไหน</p> <h2 id="aipduuniyaamcchring-cchaak-doc-kandiikwaa">ไปดูนิยามจริงๆ จาก doc กันดีกว่า<a class="zola-anchor" href="#aipduuniyaamcchring-cchaak-doc-kandiikwaa" aria-label="Anchor link for: aipduuniyaamcchring-cchaak-doc-kandiikwaa" style="visibility: hidden;"></a> </h2> <p>ก่อนที่จะไปดูตัวอย่าง ผมอยากลองเทียบกับ doc ของแต่ละเจ้าก่อนครับ ว่าเขานิยาม skill ไว้ว่ายังไงบ้าง</p> <p>ฝั่ง <strong>Anthropic</strong> เขียนไว้ใน <a rel="nofollow noreferrer" href="https://code.claude.com/docs/en/skills">doc ของ Claude Code</a> ว่า "Skills extend what Claude can do. Create a SKILL.md file with instructions, and Claude adds it to its toolkit." แล้วก็บอกว่า Claude Code skills follow the <a rel="nofollow noreferrer" href="https://agentskills.io">Agent Skills</a> open standard ซึ่งเป็น open format ที่ใช้ข้ามเครื่องมือได้ โครงสร้างก็ตรงกับที่ผมอธิบายไว้ข้างบน คือ SKILL.md เป็น entrypoint แล้วก็มี scripts/, references/, assets/ เสริมได้ สิ่งที่ Claude Code เพิ่มเข้ามาเป็นพิเศษคือ frontmatter ที่ควบคุมได้ว่าใครเป็นคนเรียก skill (เราสั่งเอง หรือให้ Claude ตัดสินใจเอง) และยังรันเป็น subagent แยก context ได้ด้วย</p> <p>ฝั่ง <strong>OpenAI</strong> ใน <a rel="nofollow noreferrer" href="https://developers.openai.com/codex/skills/">doc ของ Codex</a> ก็เขียนไว้คล้ายกันครับ "A skill packages instructions, resources, and optional scripts so Codex can follow a workflow reliably." โครงสร้างก็เหมือนกันเลย คือ SKILL.md + scripts/ + references/ ที่น่าสนใจคือ Codex บอกว่า custom prompts deprecated ไปแล้ว ให้ใช้ skills แทนสำหรับ reusable instructions</p> <p>ส่วนฝั่ง <strong>Google</strong> ใน <a rel="nofollow noreferrer" href="https://geminicli.com/docs/cli/skills/">Gemini CLI</a> ก็ support Agent Skills เหมือนกัน เขาเขียนว่า skills เป็น "on-demand expertise" ที่ต่างจาก GEMINI.md ตรงที่ไม่ได้โหลดตลอดเวลา แต่จะ activate เมื่อ agent เห็นว่า task ตรงกับ skill description เท่านั้น ซึ่งช่วยไม่ให้ context window รก</p> <p>ทีนี้พอย้อนกลับมาดู ผมว่าทุกเจ้ามองตรงกันในเรื่องหลักๆ ครับ คือ skill = ไฟล์ markdown ที่อธิบายว่าทำอะไร + script ที่ agent เรียกใช้ได้ แล้วก็เป็น open standard เดียวกันหมด เอาจากเจ้าไหนไปใช้เจ้าไหนก็ได้ สิ่งที่ต่างกันจริงๆ คือ feature เสริมของแต่ละเจ้า เช่น Claude Code มี subagent context, Codex มี agents/openai.yaml, Gemini CLI มี discovery tiers แต่ core ของมันก็ยังเป็น SKILL.md เหมือนกันทุกเจ้า</p> <p>ซึ่งตรงกับที่ผมเข้าใจตั้งแต่แรกครับ ผมมอง skill ว่าเป็น "คู่มือที่เขียนให้ AI อ่าน" ไม่ต่างจากที่เราเขียน runbook ให้คนในทีม แค่คนอ่านเปลี่ยนจากมนุษย์เป็น agent แล้ว format ก็ถูก standardize ให้ทุก agent อ่านได้เหมือนกัน</p> <h2 id="taw-yaangcchring-skill-thiiphmsraangmaaaiche-ng">ตัวอย่างจริง: skill ที่ผมสร้างมาใช้เอง<a class="zola-anchor" href="#taw-yaangcchring-skill-thiiphmsraangmaaaiche-ng" aria-label="Anchor link for: taw-yaangcchring-skill-thiiphmsraangmaaaiche-ng" style="visibility: hidden;"></a> </h2> <p>ผมจะยกจากของจริงที่ใช้อยู่ครับ ตัวอย่างนี้ผมรันบน Claude Code แต่จะเห็นว่า script ข้างในมันก็แค่ Python ธรรมดา เอาไปใช้กับ agent อะไรก็ได้</p> <h3 id="thaamewlaa">ถามเวลา<a class="zola-anchor" href="#thaamewlaa" aria-label="Anchor link for: thaamewlaa" style="visibility: hidden;"></a> </h3> <p>เรื่องง่ายๆ เลย "ตอนนี้กี่โมง" AI agent ส่วนใหญ่ตอบไม่ได้ครับ เพราะมันไม่มี access เข้า system clock ผมเลยสร้าง skill ชื่อ <code>time</code> ซึ่งข้างในก็แค่บอกให้มันรันคำสั่ง <code>date</code></p> <pre data-lang="markdown" class="language-markdown z-code"><code class="language-markdown" data-lang="markdown"><span class="z-text z-html z-markdown"><span class="z-meta z-block-level z-markdown"><span class="z-markup z-heading z-1 z-markdown"><span class="z-punctuation z-definition z-heading z-begin z-markdown">#</span> </span><span class="z-markup z-heading z-1 z-markdown"><span class="z-entity z-name z-section z-markdown">time/SKILL.md</span><span class="z-meta z-whitespace z-newline z-markdown"> </span></span></span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">Run the <span class="z-markup z-raw z-inline z-markdown"><span class="z-punctuation z-definition z-raw z-begin z-markdown">`</span>date<span class="z-punctuation z-definition z-raw z-end z-markdown">`</span></span> command to get the current local time. </span></span></code></pre> <p>แค่นี้เลยครับ skill ไม่จำเป็นต้องซับซ้อน ถ้างานมันไม่ซับซ้อน ข้างในก็แค่บอกให้ agent รัน <code>date</code> แล้วเอา output มาตอบเรา</p> <h3 id="duu-cost-kh-ng-session">ดู cost ของ session<a class="zola-anchor" href="#duu-cost-kh-ng-session" aria-label="Anchor link for: duu-cost-kh-ng-session" style="visibility: hidden;"></a> </h3> <p>อันนี้เริ่มมีเรื่องให้คิดแล้วครับ ผมอยากรู้ว่า session ที่ใช้อยู่กิน token ไปเท่าไหร่ ต้นทุนประมาณกี่เหรียญ Claude Code บันทึก session เป็นไฟล์ <code>.jsonl</code> ซึ่งข้างในมี token usage ของทุก turn ผมเลยสร้าง skill ชื่อ <code>claude-usage</code> ที่มี Python script ไปอ่านไฟล์นี้ รวม token ทุก turn แล้วคูณ pricing ของแต่ละ model</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">python3</span></span><span class="z-meta z-function-call z-arguments z-shell"> .claude/skills/claude-usage/scripts/usage_summary.py <span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>session-id<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span> </span></span></code></pre> <p>output ออกมาก็ประมาณนี้:</p> <pre class="z-code"><code><span class="z-text z-plain"> Session: 82c946c8-... </span><span class="z-text z-plain"> Turns: 100 </span><span class="z-text z-plain"> </span><span class="z-text z-plain"> Tokens </span><span class="z-text z-plain"> Input: 150 </span><span class="z-text z-plain"> Cache write: 447.5k </span><span class="z-text z-plain"> Cache read: 4.22m </span><span class="z-text z-plain"> Output: 23.4k </span><span class="z-text z-plain"> </span><span class="z-text z-plain"> Estimated cost: $7.7249 </span><span class="z-text z-plain"> </span><span class="z-text z-plain"> By model: </span><span class="z-text z-plain"> claude-opus-4-6 23 turns $5.5371 </span><span class="z-text z-plain"> claude-sonnet-4-6 77 turns $2.1878 </span></code></pre> <h3 id="payhaa-session-id-maacchaakaihn">ปัญหา: session ID มาจากไหน<a class="zola-anchor" href="#payhaa-session-id-maacchaakaihn" aria-label="Anchor link for: payhaa-session-id-maacchaakaihn" style="visibility: hidden;"></a> </h3> <p>ทีนี้ <code>claude-usage</code> มันต้องใส่ session ID ครับ แต่พอเราถาม agent ว่า "ตอนนี้ session ID อะไร" มันก็จะบอกว่าไม่รู้ เพราะเป็น internal ที่ agent เข้าถึงไม่ได้</p> <p>ผมเลยต้องสร้างอีก skill นึงชื่อ <code>claude-session-id</code> ที่ไปหาไฟล์ <code>.jsonl</code> ทั้งหมดแล้วเรียงตาม modification time เพื่อหาว่า session ล่าสุดคืออันไหน</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">python3</span></span><span class="z-meta z-function-call z-arguments z-shell"> .claude/skills/claude-session-id/scripts/latest_session.py</span> </span></code></pre> <pre class="z-code"><code><span class="z-text z-plain"> Session ID: 82c946c8-1eb8-4c70-9414-813fc0a278e4 </span><span class="z-text z-plain"> Date: 2026-03-16 10:32 </span><span class="z-text z-plain"> Last message (assistant): Here&#39;s the updated README... </span></code></pre> <p>พอมี skill นี้แล้ว ถ้าผมบอกว่า "ดู cost ของ session ปัจจุบันหน่อย" agent ก็จะเรียก <code>claude-session-id</code> ก่อน แล้วเอา ID ที่ได้ไปเรียก <code>claude-usage</code> ต่อ ทำงานเองได้เลย</p> <p>ตรงนี้เป็นจุดที่น่าสนใจครับ <strong>skill มันต่อกันเป็น chain ได้</strong> โดยที่เราไม่ต้องเขียน orchestration อะไรเลย agent มันจัดการเอง</p> <h3 id="todo-management-aebb-structured">Todo management แบบ structured<a class="zola-anchor" href="#todo-management-aebb-structured" aria-label="Anchor link for: todo-management-aebb-structured" style="visibility: hidden;"></a> </h3> <p>ตัวอย่างสุดท้ายครับ ผมอยากให้ agent ช่วยจัดการ task สมมติว่าเราไม่สร้าง skill อะไรเลย มันก็จะจดลง markdown แบบ freeform ซึ่งพอ task เยอะขึ้นมันก็จะหาอะไรไม่เจอ update ผิด task ก็มี</p> <p>ผมเลยสร้าง skill ชื่อ <code>todo</code> ที่เก็บ task เป็น JSONL event log แล้วมี Python script คอยจัดการ add, list, update, delete ให้หมด</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> เพิ่ม task</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">python3</span></span><span class="z-meta z-function-call z-arguments z-shell"> .claude/skills/todo/scripts/tasks.py add<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>title</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Review PR<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>priority</span> P1<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>domain</span> Work</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> ดู task ที่ยังไม่เสร็จ</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">python3</span></span><span class="z-meta z-function-call z-arguments z-shell"> .claude/skills/todo/scripts/tasks.py list</span> </span></code></pre> <pre class="z-code"><code><span class="z-text z-plain">[ ] [P1] a1b2c3d4 Review PR [Work] </span></code></pre> <p>ข้อดีของการทำแบบนี้คือ agent อ่าน structured data ได้ตรงกว่า freeform markdown มากครับ มันจะ filter ตาม priority, ตาม domain, ตาม status ได้หมด เพราะ data format มันชัดเจน ไม่ต้องมาแกะ markdown เอง</p> <h2 id="hlakkaar-kaebb-skill">หลักการออกแบบ skill<a class="zola-anchor" href="#hlakkaar-kaebb-skill" aria-label="Anchor link for: hlakkaar-kaebb-skill" style="visibility: hidden;"></a> </h2> <p>จากที่ทำมาสักพักผมสรุปได้ประมาณนี้ครับ</p> <p>อย่างแรกเลยคือ skill นึงควรทำแค่เรื่องนึง อย่าพยายามยัดทุกอย่างลง skill เดียว ถ้าแยกเรื่องได้ก็แยก อย่าง session ID กับ usage ผมแยกเป็นคนละ skill เพราะมันคนละความรับผิดชอบ</p> <p>อีกเรื่องคือให้ script ทำงานหนักแทน agent ครับ แทนที่จะอธิบายยาวๆ ว่าให้ agent เขียน code อะไร เราเขียน script ให้มันเรียกตรงๆ ดีกว่า ผลลัพธ์ที่ได้จะ consistent กว่าเยอะ ถ้า skill ต้องการ parameter ที่อาจจะมาจาก skill อื่น การรับผ่าน env var อย่าง <code>AGENT_SESSION_ID</code> ก็ทำให้ต่อ chain ได้ง่ายครับ</p> <p>สุดท้ายคือเรื่อง description ครับ ต้องเขียนให้ชัดเจน เพราะ agent จะอ่าน description ใน skill เพื่อตัดสินใจว่าจะใช้ skill นี้ไหม ถ้า description ไม่ชัด มันก็จะไม่หยิบมาใช้</p> <h2 id="ethiiybkabhlakkaarcchaak-official-doc">เทียบกับหลักการจาก official doc<a class="zola-anchor" href="#ethiiybkabhlakkaarcchaak-official-doc" aria-label="Anchor link for: ethiiybkabhlakkaarcchaak-official-doc" style="visibility: hidden;"></a> </h2> <p>พอผมลองไปอ่าน doc และบทความจากหลายเจ้า ก็พบว่าหลักการที่ผมสรุปมามันไปตรงกับที่เขาแนะนำไว้พอสมควรครับ</p> <p>ฝั่ง OpenAI เขียนไว้ใน <a rel="nofollow noreferrer" href="https://developers.openai.com/codex/skills/">Codex doc</a> ว่า "Keep each skill focused on one job" กับ "Prefer instructions over scripts unless you need deterministic behavior" ซึ่งข้อแรกตรงกับที่ผมทำเลย คือแยก skill ละเรื่อง ส่วนข้อที่สองน่าสนใจ เพราะเขาบอกว่าถ้าไม่จำเป็นต้อง deterministic ก็ให้ใช้ instruction เป็นหลัก แต่จากประสบการณ์ผม ถ้าเป็นงานที่ต้องการ output ตรงกันทุกครั้ง (เช่น คำนวณ cost) ก็ควรเขียน script ดีกว่าจริงๆ ครับ</p> <p><a rel="nofollow noreferrer" href="https://engineering.block.xyz/blog/3-principles-for-designing-agent-skills">บทความจาก Block</a> (ทีมที่ทำ Goose) เขียนหลักการไว้ 3 ข้อที่ผมชอบมากครับ ข้อแรกคือ "Know what the agent should NOT decide" หมายความว่าอะไรที่ต้อง consistent ข้าม run อย่าปล่อยให้ agent คิดเอง ให้ใส่ใน script แทน ข้อที่สองคือ "Know what the agent SHOULD decide" คือปล่อยให้ agent ทำในสิ่งที่มันเก่ง เช่น ตีความ context, สรุปผล, แนะนำ ข้อที่สามคือ "Write a constitution, not a suggestion" เพราะ LLM ชอบทำตัวดีเกินไป ชอบข้ามขั้นตอน หรือเพิ่ม caveat ที่เราไม่ได้ขอ เลยต้องเขียน SKILL.md ให้ชัดเจนเหมือนกฎ ไม่ใช่แค่คำแนะนำ</p> <p>ส่วนจาก <a rel="nofollow noreferrer" href="https://agentskills.io">agentskills.io</a> เอง มีจุดที่ผมคิดว่าสำคัญมากคือเรื่อง description ครับ เขาเขียนไว้ว่า "If your skill does not trigger, it is almost never the instructions — it is the description" ซึ่งตรงกับที่ผมบอกเลย description คือ interface จริงๆ ถ้าเขียนไม่ชัด skill ก็จะไม่ถูกเรียกใช้</p> <p>พอเทียบกันแล้ว ผมว่าหลักการจากประสบการณ์ของผมกับ official doc มันไม่ได้ขัดกันเลยครับ แต่ doc มันให้ framework ที่ชัดกว่า โดยเฉพาะเรื่องการแบ่งว่าอะไรให้ agent ตัดสินใจ อะไรให้ script จัดการ ตรงนี้ช่วยให้ออกแบบ skill ได้ดีขึ้นเยอะ</p> <h2 id="l-ngelnaid">ลองเล่นได้<a class="zola-anchor" href="#l-ngelnaid" aria-label="Anchor link for: l-ngelnaid" style="visibility: hidden;"></a> </h2> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Note</strong></p> <p>ผม open source skill พวกนี้ไว้ที่ <a rel="nofollow noreferrer" href="https://github.com/thaitype/skills">github.com/thaitype/skills</a> ครับ ใครอยากลองก็ install ผ่าน degit ได้เลย</p> </div> </blockquote><pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">npx</span></span><span class="z-meta z-function-call z-arguments z-shell"> degit thaitype/skills/claude-usage <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.claude/skills/claude-usage</span> </span></code></pre> <p>ก็หวังว่าจะเป็นประโยชน์กันนะครับ ใครมีไอเดีย skill อะไรมาแชร์กันได้ครับ สวัสดีครับ</p> 2026-03-14T00:00:00+00:00 2026-03-14T00:00:00+00:00 https://thadaw.com/posts/setup-personal-ai-agent-telegram-picoclaw-deepseek/ <p>สวัสดีครับ วันก่อนผมได้มีโอกาสไปฟังงาน OpenClaw Meetup ครั้งแรกที่กรุงเทพ ในงานมีหลายๆ คนเข้ามาแชร์ประสบการณ์การใช้ OpenClaw กัน น่าสนใจดี แต่ที่ทำให้ผมหยุดฟังจริงจังเลยคือตอนที่พี่โดมคลาวน์พูดถึง PicoClaw ที่เขียนด้วย Golang เบามากๆ สามารถรันบน VM spec ต่ำๆ ได้ ตอนนั้นผมนั่งฟังแล้วคิดในใจว่า "อันนี้น่าเอามาเล่นจัง"</p> <p>ซึ่งช่วงนี้ผมกำลังออกแบบ Infra Agent แนวๆ OpenClaw อยู่พอดี เลยอยากรู้ว่าพวก Agent Coding อย่าง Claude Code กับ OpenClaw มันต่างกันยังไง แต่ความกังวลของผมก็คือเรื่อง Security ของ OpenClaw นั่นเองที่ทำให้ยังไม่กล้าเอาไปใช้ใน production จริงๆ</p> <p>เลยก่อนที่จะเริ่มเขียน Agent ตัวใหม่ ผมอยากรู้ว่าตอนนี้เค้าทำกันไปถึงไหนแล้ว เลยมี idea ว่าเอามาใช้งานส่วนตัวกับของที่น่าจะมีผลกับ Security น้อยที่สุดก่อนดีกว่า อย่างเช่นพวก Personal Assistant ที่ช่วยจัดการตารางนัดหมาย ช่วยเตือนความจำ ซึ่งถ้าเกิดปัญหาขึ้นมาก็จะไม่ส่งผลกระทบต่อระบบใหญ่ๆ หรือข้อมูลสำคัญขององค์กร ผมเริ่มจาก Notion skill และ Notion Daily Planner skill ที่ช่วยจัดการ todo list และวางแผนแต่ละวัน อยากรู้ว่า Agent พวกนี้ทำได้แค่ไหน มีข้อจำกัดอะไรบ้าง</p> <h2 id="thamaimthuengeluue-k-picoclaw">ทำไมถึงเลือก PicoClaw<a class="zola-anchor" href="#thamaimthuengeluue-k-picoclaw" aria-label="Anchor link for: thamaimthuengeluue-k-picoclaw" style="visibility: hidden;"></a> </h2> <p>เหตุผลตรงๆ เลยคือ cost ผมน้อย 5555 เลยเลือก solution ที่ถูกที่สุดก็คือสร้าง VM บน DigitalOcean ราคา $4/เดือน CPU 1 core, RAM 512MB แล้วก็ใช้ PicoClaw รัน Agent ของผมบน VM นั้นเลย เพราะเจ้า PicoClaw ใช้ spec ต่ำมากๆ น่าจะเหมาะกับ VM ราคาถูกๆ แบบนี้ได้ดีเลยทีเดียว</p> <p>ส่วน model ก็เลือกจาก OpenRouter Ranking ที่มีคนใช้งานเยอะๆ และราคาไม่แพง แต่ก็ควรจะเก่งประมาณนึง เลยไปถูกใจกับเจ้า DeepSeek V3.2 ที่ราคาไม่แพงมาก ราคาประมาณ $0.26/M input tokens กับ $0.38/M output tokens ซึ่งเท่าที่หาๆ มาพบว่าสามารถสู้กับ GPT-5 ได้เลยทีเดียว (ถาม AI เอานะ อันนี้ไม่ชัวร์เท่าไหร่ 555)</p> <h2 id="tidtang-picoclaw">ติดตั้ง PicoClaw<a class="zola-anchor" href="#tidtang-picoclaw" aria-label="Anchor link for: tidtang-picoclaw" style="visibility: hidden;"></a> </h2> <p>ตรงนี้ไม่มีอะไรซับซ้อนครับ โหลด .deb มาลงได้เลย (ณ ตอนที่เขียนเป็นเวอร์ชั่น 0.2.2):</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">mkdir</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>p</span> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/apps/picoclaw</span> <span class="z-keyword z-operator z-logical z-and z-shell">&amp;&amp;</span> <span class="z-meta z-function-call z-shell"><span class="z-support z-function z-cd z-shell">cd</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/apps/picoclaw</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">wget</span></span><span class="z-meta z-function-call z-arguments z-shell"> https://github.com/sipeed/picoclaw/releases/download/v0.2.2/picoclaw_x86_64.deb</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> dpkg<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> picoclaw_x86_64.deb</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">picoclaw</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>help</span></span> </span></code></pre> <h2 id="setup-telegram-bot">Setup Telegram Bot<a class="zola-anchor" href="#setup-telegram-bot" aria-label="Anchor link for: setup-telegram-bot" style="visibility: hidden;"></a> </h2> <p>ต่อไปคือเชื่อม PicoClaw เข้ากับ Telegram ครับ ขั้นตอนไม่ยาก แต่มีหลายจุดที่ต้องไปหยิบ token/ID มา เลยเขียนไว้ให้ทีละ step:</p> <h3 id="1-sraang-bot">1. สร้าง Bot<a class="zola-anchor" href="#1-sraang-bot" aria-label="Anchor link for: 1-sraang-bot" style="visibility: hidden;"></a> </h3> <ol> <li>เปิด Telegram แล้วค้นหา <code>@BotFather</code></li> <li>ส่ง <code>/newbot</code> แล้วทำตามขั้นตอน</li> <li>Copy bot token เก็บไว้</li> </ol> <h3 id="2-haa-user-id-kh-ngtawe-ng">2. หา User ID ของตัวเอง<a class="zola-anchor" href="#2-haa-user-id-kh-ngtawe-ng" aria-label="Anchor link for: 2-haa-user-id-kh-ngtawe-ng" style="visibility: hidden;"></a> </h3> <p>ส่งข้อความหา <code>@userinfobot</code> บน Telegram แล้วจดเลข User ID ไว้ครับ ตรงนี้สำคัญ เพราะเราจะเอาไปใส่ใน config เพื่อบอกว่าให้ bot คุยกับ user id นี้เท่านั้น</p> <h3 id="3-config-picoclaw">3. Config PicoClaw<a class="zola-anchor" href="#3-config-picoclaw" aria-label="Anchor link for: 3-config-picoclaw" style="visibility: hidden;"></a> </h3> <p>ส่วนที่สำคัญที่สุดของการ setup คือไฟล์ <code>~/.picoclaw/config.json</code> ครับ:</p> <pre data-lang="json" class="language-json z-code"><code class="language-json" data-lang="json"><span class="z-source z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>agents<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>defaults<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>model_name<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>openrouter-deepseek-v3.2<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>model_list<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-punctuation z-section z-sequence z-begin z-json">[</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"> <span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>model_name<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>openrouter-deepseek-v3.2<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>model<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>openrouter/deepseek/deepseek-v3.2<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>api_base<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>https://openrouter.ai/api/v1<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>api_key<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>YOUR_OPENROUTER_API_KEY<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"> <span class="z-punctuation z-section z-sequence z-end z-json">]</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>channels<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>telegram<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>enabled<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-constant z-language z-json">true</span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>token<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>YOUR_BOT_TOKEN<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>allow_from<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-punctuation z-section z-sequence z-begin z-json">[</span><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>YOUR_USER_ID<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-section z-sequence z-end z-json">]</span></span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></code></pre> <p><code>agents.defaults.model_name</code> ใช้เลือกว่าจะใช้ model ไหนจาก <code>model_list</code> ครับ</p> <p>ส่วน config ของ Telegram channel:</p> <table><thead><tr><th>Field</th><th>คำอธิบาย</th></tr></thead><tbody> <tr><td><code>enabled</code></td><td>เปิด/ปิด channel</td></tr> <tr><td><code>token</code></td><td>Bot token จาก @BotFather</td></tr> <tr><td><code>allow_from</code></td><td>User ID ที่อนุญาตให้ใช้งาน (ปล่อยว่างไว้ = ใครก็ใช้ได้)</td></tr> </tbody></table> <h3 id="4-ran">4. รัน<a class="zola-anchor" href="#4-ran" aria-label="Anchor link for: 4-ran" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">picoclaw</span></span><span class="z-meta z-function-call z-arguments z-shell"> gateway</span> </span></code></pre> <p>เปิด Telegram ไปที่ bot แล้วกด <strong>Start</strong> ได้เลยครับ</p> <h2 id="tang-timezone">ตั้ง Timezone<a class="zola-anchor" href="#tang-timezone" aria-label="Anchor link for: tang-timezone" style="visibility: hidden;"></a> </h2> <p>อันนี้ผมลืมตอนแรกครับ 555 พอถาม Lucia ว่ากี่โมงแล้ว มันตอบมาเวลา UTC ผิดไป 7 ชั่วโมง จริงๆ ถ้าใครทำ server มาปกติเราจะ setup เป็น UTC+0 ไว้ แต่ผมเน้นไวขอแบบแก้ง่ายๆ ละกัน เลยแก้ที่ timezone ของเครื่องเลย (จริงๆ มันตั้งค่าที่ PicoClaw ได้นะ แต่ขี้เกียจไปหา 555):</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> timedatectl set-timezone Asia/Bangkok</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">timedatectl</span></span> </span></code></pre> <h2 id="aih-picoclaw-ran-auto-start-dwy-systemd">ให้ PicoClaw รัน Auto-Start ด้วย systemd<a class="zola-anchor" href="#aih-picoclaw-ran-auto-start-dwy-systemd" aria-label="Anchor link for: aih-picoclaw-ran-auto-start-dwy-systemd" style="visibility: hidden;"></a> </h2> <p>พอลองรันครั้งแรกก็ใช้ได้ดีครับ แต่พอปิด terminal แล้ว PicoClaw ก็ตายตามไปด้วย ซึ่งแบบนี้ก็ไม่ได้เรื่อง เลยต้อง setup ให้รันเป็น service:</p> <h3 id="sraang-service-file">สร้าง service file<a class="zola-anchor" href="#sraang-service-file" aria-label="Anchor link for: sraang-service-file" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> nano /etc/systemd/system/picoclaw.service</span> </span></code></pre> <pre data-lang="ini" class="language-ini z-code"><code class="language-ini" data-lang="ini"><span class="z-source z-genconfig"><span class="z-storage z-type z-genconfig">[Unit] </span></span><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">Description</span><span class="z-keyword z-operator z-genconfig">=</span></span>PicoClaw Gateway </span><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">After</span><span class="z-keyword z-operator z-genconfig">=</span></span>network<span class="z-keyword z-operator z-genconfig">.</span>target </span><span class="z-source z-genconfig"> </span><span class="z-source z-genconfig"><span class="z-storage z-type z-genconfig">[Service] </span></span><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">Type</span><span class="z-keyword z-operator z-genconfig">=</span></span>simple </span><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">User</span><span class="z-keyword z-operator z-genconfig">=</span></span><span class="z-support z-constant z-genconfig">YOUR_USERNAME</span> </span><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">ExecStart</span><span class="z-keyword z-operator z-genconfig">=</span></span><span class="z-keyword z-operator z-genconfig">/</span>usr<span class="z-keyword z-operator z-genconfig">/</span>bin<span class="z-keyword z-operator z-genconfig">/</span>picoclaw gateway </span><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">Restart</span><span class="z-keyword z-operator z-genconfig">=</span></span>on<span class="z-keyword z-operator z-genconfig">-</span>failure </span><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">RestartSec</span><span class="z-keyword z-operator z-genconfig">=</span></span><span class="z-constant z-numeric z-genconfig">5</span> </span><span class="z-source z-genconfig"> </span><span class="z-source z-genconfig"><span class="z-storage z-type z-genconfig">[Install] </span></span><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">WantedBy</span><span class="z-keyword z-operator z-genconfig">=</span></span>multi<span class="z-keyword z-operator z-genconfig">-</span>user<span class="z-keyword z-operator z-genconfig">.</span>target </span></code></pre> <p>อย่าลืมเปลี่ยน <code>YOUR_USERNAME</code> เป็น username ของตัวเองนะครับ</p> <h3 id="enable-aela-start">Enable และ start<a class="zola-anchor" href="#enable-aela-start" aria-label="Anchor link for: enable-aela-start" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> systemctl daemon-reload</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> systemctl enable picoclaw</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> systemctl start picoclaw</span> </span></code></pre> <p>เช็คสถานะ:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> systemctl status picoclaw</span> </span></code></pre> <p>ดู log:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> journalctl<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>u</span> picoclaw<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>f</span></span> </span></code></pre> <h2 id="kamhndtawtnaih-agent">กำหนดตัวตนให้ Agent<a class="zola-anchor" href="#kamhndtawtnaih-agent" aria-label="Anchor link for: kamhndtawtnaih-agent" style="visibility: hidden;"></a> </h2> <p>ก่อนจะไปเขียน Skill อย่างแรกที่ควรทำคือกำหนดตัวตนให้ Agent ก่อนครับ ใน PicoClaw เราสามารถเขียนไฟล์ Markdown พวก SOUL.md, IDENTITY.md, USER.md ไว้ใน workspace เพื่อบอกให้ Agent รู้ว่ามันเป็นใคร พูดยังไง และกำลังคุยกับใคร ในที่นี้ผมตั้งชื่อว่า "Lucia" ครับ ตรงนี้จะช่วยให้ bot มีบุคลิกที่สม่ำเสมอทุกครั้งที่คุยด้วย</p> <h2 id="s-naih-lucia-thamngaandwy-skills">สอนให้ Lucia ทำงานด้วย Skills<a class="zola-anchor" href="#s-naih-lucia-thamngaandwy-skills" aria-label="Anchor link for: s-naih-lucia-thamngaandwy-skills" style="visibility: hidden;"></a> </h2> <p>พอ PicoClaw รันได้และกำหนดตัวตนให้เรียบร้อยแล้ว ส่วนที่สนุกที่สุดก็มาถึงครับ คือการเขียน Skill ให้มัน</p> <p>ผมรู้สึกว่า PicoClaw มันคิดมาดีตรงที่ Skill มันก็คือไฟล์ Markdown ที่อธิบายให้ Agent รู้ว่าต้องทำอะไรยังไง อารมณ์เหมือนเขียน prompt แต่มีโครงสร้างชัดเจนกว่า ผมเริ่มจากเขียน 2 skill:</p> <h3 id="notion-skill">Notion Skill<a class="zola-anchor" href="#notion-skill" aria-label="Anchor link for: notion-skill" style="visibility: hidden;"></a> </h3> <p>ตัวนี้สอนให้ Lucia ใช้ Notion API ได้ครับ เช่น ค้นหาหน้า สร้าง page ใหม่ อัพเดท task โดยเก็บ API key ไว้ที่ <code>~/.picoclaw/workspace/secret/notion/api_key</code> ซึ่ง skill นี้ผม fork มาจาก <a rel="nofollow noreferrer" href="https://clawhub.ai/steipete/notion">clawhub.ai/steipete/notion</a> แล้วมาปรับให้เข้ากับ Notion API version ล่าสุด ดูตัวอย่าง skill ได้ที่ <a rel="nofollow noreferrer" href="https://github.com/mildronize/blog-v8/blob/main/content/posts/2026-03-14-setup-personal-ai-agent-telegram-picoclaw-deepseek/skills/notion/SKILL.md">Notion SKILL.md</a></p> <h3 id="notion-daily-planner-skill">Notion Daily Planner Skill<a class="zola-anchor" href="#notion-daily-planner-skill" aria-label="Anchor link for: notion-daily-planner-skill" style="visibility: hidden;"></a> </h3> <p>ตัวนี้ผมเขียนเองต่อยอดจาก Notion Skill ครับ เพิ่มความสามารถในการจัดการ task ตาม Eisenhower Matrix (P0-P3) และสร้างแผนประจำวัน โดยมี cache เป็น CSV ไว้ในเครื่องเพื่อลดการเรียก API ซึ่งแบบนี้ทำให้ bot ตอบเร็วขึ้นเยอะ ไม่ต้องไปดึง Notion ทุกครั้ง ดูตัวอย่าง skill ได้ที่ <a rel="nofollow noreferrer" href="https://github.com/mildronize/blog-v8/blob/main/content/posts/2026-03-14-setup-personal-ai-agent-telegram-picoclaw-deepseek/skills/notion-daily-planner/SKILL.md">Notion Daily Planner SKILL.md</a></p> <h2 id="phllaphththiiaid">ผลลัพธ์ที่ได้<a class="zola-anchor" href="#phllaphththiiaid" aria-label="Anchor link for: phllaphththiiaid" style="visibility: hidden;"></a> </h2> <p>พอทุกอย่างพร้อม ผมก็ลองคุยกับ Lucia ผ่าน Telegram ดูครับ</p> <h3 id="khuythawaip-duu-resource-vm">คุยทั่วไป + ดู resource VM<a class="zola-anchor" href="#khuythawaip-duu-resource-vm" aria-label="Anchor link for: khuythawaip-duu-resource-vm" style="visibility: hidden;"></a> </h3> <p><img src="https://thadaw.com/posts/setup-personal-ai-agent-telegram-picoclaw-deepseek/telegram-basic-chat.jpg" alt="" /></p> <p>ลอง list top 3 processes ที่กิน resource เยอะที่สุดบน VM ก็ตอบมาได้เลย ตัว PicoClaw เองใช้ memory แค่ 19MB เท่านั้น ผมเห็นตัวเลขนี้แล้วก็คิดว่า VM ราคา $4 นี่เหลือเฟือเลยครับ แล้วก็ถามว่ามี skill อะไรบ้าง ก็โชว์มาครบ 8 ตัว</p> <h3 id="cchadkaar-task-ain-notion">จัดการ task ใน Notion<a class="zola-anchor" href="#cchadkaar-task-ain-notion" aria-label="Anchor link for: cchadkaar-task-ain-notion" style="visibility: hidden;"></a> </h3> <p><img src="https://thadaw.com/posts/setup-personal-ai-agent-telegram-picoclaw-deepseek/telegram-task-planner.jpg" alt="" /></p> <p>ตรงนี้คือสิ่งที่ทำให้ผมรู้สึกว้าวนะครับ ลองบอกให้ list task ที่ข้อมูลยังไม่ครบ Lucia ก็ไปดึงจาก Notion มา (มี 50 task) แล้วเลือกมา 5 ตัวที่ข้อมูลไม่ครบ พร้อมแนะนำว่าควรเติมอะไร เช่น Priority, Due Date, Domain พอผมบอกว่าอัพเดทตามคำแนะนำเลย ก็ไปแก้ใน Notion ให้จริงๆ ครับ ไม่ต้องเปิด Notion เองเลย</p> <h2 id="khaaaichcchaaythanghmd">ค่าใช้จ่ายทั้งหมด<a class="zola-anchor" href="#khaaaichcchaaythanghmd" aria-label="Anchor link for: khaaaichcchaaythanghmd" style="visibility: hidden;"></a> </h2> <table><thead><tr><th>รายการ</th><th>ราคา/เดือน</th></tr></thead><tbody> <tr><td>DigitalOcean VM (1 core, 512MB)</td><td>$4</td></tr> <tr><td>DeepSeek V3.2 via OpenRouter</td><td>ลองคุยเล่น 4 ชม. หมดไป $1.2 (ประมาณ 5M token)</td></tr> <tr><td><strong>รวม</strong></td><td><strong>~$4-5/เดือน</strong></td></tr> </tbody></table> <h2 id="k-ncchaakkan">ก่อนจากกัน<a class="zola-anchor" href="#k-ncchaakkan" aria-label="Anchor link for: k-ncchaakkan" style="visibility: hidden;"></a> </h2> <p>กลับมาที่ตอนนั่งฟังพี่โดมคลาวน์พูดในวันนั้นครับ ตอนแรกผมแค่อยากรู้ว่า Agent พวกนี้ทำได้แค่ไหน เลยลองเริ่มจากของส่วนตัวที่ถ้าพังก็ไม่เจ็บ ผลคือได้ Personal Assistant ที่ใช้งานผ่าน Telegram ได้จริง ค่าใช้จ่ายเดือนละไม่ถึงร้อยบาท ตัว PicoClaw ใช้ memory แค่ 19MB รันบน VM ราคา $4 ยังเหลือเฟือ ส่วนเรื่อง Security ที่ผมกังวลตอนแรก พอลองใช้จริงก็พบว่าการเริ่มจาก use case ที่ไม่ sensitive มันช่วยให้เราเข้าใจข้อจำกัดของ Agent ได้ดีขึ้นโดยไม่ต้องเสี่ยงกับของจริง ถ้าใครอยากลองทำ Personal Agent แบบประหยัดๆ บ้าง ลองดู PicoClaw ได้ครับ</p> 2026-01-12T00:00:00+00:00 2026-01-12T00:00:00+00:00 https://thadaw.com/posts/because-humans-can-make-mistakes-systems-are-important/ <p>พอดีวันนี้เป็นวันพักผ่อนสบายๆ ของผมที่เชียงใหม่ครับ ระหว่างที่กำลังเดินเล่นเรื่อยๆ ผมก็บังเอิญเห็นกุญแจเสียบคาไว้อยู่หน้าร้าน ถ้าดูเผินๆ เหมือนไม่มีอะไร แต่กลับทำให้ผมหยุดคิดอยู่แปปนึง เพราะสื่อถึงระบบความปลอดภัยที่พึ่งพามนุษย์นั่นเอง ภาพนั้นไปเชื่อมกับเรื่องที่ผมเพิ่งพูดไปเมื่อวันเสาร์ที่ผ่านมา ในงาน <a rel="nofollow noreferrer" href="https://www.facebook.com/cnx.techontherock">Northern Tech on the Rock</a> เรื่อง Secret และความปลอดภัยของระบบพอดี เลยคิดว่า นี่น่าจะเป็นโอกาสดีที่จะหยิบเรื่องนั้นมาเล่าต่อในรูปแบบ Blog ละกันนะ</p> <p><img src="https://thadaw.com/posts/because-humans-can-make-mistakes-systems-are-important/cover.jpg" alt="" /></p> <p>หลายคนพอได้ยินคำว่า Secret หรือความปลอดภัยของระบบ ก็มักจะนึกถึงเรื่องเทคนิคทันที ทั้ง API key, password หรือ token ต่างๆ ซึ่งก็ไม่ผิดนะครับ แต่มุมที่ผมอยากชวนคิดจริงๆ คือ เรากำลังพึ่งพา “ระบบ” แค่ไหน หรือว่าสุดท้ายแล้วยังพึ่งพา “ความระวังของคน” อยู่เป็นหลัก เหมือนกับกุญแจที่เสียบคาไว้นั่นแหละ ไม่ได้ผิดขั้นตอนอะไรเลย แค่หวังว่าทุกคนจะช่วยกันไม่พลาด ซึ่งในโลกของระบบซอฟต์แวร์ พอทุกอย่างเริ่มซับซ้อนขึ้น แนวคิดแบบนี้มักจะพาเราไปเจอปัญหาเดิมๆ ซ้ำแล้วซ้ำอีกครับ</p> <p>ปัญหาคือ เวลาที่ระบบยังเล็กอยู่ วิธีคิดแบบนี้มันดูเวิร์กมากครับ Secret มีไม่กี่ตัว ทุกคนรู้ว่าเก็บไว้ตรงไหน ใครต้องใช้ก็ทักถามกันเอา พอมีอะไรผิดพลาดก็ยังพอไล่กันทัน แต่พอระบบเริ่มโตขึ้น มีหลายแอป หลาย environment และมีคนเข้ามาเกี่ยวข้องมากขึ้น ความ “หวังดีต่อกัน” แบบเดิมๆ ก็เริ่มไม่พอ Secret ตัวเดิมอาจถูกนำไปใช้ซ้ำในหลายที่ สิทธิ์การเข้าถึงค่อยๆ ถูกขยายออกเพื่อความสะดวก จนสุดท้ายเราเองก็ไม่แน่ใจแล้วว่า ใครเข้าถึงอะไรได้บ้าง และถ้าวันหนึ่งมันเกิดหลุดขึ้นมา เราจะรู้ตัวตอนไหนครับ</p> <h2 id="watcchakrchiiwitkh-ng-secret-secret-lifecycle">วัฏจักรชีวิตของ Secret (Secret Lifecycle)<a class="zola-anchor" href="#watcchakrchiiwitkh-ng-secret-secret-lifecycle" aria-label="Anchor link for: watcchakrchiiwitkh-ng-secret-secret-lifecycle" style="visibility: hidden;"></a> </h2> <p>ตรงนี้แหละครับที่ผมเริ่มรู้สึกว่า เรามักมอง Secret เป็นแค่ “ค่า” ค่าเดียวในไฟล์ config หรือค่าหนึ่งในระบบจัดการ secret แต่ในความเป็นจริง Secret ไม่ได้อยู่นิ่งๆ แบบนั้นเลย มันมีช่วงเวลาของมัน มีวันเกิด มีช่วงที่ถูกใช้งาน มีวันที่ควรหมดอายุ และมีวันที่ควรถูกเปลี่ยนหรือเลิกใช้ไป ถ้าเรามองมันเป็นแค่ค่าหนึ่ง แล้วหวังว่าทุกคนจะจำได้เองว่าเมื่อไหร่ควรเปลี่ยน เมื่อไหร่ควรปิด เราก็กลับไปอยู่จุดเดียวกับกุญแจที่เสียบคาไว้นั่นแหละครับ คือไม่ได้ผิดในทันที แต่รอวันที่ความผิดพลาดจะเกิดขึ้น</p> <pre class="mermaid"> flowchart LR %% Secret Lifecycle subgraph L[Secret Lifecycle] direction LR C[Create] --&gt; S[Store] S --&gt; B[Consume] B --&gt; E[&quot;Expired&lt;br&gt;(signal: rotation needed)&quot;] E --&gt; R[Rotate] R --&gt; D[Destroy] D --&gt; C end %% Cross-cutting concerns (not part of lifecycle) subgraph X[Cross-cutting Concerns] direction TB SC[&quot;Scope&lt;br&gt;(env&#x2F;app boundary)&quot;] P[&quot;Permission&lt;br&gt;(least privilege)&quot;] I[&quot;Identity&lt;br&gt;(Service Principal &#x2F; Managed Identity)&quot;] RV[&quot;Revoke Access&lt;br&gt;(disable access without deleting secret)&quot;] AU[&quot;Audit Logs &#x2F; Alerts&lt;br&gt;(who, when, what)&quot;] end </pre> <p>พอเราเริ่มมอง Secret ในมุมของเวลา ปัญหามันก็เปลี่ยนไปทันที เพราะสิ่งที่ต้องจัดการไม่ใช่แค่การ “เก็บให้ปลอดภัย” อย่างเดียวอีกต่อไป แต่รวมถึงว่า ใครเป็นคนสร้าง ใครมีสิทธิ์ใช้ ใครมีสิทธิ์เปลี่ยน แล้วถ้าวันหนึ่งต้องยกเลิกหรือหมุนเวียน Secret นั้น ระบบจะพาเราไปถึงจุดนั้นได้เองหรือเปล่า หรือสุดท้ายก็ต้องกลับไปพึ่งคนเดิมๆ มานั่งไล่แก้ทีละจุด ถ้ายังเป็นแบบหลังอยู่ ต่อให้มีเครื่องมือดีแค่ไหน เราก็ยังหนีปัญหาเดิมไม่พ้นครับ</p> <p>สุดท้ายแล้ว ผมคิดว่าปัญหาจริงๆ ไม่ได้อยู่ที่เรามี Secret เยอะเกินไป แต่อยู่ที่เราไม่มีระบบมารองรับมันต่างหาก ตอนที่ Secret มีแค่ไม่กี่ตัว ทุกอย่างดูง่ายไปหมด แต่พอจำนวนมันค่อยๆ เพิ่มขึ้น สิ่งที่ตามมาคือความซับซ้อนที่เราไม่ค่อยรู้ตัว และเพื่อให้จัดการง่ายขึ้น เรามักเลือกทางลัด เช่น ขยายสิทธิ์ให้กว้างขึ้น ใช้ Secret เดียวกันในหลายที่ หรือปล่อยให้มันอยู่ไปเรื่อยๆ โดยหวังว่าจะไม่มีอะไรเกิดขึ้น ซึ่งวิธีเหล่านี้อาจช่วยให้ระบบเดินต่อได้ในระยะสั้น แต่ในระยะยาวมันกำลังสะสมความเสี่ยงไว้เงียบๆ ครับ</p> <h2 id="taw-yaangain-workshop">ตัวอย่างใน Workshop<a class="zola-anchor" href="#taw-yaangain-workshop" aria-label="Anchor link for: taw-yaangain-workshop" style="visibility: hidden;"></a> </h2> <p>อย่างใน Workshop ที่ผ่านมานี่ ผมยกตัวอย่างง่ายๆ ด้วยการใช้ TypeScript เขียนเป็นสคริปต์ตัวหนึ่ง แล้วให้มันไปจัดการเรื่อง Secret ผ่าน Azure Key Vault จากนั้นก็เอาไปใช้งานจริงตอน Deploy บน Azure Container App โดยรันผ่าน GitHub Actions จุดที่อยากให้เห็นไม่ใช่ตัวโค้ดหรือเครื่องมือเป็นหลัก แต่คือภาพรวมของการทำงานทั้งระบบ ว่า Secret ถูกสร้าง เก็บ และถูกนำไปใช้ยังไงบ้าง</p> <p><img src="https://thadaw.com/posts/because-humans-can-make-mistakes-systems-are-important/workshop.jpg" alt="" /></p> <p>ใน Workshop ผมเลยตั้งใจโชว์ให้เห็นเรื่อง Secret Lifecycle แบบครบๆ ทั้งการกำหนดสิทธิ์ การจำกัด Scope และการควบคุมการเข้าถึงในแต่ละขั้น เพื่อให้เห็นว่า ถ้าเราออกแบบระบบมาดี มันจะช่วยลดการพึ่งพาความระวังของคนลงได้เยอะมาก และปล่อยให้ระบบทำหน้าที่ดูแลความปลอดภัยแทนเราได้มากขึ้นครับ</p> <p>แต่พอถอยออกมามองในมุมขององค์กรจริงๆ จะเห็นว่า วิธีจัดการเรื่อง Secret ของแต่ละที่แตกต่างกันมาก บางที่มีเครื่องมือครบ มีระบบพร้อม แต่สุดท้ายก็ยังพึ่งพาการตกลงกันด้วยปากเปล่า หรือเอกสารเป็นหลัก ในขณะที่บางที่อาจจะไม่ได้มีเครื่องมือหวือหวาอะไร แต่กลับออกแบบกติกาให้ระบบบังคับใช้งานตั้งแต่ต้น ซึ่งจากที่ผมเจอมาบ่อยๆ ความแตกต่างตรงนี้ไม่ได้อยู่ที่ว่าเลือกใช้เครื่องมืออะไร แต่อยู่ที่ว่าเราเลือกจะย้ายความรับผิดชอบจาก “คน” ไปไว้ที่ “ระบบ” มากแค่ไหนครับ</p> <h2 id="withiikhidaebb-soft-constraint">วิธีคิดแบบ Soft Constraint<a class="zola-anchor" href="#withiikhidaebb-soft-constraint" aria-label="Anchor link for: withiikhidaebb-soft-constraint" style="visibility: hidden;"></a> </h2> <p>ถ้าลองสังเกตดูดีๆ วิธีจัดการเรื่อง Secret ส่วนใหญ่มักจะตกอยู่ในสองแนวทางนี้ แนวทางแรกคือแบบที่เราคุ้นเคยกันดี คือมีกฎ มีแนวปฏิบัติ มีเอกสารบอกว่าอะไรควรหรือไม่ควรทำ ทุกคนรู้กติกา และก็หวังว่าทุกคนจะทำตามให้ถูกต้อง วิธีแบบนี้ผมเรียกว่า Soft constraint ไม่ได้ผิดอะไรเลย แถมยังเริ่มต้นได้เร็ว ต้นทุนต่ำ และเหมาะกับช่วงที่ระบบยังเล็กอยู่ แต่ข้อจำกัดของมันก็คือ ทุกอย่างยังต้องอาศัยความระมัดระวังและวินัยของคนเป็นหลัก ซึ่งถ้าวันไหนพลาดขึ้นมา ระบบก็ไม่ค่อยมีอะไรช่วยเตือนหรือช่วยกันพลาดเท่าไหร่ครับ</p> <h2 id="withiikhidaebb-hard-constraint">วิธีคิดแบบ Hard Constraint<a class="zola-anchor" href="#withiikhidaebb-hard-constraint" aria-label="Anchor link for: withiikhidaebb-hard-constraint" style="visibility: hidden;"></a> </h2> <p>อีกฝั่งหนึ่งคือแนวคิดแบบ Hard constraint ซึ่งต่างจากแบบแรกพอสมควร เพราะกติกาไม่ได้อยู่แค่ในหัวคนหรือในเอกสารอีกต่อไป แต่ถูกฝังไว้ในระบบตั้งแต่ต้น ใครจะเข้าถึง Secret ได้ ต้องผ่านอะไรบ้าง ระบบเป็นคนตัดสิน ไม่ใช่คนเลือกเอง ข้อดีของวิธีนี้คือ ต่อให้ระบบโตขึ้น มีคนเข้ามาเกี่ยวข้องมากขึ้น หรือมีขั้นตอนซับซ้อนขึ้นแค่ไหน กติกาก็ยังถูกบังคับใช้อย่างสม่ำเสมอ แต่แน่นอนว่ามันแลกมาด้วยต้นทุนที่สูงขึ้น ทั้งเรื่องเวลา การออกแบบ และการลงทุนกับระบบตั้งแต่แรก ซึ่งตรงนี้แหละครับ ที่หลายองค์กรต้องตัดสินใจให้ชัด ว่าจะยอมจ่ายต้นทุนตรงไหน เพื่อแลกกับความเสี่ยงที่ลดลงในระยะยาว</p> <h2 id="aimaichaekhechphaaa-secret">ไม่ใช่แค่เฉพาะ Secret<a class="zola-anchor" href="#aimaichaekhechphaaa-secret" aria-label="Anchor link for: aimaichaekhechphaaa-secret" style="visibility: hidden;"></a> </h2> <p>จริงๆ แล้วแนวคิดนี้ไม่ได้หยุดอยู่แค่เรื่อง Secret เลยครับ ถ้าลองมองดีๆ จะเห็นว่ากระบวนการอีกหลายอย่างในองค์กรก็หน้าตาไม่ต่างกัน ไม่ว่าจะเป็นขั้นตอนการ deploy การอนุมัติสิทธิ์ การเข้าถึงระบบ หรือแม้แต่การแก้ไข production หลายที่ยังคงอาศัยความระมัดระวังของคนเป็นหลัก มีข้อตกลง มีแนวปฏิบัติ แต่ระบบเองไม่ได้ช่วยบังคับหรือช่วยป้องกันมากนัก ซึ่งพอทุกอย่างเริ่มเร็วขึ้น งานมากขึ้น และคนมากขึ้น ช่องว่างเล็กๆ เหล่านี้ก็เริ่มกลายเป็นความเสี่ยงที่มองไม่เห็นครับ</p> <p>ตรงนี้แหละครับที่ผมมองว่า DevOps เข้ามามีบทบาทสำคัญ ไม่ใช่ในฐานะคนดูแลเครื่องมือ หรือคนเขียน pipeline แต่เป็นคนที่คอยออกแบบระบบให้ความเร็วกับความปลอดภัยเดินไปด้วยกันได้ แทนที่จะฝากความหวังไว้กับความจำหรือความระวังของคน DevOps จะพยายามย้ายกติกาเหล่านั้นเข้าไปอยู่ในระบบ ทำให้สิ่งที่ควรทำ กลายเป็นสิ่งที่ทำได้ง่าย และสิ่งที่ไม่ควรทำ กลายเป็นสิ่งที่ทำได้ยากหรือทำไม่ได้เลย ซึ่งสุดท้ายแล้ว มันช่วยลดความเสี่ยงที่เกิดจากความผิดพลาดเล็กๆ น้อยๆ ที่หลีกเลี่ยงไม่ได้ของมนุษย์ครับ</p> <h2 id="sngthaay">ส่งท้าย<a class="zola-anchor" href="#sngthaay" aria-label="Anchor link for: sngthaay" style="visibility: hidden;"></a> </h2> <p>สุดท้ายแล้ว ภาพกุญแจที่เสียบคาไว้อยู่หน้าร้านในวันนั้น มันไม่ได้เป็นเรื่องของความสะเพร่า หรือความไม่รอบคอบของใครเป็นพิเศษ แต่มันสะท้อนให้เห็นว่า เรากำลังออกแบบระบบให้ต้องพึ่งพามนุษย์มากแค่ไหน ในโลกของซอฟต์แวร์ก็ไม่ต่างกันครับ ยิ่งระบบโต ยิ่งเร็ว และยิ่งมีคนเกี่ยวข้องมากเท่าไหร่ ความหวังดีหรือความระวังของคนก็ยิ่งไม่พอ สิ่งที่ช่วยได้จริงๆ คือการออกแบบระบบที่คิดเผื่อความผิดพลาดเอาไว้ตั้งแต่ต้น และปล่อยให้ระบบทำหน้าที่ดูแลความปลอดภัยแทนเราให้มากที่สุด เท่านี้เองครับ ที่ทำให้ความเร็วกับความปลอดภัยอยู่ด้วยกันได้โดยไม่ต้องเลือกอย่างใดอย่างหนึ่ง</p> <p>สำหรับบทความนี้ ผมขอเล่าไว้ประมาณนี้ก่อนนะครับ ส่วนรายละเอียด Workshop เดี๋ยวไว้เขียนแยกอีก blog ละกัน ถ้ามีเวลาจะมาเล่าให้ฟังแบบค่อยเป็นค่อยไป ตั้งแต่แนวคิด ไปจนถึงการลงมือทำจริง เพื่อให้เห็นภาพชัดๆ มากขึ้น รวมถึงจะเอา record ตอนที่ไปพูดบนเวทีกลับมาแปะไว้ด้วย ตอนนี้ขอฝาก slide กับ code ที่ใช้ในงานไว้ก่อน เผื่อใครอยากลองเปิดดู ลองไล่ตาม หรือจะเอาไปคุยกับน้อง AI ต่อเล่นๆ ระหว่างรอ ก็ถือว่าเป็นจุดเริ่มต้นที่ดีแล้วครับ :)</p> <ul> <li><a rel="nofollow noreferrer" href="https://docs.google.com/presentation/d/1BWcvEZYCFBLRNOGvDJ9YNefIBRW2DncbdS4cXvOaaBQ/edit?usp=sharing">Slide "TypeScript for Confident Deploys and Safe Secrets | Northern Tech on the Rock 2026"</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/ts-confident-deploy-and-secret">Code ตัวอย่างใน Workshop บน GitHub</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/ts-confident-deploy-and-secret-speaker">Speaker Repo</a></li> </ul> 2025-12-21T00:00:00+00:00 2025-12-21T00:00:00+00:00 https://thadaw.com/posts/review-2025-devops-team-reflection-flat-team/ <p>ตอนนี้ก็ใกล้จะจบปีแล้ว พอมองย้อนกลับไป ผมรู้สึกว่าปีนี้เป็นปีแห่งการเปลี่ยนแปลงจริงๆ ไม่ใช่แค่ในแง่ของเทคโนโลยีหรือระบบที่เราใช้อยู่ แต่เป็นการเปลี่ยนวิธีคิดและวิธีทำงานของทั้งทีม การเขียน reflection ครั้งนี้ ผมหวังว่าจะเป็นประโยชน์กับใครหลายคน โดยเฉพาะคนที่กำลังดูแลทีมอยู่ เพราะมันเป็นเรื่องของการค่อยๆ ปรับทีมให้ flat ขึ้น และผลลัพธ์ที่ได้ กลับดีกว่าที่ผมคาดไว้มาก</p> <h2 id="emuue-khwaamlae-iiydkh-ngphm-klaayepn-bottleneck-kh-ngthiim">เมื่อความละเอียดของผม กลายเป็น bottleneck ของทีม<a class="zola-anchor" href="#emuue-khwaamlae-iiydkh-ngphm-klaayepn-bottleneck-kh-ngthiim" aria-label="Anchor link for: emuue-khwaamlae-iiydkh-ngphm-klaayepn-bottleneck-kh-ngthiim" style="visibility: hidden;"></a> </h2> <p>ตั้งแต่ไหนแต่ไรมา ผมเป็นคนที่มั่นใจในตัวเองมาก เพราะอาจจะทำอะไรหลายๆ อย่างด้วยตัวเองมาตลอด ก่อนมาเป็น DevOps Engineer ผมก็เขียนโปรแกรมมาเยอะ ซนมาเยอะ มันก็เลยทำให้ผมเป็นคน perfectionist โดยไม่รู้ตัว</p> <p>ตอนที่ยังเป็น DevOps Engineer ช่วงนั้นผมไว้ใจตัวเองมาก โดยเฉพาะในเรื่องรายละเอียดของงาน ไม่ว่าจะเป็นการออกแบบระบบ โครงสร้างของ infrastructure หรือผลกระทบระยะยาว ทุกอย่างต้อง “ดีพอ” ก่อนถึงจะปล่อยไปได้ ความรู้สึกตอนนั้นคือ ถ้าผมเป็นคนทำเอง ผมจะคุมคุณภาพได้ และนั่นคือสิ่งที่ทำให้ผมมั่นใจว่างานจะไม่พัง</p> <p>อย่างไรก็ตาม คำว่า <strong>perfectionist</strong> ในแบบของผม ไม่ได้หมายความว่าผมอยากทำทุกอย่างให้ใหญ่หรือเกินความจำเป็น เวลาทำงาน ผมเริ่มจากคำถามว่า <u>ทำไมเราต้องทำสิ่งนี้ และปัญหาที่แท้จริงคืออะไร</u> ก่อนจะคิดถึงวิธีแก้หรือเครื่องมือที่ใช้ ผมให้ความสำคัญกับบริบทและข้อจำกัดรอบตัวเสมอ ไม่ว่าจะเป็นเวลา ทีม หรือผลกระทบต่อระบบอื่นๆ</p> <p><img src="https://thadaw.com/posts/review-2025-devops-team-reflection-flat-team/01-perfectionist.jpg" alt="" /></p> <p>ความเป็น perfectionist ของผมจึงไม่ได้อยู่ที่การขยาย scope งาน แต่เป็นเรื่องของคุณภาพและการออกแบบ งานอาจเริ่มจากจุดเล็กๆ ได้ แต่โครงสร้างต้องไม่ปิดทางการเติบโตในอนาคต ผมมักคิดเสมอว่า <em>ถ้าวันหนึ่งระบบนี้ต้อง scale ขึ้น จะยังไปต่อได้หรือไม่ และการตัดสินใจวันนี้ จะกลายเป็นภาระของทีมในวันข้างหน้าหรือเปล่า</em> ความละเอียดในจุดนี้เองที่ทำให้ผมรู้สึกสบายใจเมื่อปล่อยงานออกไป</p> <p>ในช่วงที่ผมยังทำงานคนเดียว หรือทีมยังเล็ก วิธีคิดแบบนี้ช่วยให้งานออกมามั่นคงและรับมือกับการเปลี่ยนแปลงได้ดี แต่ผมก็เริ่มตระหนักทีหลังว่า สิ่งที่เคยเป็นจุดแข็งของผม อาจกลายเป็นข้อจำกัดของทีม เมื่อคนที่ต้องตัดสินใจทุกอย่างยังเป็นคนเดิม</p> <p>สิ่งที่เป็นผลลัพธ์ก็คือ ระบบ Platform หลังบ้านที่ดูแลเป็น Automation ทั้งส่วนของ infra และ Pipeline ต่างๆ ถูกสร้างขึ้นมา และสามารถต่อยอดมาได้เรื่อยๆ และแทบไม่มีส่วนไหนที่ต้องมานั่งรื้อทิ้งใหม่ เผื่อใครนึกภาพไม่ออก พอดีผมเพิ่งได้รับเชิญจากพี่รูฟไปพูดในงาน Platform Engineering Meetup ที่ ODDS ผมเลยวิดิโอมาให้ดูเผื่อจะช่วยให้เห็นภาพมากขึ้นครับ</p> <div class="youtube-embed "> <iframe src="https://www.youtube.com/embed/Rb7HkHZa4MU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="ผมไปแบ่งปันประสบการณ์การสร้าง Platform จากศูนย์ ที่ ODDS ในงาน Platform Engineering Meetup เมื่อวันที่ 2 ส.ค. 2568 ที่ผ่านมา"> </iframe> <div class="youtube-caption"> ผมไปแบ่งปันประสบการณ์การสร้าง Platform จากศูนย์ ที่ ODDS ในงาน Platform Engineering Meetup เมื่อวันที่ 2 ส.ค. 2568 ที่ผ่านมา </div> </div><h2 id="israkh-ng-devops-aelatnthunthiim-ngaimehn">อิสระของ DevOps และต้นทุนที่มองไม่เห็น<a class="zola-anchor" href="#israkh-ng-devops-aelatnthunthiim-ngaimehn" aria-label="Anchor link for: israkh-ng-devops-aelatnthunthiim-ngaimehn" style="visibility: hidden;"></a> </h2> <p>ต้องบอกก่อนว่า การที่ทีม DevOps ของผมทำทุกอย่างเอง ไม่ใช่สิ่งที่เกิดขึ้นโดยบังเอิญ แต่เป็นการตัดสินใจของผมเองตั้งแต่ต้น งานหลายอย่างในโลกของ DevOps เข้าถึงยาก อธิบายยาก และมองจากภายนอกแทบไม่เห็นคุณค่า สิ่งที่คนส่วนใหญ่มองเห็นมักเป็นแค่ผลลัพธ์ปลายทาง เช่น deploy เร็วขึ้น ระบบเสถียรขึ้น หรือ workflow สะดวกขึ้น แต่เบื้องหลังของสิ่งเหล่านี้เต็มไปด้วยรายละเอียด การออกแบบ และการตัดสินใจที่ซับซ้อน</p> <p><em>ในช่วงแรก ผมเลือกที่จะรับมันไว้เอง</em></p> <p><img src="https://thadaw.com/posts/review-2025-devops-team-reflection-flat-team/02-stacking.jpg" alt="" /></p> <p>ตอนที่ผมยังทำงานคนเดียว หรือทีมยังเล็ก วิธีนี้ทำให้ทุกอย่างเดินได้เร็ว และคุณภาพของงานออกมาค่อนข้างนิ่ง แต่เมื่อทีมเริ่มมีคนเพิ่มขึ้น สิ่งที่เคยเป็นจุดแข็ง ก็เริ่มแสดงผลข้างเคียงออกมาชัดขึ้นเรื่อยๆ แม้จะมีทีมแล้ว แต่การตัดสินใจสำคัญหลายอย่างยังคงวนกลับมาที่ผม ไม่ว่าจะเป็นเรื่องการออกแบบ การเลือกแนวทาง หรือการปล่อยงาน ทุกอย่างต้องผ่านสายตาผมก่อนเสมอ โดยไม่รู้ตัว ผมกลายเป็นทั้งคนออกแบบ คนตรวจคุณภาพ และคนให้คำตอบสุดท้ายในเวลาเดียวกัน</p> <p>ในขณะที่ทีม developer โดยทั่วไปจะมี BA, SA และ PM คอยช่วยจัดการ requirement วางแผนงาน และช่วยคิดเรื่อง design ที่ซับซ้อน <strong>DevOps team ของผมกลับต้องทำทุกอย่างเอง ตั้งแต่รับโจทย์ที่ยังไม่ชัด แกะ requirement ออกมา วิเคราะห์ผลกระทบ ออกแบบระบบ วางแผน sprint ไปจนถึงลงมือทำจริง</strong> โมเดลการทำงานแบบนี้ให้อิสระกับทีมสูงมาก และเปิดโอกาสให้ DevOps Engineer ได้เห็นภาพระบบแบบ end-to-end แต่ในขณะเดียวกัน ความรับผิดชอบก็สูงขึ้นอย่างหลีกเลี่ยงไม่ได้</p> <p>ช่วงนั้นผมยังรู้สึกว่านี่คือสิ่งที่ควรทำ และเป็นหน้าที่ของผมในฐานะ DevOps Team Lead ที่ต้องช่วยดูแลคุณภาพของงานให้ดีที่สุด แต่สิ่งที่เริ่มชัดขึ้นเรื่อยๆ คือ งานจำนวนมากไม่ได้ช้าเพราะทีมทำไม่ได้ หากแต่ช้าเพราะต้องรอการตัดสินใจจากผม และในหลายครั้ง ผมเองก็เริ่มใช้เวลาส่วนใหญ่ไปกับการ review และ approve มากกว่าการคิดภาพรวมในระดับที่ควรจะเป็น</p> <p>ผมไม่ได้รู้สึกว่างานกำลังพัง หรือทีมกำลังไปต่อไม่ได้ ความจริงคือทุกอย่างยังเดินได้ดี เพียงแต่ผมเริ่มรู้สึกว่าพลังที่ใช้ไปในแต่ละวัน เริ่มไม่สมดุลกับสิ่งที่ผมควรโฟกัสในบทบาทนี้มากขึ้นเรื่อยๆ และที่สำคัญคือ ผมเริ่มเห็นว่าหลายอย่างยังคงขึ้นอยู่กับผมมากเกินไป โดยไม่รู้ตัว ผมกลายเป็น single point of failure ทั้งในเชิงการตัดสินใจและการขับเคลื่อนงาน กล่าวคือ ถ้าผมช้า งานจำนวนหนึ่งก็จะช้าตามไปด้วย</p> <p>ในฐานะคนที่ออกแบบระบบ ผมคุ้นเคยกับแนวคิดนี้ดี ระบบที่ดีไม่ควรผูกความสำคัญไว้กับองค์ประกอบเดียว และเมื่อหันกลับมามองการทำงานภายในทีม ผมก็เริ่มรู้สึกไม่ต่างกัน โครงสร้างการทำงานที่ยังต้องรอผมอยู่ตลอด อาจจะยังใช้งานได้ในวันนี้ แต่ไม่ใช่สิ่งที่ผมอยากออกแบบให้ทีมต้องพึ่งพาในระยะยาว</p> <p>ตอนนั้นผมยังไม่รู้คำตอบที่ชัดเจนว่าควรแก้ปัญหานี้อย่างไร รู้แค่ว่าถ้ายังทำงานในรูปแบบเดิมต่อไป ไม่ใช่แค่ทีมที่จะเหนื่อย แต่ตัวผมเองก็คงไปต่อได้ไม่ไกลเช่นกัน</p> <h2 id="cchudthiit-ngy-mrabwaa-thaaaimpl-y-thiimcchaaipt-aimaid">จุดที่ต้องยอมรับว่า ถ้าไม่ปล่อย ทีมจะไปต่อไม่ได้<a class="zola-anchor" href="#cchudthiit-ngy-mrabwaa-thaaaimpl-y-thiimcchaaipt-aimaid" aria-label="Anchor link for: cchudthiit-ngy-mrabwaa-thaaaimpl-y-thiimcchaaipt-aimaid" style="visibility: hidden;"></a> </h2> <p>ต่อมาผมเริ่มยอมรับอย่างจริงจังว่า ปัญหาไม่ได้อยู่ที่ความสามารถของทีม หรือคุณภาพของระบบ แต่เป็นโครงสร้างการทำงานที่ผูกทุกการตัดสินใจไว้กับคนคนเดียว ความเหนื่อยสะสมที่เพิ่มขึ้นเรื่อยๆ เป็นสัญญาณชัดว่าผมกำลังแบกมากเกินไป และวิธีทำงานแบบเดิมไม่ยั่งยืนอีกต่อไป</p> <p>คำแนะนำที่ผมได้รับจากหัวหน้าในตอนนั้นไม่ได้ซับซ้อนอะไร <strong>เขาเพียงบอกให้ผมลองปล่อย ลองทำทีมให้แบนลง และเลิกเป็นจุด approve ของทุก decision</strong> ฟังดูง่าย แต่สำหรับคนที่เคยควบคุมคุณภาพทุกอย่างด้วยตัวเอง มันไม่ใช่เรื่องเล็กเลย การปล่อยในที่นี้ไม่ได้หมายความว่าปล่อยปละละเลย แต่คือการยอมรับว่าคุณภาพอาจไม่สมบูรณ์แบบเท่าที่ผมคุ้นเคย และเปิดโอกาสให้ทีมได้เรียนรู้จากการตัดสินใจของตัวเอง</p> <p>ในตอนนั้นผมยังไม่แน่ใจว่าวิธีนี้จะเวิร์กจริงหรือไม่ รู้แค่ว่าถ้ายังทำงานในรูปแบบเดิมต่อไป ต่อให้ระบบยังรันอยู่ดี ทีมอาจจะไปต่อไม่ได้ และที่สำคัญ ตัวผมเองก็คงไม่สามารถแบกทุกอย่างไว้ได้นานกว่านี้แล้ว</p> <h2 id="chwngthiiyaakthiisud-khuue-kaarwaangaicchkhn-uuen">ช่วงที่ยากที่สุด คือการวางใจคนอื่น<a class="zola-anchor" href="#chwngthiiyaakthiisud-khuue-kaarwaangaicchkhn-uuen" aria-label="Anchor link for: chwngthiiyaakthiisud-khuue-kaarwaangaicchkhn-uuen" style="visibility: hidden;"></a> </h2> <p>หลังจากตัดสินใจว่าจะลองปล่อย และทำทีมให้แบนลงจริงๆ สิ่งที่ยากที่สุดสำหรับผม ไม่ใช่การปรับ process หรือเปลี่ยนวิธีทำงาน แต่คือการจัดการกับตัวเอง ความรู้สึกที่เคยมั่นใจว่า <em>“ถ้าผมทำเอง ทุกอย่างจะปลอดภัยกว่า”</em> ยังอยู่ครบ และมันไม่ได้หายไปเพียงเพราะผมตัดสินใจเปลี่ยนบทบาท</p> <p>ในช่วงแรก ผมต้องฝืนตัวเองอย่างมากที่จะไม่เข้าไปแก้ ไม่เข้าไปชี้นำทุกจุด และไม่เข้าไปตัดสินใจแทนทีม หลายครั้งผมเห็นสิ่งที่ถ้าเป็นผม ผมอาจจะทำต่างออกไป และต้องยอมรับความไม่สบายใจนั้นไว้ให้ได้ การวางใจคนอื่นในที่นี้ ไม่ใช่การเชื่อว่าทุกการตัดสินใจจะถูกต้อง แต่คือการยอมรับว่าความผิดพลาดเป็นส่วนหนึ่งของการเรียนรู้</p> <p>สิ่งที่ผมค่อยๆ เรียนรู้คือ <strong>หน้าที่ของผมไม่ใช่การทำให้ทุก decision ออกมาสมบูรณ์แบบ แต่คือการสร้างพื้นที่ที่ทีมกล้าตัดสินใจ และกล้ารับผลของการตัดสินใจนั้น</strong> ผมเริ่มเปลี่ยนจากการให้คำตอบ เป็นการตั้งคำถาม จากการบอกว่าควรทำอย่างไร เป็นการชวนคิดว่ามีทางเลือกอะไรบ้าง และแต่ละทางเลือกมีผลกระทบอย่างไร</p> <p><img src="https://thadaw.com/posts/review-2025-devops-team-reflection-flat-team/03-releasing.jpg" alt="" /></p> <p>ช่วงเวลานี้ทำให้ผมเห็นชัดว่า ความไว้วางใจไม่ใช่สิ่งที่เกิดขึ้นจากคำพูดหรือโครงสร้างทีม แต่เกิดจากการกระทำซ้ำๆ การไม่เข้าไปแทรกแซงโดยไม่จำเป็น การยอมรับว่าคุณภาพอาจยังไม่เท่าที่ผมเคยทำเอง และการยืนอยู่ข้างทีม แม้ในวันที่การตัดสินใจนั้นไม่ออกมาสมบูรณ์แบบนัก</p> <p>ผมไม่กล้าบอกว่าช่วงนี้เป็นช่วงที่สบาย เพราะมันไม่ใช่ แต่เป็นช่วงที่ทำให้ผมเข้าใจความหมายของคำว่า leadership ชัดขึ้นกว่าที่เคย การวางใจคนอื่นไม่ใช่การปล่อยมือทั้งหมด แต่คือการเลือกที่จะไม่จับทุกอย่างไว้แน่นเหมือนเดิม และนั่นอาจเป็นทักษะที่ยากที่สุดที่ผมต้องเรียนรู้ในปีนี้</p> <h2 id="withiithamngaanaebb-flat-thiikh-y-epnruupepnraang">วิธีทำงานแบบ flat ที่ค่อยๆ เป็นรูปเป็นร่าง<a class="zola-anchor" href="#withiithamngaanaebb-flat-thiikh-y-epnruupepnraang" aria-label="Anchor link for: withiithamngaanaebb-flat-thiikh-y-epnruupepnraang" style="visibility: hidden;"></a> </h2> <p>หลังจากผ่านช่วงที่ต้องปรับใจและเรียนรู้ที่จะวางใจคนอื่น วิธีทำงานแบบ flat ไม่ได้เกิดขึ้นจากการเปลี่ยนโครงสร้างทีมในทันที แต่มันค่อยๆ เป็นรูปเป็นร่างจากการปรับพฤติกรรมเล็กๆ ในแต่ละวัน มากกว่าการออกกฎหรือประกาศวิธีทำงานใหม่อย่างเป็นทางการ</p> <p>สิ่งแรกที่ผมเริ่มทำคือการถอยตัวเองออกจาก flow งานประจำวัน ผมเลิกเป็นคน approve ทุกอย่าง และพยายามไม่เป็นจุดศูนย์กลางของการตัดสินใจ DevOps Engineer แต่ละคนเริ่มรับโจทย์เอง ตั้งแต่การไปคุยหา requirement วิเคราะห์ปัญหา ออกแบบแนวทาง ลงมือทำ ทดสอบ และ deploy ให้จบในตัวเอง โดยใช้ peer-review ภายในทีมเป็นกลไกหลักในการรักษาคุณภาพ</p> <p>การตัดสินใจหลายอย่างจึงเริ่มเกิดใกล้กับปัญหามากขึ้น คนที่ลงมือทำเป็นคนตัดสินใจ และรับผิดชอบผลลัพธ์ของงานนั้นโดยตรง <strong>บทบาทของผมเปลี่ยนไปเป็นการเข้ามาช่วยในจุดที่ซับซ้อน หรือมีผลกระทบในระดับที่ต้องการมุมมองเพิ่ม</strong> ไม่ใช่เพื่อให้คำตอบสุดท้าย แต่เพื่อช่วยตั้งคำถามและทำให้บริบทของการตัดสินใจชัดขึ้น</p> <p>ในส่วนของการวางแผนงาน ผมยังคงเป็นคนออกแบบ sprint อยู่ เพราะต้องคอย balance ระหว่างงานจาก product, developer และ roadmap ภายในของทีม DevOps เอง แต่ภายใน sprint นั้น ทีมเป็นคนจัดการรายละเอียดทั้งหมด ตั้งแต่วิธีทำ การแบ่งงาน ไปจนถึงการผลักงานให้เสร็จ โดยไม่ต้องรอการควบคุมจากผมเหมือนเดิม</p> <p>วิธีทำงานแบบ flat ในแบบของผมจึงไม่ได้หมายถึงการปล่อยทุกอย่างออกจากมือ แต่คือการเลือกถือเฉพาะสิ่งที่จำเป็นจริงๆ และปล่อยให้ทีมถือ ownership ของงานในส่วนที่พวกเขาพร้อมจะรับผิดชอบ วิธีนี้ค่อยๆ ลดการพึ่งพาคนคนเดียว และทำให้ระบบการทำงานเดินต่อไปได้ แม้บทบาทของผมจะไม่ได้อยู่ในทุกขั้นตอนเหมือนที่ผ่านมา</p> <h2 id="bthbaathaihmkh-ngphmainthaana-devops-team-lead">บทบาทใหม่ของผมในฐานะ DevOps Team Lead<a class="zola-anchor" href="#bthbaathaihmkh-ngphmainthaana-devops-team-lead" aria-label="Anchor link for: bthbaathaihmkh-ngphmainthaana-devops-team-lead" style="visibility: hidden;"></a> </h2> <p>เมื่อวิธีทำงานแบบ flat เริ่มนิ่งขึ้น บทบาทของผมในฐานะ DevOps Team Lead ก็เปลี่ยนไปอย่างชัดเจน จากคนที่เคยอยู่ในแทบทุกขั้นตอนของงาน กลายเป็นคนที่เลือกเข้าไปอยู่เฉพาะในจุดที่ทีมต้องการจริงๆ ไม่ใช่เพราะผมอยากถอยออกมา แต่เพราะบทบาทที่ทีมต้องการจากผม เปลี่ยนไปตามบริบทขององค์กร</p> <p>ก่อนหน้านี้ ตอนที่บริษัทยังเล็ก ทีม Dev, DevOps, Product, Customer-facing รวมถึงทีม IT Admin ทำงานใกล้ชิดกันมาก หลายปัญหาแก้ได้ด้วยการคุยกันตรงๆ หรือส่งข้อความใน Slack ไม่กี่บรรทัด ผมสามารถเห็นภาพรวมของระบบได้แทบทั้งหมด และการทำงานแบบ proactive ก็เป็นเรื่องที่ค่อนข้างเป็นธรรมชาติ</p> <p>แต่เมื่อองค์กรถูกซื้อโดยบริษัทที่ใหญ่ขึ้น โครงสร้างทุกอย่างเริ่มซับซ้อนขึ้น ทีมกระจายตัว การสื่อสารกลายเป็นอีเมล การประชุมข้าม timezone และการทำงานที่กลางวันกลางคืนไม่ตรงกัน บริบทที่เคยเห็นชัด กลับต้องใช้ความพยายามมากขึ้นกว่าจะปะติดปะต่อได้ และการทำงานเชิงรุกที่ผมถนัด ก็ยิ่งทำได้ยากขึ้นเรื่อยๆ หากผมยังต้องอยู่ใน flow งานประจำวันเหมือนเดิม</p> <p><img src="https://thadaw.com/posts/review-2025-devops-team-reflection-flat-team/04-directing.jpg" alt="" /></p> <p>งานหลักของผมในช่วงนี้จึงไม่ใช่การ approve หรือสั่งการ แต่เป็นการ consult ในปัญหาที่ซับซ้อนหรือมีผลกระทบสูง โดยเฉพาะเรื่องที่ต้องอาศัยประสบการณ์เชิงระบบ หรือการตัดสินใจที่มีผลระยะยาว <em>โดยพยายามไม่เข้าไปให้คำตอบสำเร็จรูป แต่ช่วยตั้งคำถาม ช่วยชี้ให้เห็น trade-off และช่วยเติม context ที่ทีมอาจยังมองไม่ครบ</em> เพื่อให้การตัดสินใจนั้นเกิดใกล้กับจุดที่ลงมือทำมากที่สุด</p> <p>อีกส่วนหนึ่งของบทบาทที่สำคัญมาก คือการทำงานกับทีม USA และทีม product ในระดับที่สูงขึ้น เรื่องเหล่านี้มักไม่ใช่ task รายวัน แต่เป็นการสื่อสารทิศทาง ความคาดหวัง และข้อจำกัดของระบบ <strong>ผมทำหน้าที่เป็นตัวกลางในการแปลความต้องการเชิงธุรกิจ ให้กลายเป็นกรอบที่ทีม DevOps สามารถนำไปตัดสินใจต่อได้เอง โดยไม่ต้องรอคำสั่งจากผมทุกครั้ง</strong></p> <p>ในขณะเดียวกัน ผมมองว่าหน้าที่ของ DevOps Team Lead คือ<u>การปกป้องทีมจาก noise ที่ไม่จำเป็น ไม่ใช่ทุก requirement ที่เข้ามาจะพร้อม หรือควรถูกทำทันที</u> การช่วยกรอง ชะลอ และจัดลำดับความสำคัญ คือส่วนหนึ่งของการทำให้ทีมมีสมาธิกับสิ่งที่สำคัญจริงๆ และไม่ต้องรับแรงกดดันทั้งหมดโดยตรง</p> <p>บทบาทใหม่นี้อาจดูเหมือนผมถอยออกมาจากงาน แต่ในความเป็นจริง ผมกลับต้องใช้พลังมากขึ้นในอีกแบบหนึ่ง แทนที่จะใช้พลังไปกับการแก้ปัญหาเฉพาะหน้า ผมต้องใช้พลังไปกับการคิดเชิงระบบ การสื่อสารข้ามทีม และการมองความเสี่ยงล่วงหน้าในบริบทขององค์กรที่ใหญ่ขึ้น</p> <p>สิ่งที่ผมเริ่มเห็นชัดคือ เมื่อผมเลิกเป็นศูนย์กลางของทุกอย่าง ทีมกลับทำงานได้คล่องขึ้น และ paradox ที่เกิดขึ้นคือ ผมกลับมีพื้นที่และสมาธิมากพอที่จะทำงานแบบ proactive ได้ดีกว่าเดิม ทั้งกับทีม DevOps เอง และกับทีม Product, Customer-facing รวมถึง IT Admin ที่อยู่ไกลตัวมากขึ้น ผมเองก็ยังไม่แน่ใจว่าวิธีนี้คือคำตอบที่ดีที่สุดหรือไม่ แต่สิ่งที่เห็นชัดคือ ทีมเริ่มเดินงานได้ด้วยตัวเองมากขึ้นกว่าที่เคย</p> <h2 id="sprint-aela-roadmap-thiithiimt-ng-kaebbe-ng">Sprint และ Roadmap ที่ทีมต้องออกแบบเอง<a class="zola-anchor" href="#sprint-aela-roadmap-thiithiimt-ng-kaebbe-ng" aria-label="Anchor link for: sprint-aela-roadmap-thiithiimt-ng-kaebbe-ng" style="visibility: hidden;"></a> </h2> <p>เมื่อผมถอยออกมาจากการตัดสินใจในรายละเอียด งานหนึ่งที่ผมยังคงต้องดูแลอยู่คือการออกแบบ sprint ของทีม ไม่ใช่เพื่อแจก task หรือควบคุมการทำงานรายวัน แต่เพื่อจัดกรอบและจังหวะของงานให้สอดคล้องกับบริบททั้งหมดที่ทีมต้องรับมืออยู่ในช่วงนั้น</p> <p>ทีม DevOps ของเราไม่ได้ทำงานจาก requirement ที่ถูกส่งมาอย่างเดียว <strong>ยังมีงานอีกจำนวนมากที่ไม่มีใครส่งมาเป็น ticket ชัดเจน ไม่ว่าจะเป็นเรื่อง security, operation, cost optimization, platform foundation หรือการทดลองทำ R&amp;D เพื่อเตรียมระบบสำหรับอนาคต</strong> งานเหล่านี้อาจยังไม่เร่งด่วนในวันนี้ แต่ถ้าไม่ถูกจัดการไว้ก่อน มันจะกลายเป็นภาระของทีมในวันข้างหน้าอย่างหลีกเลี่ยงไม่ได้</p> <p>บทบาทของผมในส่วนนี้คือการช่วยมองภาพรวมและจัดลำดับความสำคัญ ให้ sprint มีพื้นที่สำหรับงานประเภทนี้อยู่เสมอ แต่เมื่อกรอบของ sprint ชัดแล้ว ทีมจะเป็นคนจัดการรายละเอียดทั้งหมดเอง ตั้งแต่วิธีทำ การตัดสินใจ ไปจนถึงการผลักงานให้เสร็จ โดยไม่ต้องรอการ approve จากผมเหมือนที่ผ่านมา</p> <p>สิ่งที่เริ่มเห็นชัดคือ DevOps ไม่ได้ทำงานแบบรอโจทย์ หากช่วงไหนไม่มี requirement จาก product งานก็ยังเดินต่อได้ เพราะ roadmap ภายในของทีมยังคงถูกดูแลอยู่ตลอด Roadmap นี้ไม่ใช่เอกสารเพื่อรายงานใคร แต่เป็นเครื่องมือที่ช่วยให้ทีมรู้ว่า เรากำลังเลือกแบกอะไรไว้ และกำลังลดความเสี่ยงตรงไหนของระบบ</p> <p>การที่ทีมต้องออกแบบและดูแล roadmap ของตัวเอง ทำให้ ownership ของงานชัดขึ้นมาก แต่ก็มาพร้อมกับความรับผิดชอบที่สูงขึ้นเช่นกัน งานของ DevOps มักไม่จบลงพร้อมกับระบบที่ยังทำงานได้ เพราะยังมีอีกหลายเรื่องที่ต้องจัดการ เพื่อไม่ให้มันกลายเป็นปัญหาในอนาคต</p> <h2 id="singthiiaidmaa-aelasingthiit-ngaelk">สิ่งที่ได้มา และสิ่งที่ต้องแลก<a class="zola-anchor" href="#singthiiaidmaa-aelasingthiit-ngaelk" aria-label="Anchor link for: singthiiaidmaa-aelasingthiit-ngaelk" style="visibility: hidden;"></a> </h2> <p>สิ่งที่เห็นได้ชัดจากการปรับวิธีทำงานแบบ flat คือ ทีมเริ่มตัดสินใจได้เองมากขึ้น งานหลายอย่างไม่ต้องรอคำตอบจากผมเหมือนเดิม การตัดสินใจจำนวนมากเกิดขึ้นใกล้กับจุดที่ลงมือทำจริง และนั่นทำให้งานสามารถเดินต่อได้ แม้ผมจะไม่ได้อยู่ใน flow งานตลอดเวลา</p> <p>ผลที่ตามมาคือ งานเริ่มไม่ผูกอยู่กับคนคนเดียว ระบบและกระบวนการต่างๆ ไม่ได้ขึ้นกับการตัดสินใจของผมเพียงอย่างเดียว ทีมรับผิดชอบงานของตัวเองตั้งแต่ต้นจนจบ และต้องรับผลของการตัดสินใจนั้นมากขึ้น ไม่ว่าจะออกมาดีหรือพลาดบ้างก็ตาม</p> <p>แต่การเปลี่ยนผ่านแบบนี้ไม่ได้ราบรื่นทั้งหมด ช่วงแรกมี mistake เกิดขึ้นจริง มีบางการตัดสินใจที่ถ้าผมเป็นคนทำเอง อาจเลือกต่างออกไป คุณภาพของงานบางส่วนมีช่วงที่แกว่ง และทีมเองก็ต้องใช้เวลาในการปรับตัวกับความรับผิดชอบที่เพิ่มขึ้น</p> <p><img src="https://thadaw.com/posts/review-2025-devops-team-reflection-flat-team/05-trying.jpg" alt="" /></p> <p>ในช่วงนั้น <strong>สิ่งที่ผมพยายามทำคือไม่รีบเข้าไปแก้ทุกอย่างทันที แต่เปิดพื้นที่ให้ทีมได้เรียนรู้จากความผิดพลาด ทีมสามารถล้ม หรือตกน้ำได้ แต่ไม่จมน้ำเพราะผมจะเป็นคนคอยดึงขึ้นมาเมื่อจำเป็น</strong> คอยปกป้องทีมจากแรงกดดันภายนอก และช่วยประสานงานกับฝ่ายอื่น เพื่อให้ทีมมีพื้นที่เรียนรู้และเดินต่อได้ โดยไม่ต้องรับแรงกระแทกทั้งหมดเพียงลำพัง</p> <p>สิ่งที่ผมได้เรียนรู้จากประสบการณ์นี้คือ ความยั่งยืนของทีม DevOps ไม่ได้มาจากการตัดสินใจที่ถูกต้องทุกครั้ง แต่เกิดจากระบบการทำงานที่รองรับความผิดพลาดได้ และทีมที่สามารถเรียนรู้และปรับตัวจากมันได้เร็วพอ การยอมแลกความสบายใจในระยะสั้น จึงเป็นราคาที่หลีกเลี่ยงไม่ได้ หากต้องการให้ทีมและระบบเดินต่อได้ในระยะยาว</p> <h2 id="btheriiyneruue-ng-leadership-ainchiiwitcchring">บทเรียนเรื่อง leadership ในชีวิตจริง<a class="zola-anchor" href="#btheriiyneruue-ng-leadership-ainchiiwitcchring" aria-label="Anchor link for: btheriiyneruue-ng-leadership-ainchiiwitcchring" style="visibility: hidden;"></a> </h2> <p>ผมไม่คิดว่าบทเรียนเรื่อง leadership ที่ได้จากปีนี้ เป็นสิ่งใหม่ หรือเป็นความคิดที่ผมเพิ่งสร้างขึ้นมาเอง มันอาจจะถูกเขียนอยู่ใน tech blog หรือหนังสือเล่มไหนสักเล่มมานานแล้ว หรือผมอาจจะเคยเปิดอ่านผ่านๆ เมื่อนานมาแล้ว เพียงแต่ก่อนหน้านี้ ผมอาจจะยังไม่เคยเปิดไปเจอ หรือยังไม่อยู่ในจุดที่เข้าใจมันได้จริง</p> <p>ตลอดเวลาที่ทำงาน ผมอ่านบทความกับหนังสือมามากพอสมควร หลายแนวคิดอ่านแล้วก็รู้สึกว่าเข้าใจ แต่ไม่ได้รู้สึกว่ามันเกี่ยวข้องกับตัวเองโดยตรง จนกระทั่งวันที่บทบาทของผมเปลี่ยน และปัญหาที่ต้องเจอไม่ใช่แค่เรื่องระบบ แต่เป็นเรื่องคนและความรับผิดชอบ แนวคิดเหล่านั้นถึงเริ่มมีความหมายขึ้นมา</p> <p>สิ่งที่ผมเพิ่งได้เรียนรู้ คือ <strong>leadership ไม่ได้อยู่ที่การตัดสินใจให้ถูกที่สุดเสมอไป แต่อยู่ที่การยอมรับว่าการตัดสินใจบางอย่างจะไม่สมบูรณ์แบบ และหน้าที่ของผู้นำคือการอยู่กับผลลัพธ์นั้นไปพร้อมกับทีม การปล่อยให้ทีมตัดสินใจเอง</strong> ไม่ได้ทำให้บทบาทของผมลดลง แต่เปลี่ยนจากคนที่คุมทุกอย่าง มาเป็นคนที่ช่วยพยุงทีมในวันที่ผลลัพธ์ไม่เป็นอย่างที่หวัง</p> <p>อีกอย่างหนึ่งที่ผมเพิ่งเข้าใจ คือการสร้างพื้นที่ที่ทีมสามารถผิดพลาดได้อย่างปลอดภัย ไม่ต่างจากการออกแบบระบบที่ต้องรองรับ failure การ defend ทีมเมื่อเกิดปัญหา ไม่ได้หมายความว่าทีมไม่มีความรับผิดชอบ แต่เป็นการให้เวลาทีมได้เรียนรู้ แก้ไข และเติบโต โดยไม่ถูกตัดสินเร็วเกินไป</p> <p>ผมยังได้เรียนรู้ว่าการเป็นผู้นำที่ยั่งยืน เริ่มจากการรู้ขีดจำกัดของตัวเอง การยอมรับว่าเราไม่สามารถแบกทุกอย่างไว้ได้ และไม่ควรเป็นศูนย์กลางของทุกการตัดสินใจ สิ่งเหล่านี้อาจจะเคยถูกเขียนไว้ที่ไหนสักแห่งมาก่อนแล้ว เพียงแต่ปีนี้เป็นปีที่ผมได้มาเจอมันในชีวิตจริง</p> <p>ถ้าบทเรียนเหล่านี้จะมีคุณค่าอยู่บ้าง ผมหวังว่ามันอาจเป็นเหมือนหนังสืออีกเล่มหนึ่ง ที่คุณบังเอิญเปิดเจอในวันที่กำลังต้องการมันพอดี ไม่ใช่เพราะมันใหม่ แต่เพราะมันมาในเวลาที่เหมาะสม</p> <h2 id="bthphisuucchnthiiphmaimaidwaangaephnaiw">บทพิสูจน์ที่ผมไม่ได้วางแผนไว้<a class="zola-anchor" href="#bthphisuucchnthiiphmaimaidwaangaephnaiw" aria-label="Anchor link for: bthphisuucchnthiiphmaimaidwaangaephnaiw" style="visibility: hidden;"></a> </h2> <p>บทพิสูจน์ของการเปลี่ยนวิธีทำงานครั้งนี้ ไม่ได้มาจากการวัดผลหรือ retrospective ใดๆ แต่เกิดขึ้นจากสถานการณ์ที่ผมไม่ได้เตรียมตัวไว้เลย</p> <p>ช่วงปลายเดือนพฤศจิกายนของปี เกิดน้ำท่วมครั้งใหญ่ที่สุดในรอบหลายสิบปีที่หาดใหญ่ ผมติดน้ำท่วมเกือบเป็นอาทิตย์ ไม่มีไฟฟ้า ไม่มีอินเทอร์เน็ต และไม่สามารถติดต่อทีมได้เลย ในสภาพแบบนั้น ผมไม่ได้ช่วยตัดสินใจ ไม่ได้ consult และไม่ได้ตามงานใดๆ ทั้งสิ้น ผมหายออกจากระบบไปอย่างสมบูรณ์</p> <p><img src="https://thadaw.com/posts/review-2025-devops-team-reflection-flat-team/06-leaving.jpg" alt="" /></p> <p><strong>สิ่งที่เกิดขึ้นคือ ทีมยังทำงานต่อได้ตามปกติ งานไม่ได้หยุด ระบบยังเดิน และไม่มีเรื่องเร่งด่วนที่ต้องรอผมกลับมาแก้ไข</strong> สิ่งที่เคยกังวลว่า ถ้าผมไม่อยู่แล้วทุกอย่างจะชะงัก กลับไม่เกิดขึ้นจริง</p> <p>ตอนที่ผมกลับมาออนไลน์อีกครั้ง ผมไม่ได้เห็นงานที่พัง หรือ backlog ที่ค้าง แต่เห็นทีมที่ยังเดินต่อได้ด้วยตัวเอง และรู้ว่าควรตัดสินใจอะไรโดยไม่ต้องรอคำตอบจากผม</p> <p>ผมไม่ได้มองว่าสิ่งนี้เป็นความสำเร็จส่วนตัว แต่มันเป็นสัญญาณที่ชัดเจนที่สุดว่า การปล่อยบางอย่างออกจากมือก่อนหน้านี้ ทำให้ทีมแข็งแรงพอที่จะรับมือกับสถานการณ์ที่ไม่มีใครวางแผนไว้ได้จริงๆ</p> <h2 id="thaay-nklabaipb-ktawe-ngt-nyangepn-perfectionist-aid">ถ้าย้อนกลับไปบอกตัวเองตอนยังเป็น perfectionist ได้<a class="zola-anchor" href="#thaay-nklabaipb-ktawe-ngt-nyangepn-perfectionist-aid" aria-label="Anchor link for: thaay-nklabaipb-ktawe-ngt-nyangepn-perfectionist-aid" style="visibility: hidden;"></a> </h2> <p>ถ้าผมย้อนกลับไปคุยกับตัวเองในวันที่ยังเป็น DevOps Engineer ที่คุมทุกอย่างไว้คนเดียวได้ ผมคงไม่ได้บอกให้หยุดทำแบบนั้นทันที เพราะในตอนนั้น มันอาจเป็นวิธีที่ดีที่สุดเท่าที่ผมรู้จัก แต่ผมอยากบอกให้ระวังบางอย่างให้มากขึ้น</p> <p>อย่างแรกคือ การคุมทุกอย่างไว้กับตัวเอง ไม่ได้แปลว่ารับผิดชอบมากกว่าเสมอไป ในหลายกรณี มันคือการสร้างความเสี่ยงโดยไม่รู้ตัว เพราะเมื่อทุกการตัดสินใจต้องผ่านคนคนเดียว ระบบอาจดูนิ่งในวันที่ทุกอย่างปกติ แต่จะเปราะบางทันทีเมื่อคนนั้นไม่พร้อม</p> <p>อย่างที่สองคือ ทีมที่ดี ไม่ควรขึ้นกับคนคนเดียว ต่อให้คนนั้นจะตั้งใจดี แบกงานเก่ง หรือรู้ระบบมากแค่ไหนก็ตาม ทีมที่เดินต่อได้จริง คือทีมที่สามารถตัดสินใจและรับผิดชอบงานของตัวเองได้ แม้ไม่มีใครคอยยืนอยู่ตรงกลางตลอดเวลา</p> <p>และสุดท้าย สิ่งที่ผมภูมิใจที่สุดของปีนี้ ไม่ใช่ระบบที่ยังรันอยู่ ไม่ใช่ pipeline ที่เร็วขึ้น หรือ automation ที่ซับซ้อนขึ้น แต่คือการได้เห็นทีมทำงานต่อได้อย่างราบรื่น แม้ในวันที่ผมไม่อยู่ และไม่สามารถช่วยอะไรได้เลย</p> <p>ถ้ามีอะไรที่อยากบอกตัวเองในวันนั้นจริงๆ ก็คงเป็นว่า การปล่อยบางอย่างออกจากมือ ไม่ได้ทำให้งานแย่ลงเสมอไป บางครั้ง มันคือสิ่งที่จำเป็น เพื่อให้ทั้งทีมและตัวเราเองไปต่อได้ในระยะยาว</p> <p><img src="https://thadaw.com/posts/review-2025-devops-team-reflection-flat-team/07-looking-back.jpg" alt="" /></p> <h2 id="banthueksan-thuengtawe-ng-aelaephuue-aikhrthiikamlang-yuuaincchudkhlaaykan">บันทึกสั้นๆ ถึงตัวเอง (และเผื่อใครที่กำลังอยู่ในจุดคล้ายกัน)<a class="zola-anchor" href="#banthueksan-thuengtawe-ng-aelaephuue-aikhrthiikamlang-yuuaincchudkhlaaykan" aria-label="Anchor link for: banthueksan-thuengtawe-ng-aelaephuue-aikhrthiikamlang-yuuaincchudkhlaaykan" style="visibility: hidden;"></a> </h2> <p>ถ้าจะทิ้งอะไรบางอย่างจากปีนี้ไว้ให้ตัวเอง ผมคิดว่ามันไม่ใช่สูตร ไม่ใช่ framework และไม่ใช่ checklist สำหรับการบริหารทีม แต่มันเป็นความเข้าใจบางอย่างที่ผมไม่เคยคิดว่าต้องเรียนรู้จากประสบการณ์ตรงขนาดนี้</p> <p>ผมเพิ่งเข้าใจว่า ความละเอียดและความตั้งใจดีของเรา อาจกลายเป็น bottleneck ได้โดยไม่รู้ตัว สิ่งที่เคยช่วยให้งานนิ่งในวันที่ทีมยังเล็ก อาจกลายเป็นข้อจำกัดของทีมในวันที่ทุกอย่างเริ่มโตขึ้น</p> <p>ผมก็เพิ่งเห็นชัดว่า DevOps ที่ทำทุกอย่างเองให้ความเร็วจริง แต่มีต้นทุนที่มองไม่เห็น ทั้งต้นทุนด้านพลังงานของคน และความเสี่ยงจากการผูกการตัดสินใจไว้กับคนเดียว ซึ่งในวันที่ทุกอย่างปกติ มันอาจดูไม่อันตราย แต่จะชัดมากทันทีเมื่อมีอะไรผิดแผน</p> <p>อีกอย่างหนึ่งที่ผมต้องเตือนตัวเองเสมอคือ การทำทีมให้ flat ไม่ได้แปลว่าปล่อยทุกอย่างออกจากมือ แต่มันคือการเลือกถือเฉพาะสิ่งที่จำเป็น และยอมปล่อย ownership ให้เกิดใกล้กับจุดที่ลงมือทำจริง แม้บางครั้งผลลัพธ์จะไม่ออกมาสมบูรณ์แบบอย่างที่คุ้นเคย</p> <p>ผมยังได้เรียนรู้ว่า ทีมที่ยั่งยืนไม่ได้เกิดจากการตัดสินใจที่ถูกต้องทุกครั้ง แต่เกิดจากระบบการทำงานที่รองรับความผิดพลาดได้ และทีมที่มีพื้นที่พอจะเรียนรู้จากมันโดยไม่ถูกตัดสินเร็วเกินไป</p> <p>สุดท้ายแล้ว บทบาทของผมในฐานะผู้นำ อาจไม่ได้อยู่ที่การตัดสินใจให้ถูกที่สุดเสมอไป แต่อยู่ที่การทำให้ทีมกล้าตัดสินใจ และยังไปต่อได้ แม้ผลลัพธ์จะไม่สมบูรณ์แบบในบางครั้ง</p> <h2 id="closing-banthueksngthaaypiihnuengkh-ng-devops-team-lead">Closing: บันทึกส่งท้ายปีหนึ่งของ DevOps Team Lead<a class="zola-anchor" href="#closing-banthueksngthaaypiihnuengkh-ng-devops-team-lead" aria-label="Anchor link for: closing-banthueksngthaaypiihnuengkh-ng-devops-team-lead" style="visibility: hidden;"></a> </h2> <p>บทความนี้ไม่ได้ถูกเขียนขึ้นเพื่อบอกว่าวิธีทำงานแบบไหนดีที่สุด หรือทีมทุกทีมควรทำงานแบบ flat เหมือนกันทั้งหมด เพราะบริบทของแต่ละทีมไม่เหมือนกัน และจังหวะของการเปลี่ยนแปลงก็ไม่เท่ากัน</p> <p>มันเป็นเพียงบันทึกหนึ่งของปีที่ผมได้เรียนรู้ว่า การปล่อยบางอย่างออกจากมือ ไม่ได้แปลว่าเราละเลยความรับผิดชอบ แต่บางครั้ง มันคือความรับผิดชอบในรูปแบบที่ต่างออกไป เป็นความรับผิดชอบต่อทีม ต่อความยั่งยืน และต่อขีดจำกัดของตัวเราเอง</p> <p>ผมยังไม่แน่ใจว่าสิ่งที่ทำอยู่ตอนนี้คือคำตอบที่ดีที่สุดหรือไม่ แต่สิ่งที่เห็นชัดคือ ทีมสามารถเดินต่อได้ด้วยตัวเองมากขึ้น และตัวผมเองก็มีพื้นที่มากพอที่จะทำหน้าที่ในบทบาทที่ควรจะเป็นจริงๆ</p> <p>ถ้าบทความนี้จะมีคุณค่าอยู่บ้าง ผมหวังว่ามันอาจช่วยให้ใครบางคนที่กำลังเหนื่อยอยู่กับการแบกทุกอย่างไว้คนเดียว ได้หยุดคิด และถามตัวเองว่า มีอะไรบ้าง ที่เราไม่จำเป็นต้องถือไว้แน่นเหมือนเดิมแล้วหรือเปล่า</p> <p>แล้วบางที คำตอบนั้นอาจไม่ต้องรีบหาในวันนี้ เหมือนกับที่ผมเองก็เพิ่งมาเข้าใจมันในปีนี้เช่นกัน</p> <hr /> <p>แล้วพบกันใหม่ในปีหน้า สวัสดีปีใหม่ครับทุกคน 🎉</p> 2025-10-05T00:00:00+00:00 2025-10-05T00:00:00+00:00 https://thadaw.com/posts/why-console-log-makes-your-nodejs-slow-and-how-to-fix-it/ <p>สวัสดีเช้าวันอาทิตย์ พอดีวันก่อนได้มีโอกาสไปเห็นโพสต์ Twitter นึง โพสต์ถึงเรื่องของการที่ลบคอนโซลล็อก (<code>console.log</code>) ออกไปจาก Node.js แล้วก็ทำให้ <strong>Performance ของ Server ดีขึ้น เยอะเลย</strong></p> <p><img src="https://thadaw.com/posts/why-console-log-makes-your-nodejs-slow-and-how-to-fix-it/server-log.jpg" alt="" /></p> <blockquote> <p>Ref: Node.js event loop utilization for one our services went from about 80% to 20% just by removing logs by @maverickdotdev 🤦<a rel="nofollow noreferrer" href="https://x.com/maverickdotdev/status/1971249969463165313">https://x.com/maverickdotdev/status/1971249969463165313</a></p> </blockquote> <p>ทีนี้พอเราเห็นเรื่องนี้ ผมคิดว่าหลาย ๆ คนน่าจะต้องสงสัยแน่เลย ไม่ว่าจะเป็นมือใหม่ในการเขียน Node.js เอง หรือคนที่เขียนมาสักระยะนึงแล้ว จริง ๆ แล้วเราอาจจะต้องเข้าใจก่อนว่า <strong>ตัว <code>console.log</code> ซึ่งเป็นคำสั่งในกลุ่ม <code>console</code> ของ Node.js เอง</strong> เราต้องทำความเข้าใจก่อนว่า <strong>Node.js เนี่ย มันทำงานเป็น Event Loop</strong> ใช่ไหมครับ เดี๋ยวผมจะมีบล็อกอธิบายเรื่อง Event Loop อีกทีนึง แต่โดยสรุปคือ Event Loop ของ Node.js เนี่ย มันจะพูดถึงการทำงานแบบ <strong>Single Thread</strong></p> <p><img src="https://thadaw.com/posts/why-console-log-makes-your-nodejs-slow-and-how-to-fix-it/block-event-loop.jpg" alt="" /></p> <p>คำว่า Single Thread ก็คือว่า อะไรก็ตามที่มันทำงาน มันจัดการงานหลายอย่างแบบ concurrent ผ่าน Event Loop แม้จะมีเพียง main thread เดียว ประโยชน์แน่นอนครับว่า Single Thread เนี่ย มันช่วยทำให้เราสามารถที่จะใช้ทรัพยากร CPU ได้อย่างมีประสิทธิภาพ</p> <h2 id="console-log">console.log<a class="zola-anchor" href="#console-log" aria-label="Anchor link for: console-log" style="visibility: hidden;"></a> </h2> <p>ทีนี้มากลับมาที่เรื่องของ <code>console.log</code> กันบ้าง <strong>ตัวคำสั่งที่เป็น <code>console.log</code> หรือประเภท <code>console</code> อื่น ๆ พวกนี้มันเป็นคำสั่งประเภท synchronous</strong> หลาย ๆ คนก็อาจจะสงสัยว่า จริง ๆ แล้ว Node.js ทำงานแบบ asynchronous เป็นหลักอยู่แล้ว (สำหรับ I/O, network, timers) แต่ทำไมการทำงานแบบ synchronous ถึงมีปัญหา</p> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Note</strong></p> <p>อ่านต่อที่ Official Documentation ของ Node.js เรื่อง Console: <a rel="nofollow noreferrer" href="https://nodejs.org/api/process.html#a-note-on-process-io">https://nodejs.org/api/process.html#a-note-on-process-io</a></p> </div> </blockquote> <p>งั้นเดี๋ยวมาอธิบายกัน คือการทำงานแบบ synchronous เนี่ย มันไปบล็อก Main Thread ซึ่ง Node.js เนี่ย มันมี Main Thread อยู่อันเดียว หมายความว่ามันจะไปบล็อกการทำงานของ Event Loop (โค้ด JavaScript ภายใน callback/function ยังคงรันแบบ synchronous ได้ และคำสั่ง <code>console.log</code> อาจบล็อก Event Loop ขึ้นอยู่กับว่า <code>stdout</code> เชื่อมต่อไปที่ terminal, file หรือ pipe) <strong>ถ้าเราเอา <code>console.log</code> ใส่เยอะ ๆ มันก็จะส่งผล Performance ตามมา เพราะว่า Event Loop ก็จะถูกบล็อกไปด้วย</strong></p> <h2 id="thaang-k">ทางออก<a class="zola-anchor" href="#thaang-k" aria-label="Anchor link for: thaang-k" style="visibility: hidden;"></a> </h2> <p>หลาย ๆ คนก็อาจจะมีคำถามตามมาว่า ถ้าเราไม่ได้ใช้ <code>console.log</code> แล้วเราจะสามารถพ่น Log ออกมาทาง Terminal หรือทาง STDOUT ได้ยังไง การที่เราพ่น Log มาเนี่ย มันทำได้หลายวิธี วิธีการที่ไม่ไปบล็อก Thread เนี่ย มันก็จะมี Library ที่เข้ามาแก้ปัญหา ยกตัวอย่างเช่น เหมือนที่ผมใช้อยู่ก็จะเป็น <a rel="nofollow noreferrer" href="https://github.com/pinojs/pino"><strong>Pino</strong></a> ผมใช้บ่อยกว่า Pino ตัวที่เค้าเอามาแก้ปัญหาเรื่อง Log</p> <p>จริง ๆ หลายคนอาจจะบอกว่า ฉันก็เขียน Log เองก็ได้นี่ ฉันเขียน Interface มาก็ได้นี่ ทำไมฉันจะต้องใช้ Pino เพราะว่าฉันก็สามารถที่จะเขียนตัวกลไกของ Log เองได้ ใช้ Level ได้ Log ที่ถูกออกแบบมาเพื่อแก้ปัญหาหนึ่งคือ</p> <p>เรื่องของการบล็อก Thread ของ <code>console.log</code> นี่แหละ แทนที่เราจะพ่น Log ออกไปทางใดก็ตามแล้วมันจะไปบล็อก Thread ใช่ไหม <strong>การที่เราใช้ Pino เนี่ย เค้าจะใช้วิธีการ คือเขามีการ "แตก Worker Thread" ออกมา</strong> คือมีการใช้ <strong>อีกเทรดนึงเพื่อที่จะมาจัดการเรื่องของการทำ Logging โดยเฉพาะเลย</strong> ทำให้เวลาที่เราสั่งคำสั่ง Log ผ่าน Pino มันก็จะทำได้อย่างรวดเร็วมาก <strong>เพราะว่ามันไม่ไปบล็อก Main Thread นั่นเอง</strong></p> <p>พอมันออกไปทาง Pino แล้ว เราจะไปตั้งค่า transport ได้ ซึ่งเจ้า transport ก็คือ การตั้งค่าขาออกของ Log ว่าจะให้ไปออกที่ไหนก็แล้วแต่ อย่างเช่น อาจจะเป็น console อาจจะเป็นไฟล์ อาจจะเป็นที่ไหนก็ได้ ที่เราจะตั้งค่าให้มันออกไป ถึงแม้ว่าเราจะใช้ <code>console.log</code> บน Pino แล้วก็ตาม มันก็ยังไม่ช้า เพราะว่า Pino จัดการเรื่องของการจัดการเทรดที่เป็น Worker Thread แล้ว</p> <h2 id="thamaimkaar-bundle-kab-pino-thuengyaakkhuen">ทำไมการ Bundle กับ Pino ถึงยากขึ้น?<a class="zola-anchor" href="#thamaimkaar-bundle-kab-pino-thuengyaakkhuen" aria-label="Anchor link for: thamaimkaar-bundle-kab-pino-thuengyaakkhuen" style="visibility: hidden;"></a> </h2> <blockquote> <p>ใครที่ไม่ได้สนใจเรื่องของการ Bundle Node.js สามารถข้ามส่วนนี้ไปได้เลยครับ</p> </blockquote> <p>แต่เดี๋ยวก่อน ใครที่ใช้ Pino จะมีการเจอ Challenge ของการทำ bundling ที่จะทำให้ Node Application เวลาที่เรามีการ bundle มัน หรือเวลาที่เราต้องการจะลดขนาด หรือทำ Docker Image ขนาดเล็ก มันก็จะทำได้ยุ่งยากขึ้น ผมเคยเขียนบทความเกี่ยวข้องกับโจทย์ เวลาที่เราต้อง bundle Node.js ที่มีการใช้งานท่าประหลาด ๆ ใน Node.js ซึ่งหนึ่งในท่าประหลาด ๆ คือเรื่องของ Pino <strong>เพราะว่า Pino เวลาที่มันจัดการ Worker Thread มันจะมีการสร้างไฟล์ขึ้นมาใหม่</strong></p> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Note</strong></p> <p>บทความที่เกี่ยวข้อง: <a href="/posts/why-nodejs-bundle-hard">ทำไมการ Bundle Node.js ที่ใช้ Worker Threads ถึงยาก?</a></p> </div> </blockquote> <p>ถ้าเราไม่ได้มีการจัดการอย่างดี ไฟล์พวกนี้ที่มันถูกสร้างมาใหม่ เวลาที่มัน bundle เวลาที่โปรแกรมที่เป็นอย่างเช่น ES Build bundle มันจะไม่เห็นไฟล์พวกนี้ <strong>มันก็เลยทำให้เกิด Runtime Error ได้</strong> ก็เป็นสิ่งที่เราควรระมัดระวัง</p> <p>หวังว่าบทความนี้จะเป็นประโยชน์กับทุก ๆ คน</p> <p>สำหรับวันนี้ไปก่อนครับ สวัสดีครับ</p> 2025-09-27T00:00:00+00:00 2025-09-27T00:00:00+00:00 https://thadaw.com/posts/why-nodejs-bundle-hard/ <p>สวัสดีครับ วันนี้มาเขียนบล็อกนะครับ เป็นสิ่งที่เก็บรวบรวมข้อมูลแล้วก็ประสบการณ์อยู่นาน ก็คือว่าด้วยเรื่องของว่าทำไมถึงเวลาที่เราใช้ Node.js โปรเจกต์ถึงมีขนาดใหญ่ และทำไมการ bundle ถึงไม่ง่ายอย่างที่คิดนะครับ แต่บอกก่อนว่าจริง ๆ แล้วเราอาจจะใช้ bundle ได้ แต่มันจะมีบางกรณีที่อาจจะใช้ไม่ได้นะครับ โอเค เป็นยังไงไปดูกันครับ</p> <p><img src="https://thadaw.com/posts/why-nodejs-bundle-hard/too-many-deps.jpg" alt="" /></p> <p>หากเรามาจากฝั่งเว็บ เราอาจจะคุ้นเคยกับคำว่า "Bundler" เป็นอย่างดี ไม่ว่าจะเป็นเครื่องมืออย่าง Webpack, Rollup, หรือ Vite ที่ทำหน้าที่รวมไฟล์ JavaScript, CSS, และ assets ต่างๆ ให้เหลือเพียงไม่กี่ไฟล์เพื่อประสิทธิภาพในการโหลดบนเบราว์เซอร์ ในโลกของการพัฒนาเว็บ การทำ bundle ถือเป็นเรื่องปกติและเครื่องมือเหล่านี้ก็ถูกพัฒนามาอย่างดีมากๆ จนหลายครั้งเราแทบไม่ต้องเข้าไปยุ่งกับการตั้งค่าที่ซับซ้อนเลย</p> <p>แนวคิดเดียวกันนี้จึงถูกนำมาปรับใช้กับฝั่ง Node.js เพื่อแก้ปัญหา <code>node_modules</code> ที่มีขนาดใหญ่ โดยเฉพาะเมื่อเราต้องจัดการกับ Docker image ที่อาจบวมไปถึงระดับ GB ได้ การใช้ Bundler จะช่วยวิเคราะห์โค้ดของเรา แล้วดึงเฉพาะส่วนที่จำเป็นจริงๆ มารวมกันเป็นไฟล์เล็กๆ ทำให้เราไม่ต้อง copy <code>node_modules</code> ทั้งหมดเข้าไปใน image แต่เส้นทางกลับไม่ได้โรยด้วยกลีบกุหลาบเหมือนฝั่งเว็บ และนี่คือเหตุผลที่มันอาจจะไม่ใช่ Silver Bullet สำหรับทุกกรณีครับ</p> <h3 id="krniithii-bundler-miipayhaa-dynamic-imports-aela-decorators">กรณีที่ Bundler มีปัญหา: Dynamic Imports และ Decorators<a class="zola-anchor" href="#krniithii-bundler-miipayhaa-dynamic-imports-aela-decorators" aria-label="Anchor link for: krniithii-bundler-miipayhaa-dynamic-imports-aela-decorators" style="visibility: hidden;"></a> </h3> <p><strong>อย่างเช่นตัวที่มีปัญหาเยอะ ๆ ก็จะเป็นพวกเวลาที่เราใช้ bundler อย่าง esbuild</strong> เนื่องจาก bundler ประเภทนี้ทำงานแบบ Static Analysis คือมันจะวิเคราะห์โค้ด ณ เวลาที่ build โดยไม่ได้รันโค้ดจริง ดังนั้น ถ้าเรามีการเรียกใช้โมดูลแบบ dynamic หรือใช้เทคนิคบางอย่างที่ไม่ได้แสดงความเชื่อมโยงของไฟล์อย่างชัดเจน bundler ก็จะไม่สามารถตามไปเก็บโค้ดส่วนนั้นมารวมได้</p> <p>ตัวอย่างที่เห็นได้ชัดคือ <strong>NestJS</strong> ซึ่งเป็นเฟรมเวิร์กที่ใช้ <strong>Dependency Injection (DI)</strong> และ <strong>Decorators</strong> เยอะมาก ถ้าเราลองเอา esbuild ไป build โปรเจกต์ NestJS ตรงๆ สิ่งที่เกิดขึ้นก็คือพวก Service ต่างๆ ที่ถูกเรียกผ่าน decorator อาจจะไม่ถูก bundle เข้ามาด้วย เพราะในมุมมองของ static bundler มันไม่เห็นว่ามีการ <code>import</code> ไฟล์เหล่านั้นโดยตรง</p> <p>เพื่อแก้ปัญหานี้ เราจำเป็นต้องใช้ plugin เข้ามาช่วยครับ มีผู้พัฒนาที่เจอ workaround สำหรับปัญหานี้และได้สร้าง plugin ที่ชื่อว่า <strong><code>@anatine/esbuild-decorators</code></strong> ขึ้นมาเพื่อจัดการตรงนี้โดยเฉพาะ โดยเราสามารถเพิ่ม plugin นี้เข้าไปใน config ของ esbuild เพื่อให้มันสามารถ bundle โค้ดที่ใช้ decorator ของ NestJS ได้อย่างถูกต้อง</p> <pre data-lang="javascript" class="language-javascript z-code"><code class="language-javascript" data-lang="javascript"><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ตัวอย่าง custom esbuild config</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">build</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-alias z-ts">BuildOptions</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>esbuild<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">esbuildDecorators</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@anatine/esbuild-decorators<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">tsconfig</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>path/to/your/tsconfig.json<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">cwd</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-process z-ts">cwd</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">buildConfig</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">BuildOptions</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">entryPoints</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>src/main.ts<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">bundle</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-language z-boolean z-true z-ts">true</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">platform</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>node<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">outdir</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dist<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">tsconfig</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">plugins</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">esbuildDecorators</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> เพิ่ม plugin เข้าไปตรงนี้</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">tsconfig</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">cwd</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ... config ส่วนอื่นๆ</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">build</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">buildConfig</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Note</strong></p> <p>ผมเคยเขียนบทความเต็มๆ เกี่ยวกับการใช้ esbuild ใช้คู่กับ plugin <strong>@anatine/esbuild-decorators</strong> กับ NestJS ไว้ด้วยนะครับ เผื่อใครสนใจลองอ่านดูได้ที่ <a href="/posts/reduce-nestjs-docker-image-size-with-esbuild-bundle">บทความนี้</a></p> </div> </blockquote><h3 id="iikhnuengtaw-yaangsudkhlaassik-kaarcchadkaar-log-dwy-pino">อีกหนึ่งตัวอย่างสุดคลาสสิก: การจัดการ Log ด้วย Pino<a class="zola-anchor" href="#iikhnuengtaw-yaangsudkhlaassik-kaarcchadkaar-log-dwy-pino" aria-label="Anchor link for: iikhnuengtaw-yaangsudkhlaassik-kaarcchadkaar-log-dwy-pino" style="visibility: hidden;"></a> </h3> <p>อีกกรณีหนึ่งก็คือการเขียน log ครับ ปกติเราอาจจะใช้ <code>console.log</code> ซึ่งเป็นวิธีที่ง่าย แต่ข้อเสียคือมันเป็นการทำงานแบบ <strong>Block I/O</strong> หมายความว่าถ้าเราเขียน log บ่อยๆ มันก็จะทำให้ Performance ของแอปเราช้าลงได้ หลายคนจึงหันไปใช้ Logger ตัวอื่นอย่าง <strong>Pino</strong> ที่ออกแบบมาให้ทำงานแบบ Asynchronous โดยการแตก thread ไปใช้ <strong>worker thread</strong> ของ Node.js เพื่อไม่ให้การเขียน log มาขัดขวางการทำงานของ main thread ครับ</p> <p>แต่พอมีการใช้ worker thread นี่แหละครับที่ทำให้การ bundle ซับซ้อนขึ้น เพราะโดยพื้นฐานแล้ว Pino <strong>ไม่สามารถถูกรวมเป็นไฟล์เดียว (single-file bundle) ได้</strong> เนื่องจากสถาปัตยกรรมของมันต้องแยกไฟล์ worker ออกมาต่างหาก</p> <p>โชคดีที่ถ้าเราใช้ bundler ยอดนิยมอย่าง esbuild เขาก็มี plugin อย่าง <code>esbuild-plugin-pino</code> มาให้เลย ซึ่งมันจะช่วยจัดการสร้างไฟล์ worker ที่จำเป็น (เช่น <code>thread-stream.js</code>) แยกออกมาให้โดยอัตโนมัติ ทำให้เราแค่ติดตั้งและตั้งค่านิดหน่อยก็สามารถใช้งานได้เลย</p> <pre data-lang="javascript" class="language-javascript z-code"><code class="language-javascript" data-lang="javascript"><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ตัวอย่างการใช้ plugin ของ pino</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">build</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>esbuild<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-variable z-other z-readwrite z-alias z-ts">esbuildPluginPino</span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>esbuild-plugin-pino<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">build</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">entryPoints</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>src/index.ts<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">outdir</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>dist<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">platform</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>node<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">bundle</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-language z-boolean z-true z-ts">true</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">plugins</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">esbuildPluginPino</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">transports</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>pino-pretty<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Note</strong></p> <p>สามารถอ่านรายละเอียดเพิ่มเติมเกี่ยวกับการใช้ Pino กับการ Bundle ได้ที่ <a rel="nofollow noreferrer" href="https://github.com/pinojs/pino/blob/main/docs/bundling.md">pino documentation</a></p> </div> </blockquote><h3 id="aelwthaaaimmii-plugin-aihaichla">แล้วถ้าไม่มี Plugin ให้ใช้ล่ะ?<a class="zola-anchor" href="#aelwthaaaimmii-plugin-aihaichla" aria-label="Anchor link for: aelwthaaaimmii-plugin-aihaichla" style="visibility: hidden;"></a> </h3> <p>ทีนี้เราก็ได้เห็นแล้วนะครับว่าถ้ามี plugin ชีวิตก็จะสบายขึ้นมาก แต่ถ้าไม่มีล่ะ? เราจะทำยังไง? ทางเลือกหลักๆ ก็จะมีอยู่ประมาณนี้ครับ:</p> <ol> <li><strong>ทำด้วยมือ (Manual Scripting):</strong> วิธีนี้คือการเขียนสคริปต์ของเราเองเพื่อคัดลอกไฟล์ที่จำเป็นของ Pino ไปวางไว้ในโฟลเดอร์ <code>dist</code> หลังจากการ build เสร็จสิ้น เหตุผลที่ต้องทำแบบนี้เพราะสถาปัตยกรรมของ Pino ที่ใช้ Worker Threads ทำให้มันไม่สามารถถูก "บันเดิลเป็นไฟล์เดียวล้วนๆ" ได้อยู่แล้ว ซึ่งพวก plugin มันก็แค่มาช่วยทำให้กระบวนการนี้เป็นอัตโนมัติให้เรานั่นเอง</li> <li><strong>ใช้กลยุทธ์ "External Deps":</strong> เราสามารถบอก bundler ได้ว่า "ไม่ต้องพยายาม bundle library พวก <code>pino</code> หรือ <code>thread-stream</code> นะ" โดยกำหนดให้มันเป็น external dependencies วิธีนี้จะทำให้โค้ดของเรา build ผ่าน และแก้ปัญหาเรื่องการหาไฟล์ worker ได้ แต่ก็มีข้อแลกเปลี่ยนที่สำคัญคือ <strong>ขนาด image ของเราจะไม่เล็กลงตามเป้าหมาย</strong> เพราะสุดท้ายเราก็ยังต้อง copy <code>node_modules</code> ที่มี dependencies เหล่านี้ติดไปด้วยอยู่ดี</li> <li><strong>หลีกเลี่ยงการใช้ Worker ไปเลย:</strong> อีกทางเลือกคือการปรับการตั้งค่าของ Pino ให้ไปใช้ transport ที่ไม่ได้ทำงานบน worker thread (เช่น เขียน log ไปที่ stdout หรือเขียนไฟล์ใน main thread โดยตรง) วิธีนี้จะช่วยลดความซับซ้อนในการ build ลงได้มาก แต่เราก็จะเสียข้อดีเรื่องการแยกงาน I/O หนักๆ ออกจาก event loop ซึ่งเป็นแนวทางที่ Pino แนะนำสำหรับงานบน production</li> </ol> <p><strong>สรุปก็คือ</strong> ถ้ามี plugin ก็ใช้เถอะครับ สบายสุดแล้ว เพราะมันจัดการเรื่องยากๆ ให้เราอัตโนมัติ แต่ถ้าไม่มีจริงๆ การทำด้วยมือหรือการใช้ external ก็ยังเป็นทางออกที่พอไปได้ แค่เราต้องยอมรับ trade-off ที่ตามมา ไม่ว่าจะเป็นเรื่องขนาดของ image หรือประสิทธิภาพที่อาจลดลง ซึ่งก็ต้องเลือกให้เหมาะกับบริบทของโปรเจกต์เราครับ</p> <p>ก็หวังว่าจะเป็นประโยชน์กันนะครับ สวัสดีครับ</p> 2025-09-09T00:00:00+00:00 2025-09-09T00:00:00+00:00 https://thadaw.com/posts/understanding-dns-and-move-to-azure-dns/ <p>สวัสดีครับ วันนี้อยากมาเล่าเรื่อง <strong>DNS Zone และการย้ายโดเมนมาที่ Azure DNS Zone</strong> กันแบบง่าย ๆ หลายคนอาจเคยได้ยินคำว่า DNS แล้วรู้สึกว่าเป็นศัพท์เทคนิคที่ซับซ้อน แต่จริง ๆ แล้ว DNS ก็คือ <strong>สมุดโทรศัพท์ของอินเทอร์เน็ต</strong> นี่เองครับ ถ้าเปรียบเทียบให้เห็นภาพ: โดเมนเนม (<code>example.com</code>) ก็เหมือน “ชื่อคน” ในสมุดโทรศัพท์, IP Address (<code>1.2.3.4</code>) ก็เหมือน “เบอร์โทรศัพท์จริง” ส่วน DNS Record คือบันทึกที่บอกว่า <em>ชื่อนี้ต้องโทรไปที่เบอร์ไหน</em> เวลาที่เบราว์เซอร์อยากเข้าเว็บ มันก็แค่เปิดสมุดโทรศัพท์เล่มนี้ดู แล้วรู้ทันทีว่าจะต้องวิ่งไปที่ IP ไหนถึงจะเจอเว็บไซต์ของเรา</p> <p><img src="https://thadaw.com/posts/understanding-dns-and-move-to-azure-dns/dns-internet-phonebook.jpg" alt="" /></p> <h2 id="phuuenthaankh-ng-dns">พื้นฐานของ DNS<a class="zola-anchor" href="#phuuenthaankh-ng-dns" aria-label="Anchor link for: phuuenthaankh-ng-dns" style="visibility: hidden;"></a> </h2> <p>แล้วในสมุดโทรศัพท์ของอินเทอร์เน็ตเอง ก็ไม่ได้มีแค่ <strong>“ชื่อ → เบอร์”</strong> แบบเดียว แต่ยังมีหลายประเภทของการเชื่อมต่อ ที่บอกว่าโดเมนควรวิ่งไปหาปลายทางแบบไหนบ้าง ตัวอย่างที่เจอบ่อย ๆ ได้แก่</p> <ul> <li><strong>A Record</strong> → ระบุว่า <em>ชื่อนี้</em> ต้องชี้ไปยัง <em>หมายเลขบ้านจริง</em> (IP Address แบบตัวเลข)</li> <li><strong>CNAME Record</strong> → เป็นเหมือน <em>ชื่อเล่น</em> ของชื่อหลัก เช่น <code>www.example.com</code> ชี้ไปที่ <code>example.com</code></li> <li><strong>MX Record</strong> → ใช้สำหรับ <em>อีเมล</em> บอกว่าถ้ามีใครจะส่งจดหมาย (อีเมล) มาที่ <code>@example.com</code> ต้องไปที่ “ไปรษณีย์เซิร์ฟเวอร์” ไหน</li> <li><strong>TXT Record</strong> → เป็นเหมือน <em>โน้ตสั้น ๆ</em> ที่แนบไว้กับชื่อ เช่น การยืนยันความเป็นเจ้าของโดเมน หรือการตั้งค่าความปลอดภัยของอีเมล</li> </ul> <p>แต่ถ้าวันหนึ่งเราไม่ได้อยากใช้แค่เว็บสำเร็จรูปของผู้ให้บริการแล้ว เช่น อยากเอาโดเมนนี้ไปชี้เข้ากับแอปที่รันอยู่บน Azure, ใช้กับอีเมลของ Microsoft 365 หรือ Google Workspace, หรืออยากควบคุม DNS ด้วยโค้ด (Infrastructure as Code) ปัญหาจะเริ่มตามมาทันทีครับ เพราะ DNS Record ที่ผู้ให้บริการตั้งมาให้อาจไม่ตรงกับสิ่งที่เราต้องการ หรือบางครั้ง panel ของผู้ให้บริการก็ไม่ยืดหยุ่นพอที่จะรองรับการตั้งค่าซับซ้อน เมื่อถึงจุดนี้เองที่เราจะเริ่มเห็นประโยชน์ของการ “ย้าย DNS Zone” มาจัดการเองบน Azure DNS ครับ</p> <h2 id="thamaimthuengt-ngaich-azure-dns">ทำไมถึงต้องใช้ Azure DNS<a class="zola-anchor" href="#thamaimthuengt-ngaich-azure-dns" aria-label="Anchor link for: thamaimthuengt-ngaich-azure-dns" style="visibility: hidden;"></a> </h2> <p>สาเหตุที่หลายคนเลือกจะย้าย DNS มาจัดการเองบน Azure DNS ก็เพราะว่ามันช่วยให้เราควบคุมได้มากกว่าการปล่อยให้ผู้ให้บริการโดเมนเป็นคนจัดการครับ อย่างแรกเลยคือเรื่อง <strong>ความยืดหยุ่น</strong> เวลาเราอยากเพิ่ม record แปลก ๆ หรือแก้ไขค่าให้ตรงกับระบบที่เราสร้างเอง บางที panel ของผู้ให้บริการเดิมไม่รองรับ แต่บน Azure DNS เราตั้งค่าได้เต็มที่ อีกอย่างคือมันรองรับการทำงานแบบ <strong>Automation</strong> ผ่าน API, Azure CLI หรือ Terraform ซึ่งสำคัญมากเวลาที่เรามีหลาย environment เช่น Dev, UAT, Prod แล้วอยากให้ DNS ถูกสร้างและอัปเดตแบบอัตโนมัติพร้อมกับระบบอื่น ๆ สุดท้ายคือ <strong>การเชื่อมต่อกับบริการ Azure อื่น ๆ</strong> ที่ทำได้เนียนกว่า เช่น App Service, Container App หรือ VM พอใช้ DNS ของ Azure อยู่แล้ว การผูก custom domain เข้ากับ service เหล่านี้ก็สะดวกขึ้นมากครับ</p> <h2 id="dns-thamngaanyangaing">DNS ทำงานยังไง<a class="zola-anchor" href="#dns-thamngaanyangaing" aria-label="Anchor link for: dns-thamngaanyangaing" style="visibility: hidden;"></a> </h2> <p>หลายคนอาจจะสงสัยว่า เวลาที่เราซื้อโดเมนมาแล้ว เราจะเอาโดเมนนี้ไปใช้กับบริการ DNS ของเจ้าอื่นได้ยังไง เพราะอาจเข้าใจว่าการซื้อโดเมนมันเหมือนกับการสมัครใช้ซอฟต์แวร์แบบ Subscription (SaaS) ที่ล็อกเราไว้กับระบบของเขา ย้ายออกไปที่อื่นแทบจะเป็นไปไม่ได้ แต่ความจริงแล้วการ “ซื้อโดเมน” คือการจดทะเบียนชื่อบนอินเทอร์เน็ตครับ ส่วนบริการ DNS ที่แถมมาด้วยเป็นแค่ ตัวช่วย ที่ registrar เตรียมไว้ให้เราเท่านั้น เราสามารถเลือกได้เลยว่าจะใช้ DNS ของเขา หรือย้ายไปใช้ DNS Provider รายอื่น เช่น Azure DNS หรือ Cloudflare โดยทำได้แค่การเปลี่ยน Nameserver ของโดเมนให้ชี้ไปยังระบบใหม่เท่านั้นเอง</p> <p><img src="https://thadaw.com/posts/understanding-dns-and-move-to-azure-dns/how-dns-work.jpg" alt="" /></p> <p>เพื่อให้เห็นภาพชัดขึ้น ลองมาดูกันครับว่าเวลาเรามี <strong>Domain, DNS และ Nameserver</strong> ทั้งสามอย่างนี้ทำงานร่วมกันยังไง</p> <ul> <li><strong>Domain</strong> → คือ “ชื่อ” ที่เราจดทะเบียนไว้ เช่น <code>example.com</code> คล้าย ๆ กับการที่เราไปจองชื่อร้านในห้าง ว่าชื่อนี้เป็นของเราแล้ว คนอื่นจะมาใช้ชื่อเดียวกันไม่ได้</li> <li><strong>DNS Record</strong> → คือ “กฎการแปลงชื่อ” ว่าเวลามีคนเรียก <code>example.com</code> ต้องไปที่ไหนต่อ เช่น A record ชี้ไป IP ของเซิร์ฟเวอร์, MX record ชี้ไปเซิร์ฟเวอร์อีเมล</li> <li><strong>Nameserver (NS)</strong> → คือ “คนเฝ้าสมุดโทรศัพท์” คอยตอบคำถามเวลามีคนมาถามว่าชื่อนี้ต้องไปที่ไหน สมมติเราเปลี่ยน nameserver ของโดเมนไปเป็นของ Azure DNS ก็หมายความว่า ต่อจากนี้ใครก็ตามที่ถามข้อมูลเกี่ยวกับ <code>example.com</code> จะต้องไปถาม Azure DNS เพื่อให้มันตอบกลับมา</li> </ul> <p>ดังนั้นภาพรวมการทำงานคือ <strong>Domain</strong> เป็นชื่อ, <strong>DNS Record</strong> คือกฎการชี้ทาง, และ <strong>Nameserver</strong> คือผู้ให้บริการที่ถือสมุดบันทึกนี้ไว้ พอเราย้าย nameserver ไปเจ้าไหน ก็เท่ากับว่ามอบสิทธิ์การจัดการ DNS Record ทั้งหมดให้เจ้านั้นไปดูแลครับ</p> <h2 id="ewlaathiieraaekhaa-example-com-manthamngaanyangaing">เวลาที่เราเข้า example.com มันทำงานยังไง?<a class="zola-anchor" href="#ewlaathiieraaekhaa-example-com-manthamngaanyangaing" aria-label="Anchor link for: ewlaathiieraaekhaa-example-com-manthamngaanyangaing" style="visibility: hidden;"></a> </h2> <p>ลองมาดูขั้นตอนการทำงานของ DNS กันแบบละเอียด ๆ ครับ สมมติว่าเรามีโดเมน <code>example.com</code> ที่จดทะเบียนกับ Google Domain แล้วตั้ง nameserver ไปที่ Azure DNS Zone ที่เราสร้างไว้ (เช่น <code>ns1-01.azure-dns.com</code>, <code>ns2-01.azure-dns.net</code>, etc.) และใน Azure DNS Zone เราตั้ง A record ให้ <code>example.com</code> ชี้ไปที่ IP ของเว็บเซิร์ฟเวอร์ที่รันอยู่บน Azure (เช่น <code>20.50.100.25</code>) เวลาที่ผู้ใช้พิมพ์ <code>example.com</code> ในเบราว์เซอร์ ขั้นตอนการทำงานจะเป็นดังนี้ครับ:</p> <ol> <li> <p><strong>ผู้ใช้พิมพ์ <code>example.com</code> ใน browser</strong></p> <ul> <li>Browser จะถามระบบปฏิบัติการก่อนว่าเคยเก็บ IP ของ <code>example.com</code> ไว้ใน cache ไหม (เหมือนเราเคยจดเบอร์โทรเพื่อนลงมือถือไว้แล้ว)</li> <li>ถ้าไม่มี → ต้องไปถามคนอื่น (DNS Resolver)</li> </ul> </li> <li> <p><strong>DNS Resolver รับหน้าที่ตามหาคำตอบ</strong></p> <ul> <li>Resolver เปรียบเหมือน “คนกลาง” ที่เราส่งคำถามไปให้ เช่น DNS ของ ISP, Google (8.8.8.8), หรือ Cloudflare (1.1.1.1)</li> <li>ถ้า resolver ไม่เคยเจอ <code>example.com</code> มาก่อน → มันต้องเริ่มออกเดินทางตามหา</li> </ul> </li> <li> <p><strong>ถาม Root Server ก่อน</strong></p> <ul> <li>Root Server คือ “สารบัญใหญ่สุด” ของโลกอินเทอร์เน็ต</li> <li>มันจะไม่รู้ว่า <code>example.com</code> อยู่ที่ไหน แต่จะตอบว่า 👉 <em>“อ๋อ ชื่อที่ลงท้ายด้วย .com ต้องไปถามที่ <strong>.com TLD Server</strong> นะ”</em></li> </ul> </li> <li> <p><strong>ไปถาม TLD Server (.com)</strong></p> <ul> <li> <p>TLD Server ของ <code>.com</code> ก็ยังไม่รู้ IP ของ <code>example.com</code> โดยตรง</p> </li> <li> <p>แต่มันรู้ว่าโดเมนนี้ใช้ <strong>Nameserver ของเจ้าไหน</strong> เช่น</p> <pre class="z-code"><code><span class="z-text z-plain">example.com → ใช้ Nameserver ns1-01.azure-dns.com </span></code></pre> </li> <li> <p>ตรงนี้แหละครับคือ <strong>จุดที่ domain ของเราผูกกับ nameserver</strong></p> <ul> <li>Domain = <code>example.com</code> (ที่เราจดทะเบียน)</li> <li>Nameserver = <code>ns1-01.azure-dns.com</code> (ที่เราตั้งให้ชี้ไปยัง Azure DNS)</li> </ul> </li> </ul> </li> <li> <p><strong>ถาม Nameserver ของโดเมนเรา (Azure DNS)</strong></p> <ul> <li> <p>คราวนี้ Resolver ก็เลยไปถาม Nameserver ของเราโดยตรง</p> </li> <li> <p>Azure DNS จะเปิด “สมุดของเรา” (DNS Zone) มาดูว่าเราตั้ง record อะไรไว้</p> <ul> <li>เช่น A Record: <code>example.com → 20.50.100.25</code></li> </ul> </li> <li> <p>แล้ว Azure DNS จะตอบกลับมาทันที</p> </li> </ul> </li> <li> <p><strong>Resolver ส่งคำตอบกลับไปที่ Browser</strong></p> <ul> <li>Resolver จะเก็บคำตอบนี้ไว้ใน cache (เพื่อให้ครั้งหน้าเร็วขึ้น)</li> <li>แล้วส่ง IP กลับไปให้ Browser</li> </ul> </li> <li> <p><strong>Browser รู้ IP แล้ว → ไปเจอเซิร์ฟเวอร์จริง</strong></p> <ul> <li>ได้เลข IP แล้ว Browser ก็ตรงไปหา Web Server ของเราที่ <code>20.50.100.25</code></li> <li>สุดท้ายก็โหลดหน้าเว็บมาแสดง</li> </ul> </li> </ol> <h3 id="srupdwy-diagram">สรุปด้วย Diagram<a class="zola-anchor" href="#srupdwy-diagram" aria-label="Anchor link for: srupdwy-diagram" style="visibility: hidden;"></a> </h3> <p>เราลองมาดูภาพรวมการทำงานของ DNS ผ่าน sequence diagram กันครับ</p> <pre class="mermaid"> sequenceDiagram participant U as User&#x27;s Browser participant R as DNS Resolver (ISP &#x2F; 8.8.8.8 &#x2F; 1.1.1.1) participant Root as Root Server participant TLD as TLD Server (.com) participant NS as Authoritative Nameserver (Azure DNS) participant WS as Web Server (20.50.100.25) U-&gt;&gt;U: 1. Check local cache U-&gt;&gt;R: 2. Query example.com R-&gt;&gt;Root: 3. Ask Root for .com Root--&gt;&gt;R: Referral → TLD Server (.com) R-&gt;&gt;TLD: 4. Ask TLD for example.com TLD--&gt;&gt;R: Referral → NS (ns1-01.azure-dns.com) R-&gt;&gt;NS: 5. Ask Azure DNS for example.com NS--&gt;&gt;R: A Record → 20.50.100.25 R--&gt;&gt;U: 6. Return IP 20.50.100.25 U-&gt;&gt;WS: 7. Connect to Web Server WS--&gt;&gt;U: 8. Return Web Page </pre><h3 id="srupwaa-domain-kab-nameserver-yuutrngaihn">สรุปว่า Domain กับ Nameserver อยู่ตรงไหน<a class="zola-anchor" href="#srupwaa-domain-kab-nameserver-yuutrngaihn" aria-label="Anchor link for: srupwaa-domain-kab-nameserver-yuutrngaihn" style="visibility: hidden;"></a> </h3> <ul> <li> <p><strong>Registrar</strong> → คือ “ร้านรับจดโดเมน” ที่เราไปซื้อชื่อเว็บ เช่น <code>example.com</code> ให้กลายเป็นของเรา (ตัวอย่างเช่น Metaregistrar, Namecheap, หรือ Google Domain/Squarespace) Registrar มีหน้าที่หลัก ๆ แค่ <em>เก็บทะเบียนชื่อ</em> ว่าใครเป็นเจ้าของ ไม่ได้เก็บรายละเอียดว่าชื่อนี้จะต้องชี้ไปที่ไหน</p> </li> <li> <p><strong>Domain</strong> → คือ “ชื่อ” ที่เราจดไว้ เช่น <code>example.com</code> เหมือนเราจองป้ายชื่อร้านค้าในห้าง ใครอยากเรียกร้านเราก็ต้องใช้ชื่อนี้เท่านั้น</p> </li> <li> <p><strong>Nameserver (NS)</strong> → คือ “สมุดโทรศัพท์ของโดเมน” ที่บันทึกกฎการชี้ทาง (DNS Record) เอาไว้ ว่าเวลามีใครเรียก <code>example.com</code> ต้องไปเจอ IP ไหน ใช้เมลเซิร์ฟเวอร์อะไร ฯลฯ เราเลือกเองได้ว่าจะใช้ Nameserver ของใคร เช่น Azure DNS, Cloudflare หรือ Nameserver ของ Registrar เดิม</p> </li> </ul> <p>ดังนั้น เวลาใครถามว่า “<code>example.com</code> คืออะไร” → เขาจะวิ่งไปถาม <strong>Nameserver ที่เราตั้งไว้</strong> แล้ว Nameserver ก็จะเปิด <strong>DNS Zone ของเรา</strong> ขึ้นมาตอบว่า ชื่อนี้ต้องไปที่ไหนจริง ๆ ครับ</p> <h2 id="khant-nkaaryaay-dns-maathii-azure-dns">ขั้นตอนการย้าย DNS มาที่ Azure DNS<a class="zola-anchor" href="#khant-nkaaryaay-dns-maathii-azure-dns" aria-label="Anchor link for: khant-nkaaryaay-dns-maathii-azure-dns" style="visibility: hidden;"></a> </h2> <p>พอเราเข้าใจแล้วว่า Domain, Nameserver และ DNS Zone ทำงานยังไง ทีนี้มาดูภาพรวมของการย้าย DNS จากผู้ให้บริการเดิมมาที่ Azure DNS กันครับ จริง ๆ แล้วขั้นตอนไม่ซับซ้อนเลย แค่ต้องทำตามลำดับให้ถูกต้อง</p> <ol> <li> <p><strong>สร้าง DNS Zone บน Azure</strong></p> <ul> <li>เข้า Azure Portal แล้วสร้าง Resource ประเภท <em>DNS Zone</em></li> <li>ตั้งชื่อ Zone ให้ตรงกับโดเมนที่เรามี เช่น <code>tt-ss-lab.com</code></li> <li><img src="https://thadaw.com/posts/understanding-dns-and-move-to-azure-dns/create-dns-zone.jpg" alt="" /></li> </ul> </li> <li> <p><strong>เพิ่ม DNS Record ลงไปใน Zone</strong></p> <ul> <li>ก๊อปปี้ Record เดิมที่มีอยู่บน DNS ของผู้ให้บริการเก่า (เช่น A, MX, CNAME, TXT) มาใส่ใน Azure DNS</li> <li>ตรวจสอบให้ครบ โดยเฉพาะ record สำคัญอย่าง MX (อีเมล) และ TXT (ที่ใช้ยืนยันกับบริการต่าง ๆ)</li> <li><img src="https://thadaw.com/posts/understanding-dns-and-move-to-azure-dns/azure-dns-record.jpg" alt="" /></li> </ul> </li> <li> <p><strong>อัปเดต Nameserver ที่ Registrar</strong></p> <ul> <li>พอเราสร้าง Zone เสร็จ Azure จะให้ Nameserver ชุดใหม่ (เช่น <code>ns1-01.azure-dns.com</code>, <code>ns2-01.azure-dns.net</code>)</li> <li>เข้าไปที่ Registrar ที่เราซื้อโดเมน (เช่น Google Domain/Squarespace, Namecheap) แล้วเปลี่ยน Nameserver ของโดเมนให้ชี้ไปยัง Azure DNS</li> <li>อย่างตัวอย่างนี้ผมใช้ Registrar (ผู้ให้บริการจด Domain) ในไทย และสามารถอัพเดทค่าของ nameserver จาก Azure ได้</li> <li><img src="https://thadaw.com/posts/understanding-dns-and-move-to-azure-dns/update-nameserver.jpg" alt="" /></li> </ul> </li> <li> <p><strong>รอ Propagation</strong></p> <ul> <li>หลังจากเปลี่ยน Nameserver อาจต้องรอ 24–48 ชั่วโมง กว่าข้อมูลจะอัปเดตไปทั่วโลก</li> <li>ระหว่างนี้บาง resolver อาจยังตอบข้อมูลเก่าอยู่ ถือว่าเป็นเรื่องปกติ</li> </ul> </li> </ol> <p>แค่ 4 ขั้นตอนนี้ เราก็ย้าย DNS มาจัดการเองบน Azure DNS ได้แล้วครับ ทีนี้เราจะควบคุม DNS ผ่าน Azure Portal, Azure CLI หรือ Terraform ก็ได้ สะดวกและยืดหยุ่นกว่าการผูกติดอยู่กับ DNS ของ registrar เดิมเยอะเลย</p> <p>เราสามารถไปดูขั้นตอนละเอียด ๆ พร้อมภาพประกอบได้ใน <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/azure/dns/dns-getstarted-portal">เอกสารของ Microsoft</a> ครับ</p> <h2 id="propagation-khuue-aair-thamaimt-ngr">Propagation คืออะไร ทำไมต้องรอ?<a class="zola-anchor" href="#propagation-khuue-aair-thamaimt-ngr" aria-label="Anchor link for: propagation-khuue-aair-thamaimt-ngr" style="visibility: hidden;"></a> </h2> <p>เวลาที่เราเปลี่ยน Nameserver หรือแก้ DNS Record สิ่งที่หลายคนจะเจอคือ กดบันทึกแล้วลอง <code>dig</code> หรือเข้าเว็บทันที ผลลัพธ์กลับเป็น <strong>SERVFAIL</strong> หรือยังเจอค่าของ DNS เดิมอยู่ ทั้ง ๆ ที่เราตั้งค่าใหม่เรียบร้อยแล้ว …จริง ๆ แล้วนี่คือเรื่องปกติครับ เพราะมันเกี่ยวกับสิ่งที่เรียกว่า <strong>DNS Propagation</strong></p> <p>ลองนึกภาพว่า DNS ไม่ได้เก็บอยู่ที่เซิร์ฟเวอร์กลางแค่จุดเดียว แต่เป็น <strong>สมุดโทรศัพท์ที่กระจายอยู่ทั่วโลก</strong> ไม่ว่าจะเป็น resolver ของ ISP, ของ Google, ของ Cloudflare หรือขององค์กรต่าง ๆ แต่ละที่ก็จะเก็บ “สำเนา” ของสมุดไว้ใน cache ของตัวเอง และแต่ละ record จะมีอายุการเก็บกำหนดโดยค่า <strong>TTL (Time To Live)</strong> เช่น 300 วินาที (5 นาที), 3600 วินาที (1 ชั่วโมง) หรือบางครั้งยาวเป็นวัน</p> <p>เมื่อเรามีการเปลี่ยน DNS Record → ข้อมูลใหม่จะถูกบันทึกที่ Nameserver ของเรา (เช่น Azure DNS) ทันที แต่ resolver ที่อื่น ๆ ทั่วโลกอาจยังเก็บค่าของ record เก่าไว้ใน cache จนกว่า TTL จะหมด ถึงตอนนั้น resolver ถึงจะกลับไปถาม Nameserver ของเราอีกครั้ง แล้วค่อยอัปเดตค่าใหม่</p> <h3 id="srupaihekhaaaicchngaay">สรุปให้เข้าใจง่าย ๆ<a class="zola-anchor" href="#srupaihekhaaaicchngaay" aria-label="Anchor link for: srupaihekhaaaicchngaay" style="visibility: hidden;"></a> </h3> <ul> <li>DNS ทำงานแบบกระจายศูนย์ → ไม่มีที่เก็บกลาง ทุก resolver มีสำเนาของตัวเอง</li> <li>ค่า <strong>TTL</strong> คือกำหนดว่า “ข้อมูลเก่านี้จะใช้ได้นานแค่ไหน”</li> <li>ระหว่าง propagation (24–48 ชั่วโมงในกรณีเปลี่ยน Nameserver) → บางที่อาจตอบข้อมูลใหม่แล้ว แต่บางที่ยังตอบข้อมูลเก่าอยู่</li> </ul> <p>ดังนั้นเวลาที่เพิ่งย้าย DNS มาที่ Azure แล้วเจอว่าเว็บยังเข้าไม่ได้ อย่าเพิ่งตกใจไปครับ ส่วนใหญ่ไม่ใช่ตั้งค่าผิด แต่เป็นเพราะ propagation กำลังทำงานอยู่ รอให้ cache ทั่วโลกหมดอายุแล้วข้อมูลใหม่จะแพร่กระจายไปครบเอง</p> <h2 id="krniisueksaakh-ngcchring-yaayodemnaip-azure-dns-aelwecch-servfail">กรณีศึกษาของจริง: ย้ายโดเมนไป Azure DNS แล้วเจอ SERVFAIL<a class="zola-anchor" href="#krniisueksaakh-ngcchring-yaayodemnaip-azure-dns-aelwecch-servfail" aria-label="Anchor link for: krniisueksaakh-ngcchring-yaayodemnaip-azure-dns-aelwecch-servfail" style="visibility: hidden;"></a> </h2> <p>ตอนที่ผมย้ายโดเมน <code>tt-ss-lab.com</code> มาที่ Azure DNS สิ่งแรกที่ทำหลังจากเปลี่ยน Nameserver ที่ registrar ก็คือรีบลอง <code>dig</code> เพื่อเช็กผลลัพธ์ แต่สิ่งที่เจอคือทุก query กลับมาตอบว่า</p> <pre class="z-code"><code><span class="z-text z-plain">status: SERVFAIL </span></code></pre> <p>ตอนนั้นผมก็คิดว่าต้องตั้งค่าผิดแน่ ๆ เพราะลองถามทั้ง <code>A</code>, <code>MX</code>, <code>CNAME</code>, <code>TXT</code> ก็ยัง FAIL เหมือนเดิมทั้งหมด</p> <p>แต่พอลองไล่เช็กไปทีละขั้นก็เจอสาเหตุจริง ๆ อยู่สองข้อ:</p> <ol> <li> <p><strong>Propagation ยังไม่เสร็จ</strong> หลังเปลี่ยน Nameserver ข้อมูลยังไม่กระจายไปทั่วโลก resolver ของ ISP ที่ใช้ยังชี้ไป Nameserver เก่า เลยตอบกลับด้วย error</p> </li> <li> <p><strong>Zone ใน Azure ยังว่างเปล่า</strong> ถึง Nameserver ใหม่จะถูกเปลี่ยนเรียบร้อยแล้ว แต่ DNS Zone ของผมยังไม่มี record พื้นฐานเลย พอ resolver ภายนอกถามมาก็เลย “ไม่มีคำตอบจะตอบกลับ” → กลายเป็น SERVFAIL</p> </li> </ol> <h3 id="withiiaek">วิธีแก้<a class="zola-anchor" href="#withiiaek" aria-label="Anchor link for: withiiaek" style="visibility: hidden;"></a> </h3> <ul> <li> <p>ผมลองถามตรงไปที่ Nameserver ของ Azure โดยใช้คำสั่ง:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">dig</span></span><span class="z-meta z-function-call z-arguments z-shell"> CNAME test-azure.tt-ss-lab.com @ns1-01.azure-dns.com</span> </span></code></pre> <p>คราวนี้ได้คำตอบกลับมาทันที ว่า <code>test-azure.tt-ss-lab.com</code> ชี้ไปยัง <code>chaiyo-ca.jollyplant...azurecontainerapps.io</code> แสดงว่า Zone ทำงานปกติแล้ว</p> </li> <li> <p>นอกจากนี้ ผมลองใช้ <code>nslookup</code> แทน <code>dig</code> ก็ได้คำตอบกลับมาจาก resolver อีกตัวหนึ่งเร็วกว่า (non-authoritative answer) ทำให้มั่นใจได้ว่าค่าถูกต้อง เพียงแต่ propagation บาง resolver ยังไม่อัปเดต</p> </li> <li> <p>สรุปแล้วปัญหามาจาก <strong>Propagation ที่ยังไม่เสร็จ + ไม่มี record พื้นฐาน (A, MX, TXT)</strong> ใน Zone นั่นเอง</p> </li> </ul> <h3 id="hlangcchaaktrwcchs-bdwy-nslookup">หลังจากตรวจสอบด้วย nslookup<a class="zola-anchor" href="#hlangcchaaktrwcchs-bdwy-nslookup" aria-label="Anchor link for: hlangcchaaktrwcchs-bdwy-nslookup" style="visibility: hidden;"></a> </h3> <p>หลังจากที่ผมลอง <code>nslookup</code> แล้วเริ่มเห็นข้อมูล CNAME ของ <code>test-azure.tt-ss-lab.com</code> ชี้ไปที่ Azure Container App ได้ถูกต้อง ผมก็ไปลองขั้นตอนถัดไปทันที คือ <strong>ผูก Custom Domain</strong> บน Azure Container App</p> <pre class="z-code"><code><span class="z-text z-plain">$ nslookup test-azure.tt-ss-lab.com </span><span class="z-text z-plain"> </span><span class="z-text z-plain">;; Got SERVFAIL reply from 2001:fb0:100::207:49, trying next server </span><span class="z-text z-plain">Server: 2001:fb0:100::207:29 </span><span class="z-text z-plain">Address: 2001:fb0:100::207:29#53 </span><span class="z-text z-plain"> </span><span class="z-text z-plain">Non-authoritative answer: </span><span class="z-text z-plain">test-azure.tt-ss-lab.com canonical name = chaiyo-ca.jollyplant-effa115b.southeastasia.azurecontainerapps.io. </span><span class="z-text z-plain">Name: chaiyo-ca.jollyplant-effa115b.southeastasia.azurecontainerapps.io </span><span class="z-text z-plain">Address: 40.119.236.238 </span></code></pre> <p>ผลลัพธ์คือ Azure สามารถ <strong>validate domain ผ่านได้เลย</strong> เพราะมันเห็นว่า CNAME record ถูกต้องแล้ว หลังจากนั้นก็สามารถผูก <code>test-azure.tt-ss-lab.com</code> เข้ากับ Container App ของผมได้สำเร็จ โดยไม่ต้องรอ propagation ครบทุก resolver ด้วยซ้ำ</p> <p><img src="https://thadaw.com/posts/understanding-dns-and-move-to-azure-dns/add-custom-domain.jpg" alt="" /></p> <p>นี่ทำให้เห็นว่า บางครั้งแม้เราจะเจอ SERVFAIL จาก <code>dig</code> แต่ถ้าลองเช็กด้วย <code>nslookup</code> หรือ query ตรงไปยัง Nameserver ของ Azure ก็อาจได้คำตอบที่ใช้ได้ทันที และสามารถดำเนินการต่อใน Azure ได้เลย</p> <h3 id="btheriiynthiiaid">บทเรียนที่ได้<a class="zola-anchor" href="#btheriiynthiiaid" aria-label="Anchor link for: btheriiynthiiaid" style="visibility: hidden;"></a> </h3> <ol> <li> <p>หลังเปลี่ยน Nameserver <strong>อย่าเพิ่งรีบเทสทันที</strong> ให้เวลา propagation อย่างน้อย 24–48 ชั่วโมง แต่อาจจะเสร็จเร็วกว่านั้นได้</p> </li> <li> <p>ตรวจสอบว่า Zone ของเรามี record พื้นฐานครบแล้ว โดยเฉพาะ A record สำหรับ root domain</p> </li> <li> <p>เวลาเจอ SERVFAIL ให้ลองสองวิธี:</p> <ul> <li>ถามตรงไปที่ Nameserver ของ Azure (<code>@ns1-01.azure-dns.com</code>) → ถ้าได้ผลลัพธ์ แสดงว่า Zone ปกติ</li> <li>ใช้ <code>nslookup</code> เช็กกับ resolver ตัวอื่น เผื่อได้คำตอบ non-authoritative ที่ confirm ค่าใหม่ได้เร็วกว่า</li> </ul> </li> </ol> <p>ตรงนี้จะช่วยให้คนอ่านมั่นใจว่า ถึง propagation จะยังไม่ครบ แต่เราก็สามารถ <strong>validate domain และผูก Custom Domain บน Azure</strong> ได้ตั้งแต่เนิ่น ๆ</p> <h2 id="ekhruue-ngmuue-command-line-samhrabtrwcchs-b-dns">เครื่องมือ Command Line สำหรับตรวจสอบ DNS<a class="zola-anchor" href="#ekhruue-ngmuue-command-line-samhrabtrwcchs-b-dns" aria-label="Anchor link for: ekhruue-ngmuue-command-line-samhrabtrwcchs-b-dns" style="visibility: hidden;"></a> </h2> <p>เวลาที่เราย้ายโดเมนหรือแก้ไข DNS การตรวจสอบด้วย command line จะช่วยให้เราเห็นว่าระบบตอบสนองยังไงบ้าง ผมขอสรุปเป็น 5 คำสั่งหลัก ๆ ที่ใช้บ่อยครับ</p> <h3 id="1-dig">1. <code>dig</code><a class="zola-anchor" href="#1-dig" aria-label="Anchor link for: 1-dig" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">dig</span></span><span class="z-meta z-function-call z-arguments z-shell"> A example.com</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">dig</span></span><span class="z-meta z-function-call z-arguments z-shell"> CNAME test-azure.example.com</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">dig</span></span><span class="z-meta z-function-call z-arguments z-shell"> MX example.com</span> </span></code></pre> <ul> <li>ใช้ถาม DNS Record โดยตรง เช่น A, CNAME, MX, TXT</li> <li>แสดงผลละเอียด เช่น TTL, authority, server ที่ตอบ</li> <li>ถ้าเจอ <code>status: SERVFAIL</code> → แสดงว่า resolver ที่ถามยังไม่รู้จัก record นี้ (อาจเป็นเพราะ propagation ยังไม่เสร็จ)</li> </ul> <h3 id="2-dig-nameserver">2. <code>dig @nameserver</code><a class="zola-anchor" href="#2-dig-nameserver" aria-label="Anchor link for: 2-dig-nameserver" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">dig</span></span><span class="z-meta z-function-call z-arguments z-shell"> CNAME test-azure.example.com @ns1-01.azure-dns.com</span> </span></code></pre> <ul> <li>ใช้ถามตรงไปยัง <strong>Authoritative Nameserver</strong> ของโดเมน เช่น Azure DNS</li> <li>จะได้คำตอบตรงจาก DNS Zone ของเรา ไม่ต้องรอ propagation</li> <li>เหมาะมากเวลาอยากเช็กว่า record ที่สร้างไว้ใน Zone ทำงานแล้วหรือยัง</li> </ul> <h3 id="3-nslookup">3. <code>nslookup</code><a class="zola-anchor" href="#3-nslookup" aria-label="Anchor link for: 3-nslookup" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">nslookup</span></span><span class="z-meta z-function-call z-arguments z-shell"> example.com</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">nslookup</span></span><span class="z-meta z-function-call z-arguments z-shell"> test-azure.example.com</span> </span></code></pre> <ul> <li>ใช้ง่ายกว่า <code>dig</code> และมักจะตอบว่า <strong>Non-authoritative answer</strong></li> <li>หมายความว่า: คำตอบมาจาก <strong>resolver ตัวกลาง</strong> (เช่น DNS ของ ISP, Google 8.8.8.8, Cloudflare 1.1.1.1) ที่เก็บข้อมูลไว้ใน cache → ไม่ได้ตอบจาก Nameserver ต้นทาง</li> <li>ข้อดี: บางครั้ง resolver บางตัวอัปเดตเร็ว ทำให้เห็นผล propagation ได้ก่อนที่ resolver อื่น ๆ จะตามทัน</li> </ul> <h3 id="4-whois">4. <code>whois</code><a class="zola-anchor" href="#4-whois" aria-label="Anchor link for: 4-whois" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">whois</span></span><span class="z-meta z-function-call z-arguments z-shell"> example.com</span> </span></code></pre> <ul> <li>ใช้ดูข้อมูลการจดทะเบียนโดเมน</li> <li>บอกได้ว่า registrar คือใคร, วันหมดอายุ, และ <strong>Nameserver ปัจจุบัน</strong> ของโดเมนคืออะไร</li> <li>ช่วยเช็กได้ว่าเราส่งค่า Nameserver ไปที่ Azure DNS แล้วหรือยัง</li> </ul> <h3 id="5-host-iikthaangeluue-k">5. <code>host</code> (อีกทางเลือก)<a class="zola-anchor" href="#5-host-iikthaangeluue-k" aria-label="Anchor link for: 5-host-iikthaangeluue-k" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">host</span></span><span class="z-meta z-function-call z-arguments z-shell"> example.com</span> </span></code></pre> <ul> <li>ผลลัพธ์สั้น กระชับกว่า <code>dig</code></li> <li>เหมาะสำหรับการตรวจสอบเร็ว ๆ เช่นดูว่า domain resolve ไปที่ IP ไหน</li> </ul> <h2 id="authoritative-vs-non-authoritative">Authoritative vs Non-authoritative<a class="zola-anchor" href="#authoritative-vs-non-authoritative" aria-label="Anchor link for: authoritative-vs-non-authoritative" style="visibility: hidden;"></a> </h2> <ul> <li><strong>Authoritative Answer</strong> → มาจาก Nameserver ต้นทางของโดเมนโดยตรง (เช่น Azure DNS) → เป็นข้อมูลจริงล่าสุด 100%</li> <li><strong>Non-authoritative Answer</strong> → มาจาก cache ของ resolver ตัวกลาง (เช่น DNS ของ ISP หรือ Google DNS) → เร็วกว่า แต่บางครั้งอาจยังเป็นข้อมูลเก่า</li> </ul> <ul> <li>📌 ถ้าอยากเช็กว่าค่าใน DNS Zone ถูกต้องแล้ว → ใช้ <code>dig @ns1-01.azure-dns.com</code></li> <li>📌 ถ้าอยากดูว่าค่าเริ่มเผยแพร่ไปทั่วโลกแล้วหรือยัง → ใช้ <code>nslookup</code> หรือ <code>dig</code> ธรรมดา (ไม่ระบุ nameserver)</li> </ul> <p><strong>การใช้คำสั่งเหล่านี้ร่วมกัน จะช่วยให้เราแยกปัญหาได้ทันทีว่า:</strong></p> <ul> <li>โดเมนยังไม่เปลี่ยน nameserver ที่ registrar</li> <li>Zone บน Azure DNS ยังไม่มี record</li> <li>หรือ propagation ยังไม่เสร็จ</li> </ul> <h2 id="odysrup">โดยสรุป<a class="zola-anchor" href="#odysrup" aria-label="Anchor link for: odysrup" style="visibility: hidden;"></a> </h2> <p>DNS ฟังดูเป็นเรื่องซับซ้อน แต่ถ้าเราเปรียบเทียบให้ง่าย ๆ ว่า <strong>Domain คือชื่อร้าน</strong>, <strong>IP คือเบอร์โทรศัพท์</strong>, และ <strong>DNS คือสมุดโทรศัพท์ของอินเทอร์เน็ต</strong> ทุกอย่างก็จะเริ่มชัดขึ้นทันที</p> <ul> <li>เวลาเราซื้อโดเมนจาก registrar → เราได้ทั้ง “ชื่อร้าน” (domain) และ “สมุดโทรศัพท์เบื้องต้น” (DNS record ที่แถมมา)</li> <li>ถ้าอยากควบคุมเองมากขึ้น เช่น ใช้ Azure App Service, Container App หรือจัดการ DNS ด้วยโค้ด (Terraform/CLI) → เราก็แค่เปลี่ยน Nameserver ไปที่ Azure DNS</li> <li>เมื่อเปลี่ยนแล้ว บางครั้งเจอปัญหา <strong>SERVFAIL</strong> ซึ่งส่วนใหญ่เกิดจาก propagation ที่ยังไม่เสร็จ หรือ Zone ยังไม่มี record พื้นฐาน ไม่ได้แปลว่าตั้งค่าผิด</li> </ul> <p>การตรวจสอบด้วย command line อย่าง <code>dig</code>, <code>nslookup</code>, <code>whois</code> ช่วยให้เรารู้ได้ทันทีว่า ปัญหาอยู่ตรงไหนกันแน่ และไม่ต้องนั่งเดาแบบงง ๆ อีกต่อไป</p> <h3 id="khamsrupsamkhay-key-takeaways">คำสรุปสำคัญ (Key Takeaways)<a class="zola-anchor" href="#khamsrupsamkhay-key-takeaways" aria-label="Anchor link for: khamsrupsamkhay-key-takeaways" style="visibility: hidden;"></a> </h3> <ol> <li><strong>DNS Zone = สมุดโทรศัพท์</strong> ของโดเมน → เราสามารถเลือกจะฝากสมุดนี้ไว้กับใครก็ได้ เช่น Azure DNS, Cloudflare หรือ registrar เดิม</li> <li><strong>Authoritative vs Non-authoritative</strong> → ถามตรง Nameserver = ได้ข้อมูลจริงล่าสุด, ถาม resolver ทั่วไป = ได้ข้อมูลจาก cache</li> <li><strong>Propagation ต้องใช้เวลา</strong> → 24–48 ชั่วโมงเป็นเรื่องปกติ อย่าเพิ่งตกใจถ้าเจอ SERVFAIL</li> <li><strong>เช็กด้วยเครื่องมือ</strong> → <code>dig @nsX-azure-dns.com</code> เพื่อตรวจสอบ Zone โดยตรง, <code>nslookup</code> เพื่อตรวจสอบการเผยแพร่</li> </ol> <h2 id="thingthaay">ทิ้งท้าย<a class="zola-anchor" href="#thingthaay" aria-label="Anchor link for: thingthaay" style="visibility: hidden;"></a> </h2> <p>พอเราเข้าใจภาพรวมแล้ว DNS จะไม่ใช่ “กล่องดำลึกลับ” อีกต่อไปครับ การย้ายโดเมนมาที่ Azure DNS ก็ไม่ได้ซับซ้อนอย่างที่คิด — แค่เปลี่ยน nameserver, ย้าย record มาครบ, รอ propagation ให้เสร็จ แล้วทุกอย่างก็พร้อมใช้งาน</p> <p>ถ้าเคยรู้สึกว่า DNS เป็นเรื่องยาก ลองกลับมาอ่านบทความนี้อีกครั้ง คุณจะเห็นว่า จริง ๆ แล้วมันก็แค่ “การเปิดสมุดโทรศัพท์ → หาว่าชื่อนี้ต้องไปเบอร์ไหน” เท่านั้นเอง ✨</p> <p>ไว้เจอกันใหม่บทความหน้านะ สวัสดีครับ 👋</p> 2025-08-31T00:00:00+00:00 2025-08-31T00:00:00+00:00 https://thadaw.com/posts/ep2-setup-actual-budget-vm-docker-nginx-cloudflare/ <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Series SSL&#x2F;TLS กับ Cloudflare</strong></p> <ul> <li>EP 1: <a href="/posts/ssl-tls-made-easy-cloudflare-azure/">เข้าใจ SSL/TLS แบบง่าย ๆ ผ่าน Cloudflare และ Azure</a></li> <li>EP 2: ลงมือจริง: Setup Actual Budget บน VM ด้วย Docker, Nginx และ Cloudflare (บทความนี้)</li> </ul> </div> </blockquote> <p>สวัสดีครับ วันนี้ก็จะมาต่อกันใน <strong>EP2</strong> ของซีรีส์ SSL/TLS ที่เราเริ่มไว้กันนะครับ ถ้าใครได้อ่านตอนแรกไปแล้วก็น่าจะพอเห็นภาพกว้าง ๆ ว่า HTTPS มันทำงานยังไง ผ่านตัวอย่าง Cloudflare กับ Azure ว่าเวลาเราเลือกใช้ Managed Service หรือ VM เองเนี่ย เรื่องของ certificate จะต่างกันยังไง แต่พอเข้าใจแล้ว คราวนี้เราจะลอง “ลงมือจริง” กันดูบ้างครับ</p> <p>ใน EP2 นี้ ผมจะเอาโปรเจกต์เล็ก ๆ ที่ชื่อว่า <strong>Actual Budget</strong> ซึ่งเป็น open-source budgeting app มาเป็นตัวอย่าง สมมติว่าเราอยากจะทำให้มันออนไลน์ใช้งานได้จริงบน VM ของเราเอง แล้วก็ครอบมันด้วย <strong>Nginx + Cloudflare Origin Certificate</strong> เพื่อให้ทุกอย่างปลอดภัยภายใต้โหมด Full (Strict) กันครับ เป้าหมายก็คือ… จาก VM ที่ว่างเปล่า เราจะค่อย ๆ ทำให้มันกลายเป็นเว็บที่มี HTTPS พร้อมใช้งานได้จริง ✨</p> <blockquote class="callout tip"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M9.97308 18H11V13H13V18H14.0269C14.1589 16.7984 14.7721 15.8065 15.7676 14.7226C15.8797 14.6006 16.5988 13.8564 16.6841 13.7501C17.5318 12.6931 18 11.385 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 11.3843 6.46774 12.6917 7.31462 13.7484C7.40004 13.855 8.12081 14.6012 8.23154 14.7218C9.22766 15.8064 9.84103 16.7984 9.97308 18ZM10 20V21H14V20H10ZM5.75395 14.9992C4.65645 13.6297 4 11.8915 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 11.8925 19.3428 13.6315 18.2443 15.0014C17.624 15.7748 16 17 16 18.5V21C16 22.1046 15.1046 23 14 23H10C8.89543 23 8 22.1046 8 21V18.5C8 17 6.37458 15.7736 5.75395 14.9992Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Source Code</strong></p> <p>สำหรับใครที่อยากลองทำตาม สามารถดูตัวอย่าง config ทั้งหมดได้ที่ GitHub repo นี้ครับ: <a rel="nofollow noreferrer" href="https://github.com/thaitype/actualbudget-vm-cloudflare">https://github.com/thaitype/actualbudget-vm-cloudflare</a></p> </div> </blockquote> <p>ก่อนหน้านี้ผมเองก็เคยได้มีโอกาสลองใช้ <strong>YNAB (You Need A Budget)</strong> ในการจัดการเรื่องการเงินและงบประมาณส่วนตัว ต้องบอกเลยว่ามันเปลี่ยนวิธีคิดเรื่องการเงินของผมไปพอสมควร ปัญหาที่เคยเจอกันบ่อย ๆ อย่าง “เงินหายไปไหน”, “วางแผนงบยังไงดี”, หรือ “ค่าใช้จ่ายจริงกับที่ตั้งงบไม่ตรงกัน” — พอมาใช้ YNAB แล้วกลับกลายเป็นเรื่องที่ <strong>ง่ายขึ้นเยอะมาก</strong> เพราะตัวแอปมันออกแบบมาให้เราโฟกัสกับการบอก “ทุกบาททุกสตางค์มีที่ไป”</p> <p>แต่ข้อเสียก็คือ ราคามันสูงไปหน่อยสำหรับการใช้งานระยะยาวสำหรับผม 😅 จนสุดท้ายผมมาเจอโปรเจกต์ที่ชื่อว่า <strong>Actual Budget</strong> ซึ่งเป็น open-source ที่หยิบเอาแนวคิดเดียวกันมาทำให้ฟรี และเราสามารถโฮสต์เองได้ ใครที่อยากเริ่มทำ “บัญชีส่วนตัว” แบบจริงจัง ผมแนะนำเลยครับว่าลอง Actual Budget ได้เลย จะเลือกใช้ VM บน Azure, DigitalOcean, fly.io หรือเจ้าไหนก็แล้วแต่ถนัดเลย แต่ในบทความนี้ผมจะขอใช้ <strong>Azure VM</strong> เป็นตัวอย่างหลักในการสาธิตครับ</p> <h2 id="1-etriiym-vm">1. เตรียม VM<a class="zola-anchor" href="#1-etriiym-vm" aria-label="Anchor link for: 1-etriiym-vm" style="visibility: hidden;"></a> </h2> <p>สมมติว่าเรากำลังจะสร้างบ้านสักหลัง สิ่งแรกที่ต้องมีเลยก็คือ “ที่ดินเปล่า” ให้เราลงเสาเข็มได้ถูกไหมครับ? โลกของเซิร์ฟเวอร์ก็ไม่ต่างกันเลย สิ่งแรกที่เราต้องมีคือ <strong>VM เปล่า ๆ</strong> ซึ่งจะเป็นเหมือนที่ดินที่เราจะเอาบ้าน (หรือแอป Actual Budget ของเรา) ไปลงบนมัน</p> <p>ในตัวอย่างนี้ผมจะใช้ <strong>Azure VM</strong> เป็นหลัก แต่จริง ๆ คุณจะเลือก DigitalOcean, AWS หรือเจ้าอื่นก็ได้เหมือนกัน ขึ้นอยู่กับความถนัดและความสะดวกของแต่ละคนเลยครับ จุดสำคัญคือ VM นี้จะต้องเป็น Linux (Ubuntu 20.04/22.04) ซึ่งเป็นเหมือน “ดินคุณภาพดี” ที่พร้อมให้เราลงโครงสร้างต่อไปได้ง่าย ๆ</p> <p>พอได้ VM แล้ว เราก็เข้าไปผ่าน SSH เหมือนเดินเข้าสำรวจที่ดินของเรา จากนั้นกวาดลานนิดหน่อย (update system) เพื่อเคลียร์สภาพแวดล้อมให้พร้อมจะลงของใหม่ครับ</p> <h3 id="thamaimt-ngaich-vm-aimaich-managed-service">ทำไมต้องใช้ VM ไม่ใช้ Managed Service?<a class="zola-anchor" href="#thamaimt-ngaich-vm-aimaich-managed-service" aria-label="Anchor link for: thamaimt-ngaich-vm-aimaich-managed-service" style="visibility: hidden;"></a> </h3> <p>หลายคนอาจสงสัยว่า… ทำไมเราต้องไปยุ่งยากเช่า VM เอง ทั้ง ๆ ที่ Azure หรือ Cloud Provider อื่น ๆ ก็มีพวก Managed Service ที่ทำให้ชีวิตง่ายขึ้น เช่น Azure App Service, Azure Container App อะไรพวกนี้ที่แถม HTTPS มาให้เลย แต่เหตุผลหลัก ๆ มันอยู่ตรงนี้ครับ</p> <p><strong>Actual Budget ใช้ SQLite เป็นฐานข้อมูลหลัก</strong> ซึ่ง SQLite จะเขียนไฟล์ลงดิสก์โดยตรง เวลาแอปทำงานจริง มันต้องการ <strong>mount volume แบบ native</strong> เพื่อให้สามารถอ่าน–เขียนไฟล์ได้ตามปกติ</p> <p>ปัญหาคือ Managed Service ส่วนใหญ่ โดยเฉพาะพวก PaaS (Platform-as-a-Service) ของ Azure จะให้เราใช้ <strong>Azure Files</strong> หรือ storage อื่น ๆ ที่เป็น network file system แทน ซึ่งมันไม่ได้ support พฤติกรรมการเขียนไฟล์ทั้งหมดของ SQLite แบบ 100% ผลลัพธ์คือ… พอเราไป deploy จริง เราจะเจอ error ประมาณนี้เลย:</p> <pre class="z-code"><code><span class="z-text z-plain">[Error: PRAGMA journal_mode = WAL - SQLITE_BUSY: database is locked] </span></code></pre> <p>ซึ่งก็คือ SQLite พยายามเข้าโหมด WAL (Write-Ahead Logging) แต่ดันล็อกไฟล์ไม่ได้ เพราะ storage ไม่รองรับการทำงานแบบนั้นเต็ม ๆ</p> <p>ตรงนี้แหละครับที่ทำให้เราต้องเลือกใช้ <strong>VM</strong> หรือ service ที่ support <strong>native filesystem mount</strong> ได้จริง ๆ เช่น Azure VM, DigitalOcean Droplet, หรือ AWS EC2 เป็นต้น เพื่อให้ SQLite ทำงานได้ถูกต้องโดยไม่มีปัญหาเรื่อง database lock</p> <p>พูดง่าย ๆ คือ… ถ้าเราอยากให้ Actual Budget รันได้ลื่น ๆ แบบไม่ต้องมานั่งปวดหัวกับ error แปลก ๆ เราก็ต้องยอมไปเช่า VM มา แล้วจัดการ environment เองทั้งหมดครับ</p> <h2 id="2-tidtang-docker-docker-compose">2. ติดตั้ง Docker &amp; Docker Compose<a class="zola-anchor" href="#2-tidtang-docker-docker-compose" aria-label="Anchor link for: 2-tidtang-docker-docker-compose" style="visibility: hidden;"></a> </h2> <p>พอเราได้ VM ที่เหมือนที่ดินเปล่า ๆ มาแล้ว ขั้นต่อไปก็คือการ “สร้างบ้าน” ให้แอปของเราอยู่ได้จริง แต่แทนที่จะไปลงเสา เทปูน ก่ออิฐทีละก้อน (ลง dependency เอง, ติดตั้ง runtime เอง) …เราจะเลือกวิธีที่ง่ายกว่า ก็คือการยก <strong>บ้านสำเร็จรูป</strong> มาลงไปเลยครับ</p> <p>บ้านสำเร็จรูปในโลกของเซิร์ฟเวอร์ก็คือ <strong>Docker</strong> นั่นเอง — เราสามารถแพ็ก Actual Budget, Nginx, และ service อื่น ๆ ไว้ใน container ที่พร้อมใช้งาน แล้วเอามาวางลงบน VM ของเราได้ทันที โดยไม่ต้องห่วงว่า dependency จะชนกันหรือติดตั้งผิดเวอร์ชัน</p> <p>นอกจากนี้ เรายังมี <strong>Docker Compose</strong> เป็นเหมือนแปลนบ้าน ที่เราบอกไว้เลยว่า “ห้องนี้คือ Nginx, ห้องนี้คือ Actual Budget, ห้องนี้ต่อไฟเข้ากับ database” — ทุกอย่างถูกนิยามไว้ในไฟล์ <code>docker-compose.yml</code> พอเราสั่ง <code>docker compose up -d</code> มันก็จะยกบ้านทั้งหลังขึ้นมาให้เราแบบอัตโนมัติเลย</p> <p>ดังนั้นก่อนที่เราจะไปตั้งค่า config อื่น ๆ สิ่งแรกที่ต้องทำใน VM ของเราคือ:</p> <ol> <li>ติดตั้ง Docker</li> <li>ติดตั้ง Docker Compose</li> <li>ตรวจสอบว่าใช้งานได้จริง (<code>docker --version</code>, <code>docker compose version</code>)</li> </ol> <p>เมื่อเสร็จแล้ว เราก็พร้อมที่จะ “เอาของไปลงบ้าน” ได้ทันที</p> <h2 id="3-config-environment-samhrab-actual-budget">3. Config Environment สำหรับ Actual Budget<a class="zola-anchor" href="#3-config-environment-samhrab-actual-budget" aria-label="Anchor link for: 3-config-environment-samhrab-actual-budget" style="visibility: hidden;"></a> </h2> <p>โอเคครับ ตอนนี้เรามี VM (ที่ดิน) + Docker/Compose (บ้านสำเร็จรูป) พร้อมแล้ว ทีนี้ก็ถึงเวลามา <strong>จัดห้อง จัดเฟอร์นิเจอร์</strong> ภายในบ้านกัน</p> <p>สำหรับ Actual Budget สิ่งที่เราต้องทำก็คือการ <strong>ตั้งค่า environment</strong> เพื่อบอกบ้านเราว่า “ห้องไหนทำหน้าที่อะไร” เช่น URL ของเว็บ, ชื่อโดเมน, และ proxy ที่ไว้รับ request จากข้างนอก</p> <p>วิธีการก็ง่าย ๆ ครับ:</p> <ol> <li> <p>เรา clone หรือโหลด template โปรเจกต์จาก GitHub มาก่อน <a rel="nofollow noreferrer" href="https://github.com/thaitype/actualbudget-vm-cloudflare">https://github.com/thaitype/actualbudget-vm-cloudflare</a></p> </li> <li> <p>จากนั้น copy ไฟล์ <code>.env.example</code> มาเป็น <code>.env</code> เหมือนเราได้คู่มือบ้านมาหนึ่งชุด</p> </li> <li> <p>เปิด <code>.env</code> แล้วปรับค่าให้ตรงกับของเรา เช่น:</p> <ul> <li><code>ACTUAL_BASE_URL=https://actual-budget.mydomain.com</code></li> <li><code>ACTUAL_SERVER_HOSTNAME=actual-budget.mydomain.com</code></li> <li><code>TRUSTED_PROXIES</code> (ใครที่เรายอมให้ผ่าน proxy ได้)</li> </ul> </li> <li> <p>นอกจากนี้ยังต้องไปแก้ใน config ของ Nginx (<code>default.conf</code>) ให้ใช้โดเมนของเราจริง ๆ ด้วย เพื่อให้เวลามีคนพิมพ์ <code>https://actual-budget.mydomain.com</code> ระบบจะรู้จักและส่งไปหา container ที่ถูกต้อง</p> </li> </ol> <p>พูดง่าย ๆ ก็คือ ขั้นตอนนี้คือการ <strong>จัดห้อง + ตั้งป้ายชื่อห้อง</strong> ว่า “อันนี้ห้องครัวนะ, อันนี้ห้องนั่งเล่นนะ” เพื่อให้ระบบทั้งหมดมันสื่อสารกันถูกต้อง</p> <p>พอเราทำ config เสร็จเรียบร้อยแล้ว ก็เหมือนกับบ้านที่พร้อมจะขนเฟอร์นิเจอร์ (service จริง) เข้ามาวางแล้วครับ</p> <h2 id="3-1-architecture-overview-cloudflare-nginx-actual-budget">3.1 Architecture Overview: Cloudflare + Nginx + Actual Budget<a class="zola-anchor" href="#3-1-architecture-overview-cloudflare-nginx-actual-budget" aria-label="Anchor link for: 3-1-architecture-overview-cloudflare-nginx-actual-budget" style="visibility: hidden;"></a> </h2> <p>ก่อนที่เราจะไปขอ Certificate จาก Cloudflare ผมอยากชวนมาดู <strong>ภาพรวมการทำงาน</strong> ของระบบนี้กันก่อนครับ จะได้เข้าใจว่า Nginx มีหน้าที่อะไร ทำไมต้องอยู่ตรงกลางระหว่าง Cloudflare กับ Actual Budget</p> <p>ลองนึกภาพเป็นอาคารสำนักงานหนึ่งหลังที่มี <strong>รปภ.</strong> (Cloudflare) ยืนอยู่หน้าประตูใหญ่ ใครจะเข้ามาในตึกก็ต้องผ่านรปภ.ก่อน ตรวจบัตร ตรวจความปลอดภัย แล้วถ้าไม่มีปัญหา ถึงจะปล่อยให้เข้าไปในตัวตึก</p> <p>ในโลกของเราก็คล้าย ๆ กันครับ</p> <ul> <li><strong>User</strong> → คือคนที่เดินเข้ามาในตึก ก็คือผู้ใช้ที่เปิดเว็บ <code>https://actual-budget.mydomain.com</code></li> <li><strong>Cloudflare Proxy</strong> → คือรปภ. ด่านแรก คอยตรวจสอบ request ว่ามาจาก bot หรือเปล่า, มี DDoS หรือเปล่า, และช่วย terminate TLS แรกให้</li> <li><strong>Nginx (บน VM)</strong> → คือพนักงานต้อนรับในอาคาร ที่คอยรับ request ต่อจาก Cloudflare แล้วกระจายงานไปยังห้องต่าง ๆ ในตึก (service ภายใน VM)</li> <li><strong>Actual Budget Container</strong> → ก็คือห้องทำงานจริง ๆ ข้างในตึก ที่คอยประมวลผลและตอบกลับ</li> </ul> <p>ดังนั้น flow ของการสื่อสารจะเป็นแบบนี้ครับ:</p> <p><img src="https://thadaw.com/posts/ep2-setup-actual-budget-vm-docker-nginx-cloudflare/architecture.jpg" alt="" /></p> <ul> <li>ผู้ใช้เชื่อมต่อแบบ HTTPS ปลอดภัยมาถึง Cloudflare</li> <li>Cloudflare เปิด connection ใหม่ไปหา VM ผ่าน HTTPS อีกรอบ โดยเช็ก certificate ของ Nginx (ซึ่งเราจะใช้ Origin CA ที่ Cloudflare ออกให้)</li> <li>Nginx ทำหน้าที่เป็น reverse proxy → รับ request แล้วส่งต่อไปยัง container ของ Actual Budget ที่รันอยู่ใน Docker</li> </ul> <p><strong>Key Point:</strong> Nginx ไม่ได้ทำงานแทน Cloudflare แต่ทำหน้าที่เป็น <strong>“ฝั่งรับ”</strong> ของ certificate ที่ Cloudflare ไว้ใจ และช่วย forward traffic ไปยังแอปของเราอย่างถูกต้อง</p> <p>แบบนี้เวลาเราไปขอ Cloudflare Origin Certificate ผู้อ่านจะเข้าใจทันทีว่ามันไม่ใช่การขอ cert มาแปะมั่ว ๆ แต่คือการ “ทำกุญแจบ้าน” ที่ Cloudflare และ Nginx จะใช้ในการเชื่อมต่อกันครับ</p> <h2 id="4-kh-cloudflare-origin-certificate">4. ขอ Cloudflare Origin Certificate<a class="zola-anchor" href="#4-kh-cloudflare-origin-certificate" aria-label="Anchor link for: 4-kh-cloudflare-origin-certificate" style="visibility: hidden;"></a> </h2> <p>โอเคครับ พอเราเข้าใจ Architecture แล้วว่า Cloudflare → Nginx → Actual Budget มันเชื่อมกันยังไง สิ่งสำคัญถัดมาก็คือ <strong>“ทำให้ Cloudflare เชื่อมั่นใน Nginx ของเรา”</strong></p> <p>โดยปกติแล้ว ถ้าเราอยากให้เซิร์ฟเวอร์มี HTTPS เรามีสองทางเลือก:</p> <ol> <li> <p><strong>ใช้ Certificate ทั่วไปจาก CA</strong></p> <ul> <li>อาจจะเป็นฟรีอย่าง <strong>Let’s Encrypt</strong> หรือแบบเสียตังค์จากผู้ให้บริการอย่าง DigiCert, Sectigo ฯลฯ</li> <li>จุดเด่นคือ cert แบบนี้ <strong>browser ทั่วไปก็เชื่อถือได้</strong> เวลาผู้ใช้เข้าเว็บตรงมาที่ origin (ไม่ผ่าน Cloudflare) ก็จะไม่เจอ warning ใด ๆ</li> <li>ข้อเสียคือ Let’s Encrypt อายุสั้น (90 วัน) ต้องต่ออายุเรื่อย ๆ ส่วน cert ที่เสียเงินก็แพงกว่า</li> </ul> </li> <li> <p><strong>ใช้ Cloudflare Origin Certificate</strong></p> <ul> <li>Cloudflare ออกให้โดยตรงเพื่อใช้ระหว่าง <strong>Cloudflare ↔ Origin Server (Nginx/VM)</strong> เท่านั้น</li> <li>อายุยาวมาก (default 15 ปี) หมายความว่าเราไม่ต้องปวดหัวคอย renew บ่อย ๆ</li> <li>แต่ cert แบบนี้ <strong>browser ปกติจะไม่เชื่อ</strong> ถ้าเข้าเว็บตรงไปที่ origin IP (จะขึ้น warning) → เพราะมันออกมาเพื่อให้ Cloudflare ใช้ validate กับ origin โดยเฉพาะ</li> <li>ซึ่งก็โอเคอยู่แล้ว เพราะผู้ใช้จริงจะต้องเข้าผ่าน Cloudflare Proxy เสมอ</li> </ul> </li> </ol> <p>พูดง่าย ๆ เลยก็คือ:</p> <ul> <li>ถ้าอยากให้ <strong>คนกับ browser เชื่อ</strong> → ใช้ Let’s Encrypt / CA ปกติ</li> <li>ถ้าอยากให้ <strong>Cloudflare เชื่อ</strong> (สำหรับ Full Strict) → ใช้ <strong>Origin CA</strong></li> </ul> <p>และในโปรเจกต์ Actual Budget ของเรา เนื่องจากผู้ใช้ทุกคนจะวิ่งผ่าน Cloudflare อยู่แล้ว เราก็เลือกใช้ <strong>Origin Cert</strong> เพื่อความสบายใจและลดภาระการต่ออายุครับ</p> <h3 id="khant-nkaarkh-origin-cert">ขั้นตอนการขอ Origin Cert<a class="zola-anchor" href="#khant-nkaarkh-origin-cert" aria-label="Anchor link for: khant-nkaarkh-origin-cert" style="visibility: hidden;"></a> </h3> <ol> <li> <p>เข้าไปที่ <strong>Cloudflare Dashboard → SSL/TLS → Origin Server → Create Certificate</strong></p> </li> <li> <p>เลือก hostname ของเรา เช่น <code>actual-budget.mydomain.com</code></p> </li> <li> <p>เลือก key type: RSA</p> </li> <li> <p>เลือก validity: default (15 ปี)</p> </li> <li> <p>Cloudflare จะสร้างไฟล์มาให้สองอัน:</p> <ul> <li><strong>Origin Certificate</strong> → เก็บเป็น <code>origin.crt</code></li> <li><strong>Private Key</strong> → เก็บเป็น <code>origin.key</code></li> </ul> </li> </ol> <p>จากนั้นเราก็จะเอาไฟล์สองตัวนี้ไปใส่ใน Nginx เพื่อให้ Cloudflare เชื่อมต่อเข้ามาแบบ Full Strict ได้อย่างปลอดภัยครับ</p> <h2 id="5-tangkhaa-nginx-reverse-proxy">5. ตั้งค่า Nginx (Reverse Proxy)<a class="zola-anchor" href="#5-tangkhaa-nginx-reverse-proxy" aria-label="Anchor link for: 5-tangkhaa-nginx-reverse-proxy" style="visibility: hidden;"></a> </h2> <p>ตอนนี้เรามี VM (ที่ดิน), Docker (บ้านสำเร็จรูป), และ Origin Certificate (กุญแจที่ Cloudflare ออกให้) เรียบร้อยแล้ว สิ่งที่ขาดไม่ได้เลยก็คือ <strong>“พนักงานต้อนรับ”</strong> ที่คอยรับแขกทุกคนที่เดินเข้ามาในตึก → นั่นก็คือ <strong>Nginx</strong> ครับ</p> <p>Nginx ทำหน้าที่เป็น <strong>Reverse Proxy</strong> ก็คือเวลามี request มาจาก Cloudflare → Nginx จะเป็นคนแรกที่รับ จากนั้นมันจะตรวจว่า request ไปไหน แล้วส่งต่อให้ service ข้างใน (Actual Budget container) อีกที</p> <p>ลองนึกภาพง่าย ๆ:</p> <ul> <li>Cloudflare = รปภ. หน้าตึก</li> <li>Nginx = เคาน์เตอร์พนักงานต้อนรับ</li> <li>Actual Budget = ห้องทำงานจริง ๆ ที่อยู่ด้านใน</li> </ul> <p>เวลาคน (User) เดินเข้ามา → Cloudflare ตรวจบัตรแล้วปล่อยผ่าน → พนักงานต้อนรับ (Nginx) จะเป็นคนบอกว่า “อ๋อ คุณจะไปห้อง Actual Budget ใช่ไหม? เชิญทางนี้เลย” แล้วส่ง request เข้าห้องถูกต้อง</p> <hr /> <h3 id="config-nginx">Config Nginx<a class="zola-anchor" href="#config-nginx" aria-label="Anchor link for: config-nginx" style="visibility: hidden;"></a> </h3> <p>เราจะให้ Nginx ฟังทั้งพอร์ต 80 (HTTP) และ 443 (HTTPS)</p> <ul> <li>พอร์ต 80: แค่ redirect ทุก request ไปที่ HTTPS (เพื่อบังคับเข้ารหัสเสมอ)</li> <li>พอร์ต 443: ฟังด้วย SSL (ใช้ Origin Cert ที่ Cloudflare ออกให้) แล้วทำ proxy pass ไปยัง Actual Budget container</li> </ul> <p>ตัวอย่าง config (แบบย่อ):</p> <pre data-lang="nginx" class="language-nginx z-code"><code class="language-nginx" data-lang="nginx"><span class="z-text z-plain">server { </span><span class="z-text z-plain"> listen 80; </span><span class="z-text z-plain"> server_name actual-budget.mydomain.com; </span><span class="z-text z-plain"> return 301 https://$host$request_uri; </span><span class="z-text z-plain">} </span><span class="z-text z-plain"> </span><span class="z-text z-plain">server { </span><span class="z-text z-plain"> listen 443 ssl http2; </span><span class="z-text z-plain"> server_name actual-budget.mydomain.com; </span><span class="z-text z-plain"> </span><span class="z-text z-plain"> ssl_certificate /etc/nginx/certs/actual-budget.mydomain.com/origin.crt; </span><span class="z-text z-plain"> ssl_certificate_key /etc/nginx/certs/actual-budget.mydomain.com/origin.key; </span><span class="z-text z-plain"> </span><span class="z-text z-plain"> ssl_protocols TLSv1.2 TLSv1.3; </span><span class="z-text z-plain"> ssl_ciphers HIGH:!aNULL:!MD5; </span><span class="z-text z-plain"> </span><span class="z-text z-plain"> location / { </span><span class="z-text z-plain"> proxy_pass http://actual:5006; </span><span class="z-text z-plain"> proxy_set_header Host $host; </span><span class="z-text z-plain"> proxy_set_header X-Real-IP $remote_addr; </span><span class="z-text z-plain"> proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; </span><span class="z-text z-plain"> proxy_set_header X-Forwarded-Proto https; </span><span class="z-text z-plain"> } </span><span class="z-text z-plain">} </span></code></pre> <p>ในที่นี้ <code>proxy_pass http://actual:5006;</code> หมายถึง Nginx จะส่งต่อ traffic ไปยัง container ของ Actual Budget ที่รันบนพอร์ต 5006</p> <h3 id="key-point-thiit-ngekhaaaicch">Key Point ที่ต้องเข้าใจ<a class="zola-anchor" href="#key-point-thiit-ngekhaaaicch" aria-label="Anchor link for: key-point-thiit-ngekhaaaicch" style="visibility: hidden;"></a> </h3> <ul> <li><strong>Cloudflare → Nginx</strong> เชื่อมกันด้วย HTTPS (Origin Cert)</li> <li><strong>Nginx → Actual Budget Container</strong> ใช้ HTTP ธรรมดาภายใน VM ก็พอ เพราะมันวิ่งในเครือข่าย local อยู่แล้ว</li> <li>User ไม่มีทางเข้ามาถึง Nginx โดยตรง ต้องวิ่งผ่าน Cloudflare เสมอ → ทำให้ปลอดภัย</li> </ul> <p>พอ config Nginx เสร็จแล้วก็เหมือนเราได้ “พนักงานต้อนรับที่พร้อมเปิดตึก” ไว้เรียบร้อย รอเพียงแค่ยกของ (config และ cert) ขึ้นไปไว้บน VM แล้ว start ระบบจริง</p> <h2 id="5-1-authenticated-origin-pulls-ephimrpph-s-ngchan">5.1 Authenticated Origin Pulls (เพิ่มรปภ. สองชั้น)<a class="zola-anchor" href="#5-1-authenticated-origin-pulls-ephimrpph-s-ngchan" aria-label="Anchor link for: 5-1-authenticated-origin-pulls-ephimrpph-s-ngchan" style="visibility: hidden;"></a> </h2> <p>ถึงตรงนี้เราจะเห็นว่า Nginx ของเรามี <strong>Origin Certificate</strong> แล้ว Cloudflare ก็เชื่อมต่อมาด้วย HTTPS แบบ Full Strict ได้ แต่ในบางกรณี เรายังอาจกังวลอยู่ว่า… “แล้วถ้ามีใครสักคนพยายามข้าม Cloudflare แล้วยิง HTTPS ตรงเข้ามาที่ Nginx โดยตรงล่ะ?”</p> <p>ปกติแล้วมันอาจจะยังต่อได้ (ถ้ารู้ IP VM ตรง ๆ) เพราะ Origin Cert ถูกออกมาให้ Cloudflare ใช้ แต่ browser ปกติไม่รู้จักก็จะขึ้น warning → อย่างไรก็ตาม ถ้าเป็น attacker ที่บังคับข้าม Cloudflare เข้ามา Nginx ก็อาจจะยังเปิดรับอยู่</p> <p>ตรงนี้แหละครับที่ <strong>Authenticated Origin Pulls</strong> เข้ามาแก้ปัญหา</p> <h3 id="mankhuue-aair">มันคืออะไร?<a class="zola-anchor" href="#mankhuue-aair" aria-label="Anchor link for: mankhuue-aair" style="visibility: hidden;"></a> </h3> <ul> <li>Cloudflare จะส่ง <strong>client certificate</strong> ของตัวเองมาพร้อมกับการเชื่อมต่อ HTTPS ทุกครั้ง</li> <li>Nginx (ฝั่ง origin) จะตรวจสอบ cert นั้นว่าเป็นของ Cloudflare จริงหรือเปล่า</li> <li>ถ้าไม่ใช่ → ปฏิเสธ connection ทันที</li> </ul> <p>พูดง่าย ๆ ก็คือ เพิ่มการตรวจว่า <strong>“คนที่เข้ามาเป็น Cloudflare จริง ๆ นะ ไม่ใช่ใครก็ได้ที่ต่อ HTTPS มาหาเรา”</strong></p> <h3 id="nginx-config-esrim">Nginx Config (เสริม)<a class="zola-anchor" href="#nginx-config-esrim" aria-label="Anchor link for: nginx-config-esrim" style="visibility: hidden;"></a> </h3> <p>นอกจาก ssl_certificate / ssl_certificate_key ของ Origin Cert แล้ว เราเพิ่ม config นี้เข้าไป:</p> <pre data-lang="nginx" class="language-nginx z-code"><code class="language-nginx" data-lang="nginx"><span class="z-text z-plain">ssl_client_certificate /etc/nginx/certs/cloudflare/origin-pull-ca.pem; </span><span class="z-text z-plain">ssl_verify_client on; </span></code></pre> <ul> <li><code>origin-pull-ca.pem</code> คือ certificate ของ Cloudflare ที่เราโหลดมาจากหน้า Origin Pulls ของ Cloudflare</li> <li><code>ssl_verify_client on;</code> บังคับให้ Nginx ยอมคุยเฉพาะกับ client (Cloudflare) ที่ถือ cert ตัวนี้เท่านั้น</li> </ul> <h3 id="epriiybethiiybaihehnphaaph">เปรียบเทียบให้เห็นภาพ<a class="zola-anchor" href="#epriiybethiiybaihehnphaaph" aria-label="Anchor link for: epriiybethiiybaihehnphaaph" style="visibility: hidden;"></a> </h3> <ul> <li>เดิมทีมีแค่ <strong>กุญแจล็อกประตู (Origin Cert)</strong> → Cloudflare มีกุญแจไขเข้ามาได้</li> <li>แต่ตอนนี้เพิ่ม <strong>ตรวจบัตรพนักงาน (Authenticated Pull Cert)</strong> → ต่อให้ใครลอกกุญแจเลียนแบบมา แต่ถ้าไม่มีบัตรที่ Cloudflare ออกจริง ก็เข้าไม่ได้</li> </ul> <p>สรุปคือ ถ้าเราเปิด <strong>Authenticated Origin Pulls</strong> เราจะมั่นใจได้เลยว่า <strong>ทุก request ที่ถึง Nginx ต้องมาจาก Cloudflare เท่านั้น</strong> ไม่ใช่ attacker ที่พยายามเข้าตรง ๆ</p> <h2 id="6-deploy-configuration-aipthii-vm">6. Deploy Configuration ไปที่ VM<a class="zola-anchor" href="#6-deploy-configuration-aipthii-vm" aria-label="Anchor link for: 6-deploy-configuration-aipthii-vm" style="visibility: hidden;"></a> </h2> <p>โอเคครับ ตอนนี้เรามีทุกอย่างครบแล้ว ทั้ง <strong>Docker/Compose</strong> (บ้านสำเร็จรูป), <strong>Nginx config</strong> (พนักงานต้อนรับ), และ <strong>Origin Certificate</strong> (กุญแจบ้าน) รวมถึงถ้าอยากปลอดภัยสุด ๆ ก็มี <strong>Authenticated Origin Pulls</strong> (ตรวจบัตรพนักงาน) …ทีนี้ก็ถึงเวลาขนของจริงไปลงบน VM ของเราแล้ว</p> <p>การ deploy ตรงนี้ก็เปรียบเหมือนกับการ <strong>ย้ายเฟอร์นิเจอร์และของใช้ทั้งหมดเข้าบ้านใหม่</strong> นั่นแหละครับ เราจะเอาไฟล์สำคัญ ๆ เช่น:</p> <ul> <li><code>.env</code> (ค่าตั้งต่าง ๆ ของ Actual Budget)</li> <li><code>docker-compose.yml</code> (แปลนบ้าน)</li> <li><code>nginx/conf.d/</code> (พนักงานต้อนรับ)</li> <li><code>origin.crt</code> + <code>origin.key</code> (กุญแจบ้าน)</li> </ul> <p>แพ็กทั้งหมดขึ้นรถบรรทุก (deployment script) แล้วส่งไปยัง VM ผ่าน SSH</p> <hr /> <h3 id="flow-kh-ngkaar-deploy">Flow ของการ Deploy<a class="zola-anchor" href="#flow-kh-ngkaar-deploy" aria-label="Anchor link for: flow-kh-ngkaar-deploy" style="visibility: hidden;"></a> </h3> <ol> <li><strong>ตรวจสอบไฟล์ config ฝั่งเราให้เรียบร้อยก่อน</strong> → เหมือนตรวจเช็กว่าของครบมั้ยก่อนย้ายบ้าน</li> <li><strong>ใช้ script ส่งไฟล์ขึ้น VM ผ่าน SCP/rsync</strong> → เหมือนขนเฟอร์นิเจอร์ขึ้นรถแล้วไปส่ง</li> <li><strong>เซ็ต permission บน cert</strong> → เพื่อให้กุญแจบ้าน (origin.key) ถูกเก็บอย่างปลอดภัย มีแค่ Nginx อ่านได้</li> <li><strong>วางไฟล์ทั้งหมดลงที่ directory ของ VM</strong> เช่น <code>/home/ubuntu/actual</code></li> <li><strong>SSH เข้า VM เพื่อตรวจสอบอีกที</strong> ว่าของมาถึงครบ พร้อมใช้งาน</li> </ol> <hr /> <h3 id="taw-yaangkhamsang-deploy">ตัวอย่างคำสั่ง Deploy<a class="zola-anchor" href="#taw-yaangkhamsang-deploy" aria-label="Anchor link for: taw-yaangkhamsang-deploy" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">REMOTE_HOST</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell">203.0.113.10</span> <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">REMOTE_USER</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell">ubuntu</span> <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">REMOTE_DIR</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell">/home/ubuntu/actual</span> <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">SSH_KEY</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.ssh/id_ed25519</span> <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">./deploy-config.sh</span></span> </span></code></pre> <p>script นี้จะช่วยเรา validate ไฟล์, copy ขึ้น VM, เซ็ตสิทธิ์ไฟล์ cert ให้เรียบร้อย แล้วสรุปขั้นตอนต่อไปให้</p> <p>พอเสร็จขั้นตอนนี้ เราจะได้ “บ้านพร้อมอยู่” แล้วครับ เหลือแค่สั่งเปิดไฟ (start service) ทุกอย่างก็พร้อมทำงานจริง 🎉</p> <h2 id="7-tangkhaa-dns-bn-cloudflare">7. ตั้งค่า DNS บน Cloudflare<a class="zola-anchor" href="#7-tangkhaa-dns-bn-cloudflare" aria-label="Anchor link for: 7-tangkhaa-dns-bn-cloudflare" style="visibility: hidden;"></a> </h2> <p>โอเคครับ ถึงตอนนี้บ้านของเราก็พร้อมแล้ว ทั้งโครงสร้างภายใน (Docker + Actual Budget), พนักงานต้อนรับ (Nginx), และกุญแจบ้าน (Origin Cert) …แต่ปัญหาคือคนทั่วไป <strong>ยังไม่รู้ว่าบ้านเราอยู่ที่ไหน</strong></p> <p>ตรงนี้เองที่ <strong>DNS</strong> เข้ามามีบทบาทครับ มันก็เหมือน <strong>สมุดหน้าเหลือง / Google Maps</strong> ที่บอกว่า “ถ้าอยากไปบ้านนี้ ให้ตามพิกัดนี้ไปนะ”</p> <p>ใน Cloudflare เราจะต้องเข้าไปเพิ่ม DNS record ให้ domain/subdomain ของเรา เช่น:</p> <ul> <li><code>actual-budget.mydomain.com</code> → ชี้ไปที่ <strong>IP ของ VM</strong> ของเรา</li> </ul> <h3 id="khant-nain-cloudflare">ขั้นตอนใน Cloudflare<a class="zola-anchor" href="#khant-nain-cloudflare" aria-label="Anchor link for: khant-nain-cloudflare" style="visibility: hidden;"></a> </h3> <ol> <li> <p>เข้า <strong>Cloudflare Dashboard → DNS</strong></p> </li> <li> <p>เพิ่ม A record:</p> <ul> <li>Name: <code>actual-budget</code></li> <li>Value: <code>&lt;VM_PUBLIC_IP&gt;</code></li> <li>Proxy: เปิดเป็น <strong>Proxied (เมฆสีส้ม)</strong> ☁️</li> </ul> </li> <li> <p>ไปที่ <strong>SSL/TLS → Overview</strong> แล้วเลือก <strong>Full (Strict)</strong> เพื่อให้ Cloudflare บังคับเชื่อมกับ Origin เฉพาะที่มี cert ถูกต้องเท่านั้น</p> </li> <li> <p>(Optional) เปิด <strong>Authenticated Origin Pulls</strong> ถ้าเรา config ไว้ที่ Nginx แล้ว</p> </li> </ol> <h3 id="phaaphrwm-flow-hlangtangkhaa-dns">ภาพรวม Flow หลังตั้งค่า DNS<a class="zola-anchor" href="#phaaphrwm-flow-hlangtangkhaa-dns" aria-label="Anchor link for: phaaphrwm-flow-hlangtangkhaa-dns" style="visibility: hidden;"></a> </h3> <pre class="z-code"><code><span class="z-text z-plain">[ User ] → actual-budget.mydomain.com </span><span class="z-text z-plain"> ↓ (DNS lookup by Cloudflare) </span><span class="z-text z-plain">[ Cloudflare Proxy ] --HTTPS (Origin Cert)--&gt; [ Nginx @ VM ] → [ Actual Budget ] </span></code></pre> <p>พอถึงตรงนี้ ทุกอย่างเริ่มเข้าที่เข้าทางแล้วครับ ผู้ใช้ก็สามารถพิมพ์ <code>https://actual-budget.mydomain.com</code> แล้วระบบจะวิ่งผ่าน Cloudflare → Nginx → Container ได้อย่างปลอดภัย 🔒</p> <h2 id="8-start-service-test">8. Start Service + Test<a class="zola-anchor" href="#8-start-service-test" aria-label="Anchor link for: 8-start-service-test" style="visibility: hidden;"></a> </h2> <p>โอเคครับ ตอนนี้ทุกอย่างเราขนเข้าบ้านเรียบร้อยแล้ว ไม่ว่าจะเป็นโครงสร้าง (Docker), พนักงานต้อนรับ (Nginx), กุญแจบ้าน (Origin Cert), และบอกพิกัดบ้านบนแผนที่ (DNS) …ทีนี้ก็ถึงเวลาสำคัญที่สุด คือ <strong>เปิดไฟบ้านให้ใช้งานจริง</strong> ครับ 💡</p> <p>บน VM ของเรา เราเพียงเข้าไปที่ directory ที่เก็บไฟล์ทั้งหมด (เช่น <code>/home/ubuntu/actual</code>) แล้วสั่ง:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">docker</span></span><span class="z-meta z-function-call z-arguments z-shell"> compose up<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>d</span></span> </span></code></pre> <p>จากนั้น Docker ก็จะยกทุก container ขึ้นมาพร้อมกัน ทั้ง Actual Budget, Nginx, และ service ที่เกี่ยวข้อง</p> <h3 id="trwcchs-bwaarabbthamngaancchring">ตรวจสอบว่าระบบทำงานจริง<a class="zola-anchor" href="#trwcchs-bwaarabbthamngaancchring" aria-label="Anchor link for: trwcchs-bwaarabbthamngaancchring" style="visibility: hidden;"></a> </h3> <ol> <li>ใช้ <code>docker ps</code> → เหมือนเดินดูว่าทุกห้องในบ้านมีไฟติดครบ</li> <li>ใช้ <code>docker logs -f nginx</code> → ดูว่าพนักงานต้อนรับ (Nginx) ตอบสนองปกติไหม</li> <li>ใช้ <code>curl -I https://actual-budget.mydomain.com</code> → ทดลอง “กดกริ่งบ้าน” จากข้างนอก</li> </ol> <p>ถ้าได้ status <code>200 OK</code> ก็แปลว่าบ้านเราเปิดรับแขกแล้วครับ 🎉</p> <h3 id="epidebraawech-r">เปิดเบราว์เซอร์<a class="zola-anchor" href="#epidebraawech-r" aria-label="Anchor link for: epidebraawech-r" style="visibility: hidden;"></a> </h3> <p>พิมพ์ใน browser:</p> <p>👉 <code>https://actual-budget.mydomain.com</code></p> <p>ถ้าทุกอย่างเรียบร้อย คุณจะเจอหน้าเว็บ Actual Budget พร้อมกุญแจเขียว 🔒 โผล่ขึ้นมา → แปลว่า TLS ทำงานครบทั้งเส้นทาง (User → Cloudflare → Nginx → Container) แล้ว</p> <p>พูดง่าย ๆ เลยก็คือ จาก <strong>VM เปล่า ๆ</strong> เราก็เปลี่ยนมันเป็น <strong>เว็บแอปที่พร้อมใช้งานจริง</strong> ได้สำเร็จแล้วครับ 🚀</p> <h2 id="9-backup-strategy">9. Backup Strategy<a class="zola-anchor" href="#9-backup-strategy" aria-label="Anchor link for: 9-backup-strategy" style="visibility: hidden;"></a> </h2> <p>พอเรามีบ้านใหม่เสร็จสรรพ เปิดไฟใช้งานจริงได้แล้ว สิ่งหนึ่งที่มักจะถูกลืม แต่สำคัญไม่แพ้กันก็คือ… <strong>การทำกุญแจสำรองและประกันบ้าน</strong> ในโลกของระบบ นั่นก็คือ <strong>การทำ Backup</strong> ครับ</p> <p>ลองนึกภาพดูว่า วันหนึ่งถ้าไฟดับ ฮาร์ดดิสก์พัง หรือเราเผลอลบไฟล์ผิดไป …เราจะอยากมีวิธี “ย้อนเวลา” กลับไปยังสภาพที่ระบบเคยใช้งานได้ปกติใช่ไหมครับ การทำ backup จึงเป็นเหมือนการเตรียม <strong>ประตูหนีไฟ</strong> เอาไว้ให้เราอุ่นใจ</p> <h3 id="singthiikhwr-backup">สิ่งที่ควร Backup<a class="zola-anchor" href="#singthiikhwr-backup" aria-label="Anchor link for: singthiikhwr-backup" style="visibility: hidden;"></a> </h3> <ol> <li> <p><strong>ข้อมูลผู้ใช้ + งบการเงิน</strong></p> <ul> <li>เก็บอยู่ใน directory <code>./actual-data</code></li> <li>ตรงนี้คือหัวใจของ Actual Budget เลย เพราะมันบันทึกข้อมูลทั้งหมดที่ผู้ใช้กรอก</li> </ul> </li> <li> <p><strong>SSL Certificates (origin.crt + origin.key)</strong></p> <ul> <li>แม้ว่าจะขอใหม่จาก Cloudflare ได้ แต่การเก็บสำรองไว้จะช่วยให้เรา restore ได้เร็วขึ้น</li> </ul> </li> <li> <p><strong>ไฟล์ Config สำคัญ</strong></p> <ul> <li><code>.env</code>, <code>docker-compose.yml</code>, <code>nginx/conf.d/*</code></li> <li>เป็นเหมือนคู่มือบ้าน ถ้าไฟล์พวกนี้หาย ระบบอาจจะยังสร้างบ้านใหม่ได้ แต่จะต้องใช้เวลา setup นานขึ้น</li> </ul> </li> </ol> <h3 id="aenwthaangkaar-backup">แนวทางการ Backup<a class="zola-anchor" href="#aenwthaangkaar-backup" aria-label="Anchor link for: aenwthaangkaar-backup" style="visibility: hidden;"></a> </h3> <ul> <li>ตั้ง cron job บน VM → copy <code>./actual-data</code> ออกไปยัง storage ภายนอก</li> <li>หรือใช้ tool พวก rsync / restic เพื่อ sync ข้อมูลเป็นระยะ ๆ</li> <li>เก็บไฟล์สำรองไว้ใน cloud storage อื่น เช่น Azure Blob, S3, หรือแม้แต่ Google Drive ก็ได้</li> </ul> <p>พูดง่าย ๆ ก็คือ Backup = <strong>กุญแจสำรอง</strong> + <strong>ประกันบ้าน</strong> ทำให้มั่นใจว่า ต่อให้เกิดอะไรขึ้นกับ VM หรือ container …ข้อมูลการเงินของเราก็ยังไม่หายไปไหน</p> <h2 id="10-conclusion">10. Conclusion<a class="zola-anchor" href="#10-conclusion" aria-label="Anchor link for: 10-conclusion" style="visibility: hidden;"></a> </h2> <p>จากตอนแรกที่เราเริ่มต้นด้วย <strong>VM เปล่า ๆ</strong> เหมือนซื้อที่ดินโล่ง ๆ มาหนึ่งแปลง จนถึงตอนนี้เราสามารถสร้างบ้านที่พร้อมอยู่จริงได้สำเร็จแล้ว 🎉</p> <ul> <li>เราเลือกใช้ <strong>VM</strong> เพราะ Actual Budget ใช้ SQLite เป็นฐานข้อมูลที่ต้องการ native filesystem → Managed Service อย่าง Azure App Service ไม่ตอบโจทย์</li> <li>เราติดตั้ง <strong>Docker &amp; Docker Compose</strong> เหมือนยกบ้านสำเร็จรูปมาลง → ทำให้จัดการ service ได้ง่ายและยืดหยุ่น</li> <li>เรา config <strong>Environment และ Nginx</strong> → ทำหน้าที่เป็นพนักงานต้อนรับ คอยจัดการ traffic ที่วิ่งเข้ามา</li> <li>เราขอ <strong>Cloudflare Origin Certificate</strong> → เป็นกุญแจสำคัญที่ทำให้ Cloudflare ยอมเชื่อมต่อกับ origin ได้แบบ Full (Strict)</li> <li>เราเปิด <strong>Authenticated Origin Pulls</strong> → เป็นเหมือนการตรวจบัตรพนักงานที่มั่นใจได้ว่า request ที่เข้ามาต้องผ่าน Cloudflare จริง ๆ</li> <li>เราตั้งค่า <strong>DNS บน Cloudflare</strong> → เพื่อบอกโลกว่าเว็บเราอยู่ตรงไหน</li> <li>สุดท้าย เรา start service ขึ้นมา และปิดท้ายด้วยการทำ <strong>Backup Strategy</strong> ให้ชีวิตปลอดภัยขึ้นอีกขั้น</li> </ul> <p>ทั้งหมดนี้ก็คือการเอาทฤษฎีจาก <strong>EP1</strong> ที่เราคุยกันเรื่อง TLS Flow และ Certificate มา <strong>ลงมือจริงใน EP2</strong> จนกลายเป็นเว็บแอปที่เปิดใช้งานได้จริงพร้อม HTTPS</p> <p>สำหรับผมแล้ว มันทำให้รู้สึกว่าเรื่อง SSL/TLS ที่แต่ก่อนเคยดูเป็น “หลุมดำ” เต็มไปด้วยศัพท์เทคนิคยาก ๆ …พอเราแยกเป็นสถานการณ์, วาด flow ให้ง่าย, แล้วลองลงมือทำจริง มันก็ไม่ได้ยากเกินไปเลยครับ ✨</p> <p>และนี่ก็คือ <strong>Actual Budget + Nginx + Cloudflare Origin Cert</strong> ที่ผมอยากเล่าให้ฟังในตอนนี้</p> 2025-08-23T00:00:00+00:00 2025-08-23T00:00:00+00:00 https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/ <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Series SSL&#x2F;TLS กับ Cloudflare</strong></p> <ul> <li>EP 1: เข้าใจ SSL/TLS แบบง่าย ๆ ผ่าน Cloudflare และ Azure (บทความนี้)</li> <li>EP 2: <a href="/posts/ep2-setup-actual-budget-vm-docker-nginx-cloudflare/">ลงมือจริง: Setup Actual Budget บน VM ด้วย Docker, Nginx และ Cloudflare</a></li> </ul> </div> </blockquote> <p>สวัสดีครับ วันนี้อยากมาเล่าเรื่อง <strong>SSL/TLS หรือ HTTPS</strong> กันสักหน่อย คือหลาย ๆ คน (รวมถึงตัวผมเองเมื่อก่อน) มักจะรู้สึกว่า SSL นี่มันเหมือน <strong>หลุมดำ</strong> เลยครับ ไม่รู้ว่ามันทำงานยังไง เห็นแค่พอเปิดเว็บแล้วมี “กุญแจสีเขียว” โผล่มาในเบราว์เซอร์ ก็น่าจะโอเคแล้ว</p> <p>แต่พอถึงเวลาที่ต้อง <strong>setup จริง หรือ maintain จริงๆ</strong> … มันกลับไม่ง่ายเลย โดยเฉพาะการทำงานกับ <strong>certificate</strong> ที่ต้องต่ออายุ ต้องจัดการ key ต้องเข้าใจการ trust chain พอไม่เข้าใจก็กลายเป็นปัญหาที่มึนได้ง่าย ๆ</p> <p>เลยอยากเขียนบทความนี้มาเป็น <strong>สรุปแนวทางแบบเข้าใจง่าย ๆ</strong> ใช้ <strong>ตัวอย่างจริง</strong> ทั้ง Cloudflare และ Azure ที่หลายคนน่าจะคุ้นเคย และที่สำคัญ… จะมี <strong>diagram</strong> ให้เห็นภาพการทำงานด้วยครับ</p> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>สำหรับคนที่ใหม่กับ Azure</strong></p> <p>จริงๆ Azure ทั้ง 2 Service ที่ผมพูดถึงในบทความนี้ App Service และ Container App ค่อยข้างเข้าใจง่ายนะครับ โดยทั้งคู่เป็น PAAS (Platform as a Service) ที่เราไม่ต้องไปจัดการ VM เองเลย แค่ deploy code ขึ้นไป แล้ว Azure จะจัดการทุกอย่างให้เอง</p> <p>ถ้าใครสนใจผมเคยพูดเกี่ยวกับ Azure App Service ไว้ใน <a rel="nofollow noreferrer" href="https://www.youtube.com/watch?v=obtIYPkwm90">YouTube: Deploy Web App อย่างง่ายด้วย Azure App Service | Azure Note Series</a> ครับ</p> <p>และเคยพูดเรื่องของ Azure Container App ไว้ใน <a rel="nofollow noreferrer" href="https://youtu.be/RVb0gXZ6H2so">YouTube: Serverless container on Microsoft Azure | Azure Developer Day 2023</a> ครับ</p> <p>ซึ่ง Azure App Service จะมี Free Tier ให้ลองเล่นฟรี ๆ ได้เลย ส่วน Azure Container App สามารถ Scale to zero ได้ ทำให้ถ้าเราใช้ในโปรเจกต์เล็ก ๆ ก็จะประหยัดค่าใช้จ่ายได้มากครับ หรือ ไม่ค่อยมีคนใช้งาน ก็แทบไม่เสียค่าใช้จ่ายอะไรเลย</p> </div> </blockquote><h2 id="ssl-tls-khuue-aair">SSL/TLS คืออะไร<a class="zola-anchor" href="#ssl-tls-khuue-aair" aria-label="Anchor link for: ssl-tls-khuue-aair" style="visibility: hidden;"></a> </h2> <p>เวลาเราเข้าเว็บที่ขึ้นว่า <code>https://</code> หลายคนอาจจะรู้สึกว่า “อ๋อ ก็คือเว็บปลอดภัย” มีรูปกุญแจเล็ก ๆ โผล่มาตรง address bar แค่นั้น แต่จริง ๆ แล้วเบื้องหลังของเจ้าตัว HTTPS มันก็คือสิ่งที่เรียกว่า <strong>SSL/TLS</strong> นี่แหละครับ</p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/http-https-cert.jpg" alt="" /></p> <p>ลองนึกภาพว่าเรากำลังส่งจดหมายหากัน ถ้าเป็น HTTP ปกติ มันก็เหมือนเราเขียนจดหมายใส่กระดาษแล้วส่งไปตรง ๆ ใครดักกลางทางก็เปิดอ่านได้หมด แต่ถ้าเป็น HTTPS มันเหมือนเรายัดจดหมายนั้นใส่กล่องเหล็กที่มีกุญแจล็อกไว้ แล้วมอบกุญแจให้เฉพาะผู้รับเท่านั้นที่จะเปิดออกมาอ่านได้</p> <p>SSL (Secure Sockets Layer) และ TLS (Transport Layer Security) ก็คือ “กล่องเหล็กพร้อมกุญแจ” นี่เองครับ มันเป็นโปรโตคอลที่ทำหน้าที่เข้ารหัสข้อมูลระหว่าง <strong>ผู้ใช้</strong> กับ <strong>เซิร์ฟเวอร์</strong> ทำให้คนอื่น ๆ ที่พยายามดักดูระหว่างทาง ไม่สามารถอ่านหรือแก้ไขข้อมูลได้ง่าย ๆ</p> <p>แต่ไม่ใช่แค่เรื่องการเข้ารหัสเท่านั้นนะครับ อีกหน้าที่หนึ่งที่สำคัญมากของ SSL/TLS ก็คือ <strong>การยืนยันตัวตน (Authentication)</strong> ว่าเซิร์ฟเวอร์ที่เรากำลังคุยด้วยนั้นเป็น “ของจริง” ไม่ใช่เว็บปลอมที่ใครบางคนตั้งขึ้นมาเพื่อหลอกเรา ซึ่งหน้าที่ตรงนี้แหละที่ certificate เข้ามามีบทบาท เปรียบเหมือน “บัตรประชาชน” ของเว็บไซต์ที่ออกโดยหน่วยงานที่เชื่อถือได้ (CA – Certificate Authority)</p> <p>ดังนั้นเวลาที่เราบอกว่า “เปิดเว็บนี้แบบ HTTPS” จริง ๆ มันหมายความว่า เรากำลังเชื่อมต่อผ่าน TLS โดยมี certificate ที่คอยการันตีความน่าเชื่อถือ และ การเข้ารหัสข้อมูลครบถ้วน</p> <h2 id="sthaankaarnthiiecch-b-ykab-ssl-tls">สถานการณ์ที่เจอบ่อยกับ SSL/TLS<a class="zola-anchor" href="#sthaankaarnthiiecch-b-ykab-ssl-tls" aria-label="Anchor link for: sthaankaarnthiiecch-b-ykab-ssl-tls" style="visibility: hidden;"></a> </h2> <p>วันนี้ผมมี 2 สถานการณ์มาเล่าให้ฟังครับ ว่าในแต่ละสถานการณ์ เราจะจัดการกับ SSL/TLS ยังไงให้เหมาะสม</p> <p>โดยจริงๆ แล้วเราไม่จำเป็นต้องใช้ Cloudflare หรือ Azure ก็ได้นะครับ แต่ผมจะใช้ Cloudflare เป็นตัวอย่างของทั้ง DNS และ Proxy ที่หลายคนน่าจะคุ้นเคยกันดี ส่วน Azure ก็จะใช้เป็นตัวอย่างของ <strong>Managed Service</strong> และ <strong>Virtual Mahcine</strong> ที่หลายคนอาจจะเคยเจอ</p> <p>ซึ่งถ้าเราจะใช้ DNS Provider เจ้าอื่นก็ได้ครับ แต่ถ้าเราใช้ Cloudflare เค้าจะมีฟีเจอร์ Proxy ที่ช่วยเสริมความปลอดภัยให้เว็บของเราได้อีกเยอะเลย</p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/two-scenarios-overview.jpg" alt="two-scenarios-overview" /></p> <h2 id="sthaankaarnthii-1-aich-managed-service-yaang-azure-app-service-container-app">สถานการณ์ที่ 1: ใช้ Managed Service อย่าง Azure App Service / Container App<a class="zola-anchor" href="#sthaankaarnthii-1-aich-managed-service-yaang-azure-app-service-container-app" aria-label="Anchor link for: sthaankaarnthii-1-aich-managed-service-yaang-azure-app-service-container-app" style="visibility: hidden;"></a> </h2> <p>เวลาที่เราพูดถึง <strong>SSL/HTTPS</strong> หลายคนอาจนึกถึงการต้องไปขอ certificate เอง ต้องต่ออายุทุกปี ต้องกลัวว่าเดี๋ยววันนึง cert หมดอายุแล้วเว็บจะเข้าไม่ได้… แต่พอเรามาใช้พวก <strong>Managed Service</strong> อย่าง Azure App Service หรือ Azure Container App เนี่ย มันต่างออกไปเลยนะครับ</p> <p>ลองนึกภาพง่าย ๆ แบบนี้ครับ เรามี web app ตัวหนึ่ง เราเลือก deploy ไปไว้บน Azure App Service … พอเรากดปุ๊บ ตัว App Service นั้นมัน “แถม” HTTPS มาให้เราเลยโดยอัตโนมัติ เราไม่ต้องไปยุ่งกับการขอ cert ไม่ต้องมานั่งจัดการ renewal (ต่ออายุอัตโนมัติ) ไม่ต้องสนใจว่า CA ไหนจะหมดอายุเมื่อไร ทุกอย่าง Azure จัดการให้เสร็จสรรพ</p> <p>เหมือนคุณซื้อคอนโดแล้วในคอนโดมีระบบรักษาความปลอดภัยครบวงจร มีทั้งยาม กล้องวงจรปิด และคีย์การ์ดพร้อมเสร็จ คุณไม่ต้องไปจ้างยามเอง ไม่ต้องไปเดินติดกล้องเอง ทุกอย่างรวมอยู่ในค่าบริการแล้ว</p> <p>ทีนี้สมมติว่าเราจะเอา domain ของเราเองมาใช้ สมมติว่าเรามี <code>myapp.com</code> เราอาจจะเอาไปชี้ผ่าน <strong>Cloudflare</strong> สิ่งที่หลายคนจะเจอคือ Cloudflare เองมีโหมดให้เลือกว่าจะให้ทำงานเป็น <strong>DNS only</strong> หรือจะให้ทำงานในแบบ <strong>Proxy Mode</strong></p> <p>ถ้าดูตัวอย่างจาก Cloudflare Dashboard จะเป็นแบบนี้ครับ เราจะเห็นว่ามันมี <strong>DNS only</strong> กับ <strong>Proxied</strong> ให้เลือก ก็ขึ้นอยู่กับว่าเราต้องการให้ Cloudflare ทำหน้าที่แค่ไหน ซึ่งตรงนี้จะมีผลกับการจัดการ SSL/TLS ด้วย แต่ถ้าเป็น DNS Provider เจ้าอื่นๆ ส่วนใหญ่จะมีแค่แบบ DNS only อย่างเดียวครับ</p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/cloudflare-dns-record.jpg" alt="" /></p> <p>ถ้าเราเลือก <strong>DNS only</strong> มันก็ตรงไปตรงมาเลยครับ การเชื่อมต่อของผู้ใช้กับ Azure App Service จะเป็น HTTPS ตามที่ Azure จัดการไว้ให้ทั้งหมด Cloudflare แทบไม่ได้ยุ่งอะไรเลย เป็นเหมือนสมุดโทรศัพท์ที่บอกว่า “อ๋อ myapp.com อยู่ตรงนี้นะ อยู่ IP นี้นะ” แล้วผู้ใช้ก็วิ่งไปหา Azure โดยตรง</p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/managed-service-cloudflare-dns-only.jpg" alt="" /></p> <p>แต่ถ้าเราเปิด <strong>Proxy Mode</strong> ขึ้นมา เรื่องมันจะสนุกขึ้นอีกหน่อยครับ Proxy Mode จะทำให้ Cloudflare กลายเป็น “ด่านหน้า” ของระบบทั้งหมด เวลามีคนเข้ามาที่ <code>https://myapp.com</code> การเชื่อมต่อ TLS จะถูก terminate ที่ Cloudflare ก่อน จากนั้น Cloudflare จะไปต่อ HTTPS อีกชั้นกับ Azure App Service อีกที</p> <p>ลองนึกภาพแบบนี้ครับ</p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/managed-service-cloudflare-proxy.jpg" alt="" /></p> <p>Cloudflare กลายเป็นเหมือน รปภ. ด่านหน้าของคอนโดที่เราพูดถึงเมื่อกี้ เวลาแขกเข้ามา เค้าจะต้องเจอ Cloudflare ก่อน Cloudflare จะเช็กบัตร ตรวจสอบว่า request นี้ปลอดภัยไหม มาจาก bot หรือเปล่า ถ้าเรียบร้อยค่อยส่ง request ไปที่ Azure ต่อ</p> <p>ผลลัพธ์คืออะไร?</p> <ul> <li>เราได้ทั้ง HTTPS ที่ Azure จัดการให้อยู่แล้ว</li> <li>เราได้ฟีเจอร์เสริมจาก Cloudflare ไม่ว่าจะเป็น Caching, WAF, Bot protection</li> <li>และที่สำคัญคือ… เราไม่ต้องปวดหัวกับ certificate ฝั่ง Azure เลย เพราะมัน auto หมด</li> </ul> <p>ในสถานการณ์นี้เราจะเห็นว่าจริง ๆ การใช้ Managed Service มันช่วยลดความซับซ้อนของ SSL ลงไปเยอะมาก ๆ เพราะ certificate ทั้งหมดถูก manage ให้อัตโนมัติอยู่แล้ว สิ่งเดียวที่เราต้องตัดสินใจคือ “อยากให้ Cloudflare เป็นแค่ DNS เฉย ๆ หรืออยากให้มันเป็น Proxy ที่ช่วยเสริมเกราะป้องกันให้เว็บของเรา” เท่านั้นเอง</p> <p>ซึ่งถ้าเราใช้ Managed Service อย่าง Azure App Service หรือ Container App ผมแนะนำให้เปิด Proxy Mode ไว้เลยครับ เพราะมันได้ประโยชน์เยอะมาก ๆ และแนะนำให้ตั้งค่า SSL/TLS ใน Cloudflare เป็นแบบ <strong>Full (Strict)</strong> เพื่อความปลอดภัยสูงสุด สามารถอ่านเพิ่มเติมในในหัวข้อต่อๆ ไปครับ</p> <h3 id="taw-yaangkaartangkhaa-custom-domain-aela-ssl-bn-azure-app-service">ตัวอย่างการตั้งค่า Custom Domain และ SSL บน Azure App Service<a class="zola-anchor" href="#taw-yaangkaartangkhaa-custom-domain-aela-ssl-bn-azure-app-service" aria-label="Anchor link for: taw-yaangkaartangkhaa-custom-domain-aela-ssl-bn-azure-app-service" style="visibility: hidden;"></a> </h3> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/azure-app-service-custom-domain.jpg" alt="" /></p> <p>สามารถดูวิธีการตั้งค่า Custom Domain และ SSL บน Azure App Service ได้ที่ <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-custom-domain">Microsoft Docs: Add a custom domain to your app in Azure App Service</a> ครับ</p> <h3 id="taw-yaangkaartangkhaa-custom-domain-aela-ssl-bn-azure-container-app">ตัวอย่างการตั้งค่า Custom Domain และ SSL บน Azure Container App<a class="zola-anchor" href="#taw-yaangkaartangkhaa-custom-domain-aela-ssl-bn-azure-container-app" aria-label="Anchor link for: taw-yaangkaartangkhaa-custom-domain-aela-ssl-bn-azure-container-app" style="visibility: hidden;"></a> </h3> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/azure-container-app-custom-domain.jpg" alt="" /></p> <p>สามารถดูวิธีการตั้งค่า Custom Domain และ SSL บน Azure Container App ได้ที่ <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/azure/container-apps/custom-domains-managed-certificates?pivots=azure-portal">Microsoft Docs: Custom domain names and free managed certificates in Azure Container Apps</a> ครับ</p> <hr /> <p>ซึ่งเวลาที่เราตั้งค่า Custom Domain เสร็จแล้ว Azure จะจัดการเรื่อง SSL ให้เราอัตโนมัติเลย เราไม่ต้องไปขอ cert เอง หรือมานั่งต่ออายุเอง</p> <p>โดยที่ถ้าเราจะใช้ Cloudflare Proxy Mode เราจะต้องใช้ DNS only ก่อน เพื่อที่เวลาที่ทาง Azure จะ Validate domain ownership เค้าจะใช้วิธีการตรวจสอบผ่าน CNAME หรือ TXT record ที่เราตั้งใน Cloudflare</p> <p>เมื่อเราตั้งค่า Cloudflare DNS เป็น DNS only แล้ว เราก็ไปตั้งค่า Custom Domain ใน Azure App Service หรือ Container App ได้เลย พอ Azure ตรวจสอบความเป็นเจ้าของโดเมนเสร็จแล้ว เราก็กลับมาเปลี่ยน Cloudflare เป็น Proxy Mode ได้เลย</p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/cloudflare-dns-name-check.jpg" alt="" /></p> <p>เพราะไม่อย่างนั้น เวลาที่เราเปิด Proxy Mode ทันทีตั้งแต่แรก Azure จะตรวจสอบความเป็นเจ้าของโดเมนไม่ผ่าน Cloudflare จะไม่มี DNS record ที่ Azure ต้องการให้ตรวจสอบ อย่างเช่น ถ้าผมเปิด Proxy Mode</p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/cloudflare-dns-record-proxy.jpg" alt="" /></p> <p>จะเห็นได้ว่า DNS Record จะไม่สามารถตรวจสอบได้จากภายนอก</p> <h2 id="sthaankaarnthii-2-mii-vm-proxy-kh-ngeraae-ng">สถานการณ์ที่ 2: มี VM + Proxy ของเราเอง<a class="zola-anchor" href="#sthaankaarnthii-2-mii-vm-proxy-kh-ngeraae-ng" aria-label="Anchor link for: sthaankaarnthii-2-mii-vm-proxy-kh-ngeraae-ng" style="visibility: hidden;"></a> </h2> <p>พอเราขยับจากการใช้ Managed Service ที่สบาย ๆ มาลองดูในโลกที่เราต้องจัดการเองทั้งหมด ภาพมันจะเปลี่ยนไปทันทีครับ สมมติว่าผมมี VM อยู่เครื่องหนึ่ง อาจจะรันอยู่บน Azure, AWS, หรือ DigitalOcean ก็แล้วแต่ เครื่องนี้เราได้มาเปล่า ๆ เลยครับ ไม่มีการจัดการ SSL ให้ ไม่มีระบบ auto renew ให้ ทุกอย่างต้องทำเองหมด</p> <p>เราสามารถใช้ <a rel="nofollow noreferrer" href="https://github.com/SteveLTN/https-portal">https-portal</a> หรือ <a rel="nofollow noreferrer" href="https://caddyserver.com/">Caddy</a> เข้ามาช่วยจัดการ SSL แบบอัตโนมัติได้เหมือนกันนะครับ เช่นใช้ Let's Encrypt เป็น CA แต่เราก็ต้องมีขั้นตอนในการตั้งค่าเอง และดูแลรักษาเอง โดยถ้าเราจะจัดการ Certificate เองเราก็จะสามารถใช้ Cloudflare Proxy Mode ได้เหมือนกันครับ แต่เราก็เพิ่มความซับซ้อนขึ้นมาอีกหน่อย เพราะในเมื่อเราสามารถใช้ประโยชน์จาก Cloudflare Proxy Mode ได้ โดยที่ไม่ต้องมาจัดการ SSL เอง</p> <p>แต่ในบทความนี้ผมอยากจะเล่าให้ฟังว่า ถ้าเราไม่อยากจัดการ SSL เอง เราจะทำยังไงให้มันง่ายขึ้น โดยใช้ Cloudflare เป็นตัวช่วย เป็น Proxy และไม่ต้องจัดการ Renewal เอง ในขณะที่เรายังสามารถใช้งานได้อย่างปลอดภัย ในโหมด <strong>Full (Strict)</strong></p> <p>ทีนี้ใน VM เครื่องนั้นเราก็อาจจะติดตั้ง proxy ขึ้นมาตัวหนึ่ง อาจจะเป็น Nginx, HAProxy หรืออะไรก็ได้ เพื่อทำหน้าที่เป็นด่านหน้าของแอปพลิเคชันทั้งหมด แล้วเราก็อยากเอา VM เครื่องนี้ไปผูกกับ <strong>Cloudflare</strong> ให้ผู้ใช้เข้าผ่าน domain <code>myapp.com</code> เหมือนเดิม</p> <p>จุดที่เริ่มมีคำถามคือ… แล้วเราจะทำยังไงกับ SSL ที่ origin (ฝั่ง VM) ดี?</p> <p>ลองนึกภาพเวลา user เข้ามาที่ <code>https://myapp.com</code> ครับ ถ้าเราเปิด Proxy Mode ที่ Cloudflare การเชื่อมต่อ TLS จะถูก terminate ที่ Cloudflare ก่อนหนึ่งรอบ จากนั้น Cloudflare จะไปสร้างการเชื่อมต่อใหม่ไปหา origin ของเรา ทีนี้เองที่ Cloudflare จะ “เลือก” ว่าจะเชื่อ origin หรือไม่</p> <p><strong>ลองดูภาพนี้นะครับ</strong></p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/vm-proxy.jpg" alt="" /></p> <p>ตรง “???“ นี่แหละครับที่เป็นเงื่อนไขสำคัญ ว่าจริง ๆ แล้ว Cloudflare จะไปคุยกับ VM ของเราแบบไหน ขึ้นกับโหมดที่เราเลือกใน Cloudflare</p> <h3 id="cloudflare-proxy-mode-flexible">Cloudflare Proxy Mode: Flexible<a class="zola-anchor" href="#cloudflare-proxy-mode-flexible" aria-label="Anchor link for: cloudflare-proxy-mode-flexible" style="visibility: hidden;"></a> </h3> <p>ถ้าเราเลือก <strong>Flexible</strong> มันจะเป็นแบบนี้</p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/cloudflare-flexible.jpg" alt="" /></p> <p>Cloudflare บังคับ terminate TLS ที่ตัวเอง แต่เวลาไปหา origin กลับวิ่ง HTTP ธรรมดา ไม่ต้องมี cert ใด ๆ ที่ VM เลย ถึงจะดูง่าย แต่จริง ๆ อันตรายมาก เพราะการเชื่อมต่อ Cloudflare → VM ไม่ได้เข้ารหัส</p> <h3 id="cloudflare-proxy-mode-full">Cloudflare Proxy Mode: Full<a class="zola-anchor" href="#cloudflare-proxy-mode-full" aria-label="Anchor link for: cloudflare-proxy-mode-full" style="visibility: hidden;"></a> </h3> <p>ถ้าเราเลือก <strong>Full</strong> ภาพจะเปลี่ยนเป็น</p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/cloudflare-full.jpg" alt="" /></p> <p>VM ของเราต้องมี cert อยู่ แต่จะเป็น self-signed ก็ได้ Cloudflare จะไม่เช็กว่า cert นั้นถูกต้องไหม แค่เจอ TLS ก็คุยต่อได้แล้ว อันนี้ก็พอช่วยให้การสื่อสารเข้ารหัสครบทุก hop แต่ถ้ามีใครปลอม cert ระหว่างทาง Cloudflare ก็ไม่รู้</p> <h3 id="cloudflare-proxy-mode-full-strict">Cloudflare Proxy Mode: Full (Strict)<a class="zola-anchor" href="#cloudflare-proxy-mode-full-strict" aria-label="Anchor link for: cloudflare-proxy-mode-full-strict" style="visibility: hidden;"></a> </h3> <p>และสุดท้าย ถ้าเราเลือก <strong>Full (Strict)</strong></p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/cloudflare-full-strict.jpg" alt="" /></p> <p>รอบนี้ Cloudflare จะยอมคุยกับ VM ของเราก็ต่อเมื่อ VM มี cert ที่ถูกต้องเท่านั้น จะเป็น cert จาก CA ทั่วไป (เช่น Let’s Encrypt) หรือจะเป็น <strong>Cloudflare Origin Certificate</strong> ที่ออกมาใช้กับ Cloudflare โดยตรงก็ได้</p> <p>โดยเราสามารถตั้งค่าโหมด SSL/TLS ได้ที่เมนู SSL/TLS ใน Cloudflare Dashboard ครับ ซึ่งอันนี้ตัวอย่างจะเป็นการตั้งค่าแบบ Full (Strict)</p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/cloudflare-ssl-tls-full-strict.jpg" alt="" /></p> <p>พอเล่ามาถึงตรงนี้ หลายคนน่าจะเห็นแล้วว่าความแตกต่างระหว่างโหมด Flexible, Full และ Full (Strict) มันอยู่ตรง <strong>ความไว้ใจ (Trust)</strong> ที่ Cloudflare มีต่อ cert ของเรา ถ้าเป็น Flexible ก็ไม่ต้องมีเลย ถ้าเป็น Full แค่พอมี TLS ก็พอใจ แต่ถ้า Strict ต้องมี cert จริงเท่านั้นถึงจะผ่าน</p> <p>และในโลกจริง ๆ เวลาเรามี VM ของตัวเอง สิ่งที่แนะนำคือใช้ <strong>Cloudflare Origin Certificate</strong> ครับ เราสามารถ generate cert จาก Cloudflare แล้วเอาไปติดตั้งที่ VM ได้เลย แล้ว Cloudflare ก็จะเชื่อมต่อเข้ามาแบบ Strict ได้เต็มที่ ปลอดภัยทั้งสองฝั่ง</p> <hr /> <p>พอเปรียบเทียบกับสถานการณ์แรกจะเห็นชัดว่า การใช้ Managed Service เราแทบไม่ต้องคิดเรื่อง cert เลย Azure จัดการให้ แต่พอเป็น VM เอง เราต้องจัดการทุกอย่างเองตั้งแต่การ generate, ติดตั้ง ไปจนถึงการต่ออายุ cert ซึ่งตรงนี้แหละครับที่ทำให้หลายคนมองว่า SSL เป็นเรื่อง “ยุ่งยาก” …แต่จริง ๆ ถ้าเราเข้าใจ diagram การไหลของ TLS แค่ไม่กี่แบบนี้ ทุกอย่างจะเริ่มชัดขึ้นทันที</p> <h2 id="taw-yaang-kaarsraang-csr-aelatidtang-cloudflare-origin-certificate-bn-nginx">ตัวอย่าง: การสร้าง CSR และติดตั้ง Cloudflare Origin Certificate บน Nginx<a class="zola-anchor" href="#taw-yaang-kaarsraang-csr-aelatidtang-cloudflare-origin-certificate-bn-nginx" aria-label="Anchor link for: taw-yaang-kaarsraang-csr-aelatidtang-cloudflare-origin-certificate-bn-nginx" style="visibility: hidden;"></a> </h2> <p>ทีนี้พอเราเล่ามาถึงตรงนี้ หลายคนอาจสงสัยว่า “แล้วในโลกจริง ๆ เวลาจะขอ certificate จาก Cloudflare ต้องทำยังไง?” เรื่องนี้ถ้าอธิบายแบบนามธรรมอาจจะยังไม่เห็นภาพ ผมเลยอยากยกตัวอย่างที่ง่ายที่สุด นั่นก็คือการใช้ <strong>Nginx</strong> เป็น proxy ของเราเอง แล้วติดตั้ง <strong>Cloudflare Origin Certificate</strong> ให้มันครับ</p> <p>ลองนึกภาพตามกันครับ เรามี VM อยู่เครื่องหนึ่ง สมมติว่า IP เป็น <code>1.2.3.4</code> และเรามีโดเมน <code>myapp.com</code> ที่ชี้ไปหา IP เครื่องนี้แล้ว ทีนี้เราจะผูกมันเข้ากับ Cloudflare และเปิดโหมด <strong>Full (Strict)</strong> ให้ Cloudflare เชื่อมต่อกับ VM ได้อย่างปลอดภัย</p> <p>ก่อนอื่น สิ่งที่เราต้องมีคือ <strong>Private Key + CSR (Certificate Signing Request)</strong> การสร้าง CSR ก็เหมือนการไปทำ “ใบคำขอ” ที่เราจะยื่นต่อ CA ว่า เราคือเจ้าของโดเมนนี้นะ ออก cert ให้เราหน่อย</p> <p>บน VM เราก็รันคำสั่งนี้:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">openssl</span></span><span class="z-meta z-function-call z-arguments z-shell"> req<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>new</span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>newkey</span> rsa:2048<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>nodes</span> <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>keyout</span> myapp.com.key <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>out</span> myapp.com.csr <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>subj</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>/CN=myapp.com<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span></code></pre> <p>พอรันเสร็จ เราจะได้สองไฟล์</p> <ul> <li><code>myapp.com.key</code> → กุญแจส่วนตัว (ต้องเก็บไว้ที่ origin)</li> <li><code>myapp.com.csr</code> → คำขอ cert ที่เอาไปยื่นกับ Cloudflare</li> </ul> <p>ทีนี้เราก็เปิดหน้า Cloudflare Dashboard ไปที่เมนู SSL/TLS → Origin Certificates แล้วกด “Create Certificate” Cloudflare จะให้เราเลือกว่าจะใช้แบบ <strong>generate auto</strong> หรือจะเอา CSR ของเราไปใส่ก็ได้ สมมติเราอัปโหลด <code>myapp.com.csr</code> เข้าไป Cloudflare ก็จะออกไฟล์ <code>myapp.com.crt</code> คืนมาให้</p> <p>ตรงนี้แหละครับที่สำคัญ เพราะ <code>myapp.com.crt</code> ตัวนี้ Cloudflare ลงนามให้เรียบร้อยแล้ว Cloudflare เองก็เลย “ยอมเชื่อ” cert ตัวนี้เสมอ</p> <hr /> <p>พอเราได้ cert มาแล้ว เราก็เอาไฟล์ <code>myapp.com.crt</code> กับ <code>myapp.com.key</code> ไปวางใน VM จากนั้นก็ไปแก้ config ของ Nginx ให้มันฟังพอร์ต 443</p> <p>สมมติว่าเรามีไฟล์ config แบบง่าย ๆ ชื่อ <code>/etc/nginx/sites-available/myapp.conf</code></p> <pre data-lang="nginx" class="language-nginx z-code"><code class="language-nginx" data-lang="nginx"><span class="z-text z-plain">server { </span><span class="z-text z-plain"> listen 443 ssl; </span><span class="z-text z-plain"> server_name myapp.com; </span><span class="z-text z-plain"> </span><span class="z-text z-plain"> ssl_certificate /etc/nginx/ssl/myapp.com.crt; </span><span class="z-text z-plain"> ssl_certificate_key /etc/nginx/ssl/myapp.com.key; </span><span class="z-text z-plain"> </span><span class="z-text z-plain"> location / { </span><span class="z-text z-plain"> proxy_pass http://127.0.0.1:3000; </span><span class="z-text z-plain"> } </span><span class="z-text z-plain">} </span></code></pre> <p>แล้วก็เปิดพอร์ต 80 ไว้ redirect ไป 443 อีกทีเพื่อบังคับ HTTPS</p> <pre data-lang="nginx" class="language-nginx z-code"><code class="language-nginx" data-lang="nginx"><span class="z-text z-plain">server { </span><span class="z-text z-plain"> listen 80; </span><span class="z-text z-plain"> server_name myapp.com; </span><span class="z-text z-plain"> return 301 https://$host$request_uri; </span><span class="z-text z-plain">} </span></code></pre> <p>จากนั้น reload nginx:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">nginx</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>t</span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">systemctl</span></span><span class="z-meta z-function-call z-arguments z-shell"> reload nginx</span> </span></code></pre> <p>พอถึงตรงนี้ flow จะกลายเป็นแบบนี้ครับ</p> <p><img src="https://thadaw.com/posts/ssl-tls-made-easy-cloudflare-azure/cloudflare-origin-ca.jpg" alt="" /></p> <p>Cloudflare terminate TLS ที่ตัวเองก่อน แล้วก็เชื่อมต่อ HTTPS ต่อไปที่ Nginx อีกที ทีนี้ Cloudflare จะเชื่อ cert ของเราแน่นอน เพราะ cert ตัวนี้มันเป็น <strong>Origin CA ที่ Cloudflare ออกเอง</strong> ดังนั้นเราสามารถเปิดโหมด <strong>Full (Strict)</strong> ได้อย่างมั่นใจเลย</p> <p>และนี่คือ <strong>ภาพของการใช้ CSR + Origin CA จริง ๆ</strong> ที่เราเจอกันในโลก production บางทีเวลาอ่านทฤษฎี SSL มันอาจดูเป็นอะไรที่ไกลตัว แต่พอเราลองทำด้วยตัวเองสักครั้ง แล้วเห็นว่าจริง ๆ มันก็เป็นแค่ “ออกกุญแจ → ส่งคำขอ → ได้ใบ cert กลับมา → ใส่ไว้ใน proxy” … ความยุ่งยากที่เคยคิดว่ามันเป็นหลุมดำ ก็จะเริ่มคลี่คลายออกไปทีละนิดครับ</p> <h3 id="cloudflare-origin-ca">Cloudflare origin CA<a class="zola-anchor" href="#cloudflare-origin-ca" aria-label="Anchor link for: cloudflare-origin-ca" style="visibility: hidden;"></a> </h3> <p>พอเราได้ลองทำงานกับ <strong>Cloudflare Origin Certificate</strong> จริง ๆ เราจะเห็นเลยว่ามันช่วยลดภาระชีวิตเราได้เยอะมาก ๆ เลยครับ เพราะถ้าเราไปใช้พวก Let’s Encrypt ปกติ เราอาจต้องคอยต่ออายุทุก 90 วัน หรือต้องคอยตั้ง automation ให้มัน renew เอง ไม่งั้นวันดีคืนดีเว็บเข้าไม่ได้เพราะ cert หมดอายุ</p> <p>แต่ Origin CA ของ Cloudflare ไม่เหมือนกัน จุดเด่นเลยคือ <strong>อายุยาวมาก</strong> …ยาวเป็นสิบปีครับ เรียกได้ว่าพอออกมาแล้ว เราสามารถวางใจได้เลยว่า เราไม่ต้องมานั่งวิ่งวุ่นต่ออายุทุก ๆ ไตรมาส ชีวิตก็เบาขึ้นไปเยอะ</p> <p>ดังนั้นเวลาที่เราเปิดโหมด <strong>Full (Strict)</strong> กับ Cloudflare แล้วใช้ Origin CA ที่ออกโดย Cloudflare เอง มันก็เลยเป็นเหมือนการจับคู่ที่ลงตัวสุด ๆ คือฝั่ง Cloudflare ก็ยอมเชื่อ cert นี้เสมอ เพราะมันเป็นของที่ตัวเองออก ส่วนฝั่งเราก็ไม่ต้องกังวลเรื่อง renewal บ่อย ๆ</p> <p>อ่านเพิ่มเติมได้ที่ <a rel="nofollow noreferrer" href="https://developers.cloudflare.com/ssl/origin-configuration/origin-ca/">Cloudflare: What is an Origin CA certificate?</a></p> <p>หรือถ้าใครไม่อยากกดผ่านหน้า Cloudflare Dashboard ก็สามารถใช้ <a rel="nofollow noreferrer" href="https://developers.cloudflare.com/api/resources/origin_ca_certificates/methods/create/">Cloudflare API</a> สร้าง Origin CA ได้เหมือนกันครับ สะดวกมากๆ ครับ</p> <h2 id="srup">สรุป<a class="zola-anchor" href="#srup" aria-label="Anchor link for: srup" style="visibility: hidden;"></a> </h2> <p>เรื่อง SSL/TLS ถ้ามองผิวเผินมันอาจจะดูเหมือนเป็น “หลุมดำ” ที่เต็มไปด้วยศัพท์เทคนิคและขั้นตอนที่ซับซ้อน แต่จริง ๆ แล้วถ้าเราค่อย ๆ แยกแยะเป็นสถานการณ์ เราจะเห็นว่ามันไม่ได้ซับซ้อนอย่างที่คิด</p> <ul> <li>ถ้าเราใช้ <strong>Managed Service</strong> อย่าง Azure App Service หรือ Container App ทุกอย่างแทบจะถูกจัดการให้หมด เราแทบไม่ต้องแตะเรื่อง certificate เลย แค่เลือกว่าจะให้ Cloudflare ทำหน้าที่เป็น DNS เฉย ๆ หรือ Proxy เสริมก็พอ</li> <li>แต่ถ้าเราใช้ <strong>VM + Proxy เอง</strong> เรื่อง certificate จะกลายเป็นสิ่งที่เราต้องรับผิดชอบเองเต็ม ๆ ซึ่งถ้าเลือกใช้ <strong>Cloudflare Origin CA</strong> แล้วเปิดโหมด <strong>Full (Strict)</strong> เราก็จะได้ทั้งความปลอดภัยครบ และความสบายใจเพราะไม่ต้องคอยต่ออายุ cert บ่อย ๆ</li> </ul> <p>สุดท้ายแล้ว การเข้าใจ flow ของ TLS termination ว่าเกิดขึ้นตรงไหนบ้าง ใครเชื่อใคร และ certificate ตัวไหนที่ Cloudflare ยอมรับ …สิ่งเหล่านี้จะช่วยให้เรามีความมั่นใจมากขึ้นในการ setup HTTPS ของตัวเอง</p> <p>จากที่เคยรู้สึกว่า SSL เป็นเรื่องยุ่งยาก พอเราเห็นภาพและได้ลองลงมือจริง มันก็แค่การสร้างกุญแจ ขอใบรับรอง และเอาไปวางให้ proxy ใช้เท่านั้นเองครับ</p> 2025-05-17T00:00:00+00:00 2025-05-17T00:00:00+00:00 https://thadaw.com/posts/bun-docker-colima-x86-on-mac-arm64-issue/ <p><img src="https://thadaw.com/posts/bun-docker-colima-x86-on-mac-arm64-issue/cover.jpg" alt="cover" /></p> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>สรุปสั้น ๆ</strong></p> <p>ลองใช้ Bun สร้าง Docker image บน Colima (x86) แล้วเจอปัญหา crash แบบเงียบ ๆ เพราะ binary ของ Bun ไม่ compatible กับ QEMU โดยเจอ Error แบบเงียบๆ ว่า Illegal instruction</p> </div> </blockquote> <p>ช่วงนี้ผมมีโปรเจกต์เล็ก ๆ ที่กำลังทำอยู่ เป็น Slack Bot ที่เขียนด้วย TypeScript เลยมีความคิดว่า… ถ้าลองย้าย runtime จาก Node.js มาเป็น <a rel="nofollow noreferrer" href="https://bun.sh">Bun</a> จะดีขึ้นแค่ไหน?</p> <p>Bun มันน่าสนใจตรงที่:</p> <ul> <li>เร็วกว่า Node แบบรู้สึกได้</li> <li>ใช้แทนทั้ง runtime, bundler และ test runner ได้ในตัว</li> <li>คำสั่งก็สั้นดี ไม่ต้องแยกใช้ <code>node</code>, <code>ts-node</code> หรือพวก bundler เพิ่มเติม</li> </ul> <p>พอเห็น <a rel="nofollow noreferrer" href="https://hub.docker.com/r/oven/bun">docker image อย่างเป็นทางการของ Bun</a> ก็ยิ่งรู้สึกว่า “น่าจะใช้กับ production ได้ไม่ยาก” เลยตั้งใจจะลอง build Docker image ของแอปตัวเองด้วย Bun ให้ได้แบบ production-ready แล้วเอาไป deploy ผ่าน Colima ที่ผมใช้บน Mac M1</p> <p>ซึ่งก็คิดไว้ในใจว่า…</p> <blockquote> <p>“ถ้า build เป็น x86 แล้วใช้ Colima จำลอง x86 ด้วย ก็น่าจะ run ได้แหละมั้ง?”</p> </blockquote> <p>แน่นอนครับ ว่าชีวิตจริงมันไม่ได้ง่ายขนาดนั้น 555</p> <h2 id="t-nthiil-ngtham">ตอนที่ลองทำ<a class="zola-anchor" href="#t-nthiil-ngtham" aria-label="Anchor link for: t-nthiil-ngtham" style="visibility: hidden;"></a> </h2> <p>ผมเริ่มจากเขียน <code>Dockerfile</code> ง่าย ๆ ที่ใช้ base image ของ Bun โดยตรง เพื่อให้ image มีขนาดเล็กที่สุด เลยเลือกใช้ <code>oven/bun:alpine</code></p> <pre data-lang="Dockerfile" class="language-Dockerfile z-code"><code class="language-Dockerfile" data-lang="Dockerfile"><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Build base </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> oven/bun:<span class="z-entity z-name z-enum z-tag-digest">alpine</span> <span class="z-keyword z-control z-dockerfile">AS</span> <span class="z-variable z-stage-name">base</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/usr/app </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Install dev dependencies (cached) </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> base <span class="z-keyword z-control z-dockerfile">AS</span> <span class="z-variable z-stage-name">install</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>mkdir -p /temp/dev </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> package.json bun.lock /temp/dev/ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>cd /temp/dev &amp;&amp; bun install --frozen-lockfile </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Install production dependencies </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>mkdir -p /temp/prod </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> package.json bun.lock /temp/prod/ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>cd /temp/prod &amp;&amp; bun install --frozen-lockfile --production </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Copy source code and dev dependencies </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> base <span class="z-keyword z-control z-dockerfile">AS</span> <span class="z-variable z-stage-name">prerelease</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">install</span> /temp/dev/node_modules node_modules </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> . . </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> base <span class="z-keyword z-control z-dockerfile">AS</span> <span class="z-variable z-stage-name">release</span> </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/usr/app </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Copy prod dependencies and source file </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">install</span> /temp/prod/node_modules node_modules </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">prerelease</span> /usr/app . </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">prerelease</span> /usr/app/package.json . </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">USER </span>bun </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">EXPOSE </span>3000 </span><span class="z-source z-dockerfile"><span class="z-keyword z-operator z-dockerfile">ENTRYPOINT </span>[<span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>bun<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span>, <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>run<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span>, <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>src/main.ts<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span>] </span></code></pre> <p>จากนั้นใช้ GitHub Actions เป็นตัว build และ push image ขึ้น <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/azure/container-registry/">Azure Container Registry (ACR)</a> แบบ private ตัว pipeline ก็ไม่ได้ซับซ้อนอะไร ใช้แค่ <code>docker/build-push-action</code> แล้ว tag เป็น <code>latest</code></p> <p>ตัวอย่าง GitHub Actions ก็ประมาณนี้ ใช้ Cache บน GitHub Actions ด้วยนะ</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Build Docker Image with Bun &amp; Check Size</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-constant z-language z-boolean z-yaml">on</span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">push</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">branches</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-meta z-flow-sequence z-yaml"><span class="z-punctuation z-definition z-sequence z-begin z-yaml">[</span><span class="z-string z-unquoted z-plain z-in z-yaml">main</span><span class="z-punctuation z-definition z-sequence z-end z-yaml">]</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">pull_request</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">branches</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-meta z-flow-sequence z-yaml"><span class="z-punctuation z-definition z-sequence z-begin z-yaml">[</span><span class="z-string z-unquoted z-plain z-in z-yaml">main</span><span class="z-punctuation z-definition z-sequence z-end z-yaml">]</span></span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">env</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">IMAGE_NAME</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">ai-platform</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">IMAGE_TAG</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">latest</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">jobs</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">build</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">runs-on</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">ubuntu-latest</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">steps</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Checkout repository</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/checkout@v4</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Set up Docker Buildx</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">docker/setup-buildx-action@v3</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Cache Docker layers</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/cache@v4</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">/tmp/.buildx-cache</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">key</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ runner.os }}-buildx-${{ github.sha }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">restore-keys</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-keyword z-control z-flow z-block-scalar z-literal z-yaml">|</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> ${{ runner.os }}-buildx- </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"></span> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Log in to Azure Container Registry</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">docker/login-action@v3</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">registry</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.ACR_LOGIN_SERVER }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">username</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.ACR_USERNAME }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">password</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.ACR_PASSWORD }}</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Build Docker image</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">docker/build-push-action@v5</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">context</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-float z-decimal z-yaml"><span class="z-punctuation z-separator z-decimal z-yaml">.</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">file</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">./Dockerfile</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">push</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-language z-boolean z-yaml">true</span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Automatically push the image to the registry </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">load</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-language z-boolean z-yaml">true</span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Set true when we want to see the image in the local docker, example: check image size </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">tags</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.ACR_LOGIN_SERVER }}/${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">cache-from</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">type=local,src=/tmp/.buildx-cache</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">cache-to</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">type=local,dest=/tmp/.buildx-cache-new,mode=max</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Move cache</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">run</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-keyword z-control z-flow z-block-scalar z-literal z-yaml">|</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> rm -rf /tmp/.buildx-cache </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> mv /tmp/.buildx-cache-new /tmp/.buildx-cache </span></span></code></pre> <p>พอ build เสร็จ ผมก็ไปฝั่ง local ที่ใช้ <a rel="nofollow noreferrer" href="https://github.com/abiosoft/colima">Colima</a> บน Mac M1 ซึ่งปกติจะรันเป็น <code>arm64</code> แต่คราวนี้อยากเทสต์ให้แน่ใจว่า image แบบ <code>x86_64</code> จะรันได้แน่ ๆ เลยสั่ง start แบบระบุ architecture ไปเลย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">colima</span></span><span class="z-meta z-function-call z-arguments z-shell"> start<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>arch</span> x86_64</span> </span></code></pre> <p>จากนั้นก็ลองดึง image ที่ build ไว้ขึ้นมารันด้วย <code>docker compose</code> เพื่อให้แน่ใจว่าใช้ของใหม่จริง ๆ ก็ใส่ <code>--pull always</code> ไปด้วย:</p> <p>ตัวอย่าง <code>docker-compose.yml</code> ก็ประมาณนี้</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">services</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">app</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">image</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">my-azure-acr.azurecr.io/ai-platform:latest</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">env_file</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml">.env</span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Load from .env file like dotenv </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">ports</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>${PORT}:${PORT}<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Use the same port as in .env </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">volumes</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml">ai-data:/usr/app/.data</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">restart</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">unless-stopped</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">volumes</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">ai-data</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span></code></pre> <p>จากนนั้นก็ลองรันด้วยคำสั่ง:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">docker</span></span><span class="z-meta z-function-call z-arguments z-shell"> compose up<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>d</span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>pull</span> always</span> </span></code></pre> <p>ณ จุดนี้ ทุกอย่างดูเหมือนจะโอเคนะ… Build ผ่าน, Push สำเร็จ, Image ดึงลงมาได้, Container ก็ดูเหมือนจะ start แล้ว…</p> <p>แต่ความเงียบผิดปกติก็เริ่มขึ้นตรงนี้แหละ</p> <h2 id="aelwmankphangaebbengiiyb">แล้วมันก็พังแบบเงียบ ๆ<a class="zola-anchor" href="#aelwmankphangaebbengiiyb" aria-label="Anchor link for: aelwmankphangaebbengiiyb" style="visibility: hidden;"></a> </h2> <p>หลังจากสั่ง <code>docker compose up -d</code> แล้วทุกอย่างดูเหมือนจะปกติ ผมก็ลองดูสถานะ container ด้วยคำสั่ง:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">docker</span></span><span class="z-meta z-function-call z-arguments z-shell"> ps</span> </span></code></pre> <p>สิ่งที่เจอคือ container ขึ้นจริง แต่ขึ้นแค่แป๊บเดียวแล้วเข้าโหมด:</p> <pre class="z-code"><code><span class="z-text z-plain">Restarting (132) every few seconds </span></code></pre> <p>ลองดู log ด้วย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">docker</span></span><span class="z-meta z-function-call z-arguments z-shell"> logs <span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>container-id<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span> </span></span></code></pre> <p>...ไม่มีอะไรออกมาเลยครับ โล่งมาก</p> <p>เข้าใจว่า "อาจจะ crash ก่อนจะเขียน log ทัน" เลยลอง shell เข้าไปดูด้วย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">docker</span></span><span class="z-meta z-function-call z-arguments z-shell"> exec<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>it</span> <span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>container-id<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span> sh</span> </span></code></pre> <p>ลองรัน <code>bun --version</code> ดูแบบไม่คิดอะไรมาก:</p> <pre class="z-code"><code><span class="z-text z-plain">bun --version </span></code></pre> <p>แล้วก็เจอคำตอบของทุกอย่างตรงนี้เลยครับ:</p> <pre class="z-code"><code><span class="z-text z-plain">Illegal instruction </span></code></pre> <p>คือ binary ของ Bun (ใน image <code>oven/bun:alpine</code>) มันใช้ instruction บางอย่างที่ QEMU ใน Colima รันไม่ได้ แม้ว่าผมจะ start Colima แบบ <code>--arch x86_64</code> แล้วก็ตาม</p> <p>ผมลองเปลี่ยนไปใช้ image <code>oven/bun:1</code> ที่เป็น tag หลัก ก็เจอปัญหาเดียวกันเป๊ะ</p> <p>พอถึงตรงนี้ก็เลยชัดเจนว่า...</p> <blockquote> <p>Bun บน Colima (แม้จะจำลอง x86) ยังรันไม่ได้แน่ ๆ ไม่ว่าจะใช้ image แบบ alpine หรือ full tag ก็ตาม ถึงจะ build มาแบบ x86 แล้วก็เถอะ ถ้า run-time มันไม่ support instruction นั้น → ก็พังอยู่ดี</p> </blockquote> <p>ได้เลยจ้า! ปลายฟ้าปรับ Section 4 ให้ใหม่แบบไม่พูดถึง Docker Desktop ตามที่มายต้องการ กระชับ ตรงประเด็น และยังคงโทนเล่าเรื่องสบาย ๆ เหมือนเดิม:</p> <h2 id="aelweraacchaaekyangaingdii">แล้วเราจะแก้ยังไงดี<a class="zola-anchor" href="#aelweraacchaaekyangaingdii" aria-label="Anchor link for: aelweraacchaaekyangaingdii" style="visibility: hidden;"></a> </h2> <p>พอรู้ว่า Bun รันบน Colima ไม่ได้ ก็เลยลองไล่หาทางแก้ โดยยังอยากคงแนวทางเดิมไว้ให้ใกล้เคียง production จริงมากที่สุด</p> <p>สิ่งแรกที่ลองคือเปลี่ยนจาก <code>oven/bun:alpine</code> มาใช้ <code>oven/bun:1</code> ซึ่งเป็น base image แบบเต็มที่ขนาดใหญ่ขึ้น (ไม่ใช่ alpine) แต่ก็ยังเจอปัญหา <code>Illegal instruction</code> เหมือนเดิม สรุปคือ <strong>ทั้งสอง image ยังใช้ binary ที่ QEMU ใน Colima รันไม่ได้</strong></p> <p>สุดท้ายเลยตัดสินใจเปลี่ยน base image จาก Bun กลับมาใช้ Node.js แค่เพื่อให้รันบน Colima ได้ แล้วค่อยไป optimize เรื่องขนาด image อีกที อย่างน้อยก็ได้ test flow ของระบบต่อได้ก่อน ไม่ต้องติดที่ runtime</p> <p><strong>ส่วนเรื่อง image size ยังใหญ่เพราะ <code>node_modules</code> ต้อง COPY เข้าไปทั้งก้อน — อันนี้ยังไม่ได้แก้ตอนนี้ครับ</strong> เดี๋ยวไว้ blog หน้าจะมาชวนคุยต่อว่า ถ้าเราทำการ bundle ก่อน (เช่นด้วย <code>esbuild</code> หรือ <code>bun bun</code>) เราจะลดขนาด image ลงได้ขนาดไหน และยังมีวิธีแยก native modules ออกได้ยังไงบ้าง</p> <p>มาแล้วจ้า! นี่คือ <strong>Section 5: บทเรียน &amp; ชวนคิดต่อ</strong> เป็นตอนจบของโพสต์นี้ ที่สรุปสิ่งที่เจอ พร้อมโยนคำถามเบา ๆ ทิ้งท้ายให้คนอ่านได้คิดต่อ:</p> <h2 id="btheriiyn">บทเรียน<a class="zola-anchor" href="#btheriiyn" aria-label="Anchor link for: btheriiyn" style="visibility: hidden;"></a> </h2> <p>พอลองมาทั้งหมด สรุปสั้น ๆ ได้ว่า…</p> <ul> <li>Bun น่าสนใจมาก แต่ตอนนี้ยังมีข้อจำกัดเรื่อง compatibility กับบาง runtime environment อย่าง QEMU บน Colima</li> <li>ต่อให้ build ด้วย x86 และระวังเรื่อง architecture แล้ว แต่ถ้า binary ใช้ instruction ที่ layer ข้างล่างสุดไม่รองรับ → ก็รันไม่ได้อยู่ดี</li> <li>เวลาเจอปัญหาพวกนี้ สิ่งที่ยากกว่าการแก้คือ…การหาว่ามันพังเพราะอะไร เพราะบางครั้ง log ก็ไม่มี, error ก็ไม่บอก, ทุกอย่างดูเหมือนปกติแต่ run ไม่ได้</li> </ul> <p>และที่สำคัญคือ…</p> <blockquote> <p>การ optimize ขนาด image ยังไม่จบแค่นี้ แค่ใช้ Bun แล้ว build image → ยังไม่ได้ image ที่เบาแบบที่หวังไว้ เพราะ <code>bun install</code> ยังต้องพา <code>node_modules</code> ทั้งก้อนไปด้วย</p> </blockquote> <p>ถ้าอยากลดขนาดจริง ๆ — ต้องเปลี่ยน mindset จาก “run source ตรง ๆ” → มาเป็น “bundle ให้จบก่อนค่อย COPY เข้า image”</p> <p>ซึ่งเดี๋ยว blog หน้าผมจะมาเล่าต่อเรื่องนี้ รวมถึงเปรียบเทียบว่าใช้ <code>esbuild</code> หรือ <code>bun bun</code> ช่วย bundle แล้วขนาดลดลงแค่ไหน และจะมีแนวทางแยก native module อย่างไรให้เหลือเบาที่สุด</p> <h2 id="mumchwnkhid">มุมชวนคิด<a class="zola-anchor" href="#mumchwnkhid" aria-label="Anchor link for: mumchwnkhid" style="visibility: hidden;"></a> </h2> <p>ใครเคยเจอปัญหาอะไรคล้าย ๆ แบบนี้บ้าง? หรือเคยต้อง debug อะไรที่ crash เงียบ ๆ บน container แล้วไม่มี log เลย?</p> <p>หรือถ้าใครมีเทคนิค build image ให้บางเฉียบแบบไม่ต้องเอา <code>node_modules</code> ติดมาด้วย — มาแชร์กันได้เลยครับ</p> <p>จบโพสต์นี้แบบงง ๆ กับ CPU instruction set ไปก่อน ไว้เจอกันใหม่ในตอน “bundle ให้จบ แล้วเหลือแค่ของจำเป็น” เร็ว ๆ นี้ครับ!</p> <p>(ขอบคุณที่อ่านมาถึงตรงนี้นะ :D)</p> 2025-05-16T00:00:00+00:00 2025-05-16T00:00:00+00:00 https://thadaw.com/posts/thai-ocr-easyocr-uv-python/ <p><img src="https://thadaw.com/posts/thai-ocr-easyocr-uv-python/cover.jpg" alt="cover" /></p> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>TL;DR</strong></p> <p>ภาษาไทย OCR ยังไม่สมบูรณ์แบบ แต่ก็พอใช้ได้ในระดับฟรี เอาไปใช้ร่วมกับ GPT ช่วยปรับแก้ได้ Github Code: <a rel="nofollow noreferrer" href="https://github.com/mildronize/thai-ocr-with-easyocr">https://github.com/mildronize/thai-ocr-with-easyocr</a></p> </div> </blockquote> <p>ช่วงนี้มีโจทย์น่าสนุกจากฝั่งงาน Dev ให้ช่วย Proof of Concept ระบบ OCR สำหรับเอกสารภาษาไทย<br /> ก็เลยได้โอกาสลองของใหม่ 2 อย่างพร้อมกัน</p> <ol> <li><strong>ลอง EasyOCR</strong> — ว่ามันอ่านภาษาไทยได้แค่ไหนในโลกจริง</li> <li><strong>ลอง <code>uv</code></strong> — เครื่องมือจัดการ Python project แบบ modern ที่มาแทน pip, venv, pip-tools ในตัวเดียว</li> </ol> <h2 id="erimcchaakocchthyngaay-aan-pdf-phaasaaaithy">เริ่มจากโจทย์ง่าย ๆ: อ่าน PDF ภาษาไทย<a class="zola-anchor" href="#erimcchaakocchthyngaay-aan-pdf-phaasaaaithy" aria-label="Anchor link for: erimcchaakocchthyngaay-aan-pdf-phaasaaaithy" style="visibility: hidden;"></a> </h2> <p>ใน POC รอบนี้ เราต้องอ่านไฟล์ PDF (ที่เป็น scanned document) แล้วแปลงเป็นข้อความ<br /> คำถามในหัวคือ… “OCR ภาษาไทยปี 2025 มันพอไหวมั้ยนะ?”</p> <p>เลยลอง setup เบื้องต้นแบบเร็ว ๆ:</p> <ul> <li>ใช้ <code>pdf2image</code> แปลง PDF → Image</li> <li>ใช้ <code>easyocr</code> รองรับภาษา <code>['th', 'en']</code></li> <li>บันทึกผลลัพธ์ลงไฟล์ text</li> </ul> <p>ผลลัพธ์ที่ได้ <strong>"พอใช้ได้ในระดับ OCR ฟรี"</strong> — ไม่เป๊ะทุกคำ แต่ถ้าเอกสารคม ๆ สะอาด ๆ ก็อ่านได้เยอะอยู่นะ โดยเฉพาะตัวอักษรพิมพ์ดีด/เอกสารราชการที่พิมพ์ตรง ๆ (ไม่ใช่สแกนเอกสารที่ซีดหรือเบี้ยว)</p> <p>แต่ก็เอาไปใช้งานจริงไม่ได้เท่าไหร่นัก เลยเอาไปใช้ GPT ช่วยปรับแก้ให้เป็นข้อความที่อ่านง่ายขึ้น<br /> (ซึ่งก็ทำได้ดีในระดับนึง แต่ก็ยังมีข้อผิดพลาดอยู่บ้าง)</p> <h2 id="aelwkl-ngaich-uv-duukhrangaerk">แล้วก็ลองใช้ <code>uv</code> ดูครั้งแรก...<a class="zola-anchor" href="#aelwkl-ngaich-uv-duukhrangaerk" aria-label="Anchor link for: aelwkl-ngaich-uv-duukhrangaerk" style="visibility: hidden;"></a> </h2> <blockquote> <p>โอ้โห รู้สึกเลยว่า Python มัน modern ขึ้น!</p> </blockquote> <p>ปกติถ้าจะเริ่มโปรเจกต์ Python เราต้องตั้ง venv, สร้าง requirements.txt, ลง pip, ทำ pip freeze, จัด lockfile — เยอะเวอร์ แต่ <code>uv</code> ทำให้ทุกอย่างง่ายเหลือแค่คำสั่งเดียว:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">pip</span></span><span class="z-meta z-function-call z-arguments z-shell"> install easyocr pdf2image</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">pip</span></span><span class="z-meta z-function-call z-arguments z-shell"> freeze <span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span> requirements.txt</span> </span></code></pre> <p>หรือถ้าจะจัดเต็มแบบ modern dev:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">uv</span></span><span class="z-meta z-function-call z-arguments z-shell"> init</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">uv</span></span><span class="z-meta z-function-call z-arguments z-shell"> add easyocr pdf2image</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">uv</span></span><span class="z-meta z-function-call z-arguments z-shell"> sync</span> </span></code></pre> <p>นอกจากจะเร็วกว่า pip เยอะมาก (เพราะเขียนด้วย Rust) ยังรวมระบบ lockfile แบบเดียวกับ <code>bun</code>, <code>pnpm</code> ไว้ด้วยเลย แถมใช้แทน <code>virtualenv</code> ได้เลยด้วย 🎉</p> <h2 id="singthiiaidkhidcchaakkaarl-ngkh-ng">สิ่งที่ได้คิดจากการลองของ<a class="zola-anchor" href="#singthiiaidkhidcchaakkaarl-ngkh-ng" aria-label="Anchor link for: singthiiaidkhidcchaakkaarl-ngkh-ng" style="visibility: hidden;"></a> </h2> <ul> <li>บางทีการกลับมาลอง tools ใหม่ ๆ มันทำให้เรา “รู้สึกสนุก” กับ Python ขึ้นอีกครั้ง</li> <li>OCR ภาษาไทยยังไม่สมบูรณ์แบบ แต่ก็พอจะเอาไปใช้ในงานจริงได้ ถ้ารู้ว่าจุดแข็ง-จุดอ่อนมันอยู่ตรงไหน</li> <li>เครื่องมือดี ๆ อย่าง <code>uv</code> ทำให้ Python ecosystem ดู “ทันสมัย” ขึ้นมาก โดยเฉพาะกับคนที่ชอบ style แบบ TypeScript / Bun</li> </ul> <p>แล้วพบกันใหม่ สวัสดีครับ</p> <p>ตัวอย่างโค้ดทั้งหมดอยู่ที่ <a rel="nofollow noreferrer" href="https://github.com/mildronize/thai-ocr-with-easyocr">https://github.com/mildronize/thai-ocr-with-easyocr</a></p> 2025-05-13T00:00:00+00:00 2025-05-13T00:00:00+00:00 https://thadaw.com/posts/homelab-vpn-tailscale-kubectl-ep2/ <p>ช่วงนี้ผมเริ่มกลับมาเล่น Homelab ใหม่อีกครั้งหลังจากที่ปล่อยให้เครื่อง Ubuntu Server วางฝุ่นมานานสองปี ตอนแรกว่าจะเอาไว้เล่นเกม แต่มันก็ไม่ได้ใช้สักที เลยตัดสินใจเปลี่ยนมาใช้ทำ Homelab แทน</p> <p>ใน <strong>EP.1</strong> ผมลง RKE2 (Kubernetes) บนเครื่อง Ubuntu Server เรียบร้อยแล้ว และสามารถ <code>kubectl</code> ได้จากในเครื่องเดียวกัน</p> <p>แต่… ปัญหาคือผมอยากเข้าถึง cluster ได้ <strong>จากข้างนอกบ้าน</strong> บ้าง เช่น ผ่านโน้ตบุ๊กหรือมือถือเวลาอยู่นอกบ้าน หรือใช้ hotspot 5G เชื่อมต่อ ทำให้ต้องมีระบบ network ที่ปลอดภัยและเชื่อมต่อกลับบ้านได้</p> <p><strong>EP.2 นี้เลยจะพาไป:</strong></p> <ul> <li>ติดตั้ง <a rel="nofollow noreferrer" href="https://tailscale.com/">Tailscale</a> เพื่อเชื่อมต่อเครื่องทุกตัวให้อยู่ใน network เดียวกันแบบ private VPN</li> <li>ตั้งค่า <code>kubectl</code> ให้เชื่อมกับ K8s cluster ผ่านชื่อ domain ของ Tailscale (magicDNS)</li> <li>แก้ปัญหา TLS certificate ที่ไม่ตรงชื่อ domain</li> <li>และสรุปความเข้าใจเรื่อง token-based กับ cert-based auth ใน Kubernetes แบบง่าย ๆ</li> </ul> <p>ทั้งหมดนี้จะเล่าตามสิ่งที่ผมเจอจริง และวิธีที่ผมใช้แก้แบบค่อย ๆ ทำ พร้อมจุดพลาดที่ควรระวังครับ</p> <p>ไปลุยกันเลย 🔧</p> <h2 id="thamaimthuengeluue-kaich-tailscale">ทำไมถึงเลือกใช้ Tailscale?<a class="zola-anchor" href="#thamaimthuengeluue-kaich-tailscale" aria-label="Anchor link for: thamaimthuengeluue-kaich-tailscale" style="visibility: hidden;"></a> </h2> <p>พอเริ่มทำ Homelab จริงจัง สิ่งที่อยากได้มากที่สุดคือ “ความสะดวกในการเข้าถึงเครื่องที่บ้านจากที่ไหนก็ได้” ไม่ว่าจะนั่งอยู่คาเฟ่ ใช้ 5G hotspot หรือเปิดเครื่องจากต่างจังหวัด ก็อยากจะ <code>ssh</code> หรือ <code>kubectl</code> เข้าบ้านได้เหมือนนั่งอยู่ใน network เดียวกัน</p> <p>แน่นอนว่าเราสามารถ forward port จาก router ก็ได้ หรือใช้ Dynamic DNS ก็ได้ แต่ทั้งสองวิธีนั้นมีความยุ่งยากหลายอย่าง เช่น ต้องตั้งค่า firewall เอง, เสี่ยงโดน scan จากภายนอก, และยังต้องจัดการกับ IP เปลี่ยนบ่อย ๆ ด้วย</p> <p>ผมเลยมองหา solution ที่ทำให้:</p> <ul> <li>ทุกเครื่องเชื่อมต่อกันได้เหมือนอยู่ใน network เดียวกัน</li> <li>ไม่ต้องเปิดพอร์ตหรือยุ่งกับ router</li> <li>มีระบบ identity, auth และ DNS มาให้ครบ</li> <li>และที่สำคัญ... <strong>ตั้งค่าง่าย ไม่ต้อง config เยอะ</strong></li> </ul> <p>สุดท้ายก็มาเจอกับ <strong>Tailscale</strong> ที่ตอบโจทย์เกือบทุกข้อแบบไม่ต้องตั้งค่าอะไรเยอะเลย แค่ login ก็ใช้งานได้ทันที</p> <p>จากตรงนี้แหละครับ ที่ทำให้ผมตัดสินใจจะติดตั้ง Tailscale บน Ubuntu Server ที่เป็นเครื่องหลักใน Homelab</p> <p>ไปดูกันว่าเราจะติดตั้งยังไง และเชื่อมเครื่องต่าง ๆ เข้า network เดียวกันได้ยังไงครับ 🛠️</p> <h2 id="tidtang-tailscale-bn-ubuntu-server">ติดตั้ง Tailscale บน Ubuntu Server<a class="zola-anchor" href="#tidtang-tailscale-bn-ubuntu-server" aria-label="Anchor link for: tidtang-tailscale-bn-ubuntu-server" style="visibility: hidden;"></a> </h2> <p>จะเห็นว่าผมลง App ของ Tailscale ไว้บน Mac Mini เรียบร้อยแล้ว มันขึ้นมาว่ามี device เชื่อมอยู่แค่เครื่องเดียว ยังไม่ได้ลงฝั่ง Ubuntu Server เลย ซึ่งเป็นเครื่องหลักที่รัน RKE2 อยู่</p> <p>วันนี้เราจะมาลง Tailscale บน Ubuntu Server กันครับ</p> <p><img src="https://thadaw.com/posts/homelab-vpn-tailscale-kubectl-ep2/tailscale-setup-guide.png" alt="Tailscale setup screen showing Mac Mini as the first connected device and prompting to add a second device, such as Ubuntu Server." /></p> <p>เริ่มจากคำสั่งติดตั้งตามที่หน้าเว็บเค้าแนะนำ:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">curl</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>fsSL</span> https://tailscale.com/install.sh</span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sh</span></span> </span></code></pre> <p>หลังจากนั้นมันจะขึ้นข้อความแนะนำว่าให้เรา <code>sudo tailscale up</code> เพื่อเริ่มใช้งาน</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Installation</span></span><span class="z-meta z-function-call z-arguments z-shell"> complete! Log in to start using Tailscale by running:</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> tailscale up</span> </span></code></pre> <p>เมื่อรันคำสั่งนี้ มันจะให้ลิงก์มาให้เราไปเปิดใน Browser เพื่อ login ด้วยบัญชี Google หรือ Microsoft ที่เราใช้กับ Tailscale</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo tailscale up</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">To</span></span><span class="z-meta z-function-call z-arguments z-shell"> authenticate, visit:</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">https://login.tailscale.com/a/xxxxxxx</span></span> </span></code></pre> <p>เปิดลิงก์นั้นใน browser แล้วกด login ให้เสร็จ จากนั้น… พร้อมแล้วครับ!</p> <p><img src="https://thadaw.com/posts/homelab-vpn-tailscale-kubectl-ep2/tailscale-connected.png" alt="Tailscale setup complete screen showing successful connection between two devices: thadas-mac-mini and thadawth." /></p> <p>พอเสร็จแล้วเราจะเห็นว่าเครื่อง Mac กับ Ubuntu Server จะถูกเชื่อมอยู่ในเครือข่ายเดียวกันเรียบร้อย ที่น่าทึ่งคือ เราสามารถ access กันผ่านชื่อ domain ได้เลยด้วย โดยไม่ต้องจำ IP อีกต่อไป</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">ssh</span></span><span class="z-meta z-function-call z-arguments z-shell"> thadawth.tail1234da.ts.net<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.ssh/my_home_lab/id_rsa</span> </span></code></pre> <p>ชื่อแบบนี้มาจาก magicDNS ของ Tailscale ซึ่งมันจะผูก domain ให้ device แต่ละตัวอัตโนมัติ โดย domain ทั้งหมดจะอยู่ภายใต้ tailnet name ของเรา</p> <p>ชื่อ tailnet จะหน้าตาประมาณนี้:</p> <pre class="z-code"><code><span class="z-text z-plain">xxxx.ts.net </span></code></pre> <p>ซึ่งตอนสมัครเค้าจะสุ่มมาให้เรา แต่เราสามารถเข้าไปเปลี่ยนชื่อได้ภายหลังที่หน้า admin console ของ Tailscale</p> <p>และทุกเครื่องที่เชื่อมต่อจะได้ทั้ง IP address (ของ Tailscale) และ domain name ส่วนตัว เช่น</p> <pre class="z-code"><code><span class="z-text z-plain">mac-mini.tail1234da.ts.net </span><span class="z-text z-plain">ubuntu-server.tail1234da.ts.net </span></code></pre> <p>ผมก็สามารถ ssh ข้ามไปยังเครื่อง ubuntu-server ได้จากที่ไหนก็ได้ผ่าน domain นี้เลย</p> <p>หลังจากเชื่อมกันได้แล้ว อีกฟีเจอร์หนึ่งที่แนะนำให้เปิดคือ <strong>HTTPS support</strong> ของ Tailscale จะช่วยให้ domain ที่เราจะเรียก (เช่น <code>https://my-node.tail1234da.ts.net</code>) ใช้ TLS ได้แบบ auto-verified จาก browser ทั่วไป</p> <p>เปิดได้ง่าย ๆ ที่หน้า DNS ของ admin console: <a rel="nofollow noreferrer" href="https://login.tailscale.com/admin/dns">https://login.tailscale.com/admin/dns</a></p> <p><img src="https://thadaw.com/posts/homelab-vpn-tailscale-kubectl-ep2/tailscale-enable-https.png" alt="Tailscale UI that show how to enable HTTPS" /></p> <p>ต่อไปเราจะเริ่มตั้งค่า <code>kubectl</code> เพื่อเชื่อมกับ RKE2 cluster ผ่าน DNS ตัวนี้กันครับ และดูว่าเราจะเจอ TLS error แบบไหนบ้าง แล้วแก้ยังไงให้เชื่อมต่อได้จากนอกบ้านแบบปลอดภัย</p> <h2 id="tangkhaa-kubectl-aihaich-dns-kh-ng-tailscale-echuue-maipthii-cluster">ตั้งค่า <code>kubectl</code> ให้ใช้ DNS ของ Tailscale เชื่อมไปที่ Cluster<a class="zola-anchor" href="#tangkhaa-kubectl-aihaich-dns-kh-ng-tailscale-echuue-maipthii-cluster" aria-label="Anchor link for: tangkhaa-kubectl-aihaich-dns-kh-ng-tailscale-echuue-maipthii-cluster" style="visibility: hidden;"></a> </h2> <p>หลังจากที่เราเชื่อมเครื่อง Mac กับ Ubuntu Server เข้าด้วยกันผ่าน Tailscale ได้แล้ว ผมก็อยากจะ <code>kubectl</code> เข้าไปยัง RKE2 cluster จากเครื่อง Mac ผ่าน domain ของ Tailscale เลย</p> <p>เครื่อง Ubuntu Server ของผมรัน RKE2 อยู่ที่:</p> <pre class="z-code"><code><span class="z-text z-plain">https://192.168.1.107:6443 </span></code></pre> <p>แต่พอเรามี Tailscale แล้ว เราสามารถเปลี่ยนไปใช้ชื่อ domain ได้เลย เช่น:</p> <pre class="z-code"><code><span class="z-text z-plain">https://thadawth.tail1234da.ts.net:6443 </span></code></pre> <p>ซึ่งเป็น magicDNS ของเครื่อง Ubuntu Server ที่ได้จาก Tailscale</p> <h3 id="ephim-context-aihmekhaaaipain-kubeconfig">เพิ่ม context ใหม่เข้าไปใน kubeconfig<a class="zola-anchor" href="#ephim-context-aihmekhaaaipain-kubeconfig" aria-label="Anchor link for: ephim-context-aihmekhaaaipain-kubeconfig" style="visibility: hidden;"></a> </h3> <p>ผมลองสร้าง context ใหม่ใน <code>~/.kube/config</code> แบบนี้ครับ:</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">apiVersion</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">v1</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">clusters</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"><span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">cluster</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">certificate-authority-data</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">xxx</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">server</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">https://192.168.1.107:6443</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">my_homelab-cluster</span> </span><span class="z-source z-yaml"><span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">cluster</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">certificate-authority-data</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">xxx</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">server</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">https://thadawth.tail1234da.ts.net:6443</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">my_homelab-cluster_tailscale</span> </span></code></pre> <p>จากนั้นลองรันคำสั่ง:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> config use-context my_homelab-cluster_tailscale</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> get pods</span> </span></code></pre> <p>ผลลัพธ์คือ...</p> <pre class="z-code"><code><span class="z-text z-plain">E0512 17:44:46.732328 34569 memcache.go:265] &quot;Unhandled Error&quot; err=&quot;couldn&#39;t get current server API group list: Get \&quot;https://thadawth.tail1234da.ts.net:6443/api?timeout=32s\&quot;: tls: failed to verify certificate: x509: certificate is valid for ..., not thadawth.tail1234da.ts.net&quot; </span></code></pre> <p>อ้าว... ทำไมเป็นแบบนี้?</p> <h3 id="payhaakhuue-tls-certificate-aimr-ngrabchuue-tailscale-dns">ปัญหาคือ TLS Certificate ไม่รองรับชื่อ Tailscale DNS<a class="zola-anchor" href="#payhaakhuue-tls-certificate-aimr-ngrabchuue-tailscale-dns" aria-label="Anchor link for: payhaakhuue-tls-certificate-aimr-ngrabchuue-tailscale-dns" style="visibility: hidden;"></a> </h3> <p>ผมเลยลอง inspect ตัว cert ที่ Kube API Server ใช้อยู่ ด้วย <code>openssl</code>:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">openssl</span></span><span class="z-meta z-function-call z-arguments z-shell"> s_client<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>connect</span> 127.0.0.1:6443<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>showcerts</span> <span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>/dev/null <span class="z-constant z-numeric z-integer z-decimal z-file-descriptor z-shell">2</span><span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span>/dev/null <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"></span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">openssl</span></span><span class="z-meta z-function-call z-arguments z-shell"> x509<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>noout</span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>text</span></span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">grep</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>A1</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Subject Alternative Name<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span></code></pre> <p>ผลที่ได้คือ:</p> <pre data-lang="text" class="language-text z-code"><code class="language-text" data-lang="text"><span class="z-text z-plain">X509v3 Subject Alternative Name: </span><span class="z-text z-plain"> DNS:kubernetes, DNS:kubernetes.default, DNS:kubernetes.default.svc, </span><span class="z-text z-plain"> DNS:kubernetes.default.svc.cluster.local, DNS:localhost, DNS:thadawth, </span><span class="z-text z-plain"> IP Address:127.0.0.1, IP Address:192.168.1.107, ... </span></code></pre> <p>จากตรงนี้เราจะเห็นว่า <strong>ไม่มีชื่อ <code>thadawth.tail1234da.ts.net</code> อยู่ใน SAN</strong> ของ cert เลย ซึ่งหมายความว่า ถึงแม้จะชี้ DNS มาถูกต้องแล้ว <code>kubectl</code> ก็จะไม่ยอมเชื่อถือ server เพราะ TLS ไม่ match</p> <h2 id="thamaih-kube-api-server-r-ngrabchuue-dns-kh-ng-tailscale">ทำให้ Kube API Server รองรับชื่อ DNS ของ Tailscale<a class="zola-anchor" href="#thamaih-kube-api-server-r-ngrabchuue-dns-kh-ng-tailscale" aria-label="Anchor link for: thamaih-kube-api-server-r-ngrabchuue-dns-kh-ng-tailscale" style="visibility: hidden;"></a> </h2> <p>จากตอนที่แล้วเรารู้แล้วว่า <code>kubectl</code> เชื่อมผ่าน DNS ของ Tailscale ไม่ได้ เพราะ <strong>cert ไม่ครอบคลุมชื่อที่ใช้</strong></p> <p>ทางแก้คือ… เราต้อง <strong>เพิ่ม DNS ของ Tailscale (<code>thadawth.tail1234da.ts.net</code>) เข้าไปใน TLS certificate ของ RKE2</strong> ซึ่งเราทำได้โดยการตั้งค่าในไฟล์ config แล้วให้ RKE2 regenerate cert ใหม่ให้ครับ</p> <h3 id="1-aekaifl-config-yaml-kh-ng-rke2">1. แก้ไฟล์ config.yaml ของ RKE2<a class="zola-anchor" href="#1-aekaifl-config-yaml-kh-ng-rke2" aria-label="Anchor link for: 1-aekaifl-config-yaml-kh-ng-rke2" style="visibility: hidden;"></a> </h3> <p>RKE2 จะอ่านค่าจากไฟล์นี้:</p> <pre class="z-code"><code><span class="z-text z-plain">/etc/rancher/rke2/config.yaml </span></code></pre> <p>ถ้าไฟล์นี้ยังไม่มี ให้เราสร้างใหม่ได้เลย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mkdir<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>p</span> /etc/rancher/rke2</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> nano /etc/rancher/rke2/config.yaml</span> </span></code></pre> <p>แล้วใส่ค่าแบบนี้ (เพิ่ม DNS ที่เราต้องการลงไป):</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">tls-san</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>192.168.1.107<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>thadawth.tail1234da.ts.net<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> </span></code></pre> <p>บรรทัดแรกคือ IP เดิมที่มีอยู่แล้ว บรรทัดที่สองคือ DNS จาก Tailscale ที่เราต้องการให้ cert รองรับ</p> <h3 id="2-lb-cert-ekaa-ephuue-aih-rke2-sraangaihm">2. ลบ cert เก่า (เพื่อให้ RKE2 สร้างใหม่)<a class="zola-anchor" href="#2-lb-cert-ekaa-ephuue-aih-rke2-sraangaihm" aria-label="Anchor link for: 2-lb-cert-ekaa-ephuue-aih-rke2-sraangaihm" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> systemctl stop rke2-server</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> rm /var/lib/rancher/rke2/server/tls/serving-kube-apiserver.crt</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> rm /var/lib/rancher/rke2/server/tls/serving-kube-apiserver.key</span> </span></code></pre> <p><strong>⚠️ ระวัง:</strong> อย่าลบไฟล์ <code>server-ca.key</code> เด็ดขาดนะครับ อันนั้นคือ root CA ของระบบ ถ้าหาย = cluster พัง</p> <h3 id="3-start-rke2-aihm-ephuue-aihmansraang-cert-aihmthiirwm-dns-thiieraat-ngkaar">3. Start RKE2 ใหม่ เพื่อให้มันสร้าง cert ใหม่ที่รวม DNS ที่เราต้องการ<a class="zola-anchor" href="#3-start-rke2-aihm-ephuue-aihmansraang-cert-aihmthiirwm-dns-thiieraat-ngkaar" aria-label="Anchor link for: 3-start-rke2-aihm-ephuue-aihmansraang-cert-aihmthiirwm-dns-thiieraat-ngkaar" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> systemctl start rke2-server</span> </span></code></pre> <p>จากนั้นรอให้ cluster กลับมาพร้อม (<code>kubectl get nodes</code> ต้องใช้ได้จากเครื่อง server)</p> <h3 id="4-trwcchs-b-cert-aihm">4. ตรวจสอบ cert ใหม่<a class="zola-anchor" href="#4-trwcchs-b-cert-aihm" aria-label="Anchor link for: 4-trwcchs-b-cert-aihm" style="visibility: hidden;"></a> </h3> <p>ลองใช้ <code>openssl</code> ดูอีกทีว่า DNS ของเราถูกเพิ่มเข้าไปแล้วจริงไหม:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">openssl</span></span><span class="z-meta z-function-call z-arguments z-shell"> s_client<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>connect</span> 127.0.0.1:6443<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>showcerts</span> <span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>/dev/null <span class="z-constant z-numeric z-integer z-decimal z-file-descriptor z-shell">2</span><span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span>/dev/null <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"></span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">openssl</span></span><span class="z-meta z-function-call z-arguments z-shell"> x509<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>noout</span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>text</span></span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">grep</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>A1</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Subject Alternative Name<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span></code></pre> <p>ตอนนี้น่าจะเห็น:</p> <pre class="z-code"><code><span class="z-text z-plain">DNS:thadawth.tail1234da.ts.net </span></code></pre> <p>โผล่มาแล้วเรียบร้อย 🎉</p> <h3 id="echuue-mt-cchaakekhruue-ng-uuenphaan-dns-yangaimaid">เชื่อมต่อจากเครื่องอื่นผ่าน DNS... ยังไม่ได้<a class="zola-anchor" href="#echuue-mt-cchaakekhruue-ng-uuenphaan-dns-yangaimaid" aria-label="Anchor link for: echuue-mt-cchaakekhruue-ng-uuenphaan-dns-yangaimaid" style="visibility: hidden;"></a> </h3> <p>หลังจากที่เราเพิ่ม <code>thadawth.tail1234da.ts.net</code> เข้าไปใน SAN ของ cert แล้ว ผมก็กลับมาที่เครื่อง Mac แล้วลองรัน <code>kubectl get nodes</code> ผ่าน context ที่ชี้ไปยัง DNS นี้</p> <p>ผลคือ... ยังไม่ได้ครับ</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Unable</span></span><span class="z-meta z-function-call z-arguments z-shell"> to connect to the server: x509: certificate signed by unknown authority</span> </span></code></pre> <p>ถึงแม้ cert จะรองรับชื่อ DNS แล้ว แต่ฝั่ง client (เครื่อง Mac) ยังไม่สามารถ “เชื่อถือ” cert ได้อยู่ดี เพราะใน <code>kubeconfig.yaml</code> ที่เราสร้างไว้ ยังใส่ <code>certificate-authority-data:</code> ไม่ถูกตัวนั่นเอง</p> <h2 id="aich-certificate-authority-data-thiithuukt-ng-ephuue-aihechuue-mt-phaan-dns-aidcchring">ใช้ <code>certificate-authority-data</code> ที่ถูกต้อง เพื่อให้เชื่อมต่อผ่าน DNS ได้จริง<a class="zola-anchor" href="#aich-certificate-authority-data-thiithuukt-ng-ephuue-aihechuue-mt-phaan-dns-aidcchring" aria-label="Anchor link for: aich-certificate-authority-data-thiithuukt-ng-ephuue-aihechuue-mt-phaan-dns-aidcchring" style="visibility: hidden;"></a> </h2> <p>ปัญหาจริง ๆ ไม่ได้อยู่ที่ cert ฝั่ง server แล้ว แต่เกิดจาก <code>certificate-authority-data:</code> ฝั่ง client ใน <code>kubeconfig.yaml</code> เราต้องใส่ cert ที่ตรงกับ CA ที่ใช้ sign cert ฝั่ง server จริง ๆ</p> <p>ซึ่งในกรณีของ RKE2 เราใช้ cert เดียวกับที่ Kube API Server ใช้รับการเชื่อมต่ออยู่แล้ว คือไฟล์ <code>serving-kube-apiserver.crt</code> ที่เราพูดถึงในขั้นตอนก่อนหน้า</p> <p>เราสามารถใช้คำสั่งนี้เพื่อ base64 cert ออกมาได้:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> cat /var/lib/rancher/rke2/server/tls/serving-kube-apiserver.crt</span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">base64</span></span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">tr</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>d</span> <span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>\n<span class="z-punctuation z-definition z-string z-end z-shell">&#39;</span></span></span> </span></code></pre> <p>จากนั้นเอาค่านี้ไปใส่ใน <code>kubeconfig.yaml</code> ตรง <code>certificate-authority-data:</code> แล้วลอง <code>kubectl get nodes</code> จากเครื่องนอกบ้านอีกครั้ง</p> <p>ครั้งนี้เชื่อมต่อได้เรียบร้อย และระบบก็เชื่อถือ cert ได้อย่างถูกต้องปลอดภัย</p> <h2 id="optional-sraang-account-aihmsamhrabkaarechuue-mt-cchaakekhruue-ngn-kbaan-aebb-token">(Optional) สร้าง Account ใหม่สำหรับการเชื่อมต่อจากเครื่องนอกบ้าน แบบ Token<a class="zola-anchor" href="#optional-sraang-account-aihmsamhrabkaarechuue-mt-cchaakekhruue-ngn-kbaan-aebb-token" aria-label="Anchor link for: optional-sraang-account-aihmsamhrabkaarechuue-mt-cchaakekhruue-ngn-kbaan-aebb-token" style="visibility: hidden;"></a> </h2> <p>ถ้าเราไม่อยากใช้ cert เดิมที่ RKE2 สร้างให้ตั้งแต่ตอนติดตั้ง (เพราะมัน embed cert+key แบบ root user ไว้ในไฟล์ <code>rke2.yaml</code>) หรือเราอยากแยก context สำหรับใช้งานจากเครื่องอื่น โดยเฉพาะ...</p> <p>เราสามารถสร้าง ServiceAccount ใหม่ แล้ว generate <code>kubeconfig.yaml</code> สำหรับ user นั้นได้เลยครับ</p> <h3 id="1-sraang-serviceaccount-aihm">1. สร้าง ServiceAccount ใหม่<a class="zola-anchor" href="#1-sraang-serviceaccount-aihm" aria-label="Anchor link for: 1-sraang-serviceaccount-aihm" style="visibility: hidden;"></a> </h3> <p>สมมติผมจะสร้างชื่อว่า <code>remote-admin</code>:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> create serviceaccount remote-admin<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>n</span> default</span> </span></code></pre> <h3 id="2-aihsiththiaebb-admin-hruue-cchacchamkad-namespace-kaid">2. ให้สิทธิ์แบบ admin (หรือจะจำกัด namespace ก็ได้)<a class="zola-anchor" href="#2-aihsiththiaebb-admin-hruue-cchacchamkad-namespace-kaid" aria-label="Anchor link for: 2-aihsiththiaebb-admin-hruue-cchacchamkad-namespace-kaid" style="visibility: hidden;"></a> </h3> <p>ถ้าอยากให้ใช้ได้เหมือน user หลัก:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> create clusterrolebinding remote-admin-binding <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>clusterrole</span><span class="z-keyword z-operator z-assignment z-option z-shell">=</span>cluster-admin <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>serviceaccount</span><span class="z-keyword z-operator z-assignment z-option z-shell">=</span>default:remote-admin</span> </span></code></pre> <h3 id="3-sraang-token-aebb-short-lived-kubernetes-1-24">3. สร้าง token แบบ short-lived (Kubernetes &gt;= 1.24)<a class="zola-anchor" href="#3-sraang-token-aebb-short-lived-kubernetes-1-24" aria-label="Anchor link for: 3-sraang-token-aebb-short-lived-kubernetes-1-24" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> create token remote-admin<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>n</span> default</span> </span></code></pre> <p>มันจะ print token ออกมาทาง stdout → เก็บไว้ก่อน</p> <h3 id="4-dueng-ca-crt-thiiaichsamhrab-certificate-authority-data">4. ดึง <code>ca.crt</code> ที่ใช้สำหรับ certificate-authority-data<a class="zola-anchor" href="#4-dueng-ca-crt-thiiaichsamhrab-certificate-authority-data" aria-label="Anchor link for: 4-dueng-ca-crt-thiiaichsamhrab-certificate-authority-data" style="visibility: hidden;"></a> </h3> <p>เราเคยได้ base64 cert ที่ถูกต้องไว้แล้วจากไฟล์นี้:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> cat /var/lib/rancher/rke2/server/tls/serving-kube-apiserver.crt</span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">base64</span></span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">tr</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>d</span> <span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>\n<span class="z-punctuation z-definition z-string z-end z-shell">&#39;</span></span></span> </span></code></pre> <h3 id="5-sraangaifl-kubeconfig-yaml">5. สร้างไฟล์ <code>kubeconfig.yaml</code><a class="zola-anchor" href="#5-sraangaifl-kubeconfig-yaml" aria-label="Anchor link for: 5-sraangaifl-kubeconfig-yaml" style="visibility: hidden;"></a> </h3> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">apiVersion</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">v1</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">kind</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Config</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">clusters</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"><span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">my-homelab_remote</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">cluster</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">server</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">https://thadawth.tail1234da.ts.net:6443</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">certificate-authority-data</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">&lt;ใส่ base64 CA ที่ได้มาข้างบน&gt;</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">users</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"><span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">remote-admin</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">user</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">token</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">&lt;ใส่ token ที่ create มาข้างบน&gt;</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">contexts</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"><span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">my-homelab_remote-context</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">context</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">cluster</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">my-homelab_remote</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">user</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">remote-admin</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">current-context</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">my-homelab_remote-context</span> </span></code></pre> <h3 id="6-aichngaancchaakekhruue-ng-uuen-scp-aela-merge-context">6. ใช้งานจากเครื่องอื่น: scp และ merge context<a class="zola-anchor" href="#6-aichngaancchaakekhruue-ng-uuen-scp-aela-merge-context" aria-label="Anchor link for: 6-aichngaancchaakekhruue-ng-uuen-scp-aela-merge-context" style="visibility: hidden;"></a> </h3> <p>สมมติว่าเราอยู่ที่เครื่อง remote (เช่นเครื่อง Mac) แล้วต้องการเชื่อมต่อไปยัง Homelab ผ่าน Tailscale เราจะทำตามขั้นตอนนี้:</p> <h4 id="6-1-copy-kubeconfig-maacchaakekhruue-ng-homelab">6.1 copy kubeconfig มาจากเครื่อง Homelab<a class="zola-anchor" href="#6-1-copy-kubeconfig-maacchaakekhruue-ng-homelab" aria-label="Anchor link for: 6-1-copy-kubeconfig-maacchaakekhruue-ng-homelab" style="visibility: hidden;"></a> </h4> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">scp</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.ssh/my_home_lab/id_rsa <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"> thadawth@thadawth.tail1234da.ts.net:/home/thadawth/scripts/remote-kubeconfig.yaml <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"> ./remote-kubeconfig.yaml</span> </span></code></pre> <h4 id="6-2-merge-context-ekhaakab-kube-config-thiiaichngaan-yuu">6.2 merge context เข้ากับ ~/.kube/config ที่ใช้งานอยู่<a class="zola-anchor" href="#6-2-merge-context-ekhaakab-kube-config-thiiaichngaan-yuu" aria-label="Anchor link for: 6-2-merge-context-ekhaakab-kube-config-thiiaichngaan-yuu" style="visibility: hidden;"></a> </h4> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">KUBECONFIG</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.kube/config:./remote-kubeconfig.yaml</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> config view<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>flatten</span> <span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span> merged-config.yaml</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">mv</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.kube/config <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.kube/config.backup.<span class="z-meta z-group z-expansion z-command z-parens z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-punctuation z-section z-parens z-begin z-shell">(</span><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">date</span></span><span class="z-meta z-function-call z-arguments z-shell"> +<span class="z-meta z-group z-expansion z-job z-shell"><span class="z-punctuation z-definition z-variable z-job z-shell">%</span><span class="z-variable z-other z-readwrite z-shell">Y</span></span><span class="z-meta z-group z-expansion z-job z-shell"><span class="z-punctuation z-definition z-variable z-job z-shell">%</span><span class="z-variable z-other z-readwrite z-shell">m</span></span><span class="z-meta z-group z-expansion z-job z-shell"><span class="z-punctuation z-definition z-variable z-job z-shell">%</span><span class="z-variable z-other z-readwrite z-shell">d</span></span>-<span class="z-meta z-group z-expansion z-job z-shell"><span class="z-punctuation z-definition z-variable z-job z-shell">%</span><span class="z-variable z-other z-readwrite z-shell">H</span></span><span class="z-meta z-group z-expansion z-job z-shell"><span class="z-punctuation z-definition z-variable z-job z-shell">%</span><span class="z-variable z-other z-readwrite z-shell">M</span></span><span class="z-meta z-group z-expansion z-job z-shell"><span class="z-punctuation z-definition z-variable z-job z-shell">%</span><span class="z-variable z-other z-readwrite z-shell">S</span></span></span><span class="z-punctuation z-section z-parens z-end z-shell">)</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">mv</span></span><span class="z-meta z-function-call z-arguments z-shell"> merged-config.yaml <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.kube/config</span> </span></code></pre> <p>จากนั้นเช็กดูว่า context ใหม่เพิ่มเข้ามาหรือยัง:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> config get-contexts</span> </span></code></pre> <p>เราควรเห็นชื่อ context ที่ตั้งไว้ เช่น <code>my-homelab_remote-context</code> จากนั้นก็สามารถสลับ context แล้วใช้งานได้ทันที:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> config use-context my-homelab_remote-context</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> get nodes</span> </span></code></pre> <p>แค่นี้เราก็สามารถ <code>kubectl</code> จากเครื่องข้างนอกเข้ามายัง cluster ที่บ้านได้แล้วครับ ผ่าน domain ของ Tailscale แบบปลอดภัย และแยก context ได้ชัดเจน 🎯</p> <h2 id="token-vs-cert-based-auth-aairpl-dphaykwaakan">Token vs Cert-based auth – อะไรปลอดภัยกว่ากัน?<a class="zola-anchor" href="#token-vs-cert-based-auth-aairpl-dphaykwaakan" aria-label="Anchor link for: token-vs-cert-based-auth-aairpl-dphaykwaakan" style="visibility: hidden;"></a> </h2> <p>ตอนที่ผมเริ่มตั้งค่าการเชื่อมต่อจากเครื่องนอกบ้าน สิ่งที่ต้องเจอแน่ ๆ คือคำถามนี้เลย จะใช้ token ดีมั้ย หรือจะ generate cert-based user ดีกว่า?</p> <p>ใน Kubernetes ทั้งสองวิธีนี้ถือว่าเป็น “ทางการ” ทั้งคู่ แต่พอใช้งานจริงจะมีลักษณะแตกต่างกันอยู่พอสมควร</p> <p><strong>Token-based auth</strong> อย่างที่เราใช้กับ <code>kubectl create token</code> จะออก token มาเป็น string ยาว ๆ เอาไปใส่ใน kubeconfig ได้เลย ข้อดีคือใช้ง่ายมาก ไม่ต้องสร้าง key-pair หรือ cert ใด ๆ เหมาะกับ automation, bot, หรือเวลาต้องใช้ชั่วคราวใน script</p> <p>แต่ข้อเสียคือ... ถ้า token นี้รั่ว ก็สามารถถูกนำไปใช้ได้ทันทีเหมือนรหัสผ่าน และในกรณีที่เป็น static token มันมักจะไม่มีวันหมดอายุด้วย</p> <p>ถ้าจะปลอดภัยขึ้น ควรใช้ projected token หรือ short-lived token ที่ Kubernetes version ใหม่ ๆ รองรับ (อันนี้แหละที่เราสร้างไว้ในตอนก่อนหน้า)</p> <p><strong>Cert-based auth</strong> จะใช้ public/private keypair ต้องมีการออก cert โดย CA ของ cluster (หรือ external CA) แล้วฝังลงใน kubeconfig เวลาจะ revoke ก็ทำได้จากฝั่ง server โดยไม่ต้องไปลบไฟล์ token ที่ฝั่ง user</p> <p>ข้อดีคือปลอดภัยสูง ใช้ TLS ระดับ x509 มาตรฐาน และสามารถระบุตัวตนได้แบบละเอียด เช่น อ้างอิง username, group, หรือ cert fingerprint ได้เลย</p> <p>ข้อเสียคือมันตั้งค่ายุ่งกว่า ถ้าไม่มีระบบจัดการ cert อัตโนมัติ และถ้า private key รั่ว ก็ไม่ต่างอะไรกับ token ที่รั่วเช่นกัน</p> <h3 id="aelw-rke2-aich-aairepn-default">แล้ว RKE2 ใช้อะไรเป็น default?<a class="zola-anchor" href="#aelw-rke2-aich-aairepn-default" aria-label="Anchor link for: aelw-rke2-aich-aairepn-default" style="visibility: hidden;"></a> </h3> <p>คำตอบคือ <strong>cert-based auth</strong></p> <p>ตอนติดตั้ง RKE2 เสร็จ มันจะ generate cert ให้กับ user ชื่อ <code>kubernetes-admin</code> หรือบางกรณีก็เป็น <code>rke2-default</code> พร้อมกับสร้าง kubeconfig ที่ฝัง <code>client-certificate-data</code> กับ <code>client-key-data</code> ไว้ในตัวเลย เราสามารถเอาไฟล์นั้นไปใช้ได้ทันทีโดยไม่ต้องสร้างอะไรเพิ่ม</p> <p>ผมคิดว่าเหตุผลที่ RKE2 เลือกใช้ cert เพราะมัน “ปลอดภัยโดยไม่ต้องพึ่ง external auth system” และใช้งานง่ายใน context ของ Homelab หรือ air-gapped environment ที่ไม่ได้เชื่อมกับ Azure AD หรือ OIDC</p> <p>สำหรับผมก็คือ</p> <ul> <li>ใช้ cert-based สำหรับผู้ใช้งานหลัก ที่ต้องเข้าควบคุม cluster</li> <li>ใช้ token-based สำหรับ automation หรือการเชื่อมต่อเฉพาะกิจ</li> </ul> <h2 id="srup-echuue-m-rke2-phaan-tailscale-aebbpl-dphay-chbab-homelab">สรุป: เชื่อม RKE2 ผ่าน Tailscale แบบปลอดภัย ฉบับ Homelab<a class="zola-anchor" href="#srup-echuue-m-rke2-phaan-tailscale-aebbpl-dphay-chbab-homelab" aria-label="Anchor link for: srup-echuue-m-rke2-phaan-tailscale-aebbpl-dphay-chbab-homelab" style="visibility: hidden;"></a> </h2> <p>หลังจากลองปรับไปหลายรอบ ในที่สุดผมก็สามารถเชื่อม <code>kubectl</code> จากเครื่องอื่นเข้า RKE2 ที่บ้านผ่าน Tailscale ได้แบบปลอดภัยเต็มระบบ</p> <p>สิ่งที่ดูเหมือนจะง่ายอย่างการ “แค่เปลี่ยนจาก local IP เป็น DNS” จริง ๆ แล้วต้องเข้าใจเรื่อง TLS, cert, SAN, และ auth อยู่พอสมควร แต่พอเข้าใจแล้วก็ไม่ได้ยากอย่างที่คิดครับ</p> <p>สิ่งที่ผมได้เรียนรู้จากรอบนี้คือ:</p> <ul> <li><strong>Tailscale ช่วยให้ทุกเครื่องเชื่อมอยู่ใน network เดียวกันได้ง่ายมาก</strong> ไม่ต้องตั้งค่า router หรือ port forwarding อะไรเลย</li> <li>แค่เปลี่ยนจาก local IP เป็น DNS ยังไม่พอ <strong>ต้อง regenerate cert ของ Kube API Server ให้รองรับชื่อ DNS ใหม่ด้วย</strong></li> <li>ถ้า <code>certificate-authority-data</code> ไม่ตรงกับ CA ที่เซ็น cert จริง ๆ ก็จะเชื่อมไม่ได้ ถึงแม้ชื่อจะ match แล้วก็ตาม</li> <li>การสร้าง <code>ServiceAccount</code> แยก user และออก token ใหม่ ก็ช่วยให้เชื่อมต่อได้อย่างปลอดภัย โดยไม่ต้องแชร์ cert หลักที่ฝังอยู่ในระบบ</li> <li><strong>cert-based auth กับ token-based auth มีจุดเด่นต่างกัน</strong> ถ้าใช้งานในระยะยาวหรือกับ user ที่สำคัญ ควรใช้ cert แต่ถ้าใช้เฉพาะกิจหรือใน script ที่ rotate ได้ง่าย ก็ใช้ token ได้เลย</li> </ul> <p>สุดท้าย ถ้ามีระบบที่ต้องให้คนอื่นเข้ามา access cluster หรืออยากเชื่อมต่อข้าม device อย่างปลอดภัย Tailscale + RKE2 + การออก <code>kubeconfig</code> ที่ถูกต้อง ก็เป็นชุดที่ตอบโจทย์ได้แบบง่ายและมีประสิทธิภาพมาก ๆ โดยเฉพาะสำหรับ Homelab</p> <p>ขอบคุณที่อ่านมาถึงตรงนี้ 🙌 ใครทำ Homelab เหมือนกัน ลองแชร์ประสบการณ์กันได้นะครับ 😎</p> 2025-05-12T00:00:00+00:00 2025-05-12T00:00:00+00:00 https://thadaw.com/posts/disable-password-ubuntu-2025/ <p>I recently set up a small VM running Ubuntu and wanted to secure it a bit. One of the first things I usually do is disable SSH password authentication and use only key-based login. It’s more secure and makes SSH a lot more convenient if you’re jumping between machines often.</p> <p>So I did the usual stuff:</p> <ol> <li> <p>Generated an SSH key using <code>ssh-keygen</code></p> </li> <li> <p>Copied the public key over with <code>ssh-copy-id</code></p> </li> <li> <p>Edited <code>/etc/ssh/sshd_config</code> and set:</p> <pre class="z-code"><code><span class="z-text z-plain">PasswordAuthentication no </span></code></pre> </li> <li> <p>Restarted the SSH service:</p> <pre class="z-code"><code><span class="z-text z-plain">sudo systemctl restart ssh </span></code></pre> </li> </ol> <p>I tested it… and it <strong>still allowed password login</strong>. Weird.</p> <h3 id="turns-out-ubuntu-cloud-init-strikes-again">Turns out: Ubuntu cloud-init strikes again<a class="zola-anchor" href="#turns-out-ubuntu-cloud-init-strikes-again" aria-label="Anchor link for: turns-out-ubuntu-cloud-init-strikes-again" style="visibility: hidden;"></a> </h3> <p>After some digging, I found out that <strong>Ubuntu (especially cloud images or VMs provisioned via cloud-init)</strong> may create a file at:</p> <pre class="z-code"><code><span class="z-text z-plain">/etc/ssh/sshd_config.d/50-cloud-init.conf </span></code></pre> <p>This file can contain:</p> <pre class="z-code"><code><span class="z-text z-plain">PasswordAuthentication yes </span></code></pre> <p>Which overrides what you set in the main <code>sshd_config</code> file.</p> <h3 id="how-i-fixed-it">How I fixed it<a class="zola-anchor" href="#how-i-fixed-it" aria-label="Anchor link for: how-i-fixed-it" style="visibility: hidden;"></a> </h3> <p>Simple fix: I just removed the file.</p> <pre class="z-code"><code><span class="z-text z-plain">sudo rm -f /etc/ssh/sshd_config.d/50-cloud-init.conf </span></code></pre> <p>Then restarted SSH again:</p> <pre class="z-code"><code><span class="z-text z-plain">sudo systemctl restart ssh </span></code></pre> <p>After that, I tested with:</p> <pre class="z-code"><code><span class="z-text z-plain">ssh -o PreferredAuthentications=password -o PubkeyAuthentication=no user@host </span></code></pre> <p>This time, it correctly rejected the password login with:</p> <pre class="z-code"><code><span class="z-text z-plain">Permission denied (publickey). </span></code></pre> <h3 id="final-thoughts">Final thoughts<a class="zola-anchor" href="#final-thoughts" aria-label="Anchor link for: final-thoughts" style="visibility: hidden;"></a> </h3> <p>I like how Ubuntu modularizes sshd config with the <code>sshd_config.d</code> directory, but it’s easy to miss overrides like this if you're used to managing just a single file.</p> <p>So if you’ve disabled password login and it’s <strong>still working</strong>, double-check that no other config file is sneaking in behind the scenes.</p> <p><strong>Reference:</strong> <a rel="nofollow noreferrer" href="https://askubuntu.com/questions/435615/disable-password-authentication-in-ssh">AskUbuntu – Disable password authentication in ssh</a></p> 2025-05-12T00:00:00+00:00 2025-05-12T00:00:00+00:00 https://thadaw.com/posts/note-setup-kube-rke2-homelab/ <h2 id="aenanam-homelab-aelaepaahmaaykh-ngrabb">แนะนำ Homelab และเป้าหมายของระบบ<a class="zola-anchor" href="#aenanam-homelab-aelaepaahmaaykh-ngrabb" aria-label="Anchor link for: aenanam-homelab-aelaepaahmaaykh-ngrabb" style="visibility: hidden;"></a> </h2> <p>เริ่มจาก…มีเครื่อง PC วางทิ้งไว้ 2 ปี ตอนแรกตั้งใจจะเอามาเล่นเกม เพราะมีการ์ดจอ AMD RX6600, CPU AMD 6 Core, RAM 32GB แบบสเปกดีอยู่นะ แต่สุดท้ายก็ไม่ได้เล่นสักที... กลายเป็นโต๊ะวางฝุ่นไปเฉย 😅</p> <p>คิดไปคิดมา...ไหน ๆ ก็ไม่ได้เล่นเกมละ งั้นเอามาทำ Homelab ละกัน เสียดายอย่างเดียวคือ License Windows 11 หายจ้อย เพราะจำ Key ไม่ได้แล้ว 5555</p> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Note</strong></p> <p>ผมไม่ค่อยได้ Setup Linux Server เท่าไหร่ ถ้าผมเขียนผมตรงไหน ฝากรบกวนแนะนำด้วยนะครับ</p> </div> </blockquote> <p>นี่ดูสิ Spec เหลือๆ <img src="https://thadaw.com/posts/note-setup-kube-rke2-homelab/htop-pc.jpg" alt="htop" /></p> <h3 id="thamaimeluue-kaich-rke2">ทำไมเลือกใช้ RKE2?<a class="zola-anchor" href="#thamaimeluue-kaich-rke2" aria-label="Anchor link for: thamaimeluue-kaich-rke2" style="visibility: hidden;"></a> </h3> <p>จริง ๆ ตัวเลือกมันก็เยอะนะ ไม่ว่าจะเป็น:</p> <ul> <li><code>kubeadm</code> แบบคลาสสิก</li> <li><code>k3s</code> ที่เบาแต่บางอย่างก็ตัดทิ้งไปเยอะ</li> <li>หรือจะ <code>microk8s</code>, <code>kind</code>, <code>minikube</code> ก็มีนะ แต่ไม่ได้เลือกวันนี้</li> </ul> <p>แต่สุดท้ายเลือก RKE2 เพราะ...</p> <p>💡 มันคือ Kubernetes ที่:</p> <ul> <li>มี <strong>ทุกอย่างแบบ production-grade</strong></li> <li>ใช้งานง่ายกว่า <code>kubeadm</code> เยอะ</li> <li>มี binary เดียวติดตั้งแล้วจบ</li> <li>ใช้ <code>containerd</code> ไม่ผูกกับ Docker</li> <li>มี bundled etcd, kubelet, scheduler มาให้ครบ</li> <li>และสำคัญสุดคือ... <strong>ไม่ต้องผูกกับ Rancher UI ก็ใช้ได้</strong></li> </ul> <p>แถม RKE2 ก็เป็นของ Rancher (SUSE) เหมือนกับ <code>k3s</code> นั่นแหละ</p> <p>แต่ตัวนี้ <strong>เน้น production + HA จริงจังมากกว่า</strong></p> <p>แต่ก็นะ Spec เหลือๆ จะใช้ k3s ก็ดูถูก Spec ไปหน่อย 555 เลยลองอันที่น่าจะเอาไปใช้งานจริงได้ด้วยดีกว่า</p> <h3 id="thamaimt-ngaeyk-disk-dwy-lvm">ทำไมต้องแยก Disk ด้วย LVM?<a class="zola-anchor" href="#thamaimt-ngaeyk-disk-dwy-lvm" aria-label="Anchor link for: thamaimt-ngaeyk-disk-dwy-lvm" style="visibility: hidden;"></a> </h3> <p>เวลาทำ Homelab หลายคนชอบลง ๆ ไว้ใน <code>/</code> หมดเลย แต่พอทำจริง จะรู้เลยว่า:</p> <ul> <li>etcd กับ container runtime (containerd) มัน write เยอะมาก</li> <li>log ก็พุ่ง</li> <li>disk เต็ม → cluster พัง</li> <li>หรือจะ move/backup volume ทีนึงก็ลำบาก</li> </ul> <p>เราเลยเลือกใช้ <strong>LVM เพื่อจัดการ disk แบบยืดหยุ่น</strong></p> <ul> <li>แยก disk path <code>/var/lib</code>, <code>/opt/kube-data</code> ออกจากกัน</li> <li>เอา <code>/var/lib</code> ไปอยู่ SSD เพื่อให้ etcd/containerd เร็ว</li> <li>ทำ snapshot, resize, หรือย้าย path ได้ภายหลัง</li> <li>และแยก HDD อีกตัวไว้สำรอง/เก็บ log</li> </ul> <h3 id="epaahmaaykh-ngrabbnii">เป้าหมายของระบบนี้<a class="zola-anchor" href="#epaahmaaykh-ngrabbnii" aria-label="Anchor link for: epaahmaaykh-ngrabbnii" style="visibility: hidden;"></a> </h3> <p>เราอยากให้ Homelab ตัวนี้…</p> <ul> <li>✅ ใช้ได้แบบ <strong>production จริง</strong> (run workload จริงได้)</li> <li>✅ <strong>Scale</strong> ได้ในอนาคต (เพิ่ม Node ก็ได้)</li> <li>✅ <strong>ไม่ผูกกับ distro</strong> ใด ๆ เช่น Rancher UI, k3s-only path</li> <li>✅ เข้าใจว่าอะไรอยู่ตรงไหน ควบคุมได้เองหมด</li> <li>✅ พร้อมใช้กับ Helm, Longhorn, GitOps, Monitoring ได้หมด</li> </ul> <p>พูดง่าย ๆ คือมันจะเป็น “kube cluster ที่ไว้ใจได้”</p> <p>เอาไว้ลองของจริงก่อนเอาไปใช้กับ production ข้างนอก</p> <h2 id="waangaephncchadkaar-disk-volume-aihphr-msamhrab-kubernetes">วางแผนจัดการ Disk / Volume ให้พร้อมสำหรับ Kubernetes<a class="zola-anchor" href="#waangaephncchadkaar-disk-volume-aihphr-msamhrab-kubernetes" aria-label="Anchor link for: waangaephncchadkaar-disk-volume-aihphr-msamhrab-kubernetes" style="visibility: hidden;"></a> </h2> <p>ก่อนจะลง RKE2 ผมก็มานั่งคิดว่า... ไหน ๆ ก็มี disk เยอะ ทำไมไม่จัดให้มันดีไปเลยตั้งแต่ต้น?</p> <p>เครื่องที่ใช้มีทั้ง SSD และ HDD อยู่ในเครื่องเดียว:</p> <ul> <li><strong>SSD (NVMe 1TB)</strong> → ใช้ทำงานเร็ว ๆ เช่น OS, Database, PVC ที่ต้องการ IOPS</li> <li><strong>HDD (2TB)</strong> → ใช้เก็บ log, สำรองข้อมูล, ของที่ไม่ต้องอ่านเร็ว</li> </ul> <p>พอรวมกับ LVM แล้ว เราก็จัดโครงสร้าง storage ได้แบบนี้เลย 👇</p> <h3 id="ssd-nvme-samhrab-k8s-core-aela-data-thiit-ngkaarkhwaamerw">SSD (NVMe): สำหรับ K8s Core และ Data ที่ต้องการความเร็ว<a class="zola-anchor" href="#ssd-nvme-samhrab-k8s-core-aela-data-thiit-ngkaarkhwaamerw" aria-label="Anchor link for: ssd-nvme-samhrab-k8s-core-aela-data-thiit-ngkaarkhwaamerw" style="visibility: hidden;"></a> </h3> <table><thead><tr><th>Mountpoint</th><th>ใช้ทำอะไร</th><th>Volume</th></tr></thead><tbody> <tr><td><code>/</code></td><td>ตัว OS Ubuntu</td><td><code>ubuntu-lv</code></td></tr> <tr><td><code>/var/lib</code></td><td>เก็บ state ของ containerd, etcd, kubelet</td><td><code>varlib</code></td></tr> <tr><td><code>/opt/kube-data</code></td><td>สำหรับ PVC แบบเร็ว เช่น PostgreSQL, Redis</td><td><code>kubedata</code></td></tr> </tbody></table> <h3 id="hdd-samhrabngaansamr-ng-log-cold-storage">HDD: สำหรับงานสำรอง / Log / Cold Storage<a class="zola-anchor" href="#hdd-samhrabngaansamr-ng-log-cold-storage" aria-label="Anchor link for: hdd-samhrabngaansamr-ng-log-cold-storage" style="visibility: hidden;"></a> </h3> <table><thead><tr><th>Mountpoint</th><th>ใช้ทำอะไร</th><th>หมายเหตุ</th></tr></thead><tbody> <tr><td><code>/mnt/storage-hdd</code></td><td>สำรองข้อมูล, log, rsync snapshot</td><td>จาก <code>/dev/sda2</code></td></tr> <tr><td><code>/mnt/storage-hdd2</code> <em>(optional)</em></td><td>สำรอง metadata หรือ media file</td><td><code>/dev/sda3</code> ถ้าว่าง</td></tr> </tbody></table> <h3 id="logical-volume-thiisraangdwy-lvm">Logical Volume ที่สร้างด้วย LVM<a class="zola-anchor" href="#logical-volume-thiisraangdwy-lvm" aria-label="Anchor link for: logical-volume-thiisraangdwy-lvm" style="visibility: hidden;"></a> </h3> <table><thead><tr><th>LV Name</th><th>Mountpoint</th><th>ใช้ทำอะไร</th></tr></thead><tbody> <tr><td><code>root</code></td><td><code>/</code></td><td>ระบบ OS</td></tr> <tr><td><code>varlib</code></td><td><code>/var/lib</code></td><td>ส่วนที่ K8s ใช้หลัก ๆ (etcd, containerd)</td></tr> <tr><td><code>kubedata</code></td><td><code>/opt/kube-data</code></td><td>PVC สำหรับ Database / Log เร็ว ๆ</td></tr> </tbody></table> <h3 id="hlakkaar-kaebb-volume-ngaay">หลักการออกแบบ Volume ง่าย ๆ<a class="zola-anchor" href="#hlakkaar-kaebb-volume-ngaay" aria-label="Anchor link for: hlakkaar-kaebb-volume-ngaay" style="visibility: hidden;"></a> </h3> <p>ผมคิดไว้ว่า...</p> <ul> <li>ไม่อยากให้ K8s ใช้ path แบบ <code>rancher/</code>, <code>k3s/</code> หรืออะไรที่ "ผูกกับ distro"</li> <li>อยากตั้งชื่อ path แบบกลาง ๆ เช่น <code>/opt/kube-data</code> หรือ <code>/var/lib</code> ที่ควบคุมเองได้</li> <li>เวลาอยากย้าย cluster ก็แค่ย้าย folder หรือ LV ไปเท่านั้น</li> </ul> <p>แถมด้วยข้อดีของ LVM:</p> <ul> <li>Resize ได้ง่าย</li> <li>Snap ได้</li> <li>แยก log / etcd ออกจากกันไม่ให้ disk เต็มรวมหัวกัน</li> </ul> <h3 id="taw-yaang-use-case-cchring">ตัวอย่าง Use Case จริง ๆ<a class="zola-anchor" href="#taw-yaang-use-case-cchring" aria-label="Anchor link for: taw-yaang-use-case-cchring" style="visibility: hidden;"></a> </h3> <table><thead><tr><th>งาน</th><th>Path</th><th>ประเภท Storage</th></tr></thead><tbody> <tr><td>etcd, containerd, kubelet</td><td><code>/var/lib</code></td><td>SSD (เร็วมาก)</td></tr> <tr><td>PostgreSQL / Redis PVC</td><td><code>/opt/kube-data/postgres</code></td><td>SSD</td></tr> <tr><td>Media uploads / backup logs</td><td><code>/mnt/storage-hdd/uploads</code></td><td>HDD</td></tr> <tr><td>สำรอง snapshot</td><td><code>/mnt/storage-hdd/backup</code></td><td>HDD</td></tr> </tbody></table> <p>ต่อจากนี้ก็จะเริ่มสร้าง LV, mount, format และเตรียมไว้ให้ RKE2 ใช้งานได้เลย</p> <h2 id="lngmuue-cchadkaar-lvm-aeyk-disk-aih-k8s-aichngaanaidyaaw-rocket">ลงมือจัดการ LVM แยก Disk ให้ K8s ใช้งานได้ยาว ๆ 🚀<a class="zola-anchor" href="#lngmuue-cchadkaar-lvm-aeyk-disk-aih-k8s-aichngaanaidyaaw-rocket" aria-label="Anchor link for: lngmuue-cchadkaar-lvm-aeyk-disk-aih-k8s-aichngaanaidyaaw-rocket" style="visibility: hidden;"></a> </h2> <p>หลังจากลง Ubuntu 24.04 LTS เสร็จ ผมก็เช็คสเปกพื้นฐานก่อนด้วยคำสั่ง <code>lsb_release -a</code> กับ <code>uname -a</code> เพื่อให้แน่ใจว่า kernel ใหม่ ๆ พร้อมใช้งาน และรองรับระบบ LVM กับ container runtime ได้ดี</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> lsb_release<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>a</span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Distributor</span></span><span class="z-meta z-function-call z-arguments z-shell"> ID: Ubuntu</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Description:</span></span><span class="z-meta z-function-call z-arguments z-shell"> Ubuntu 24.04.2 LTS</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">...</span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> uname<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>a</span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Linux</span></span><span class="z-meta z-function-call z-arguments z-shell"> XXXX 6.8.0-59-generic ...</span> </span></code></pre> <p>ที่ผมติดตั้งมาใช้ LVM แบบอัตโนมัติเรียบร้อย เพราะอยากให้จัดการ Disk ได้ง่ายขึ้น โดยไม่ต้อง Format ใหม่ทุกครั้งที่อยากเพิ่ม volume</p> <h3 id="echkhokhrngsraang-disk-thiimii-yuuk-n">เช็คโครงสร้าง disk ที่มีอยู่ก่อน<a class="zola-anchor" href="#echkhokhrngsraang-disk-thiimii-yuuk-n" aria-label="Anchor link for: echkhokhrngsraang-disk-thiimii-yuuk-n" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> lsblk</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">NAME</span></span><span class="z-meta z-function-call z-arguments z-shell"> MAJ:MIN RM SIZE RO TYPE MOUNTPOINTS</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sda</span></span><span class="z-meta z-function-call z-arguments z-shell"> 8:0 0 1.8T 0 disk </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">├─sda1</span></span><span class="z-meta z-function-call z-arguments z-shell"> 8:1 0 16M 0 part </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">├─sda2</span></span><span class="z-meta z-function-call z-arguments z-shell"> 8:2 0 886.4G 0 part </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">└─sda3</span></span><span class="z-meta z-function-call z-arguments z-shell"> 8:3 0 976.6G 0 part </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">nvme0n1</span></span><span class="z-meta z-function-call z-arguments z-shell"> 259:0 0 931.5G 0 disk </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">├─nvme0n1p1</span></span><span class="z-meta z-function-call z-arguments z-shell"> 259:1 0 1G 0 part /boot/efi</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">├─nvme0n1p2</span></span><span class="z-meta z-function-call z-arguments z-shell"> 259:2 0 2G 0 part /boot</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">└─nvme0n1p3</span></span><span class="z-meta z-function-call z-arguments z-shell"> 259:3 0 928.5G 0 part </span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">└─ubuntu--vg-ubuntu--lv</span></span><span class="z-meta z-function-call z-arguments z-shell"> 252:0 0 100G 0 lvm /</span> </span></code></pre> <p>จะเห็นว่า:</p> <ul> <li>มี SSD (nvme0n1) ขนาด ~1TB แบ่งเป็น 3 พาร์ติชัน ใช้ LVM อยู่แล้ว</li> <li>และมี HDD (sda) อีก 2 พาร์ติชันใหญ่ ๆ รวมประมาณ 1.8TB</li> </ul> <p>ในตอนแรก root (<code>/</code>) ถูก mount ไว้ที่ LV ชื่อ <code>ubuntu-lv</code> ขนาด 100GB และ volume group ชื่อ <code>ubuntu-vg</code> ยังเหลืออีกเพียบ! ประมาณ 828GB 😍</p> <p>ก่อนจะเริ่มแบ่งพื้นที่จริง เรามาสำรวจ Volume Group ที่ Ubuntu ติดตั้งให้อัตโนมัติไว้ก่อน</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo vgdisplay</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">---</span></span><span class="z-meta z-function-call z-arguments z-shell"> Volume group ---</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">VG</span></span><span class="z-meta z-function-call z-arguments z-shell"> Name ubuntu-vg</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Format</span></span><span class="z-meta z-function-call z-arguments z-shell"> lvm2</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">VG</span></span><span class="z-meta z-function-call z-arguments z-shell"> Access read/write</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">VG</span></span><span class="z-meta z-function-call z-arguments z-shell"> Status resizable</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">VG</span></span><span class="z-meta z-function-call z-arguments z-shell"> Size 928.46 GiB</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Alloc</span></span><span class="z-meta z-function-call z-arguments z-shell"> PE / Size 25600 / 100.00 GiB</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Free</span></span><span class="z-meta z-function-call z-arguments z-shell"> PE / Size 212085 / 828.46 GiB</span> </span></code></pre> <p>จากผลคำสั่ง vgdisplay จะเห็นว่า Ubuntu ติดตั้งมาแบบใช้ LVM ให้เรียบร้อยแล้ว โดยมี Volume Group ชื่อ ubuntu-vg ขนาดรวมประมาณ 928GB</p> <p>ตอนนี้ใช้ไปแค่ 100GB สำหรับ / เท่านั้นเอง พื้นที่ที่เหลือยังมีอีกเกือบ 830GB แบบ resizable ด้วย แปลว่าเราสามารถสร้าง Logical Volume เพิ่มได้อีกสบาย ๆ 🎉</p> <h3 id="maaerimsraang-lvm-ephimkanely-tada">มาเริ่มสร้าง LVM เพิ่มกันเลย 🎉<a class="zola-anchor" href="#maaerimsraang-lvm-ephimkanely-tada" aria-label="Anchor link for: maaerimsraang-lvm-ephimkanely-tada" style="visibility: hidden;"></a> </h3> <p>เป้าหมายคือ...</p> <table><thead><tr><th>Mountpoint</th><th>ขนาด</th><th>ใช้ทำอะไร</th></tr></thead><tbody> <tr><td><code>/var/lib</code></td><td>100GB</td><td>เก็บ state ของ containerd ฯลฯ</td></tr> <tr><td><code>/opt/kube-data</code></td><td>200GB</td><td>PVC / database / log ที่ต้องการ IOPS</td></tr> </tbody></table> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> lvcreate<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>n</span> varlib<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>L</span> 100G ubuntu-vg</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> lvcreate<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>n</span> kubedata<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>L</span> 200G ubuntu-vg</span> </span></code></pre> <h3 id="format-mount-thiilacchud">Format + Mount ทีละจุด<a class="zola-anchor" href="#format-mount-thiilacchud" aria-label="Anchor link for: format-mount-thiilacchud" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> Format</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mkfs.ext4 /dev/ubuntu-vg/varlib</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mkfs.ext4 /dev/ubuntu-vg/kubedata</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> เตรียมโฟลเดอร์ mount</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mkdir<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>p</span> /mnt/varlib /opt/kube-data</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> mount ชั่วคราวเพื่อย้ายของใน /var/lib</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mount /dev/ubuntu-vg/varlib /mnt/varlib</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> cp<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>a</span> /var/lib/<span class="z-keyword z-operator z-regexp z-quantifier z-shell">*</span> /mnt/varlib/</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> เปลี่ยนตัวจริง</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mv /var/lib /var/lib.bak</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mkdir /var/lib</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mount /dev/ubuntu-vg/varlib /var/lib</span> </span></code></pre> <p>จากนั้นเพิ่มเข้า <code>/etc/fstab</code> เพื่อให้ system mount ให้อัตโนมัติหลัง reboot:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>/dev/ubuntu-vg/varlib /var/lib ext4 defaults 0 2<span class="z-punctuation z-definition z-string z-end z-shell">&#39;</span></span></span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> tee<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>a</span> /etc/fstab</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>/dev/ubuntu-vg/kubedata /opt/kube-data ext4 defaults 0 2<span class="z-punctuation z-definition z-string z-end z-shell">&#39;</span></span></span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> tee<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>a</span> /etc/fstab</span> </span></code></pre> <h3 id="cchadphuuenthii-backup-bn-hdd">จัดพื้นที่ backup บน HDD<a class="zola-anchor" href="#cchadphuuenthii-backup-bn-hdd" aria-label="Anchor link for: cchadphuuenthii-backup-bn-hdd" style="visibility: hidden;"></a> </h3> <p>ต่อไปเราจะเตรียม <code>/mnt/storage-hdd</code> สำหรับสำรอง log หรือ DB snapshot ต่าง ๆ</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mkfs.ext4 /dev/sda2</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mkdir<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>p</span> /mnt/storage-hdd</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mount /dev/sda2 /mnt/storage-hdd</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>/dev/sda2 /mnt/storage-hdd ext4 defaults 0 2<span class="z-punctuation z-definition z-string z-end z-shell">&#39;</span></span></span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> tee<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>a</span> /etc/fstab</span> </span></code></pre> <h3 id="echkhsthaanahlang-mount">เช็คสถานะหลัง mount<a class="zola-anchor" href="#echkhsthaanahlang-mount" aria-label="Anchor link for: echkhsthaanahlang-mount" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">mount</span></span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">grep</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>E</span> <span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>/var/lib|/opt/kube-data|/mnt/storage-hdd<span class="z-punctuation z-definition z-string z-end z-shell">&#39;</span></span></span> </span></code></pre> <p>จะได้เห็นว่า:</p> <ul> <li><code>/var/lib</code> ใช้ <code>varlib</code> จาก SSD แล้วจริง ๆ</li> <li><code>/opt/kube-data</code> พร้อมใช้งาน</li> <li><code>/mnt/storage-hdd</code> พร้อมสำรอง log แล้ว</li> </ul> <h3 id="srup-logical-volume-thiimiit-nnii">สรุป Logical Volume ที่มีตอนนี้<a class="zola-anchor" href="#srup-logical-volume-thiimiit-nnii" aria-label="Anchor link for: srup-logical-volume-thiimiit-nnii" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo lvs</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">LV</span></span><span class="z-meta z-function-call z-arguments z-shell"> VG LSize</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">ubuntu-lv</span></span><span class="z-meta z-function-call z-arguments z-shell"> ubuntu-vg 100.00g (สำหรับ /</span><span class="z-meta z-function-call z-shell"></span>) </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">varlib</span></span><span class="z-meta z-function-call z-arguments z-shell"> ubuntu-vg 100.00g (สำหรับ /var/lib</span><span class="z-meta z-function-call z-shell"></span>) </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubedata</span></span><span class="z-meta z-function-call z-arguments z-shell"> ubuntu-vg 200.00g (สำหรับ /opt/kube-data</span><span class="z-meta z-function-call z-shell"></span>) </span></code></pre> <p>และยังเหลือพื้นที่ใน VG (<code>ubuntu-vg</code>) อีกประมาณ <strong>528GB</strong> เอาไว้ขยายในอนาคตได้อีก</p> <p>ดู mountpoint ด้วย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> lsblk<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>o</span> NAME,SIZE,FSTYPE,MOUNTPOINT,LABEL</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">NAME</span></span><span class="z-meta z-function-call z-arguments z-shell"> SIZE FSTYPE MOUNTPOINT LABEL</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sda</span></span><span class="z-meta z-function-call z-arguments z-shell"> 1.8T </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">├─sda1</span></span><span class="z-meta z-function-call z-arguments z-shell"> 16M </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">├─sda2</span></span><span class="z-meta z-function-call z-arguments z-shell"> 886.4G ext4 /mnt/storage-hdd </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">└─sda3</span></span><span class="z-meta z-function-call z-arguments z-shell"> 976.6G ntfs Entertain</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">nvme0n1</span></span><span class="z-meta z-function-call z-arguments z-shell"> 931.5G </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">├─nvme0n1p1</span></span><span class="z-meta z-function-call z-arguments z-shell"> 1G vfat /boot/efi </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">├─nvme0n1p2</span></span><span class="z-meta z-function-call z-arguments z-shell"> 2G ext4 /boot </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">└─nvme0n1p3</span></span><span class="z-meta z-function-call z-arguments z-shell"> 928.5G LVM2_member </span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">├─ubuntu--vg-ubuntu--lv</span></span><span class="z-meta z-function-call z-arguments z-shell"> 100G ext4 / </span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">├─ubuntu--vg-varlib</span></span><span class="z-meta z-function-call z-arguments z-shell"> 100G ext4 /var/lib </span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">└─ubuntu--vg-kubedata</span></span><span class="z-meta z-function-call z-arguments z-shell"> 200G ext4 /opt/kube-data </span> </span></code></pre> <p>จากนั้นก็ ทดสอบ reboot สักรอบ แล้วเช็คว่า mount ถูกต้อง</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> mount</span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">grep</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>E</span> <span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>/var/lib|/opt/kube-data|/mnt/storage-hdd<span class="z-punctuation z-definition z-string z-end z-shell">&#39;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">/dev/mapper/ubuntu--vg-kubedata</span></span><span class="z-meta z-function-call z-arguments z-shell"> on /opt/kube-data type ext4 (rw,relatime</span><span class="z-meta z-function-call z-shell"></span>) </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">/dev/mapper/ubuntu--vg-varlib</span></span><span class="z-meta z-function-call z-arguments z-shell"> on /var/lib type ext4 (rw,relatime</span><span class="z-meta z-function-call z-shell"></span>) </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">/dev/sda2</span></span><span class="z-meta z-function-call z-arguments z-shell"> on /mnt/storage-hdd type ext4 (rw,relatime</span><span class="z-meta z-function-call z-shell"></span>) </span></code></pre> <p>จะเห็นว่า mount ถูกต้องตามที่เราตั้งใจไว้</p> <h2 id="tidtang-rke2-bn-ubuntu">ติดตั้ง RKE2 บน Ubuntu<a class="zola-anchor" href="#tidtang-rke2-bn-ubuntu" aria-label="Anchor link for: tidtang-rke2-bn-ubuntu" style="visibility: hidden;"></a> </h2> <p>ต่อไปเราจะติดตั้ง RKE2 บน Ubuntu 24.04 LTS</p> <h3 id="1-tidtang-binary-kh-ng-rke2">1. ติดตั้ง Binary ของ RKE2<a class="zola-anchor" href="#1-tidtang-binary-kh-ng-rke2" aria-label="Anchor link for: 1-tidtang-binary-kh-ng-rke2" style="visibility: hidden;"></a> </h3> <p>RKE2 ใช้ installer ตัวเดียวจบเลย ไม่ต้องแยกลง kubelet, etcd อะไรให้วุ่นวาย แค่รันคำสั่งนี้ก็พร้อมติดตั้งทุกอย่าง</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">curl</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>sfL</span> https://get.rke2.io</span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> sh -</span> </span></code></pre> <p>ระบบจะโหลด binary มาไว้ที่ <code>/usr/local</code> และติดตั้งแบบ systemd service ให้อัตโนมัติเลย</p> <h3 id="2-enable-aela-start-service">2. Enable และ Start Service<a class="zola-anchor" href="#2-enable-aela-start-service" aria-label="Anchor link for: 2-enable-aela-start-service" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> systemctl enable rke2-server.service</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> systemctl start rke2-server.service</span> </span></code></pre> <blockquote> <p>แนะนำให้รันแยกกัน เพื่อถ้ามี error ตอน <code>start</code> จะได้ดู log ทันที</p> </blockquote> <h3 id="3-duu-log-realtime">3. ดู Log Realtime<a class="zola-anchor" href="#3-duu-log-realtime" aria-label="Anchor link for: 3-duu-log-realtime" style="visibility: hidden;"></a> </h3> <p>ระหว่างรอ service ทำงาน ผมแนะนำให้เปิด log ดูไว้ก่อนเลย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> journalctl<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>u</span> rke2-server<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>f</span></span> </span></code></pre> <p>ถ้า service ทำงานปกติ จะเจอบรรทัดประมาณนี้:</p> <pre data-lang="text" class="language-text z-code"><code class="language-text" data-lang="text"><span class="z-text z-plain">Remotedialer connected to proxy </span><span class="z-text z-plain">Adding node &lt;ชื่อเครื่อง&gt; etcd status condition </span><span class="z-text z-plain">Tunnel authorizer set Kubelet Port 0.0.0.0:10250 </span></code></pre> <p>🕐 ปกติใช้เวลาประมาณ 1–2 นาทีตอนรันครั้งแรก เพราะต้องโหลด container image ต่าง ๆ</p> <h3 id="4-trwcchs-b-node-dwy-kubectl">4. ตรวจสอบ Node ด้วย kubectl<a class="zola-anchor" href="#4-trwcchs-b-node-dwy-kubectl" aria-label="Anchor link for: 4-trwcchs-b-node-dwy-kubectl" style="visibility: hidden;"></a> </h3> <p>RKE2 จะมี <code>kubectl</code> ของมันเองอยู่ใน path: <code>/var/lib/rancher/rke2/bin/kubectl</code></p> <p>ถ้าเรายังไม่มี <code>kubectl</code> ใน system path ก็สร้าง symlink ไปไว้ที่ <code>/usr/local/bin</code> เลย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> ln<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>s</span> /var/lib/rancher/rke2/bin/kubectl /usr/local/bin/kubectl</span> </span></code></pre> <p>จากนั้นลองรัน:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> get nodes</span> </span></code></pre> <p>ถ้าขึ้นแบบนี้ แปลว่าใช้งานได้เรียบร้อย 🎉</p> <pre data-lang="text" class="language-text z-code"><code class="language-text" data-lang="text"><span class="z-text z-plain">NAME STATUS ROLES AGE VERSION </span><span class="z-text z-plain">homelab Ready control-plane,etcd,master 3m v1.31.x+rke2r1 </span></code></pre> <p><strong>สรุปตอนนี้</strong></p> <ul> <li>RKE2 ติดตั้งและรันสำเร็จ</li> <li>kubectl พร้อมใช้งานจากเครื่อง server</li> <li>node status เป็น Ready แล้ว</li> </ul> <h2 id="tangkhaa-kubectl-bnekhruue-ng-mac-aihechuue-mt-rke2">ตั้งค่า <code>kubectl</code> บนเครื่อง Mac ให้เชื่อมต่อ RKE2<a class="zola-anchor" href="#tangkhaa-kubectl-bnekhruue-ng-mac-aihechuue-mt-rke2" aria-label="Anchor link for: tangkhaa-kubectl-bnekhruue-ng-mac-aihechuue-mt-rke2" style="visibility: hidden;"></a> </h2> <p>หลังจาก RKE2 สร้าง cluster สำเร็จแล้ว จะมีไฟล์ชื่อ <code>rke2.yaml</code> อยู่ที่:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">/etc/rancher/rke2/rke2.yaml</span></span> </span></code></pre> <p>ไฟล์นี้คือ <strong>kubeconfig</strong> ที่ใช้สั่ง <code>kubectl</code> เชื่อมเข้า cluster ได้เลย แต่ต้องระวังนิดนึงเพราะมันเป็น cert-based admin user ที่มีสิทธิ์เต็ม ⚠️</p> <h3 id="1-khadl-k-rke2-yaml-maathii-home-directory">1. คัดลอก <code>rke2.yaml</code> มาที่ home directory<a class="zola-anchor" href="#1-khadl-k-rke2-yaml-maathii-home-directory" aria-label="Anchor link for: 1-khadl-k-rke2-yaml-maathii-home-directory" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> cp /etc/rancher/rke2/rke2.yaml /home/<span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>your-user<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span>/rke2.yaml</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> chown <span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>your-user<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span>:<span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>your-user<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span> /home/<span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>your-user<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span>/rke2.yaml</span> </span></code></pre> <blockquote> <p>เปลี่ยน <code>&lt;your-user&gt;</code> เป็นชื่อจริงของ user บนเครื่อง</p> </blockquote> <h3 id="2-cchaak-mac-aich-scp-duengaiflmaa">2. จาก Mac ใช้ <code>scp</code> ดึงไฟล์มา<a class="zola-anchor" href="#2-cchaak-mac-aich-scp-duengaiflmaa" aria-label="Anchor link for: 2-cchaak-mac-aich-scp-duengaiflmaa" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">scp</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.ssh/my_home_lab/id_rsa <span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>user<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span>@<span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>ip-server<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span>:/home/<span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>user<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span>/rke2.yaml <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.kube/rke2.yaml</span> </span></code></pre> <p>เช่น:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">scp</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.ssh/my_home_lab/id_rsa thadawth@192.168.1.107:/home/thadawth/rke2.yaml <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.kube/rke2.yaml</span> </span></code></pre> <h3 id="3-epliiynchuue-context-cluster-user-dwy-yq-aihduudiikhuen">3. เปลี่ยนชื่อ context/cluster/user ด้วย <code>yq</code> ให้ดูดีขึ้น<a class="zola-anchor" href="#3-epliiynchuue-context-cluster-user-dwy-yq-aihduudiikhuen" aria-label="Anchor link for: 3-epliiynchuue-context-cluster-user-dwy-yq-aihduudiikhuen" style="visibility: hidden;"></a> </h3> <p>ตอนนี้ทุกชื่อใน <code>rke2.yaml</code> จะชื่อว่า <code>default</code> หมดเลย เราจะเปลี่ยนให้มันเท่ ๆ เช่น:</p> <ul> <li>context → <code>my_homelab</code></li> <li>cluster → <code>my_homelab-cluster</code></li> <li>user → <code>my_homelab-user</code></li> </ul> <p>ผมเตรียม script ให้ใช้เลย <code>rename-kubeconfig.sh</code></p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell">!/bin/bash</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> 📌 รับ argument</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">CONTEXT_NAME</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">1</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">CLUSTER_NAME</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">2</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">USER_NAME</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">3</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">KUBECONFIG_PATH</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">HOME</span></span>/.kube/rke2.yaml<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> ✅ ตรวจสอบ input</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-keyword z-control z-conditional z-if z-shell">if</span> <span class="z-meta z-function-call z-arguments z-shell"><span class="z-support z-function z-double-brace z-begin z-shell">[[</span> <span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell">-</span>z</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">CONTEXT_NAME</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-keyword z-operator z-logical z-shell">||</span> <span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell">-</span>z</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">CLUSTER_NAME</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-keyword z-operator z-logical z-shell">||</span> <span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell">-</span>z</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">USER_NAME</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-support z-function z-double-brace z-end z-shell">]]</span></span><span class="z-keyword z-operator z-logical z-continue z-shell">;</span> <span class="z-keyword z-control z-conditional z-then z-shell">then</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>❌ Usage: <span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">0</span></span> &lt;context_name&gt; &lt;cluster_name&gt; &lt;user_name&gt;<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-support z-function z-exit z-shell">exit</span></span><span class="z-meta z-function-call z-arguments z-shell"> 1</span> </span><span class="z-source z-shell z-bash"><span class="z-keyword z-control z-conditional z-end z-shell">fi</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> ✅ เช็คว่า yq ติดตั้งแล้ว</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-keyword z-control z-conditional z-if z-shell">if</span> <span class="z-keyword z-operator z-logical z-shell">!</span> <span class="z-meta z-function-call z-shell"><span class="z-support z-function z-command z-shell">command</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell">-</span>v</span> yq <span class="z-keyword z-operator z-assignment z-redirection z-shell">&amp;&gt;</span> /dev/null</span><span class="z-keyword z-operator z-logical z-continue z-shell">;</span> <span class="z-keyword z-control z-conditional z-then z-shell">then</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>❌ &#39;yq&#39; not found. Install it with &#39;brew install yq&#39;<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-support z-function z-exit z-shell">exit</span></span><span class="z-meta z-function-call z-arguments z-shell"> 1</span> </span><span class="z-source z-shell z-bash"><span class="z-keyword z-control z-conditional z-end z-shell">fi</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>🔧 Updating kubeconfig: <span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">KUBECONFIG_PATH</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>➡️ Context: <span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">CONTEXT_NAME</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>➡️ Cluster: <span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">CLUSTER_NAME</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>➡️ User: <span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">USER_NAME</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> 🔁 แก้ชื่อทั้งหมด in-place</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">yq</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>(.clusters[] | select(.name == <span class="z-constant z-character z-escape z-shell">\&quot;</span>default<span class="z-constant z-character z-escape z-shell">\&quot;</span>) | .name) = <span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">CLUSTER_NAME</span></span><span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">KUBECONFIG_PATH</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">yq</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>(.clusters[] | select(.name == <span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">CLUSTER_NAME</span></span><span class="z-constant z-character z-escape z-shell">\&quot;</span>) | .cluster.server) = <span class="z-constant z-character z-escape z-shell">\&quot;</span>https://192.168.1.107:6443<span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">KUBECONFIG_PATH</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">yq</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>(.users[] | select(.name == <span class="z-constant z-character z-escape z-shell">\&quot;</span>default<span class="z-constant z-character z-escape z-shell">\&quot;</span>) | .name) = <span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">USER_NAME</span></span><span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">KUBECONFIG_PATH</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">yq</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>(.contexts[] | select(.name == <span class="z-constant z-character z-escape z-shell">\&quot;</span>default<span class="z-constant z-character z-escape z-shell">\&quot;</span>) | .name) = <span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">CONTEXT_NAME</span></span><span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">KUBECONFIG_PATH</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">yq</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span> </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-string z-quoted z-double z-shell"> (.contexts[] | select(.name == <span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">CONTEXT_NAME</span></span><span class="z-constant z-character z-escape z-shell">\&quot;</span>) | .context.cluster) = <span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">CLUSTER_NAME</span></span><span class="z-constant z-character z-escape z-shell">\&quot;</span> | </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-string z-quoted z-double z-shell"> (.contexts[] | select(.name == <span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">CONTEXT_NAME</span></span><span class="z-constant z-character z-escape z-shell">\&quot;</span>) | .context.user) = <span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">USER_NAME</span></span><span class="z-constant z-character z-escape z-shell">\&quot;</span> </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">KUBECONFIG_PATH</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">yq</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>.current-context = <span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">CONTEXT_NAME</span></span><span class="z-constant z-character z-escape z-shell">\&quot;</span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">KUBECONFIG_PATH</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>✅ Done! You can now merge it into ~/.kube/config with:<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span> KUBECONFIG=~/.kube/config:<span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">KUBECONFIG_PATH</span></span> kubectl config view --flatten &gt; /tmp/config &amp;&amp; mv /tmp/config ~/.kube/config<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span></code></pre> <p>จากนั้นก็ให้สิทธิ์ execute ให้กับ script</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">chmod</span></span><span class="z-meta z-function-call z-arguments z-shell"> +x rename-kubeconfig.sh</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">./rename-kubeconfig.sh</span></span><span class="z-meta z-function-call z-arguments z-shell"> my_homelab my_homelab-cluster my_homelab-defaultUser</span> </span></code></pre> <h3 id="4-rwm-rke2-yaml-ekhaakab-kubeconfig-hlak">4. รวม <code>rke2.yaml</code> เข้ากับ kubeconfig หลัก<a class="zola-anchor" href="#4-rwm-rke2-yaml-ekhaakab-kubeconfig-hlak" aria-label="Anchor link for: 4-rwm-rke2-yaml-ekhaakab-kubeconfig-hlak" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-storage z-modifier z-shell">export</span> <span class="z-variable z-other z-readwrite z-assignment z-shell">KUBECONFIG</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.kube/config:<span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.kube/rke2.yaml</span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> config view<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>flatten</span> <span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span> /tmp/kubeconfig-merged.yaml</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">cp</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.kube/config <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.kube/config.bak</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">mv</span></span><span class="z-meta z-function-call z-arguments z-shell"> /tmp/kubeconfig-merged.yaml <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.kube/config</span> </span></code></pre> <p>ลองดูว่า context ที่เราตั้งไว้มีอยู่มั้ย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> config get-contexts</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">CURRENT</span></span><span class="z-meta z-function-call z-arguments z-shell"> NAME CLUSTER AUTHINFO NAMESPACE</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">my_homelab</span></span><span class="z-meta z-function-call z-arguments z-shell"> my_homelab-cluster my_homelab-defaultUser </span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">*</span></span><span class="z-meta z-function-call z-arguments z-shell"> rancher-desktop rancher-desktop rancher-desktop </span> </span></code></pre> <p>ไม่ต้องไปสนใจว่า <code>rancher-desktop</code> มาจากไหนนะ พอผมใช้ <code>rancher-desktop</code> อยู่ด้วย</p> <h3 id="5-tang-context-aihmaihepnkhaa-default">5. ตั้ง context ใหม่ให้เป็นค่า default<a class="zola-anchor" href="#5-tang-context-aihmaihepnkhaa-default" aria-label="Anchor link for: 5-tang-context-aihmaihepnkhaa-default" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> kubectl config use-context my_homelab</span> </span></code></pre> <p>ลองดูว่าเชื่อมได้มั้ย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> kubectl get nodes</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">NAME</span></span><span class="z-meta z-function-call z-arguments z-shell"> STATUS ROLES AGE VERSION</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">USER</span></span><span class="z-meta z-function-call z-arguments z-shell"> Ready control-plane,etcd,master 66m v1.31.8+rke2r1</span> </span></code></pre> <p>เย้ 🎉 ถ้าเห็น node ขึ้นจาก Mac ก็แปลว่าเชื่อมต่อสำเร็จ!</p> <h2 id="deploy-ae-paerkbn-rke2-nginx-adult-fried-egg">Deploy แอปแรกบน RKE2: NGINX 🧑‍🍳<a class="zola-anchor" href="#deploy-ae-paerkbn-rke2-nginx-adult-fried-egg" aria-label="Anchor link for: deploy-ae-paerkbn-rke2-nginx-adult-fried-egg" style="visibility: hidden;"></a> </h2> <p>เราจะเริ่มจากการ deploy nginx แบบง่าย ๆ เพื่อ:</p> <ul> <li>ทดสอบว่า cluster ใช้งานได้จริง</li> <li>เข้าใจแนวทาง deploy แบบ basic</li> <li>พร้อมใช้ <code>kubectl</code>, <code>svc</code>, และ <code>port-forward</code></li> </ul> <h3 id="1-sraangaifl-nginx-deploy-yaml">1. สร้างไฟล์ <code>nginx-deploy.yaml</code><a class="zola-anchor" href="#1-sraangaifl-nginx-deploy-yaml" aria-label="Anchor link for: 1-sraangaifl-nginx-deploy-yaml" style="visibility: hidden;"></a> </h3> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">apiVersion</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">apps/v1</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">kind</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Deployment</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">metadata</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">nginx-deployment</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">labels</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">app</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">nginx</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">spec</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">replicas</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-integer z-decimal z-yaml">1</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">selector</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">matchLabels</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">app</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">nginx</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">template</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">metadata</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">labels</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">app</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">nginx</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">spec</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">containers</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">nginx</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">image</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">nginx:stable</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">ports</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">containerPort</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-integer z-decimal z-yaml">80</span> </span><span class="z-source z-yaml"><span class="z-entity z-other z-document z-begin z-yaml">---</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">apiVersion</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">v1</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">kind</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Service</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">metadata</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">nginx-service</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">spec</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">selector</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">app</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">nginx</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">ports</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">port</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-integer z-decimal z-yaml">80</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">targetPort</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-integer z-decimal z-yaml">80</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">type</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">ClusterIP</span> </span></code></pre> <blockquote> <p>📦 จะได้ทั้ง <code>Deployment</code> และ <code>Service</code> แบบ ClusterIP</p> </blockquote> <h3 id="2-apply-manifest">2. Apply manifest<a class="zola-anchor" href="#2-apply-manifest" aria-label="Anchor link for: 2-apply-manifest" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> apply<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>f</span> nginx-deploy.yaml</span> </span></code></pre> <h3 id="3-trwcchs-bsthaana">3. ตรวจสอบสถานะ<a class="zola-anchor" href="#3-trwcchs-bsthaana" aria-label="Anchor link for: 3-trwcchs-bsthaana" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> get deploy,pods,svc</span> </span></code></pre> <p>ถ้าทุกอย่างปกติจะเห็นแบบนี้:</p> <pre data-lang="text" class="language-text z-code"><code class="language-text" data-lang="text"><span class="z-text z-plain">NAME READY UP-TO-DATE AVAILABLE AGE </span><span class="z-text z-plain">deployment.apps/nginx-deployment 1/1 1 1 15s </span><span class="z-text z-plain"> </span><span class="z-text z-plain">NAME TYPE CLUSTER-IP PORT(S) AGE </span><span class="z-text z-plain">nginx-service ClusterIP 10.43.XXX.XXX 80/TCP 15s </span></code></pre> <h3 id="4-ekhaaphaan-mac-dwy-port-forward-withiierwthiisud">4. เข้าผ่าน Mac ด้วย <code>port-forward</code> (วิธีเร็วที่สุด)<a class="zola-anchor" href="#4-ekhaaphaan-mac-dwy-port-forward-withiierwthiisud" aria-label="Anchor link for: 4-ekhaaphaan-mac-dwy-port-forward-withiierwthiisud" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> port-forward svc/nginx-service 8080:80</span> </span></code></pre> <p>แล้วเปิด browser ไปที่:</p> <pre class="z-code"><code><span class="z-text z-plain">http://localhost:8080 </span></code></pre> <blockquote> <p>เย้~ จะเจอหน้า “Welcome to nginx!” แล้ว 🎉</p> </blockquote> <p><img src="https://thadaw.com/posts/note-setup-kube-rke2-homelab/nginx-up.png" alt="" /></p> <h2 id="aenwthaangeruue-ng-security-rawang-rke2-yaml-aihdii">แนวทางเรื่อง Security: ระวัง rke2.yaml ให้ดี<a class="zola-anchor" href="#aenwthaangeruue-ng-security-rawang-rke2-yaml-aihdii" aria-label="Anchor link for: aenwthaangeruue-ng-security-rawang-rke2-yaml-aihdii" style="visibility: hidden;"></a> </h2> <p>หลังจากที่เรา copy <code>rke2.yaml</code> มาใช้บน Mac แล้ว เชื่อมต่อ cluster ได้ — เยี่ยมมาก! แต่ต้องรู้ไว้ว่า...</p> <blockquote> <p>⚠️ ไฟล์ <code>rke2.yaml</code> คือ <strong>admin cert เต็มรูปแบบ</strong> ใครได้ไฟล์นี้ = เหมือนได้ root access บน Kubernetes cluster ทันที</p> </blockquote> <p>มันเป็น cert แบบ client certificate ที่ฝังไว้ใน <code>user.client-certificate-data</code> ซึ่ง RKE2 auto-generate มาให้เราใช้งานได้สะดวกสุด ๆ แต่ในแง่ความปลอดภัย ถ้าเราจะใช้งานหลายเครื่อง หรือแชร์ cluster ให้คนอื่นใช้ → ไม่ควรใช้ตัวนี้ต่อ</p> <h3 id="withiiaenanam-aeyk-serviceaccount-taamphuuaichngaan">วิธีแนะนำ: แยก ServiceAccount ตามผู้ใช้งาน<a class="zola-anchor" href="#withiiaenanam-aeyk-serviceaccount-taamphuuaichngaan" aria-label="Anchor link for: withiiaenanam-aeyk-serviceaccount-taamphuuaichngaan" style="visibility: hidden;"></a> </h3> <p>ใน Kubernetes เราสามารถสร้าง user แบบจำกัดสิทธิ์ได้ง่าย ๆ ผ่าน ServiceAccount ซึ่งเป็นวิธีที่เบา ปลอดภัย และไม่ต้องยุ่งกับ cert เองเลย</p> <h3 id="taw-yaang-sraang-admin-user-aebb-read-write">ตัวอย่าง: สร้าง <code>admin-user</code> แบบ read/write<a class="zola-anchor" href="#taw-yaang-sraang-admin-user-aebb-read-write" aria-label="Anchor link for: taw-yaang-sraang-admin-user-aebb-read-write" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> create serviceaccount admin-user<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>n</span> kube-system</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"> create clusterrolebinding admin-user-binding <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>clusterrole</span><span class="z-keyword z-operator z-assignment z-option z-shell">=</span>cluster-admin <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>serviceaccount</span><span class="z-keyword z-operator z-assignment z-option z-shell">=</span>kube-system:admin-user</span> </span></code></pre> <blockquote> <p>สร้าง account ที่มีสิทธิ์เท่ากับ cluster-admin</p> </blockquote> <h3 id="sraang-token-ephuue-echuue-mt">สร้าง token เพื่อเชื่อมต่อ<a class="zola-anchor" href="#sraang-token-ephuue-echuue-mt" aria-label="Anchor link for: sraang-token-ephuue-echuue-mt" style="visibility: hidden;"></a> </h3> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">kubectl</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>n</span> kube-system create token admin-user</span> </span></code></pre> <p>จะได้ token string เอาไว้ใช้กับ <code>kubectl config</code> หรือใส่ใน CI/CD ก็ได้</p> <h3 id="ehmaaakabaikhr">เหมาะกับใคร?<a class="zola-anchor" href="#ehmaaakabaikhr" aria-label="Anchor link for: ehmaaakabaikhr" style="visibility: hidden;"></a> </h3> <table><thead><tr><th>สถานการณ์</th><th>ใช้แบบไหนดี</th></tr></thead><tbody> <tr><td>ใช้เครื่องเดียว</td><td>ใช้ <code>rke2.yaml</code> ได้เลย ✅</td></tr> <tr><td>แชร์ให้คนอื่นใช้</td><td>สร้าง ServiceAccount แยก</td></tr> <tr><td>ทำระบบจริง</td><td>ใช้ OIDC หรือ cert-manager</td></tr> </tbody></table> <h2 id="sngthaay-cchaakekhruue-ngthiin-nechy-cluster-thiiaichaidcchring">ส่งท้าย: จากเครื่องที่นอนเฉย ๆ → Cluster ที่ใช้ได้จริง<a class="zola-anchor" href="#sngthaay-cchaakekhruue-ngthiin-nechy-cluster-thiiaichaidcchring" aria-label="Anchor link for: sngthaay-cchaakekhruue-ngthiin-nechy-cluster-thiiaichaidcchring" style="visibility: hidden;"></a> </h2> <p>ทั้งหมดนี้คือเส้นทางของการเปลี่ยน “PC วางทิ้งไว้ 2 ปี” ให้กลายเป็น <strong>Kubernetes Cluster พร้อมใช้งานจริงในบ้าน</strong> จากจุดที่ยังไม่มีอะไรเลย — เราเริ่มด้วยการ:</p> <ul> <li>✅ ติดตั้ง Ubuntu และจัดการ disk ด้วย LVM</li> <li>✅ วางแผนพื้นที่ใช้งานแยกชัดเจน (เร็ว / ใหญ่ / สำรอง)</li> <li>✅ ติดตั้ง RKE2 และ config ให้ควบคุมผ่านเครื่อง Mac ได้</li> <li>✅ deploy nginx สำเร็จเป็นแอปแรกบน cluster</li> <li>✅ พร้อมวางรากฐานเรื่อง security, user และการขยายต่อในอนาคต</li> </ul> <p>ทั้งหมดนี้ไม่ใช่แค่ setup แล้วจบ แต่มันคือการวาง “โครงสร้าง” ที่เราจะต่อยอดไปได้อีกไกลมาก 🎯</p> <h2 id="aelwt-aipcchatham-aair">แล้วต่อไปจะทำอะไร?<a class="zola-anchor" href="#aelwt-aipcchatham-aair" aria-label="Anchor link for: aelwt-aipcchatham-aair" style="visibility: hidden;"></a> </h2> <p>ใน Part ต่อ ๆ ไป ผมจะพาไปลุยของจริงกันแบบจัดเต็ม เช่น...</p> <blockquote> <ul> <li>🌐 ติดตั้ง Ingress Controller เพื่อให้เข้าแอปจากข้างนอกได้แบบ domain name</li> <li>🔐 วางระบบ User / RBAC ให้แชร์ cluster แบบปลอดภัย</li> <li>📦 ติดตั้ง Helm, CSI Storage (Longhorn), และ GitOps</li> <li>📊 Monitoring / Logging แบบที่ production ต้องมี</li> <li>🔄 รองรับ CI/CD จาก GitHub</li> </ul> </blockquote> <p>ป.ล. อันนี้ก็ฝันไปก่อนนะ มีเวลาว่างเมื่อไหร่ค่อยว่ากันละกันนะ อิอิ</p> <p>อย่าลืมติดตาม Part ถัดไปนะ 💬 ถ้าใครอยากลองทำตาม ผมรับรองว่าทำได้จริง (มั้งนะ) และสนุกมากแน่นอน 💙</p> <p>แล้วเจอกันตอนหน้า! 😄✨</p> 2025-03-27T00:00:00+00:00 2025-03-27T00:00:00+00:00 https://thadaw.com/posts/fix-ts5055-cannot-write-file-overwrite-input/ <p>ช่วงที่ผมกำลังพัฒนา library ตัวหนึ่งชื่อว่า <code>kubricate</code> ซึ่งเป็น framework สำหรับจัดการ Kubernetes manifests ด้วย TypeScript ผมตั้งค่าให้ build แบบ dual output ทั้ง ESM และ CJS โดยใช้ TypeScript compile ไปที่ <code>dist/esm</code> และ Babel แปลงเป็น <code>dist/cjs</code> ต่อ</p> <p>ทุกอย่างดูเหมือนจะโอเค จนกระทั่งเปิด <code>declaration: true</code> เพื่อให้ generate ไฟล์ <code>.d.ts</code> แล้วตั้ง <code>declarationDir</code> ไว้ที่ <code>dist/dts</code></p> <h2 id="payhaathiiecch">ปัญหาที่เจอ<a class="zola-anchor" href="#payhaathiiecch" aria-label="Anchor link for: payhaathiiecch" style="visibility: hidden;"></a> </h2> <p>พอรัน <code>tsc</code> ปุ๊บ ก็เจอ error แบบนี้เลย:</p> <blockquote> <p>error TS5055: Cannot write file ‘/path/to/project/dist/dts/internal/utils.d.ts’ because it would overwrite input file.</p> </blockquote> <p>ซึ่งตอนแรกก็งงว่า "นี่เราทำอะไรผิดตรงไหนหรือเปล่า?" เพราะเราไม่ได้แก้ไขไฟล์ใน <code>dist</code> โดยตรงเลย ไฟล์ทั้งหมดอยู่ใน <code>src</code> ชัด ๆ</p> <p>พอดูดี ๆ ก็เห็นว่า TypeScript พยายาม compile แล้วจะเขียนไฟล์ <code>.d.ts</code> ไปยัง <code>dist/dts/...</code> แต่ดันเข้าใจว่าไฟล์พวกนั้นเป็น <strong>ไฟล์ต้นทาง</strong> (input) ด้วย</p> <h2 id="aekyangaing">แก้ยังไง<a class="zola-anchor" href="#aekyangaing" aria-label="Anchor link for: aekyangaing" style="visibility: hidden;"></a> </h2> <p>ผมลองไล่ดู config หลายจุด และสุดท้ายก็เจอว่า ตัวแปรสำคัญคือ <code>"exclude"</code> ใน <code>tsconfig.json</code></p> <p>พอเช็กไฟล์ดู พบว่า <code>dist/</code> ไม่ได้อยู่ใน <code>"exclude"</code> ทำให้ TypeScript มองว่าไฟล์เก่าใน <code>dist</code> คือ input ของการ compile</p> <h3 id="withiiaek">วิธีแก้:<a class="zola-anchor" href="#withiiaek" aria-label="Anchor link for: withiiaek" style="visibility: hidden;"></a> </h3> <ul> <li>เพิ่ม <code>"dist"</code> เข้าไปใน <code>exclude</code> ของ <code>tsconfig.json</code></li> </ul> <pre data-lang="json" class="language-json z-code"><code class="language-json" data-lang="json"><span class="z-source z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>compilerOptions<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>rootDir<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>src<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>outDir<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>dist/esm<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>declarationDir<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>dist/dts<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>declaration<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-constant z-language z-json">true</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>exclude<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-punctuation z-section z-sequence z-begin z-json">[</span><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>node_modules<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-sequence z-json">,</span> <span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>dist<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-sequence z-json">,</span> <span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>*.config.ts<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-section z-sequence z-end z-json">]</span></span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span><span class="z-source z-json"> </span><span class="z-source z-json">ลบโฟลเดอร์ dist/ ให้สะอาดก่อนรัน tsc ใหม่: </span><span class="z-source z-json"> </span><span class="z-source z-json">```sh </span><span class="z-source z-json">rm -rf dist </span><span class="z-source z-json">tsc </span></code></pre> <p>สรุป</p> <p>ถ้าใครเจอ Error แบบ <code>TS5055: Cannot write file ... because it would overwrite input file.</code> ให้เช็กสองอย่างหลัก ๆ คือ:</p> <ul> <li>มีการตั้งค่า outDir หรือ declarationDir ซ้อนกับ path ที่เคยมี output ไว้หรือเปล่า</li> <li>ลืมใส่ "dist" ไว้ใน exclude หรือเปล่า</li> </ul> <p>แค่นั้นเลยครับ เพิ่ม dist เข้าไปใน exclude แล้วลบของเก่าออกก่อน build ทุกครั้ง ก็จบเลย</p> 2025-03-27T00:00:00+00:00 2025-03-27T00:00:00+00:00 https://thadaw.com/posts/typescript-type-error-from-missing-dependency/ <p>ช่วงนี้ผมกำลังทำ npm package สำหรับจัดการ stack ต่าง ๆ ใน Kubernetes โดยใช้ไลบรารี <code>kubernetes-models</code> ร่วมกับระบบ controller ที่ผมเขียนเองชื่อว่า <code>kubricate</code> ซึ่งทุกอย่างดูจะโอเคดี แต่พอเขียนเป็น class และมี method ที่เรียกใช้ <code>new KubricateController().add(...)</code> แล้วคืนค่าออกมา TypeScript ก็เริ่มร้อง</p> <hr /> <h2 id="payhaathiiecch">ปัญหาที่เจอ<a class="zola-anchor" href="#payhaathiiecch" aria-label="Anchor link for: payhaathiiecch" style="visibility: hidden;"></a> </h2> <p>ตัวอย่างจากรูปเลยนะ</p> <p><img src="https://thadaw.com/posts/typescript-type-error-from-missing-dependency/./typescript-error.png" alt="TypeScript Error" /></p> <p>TypeScript แจ้งว่า:</p> <blockquote> <p>The inferred type of configureStack cannot be named without a reference to <code>.pnpm/@kubernetes-models+base@5.0.1/node_modules/@kubernetes-models/base</code> . This is likely not portable. A type annotation is necessary.</p> </blockquote> <p>ในตอนแรก ผมงงมาก เพราะผมไม่ได้ import <code>@kubernetes-models/base</code> โดยตรง แต่ใช้แค่ <code>kubernetes-models</code> ที่ดูเหมือนจะครบแล้ว ทำให้ TypeScript ไม่สามารถ resolve type ได้แบบ portable และคิดว่ามันอาจจะมีปัญหาเวลาใช้งานข้ามโปรเจกต์หรือ publish เป็น package</p> <p>ผมลองแก้หลายแบบ:</p> <ul> <li>ใส่ return type ด้วย <code>ReturnType&lt;...&gt;</code> ก็ทำให้ type หาย ไม่ตรงกับที่ต้องการ</li> <li>แยก method ออกมาเป็นฟังก์ชันข้างนอก class ก็ยังไม่ได้</li> <li>เปลี่ยนเป็น static method ก็ยังเจอ error เดิม</li> </ul> <p>สุดท้ายสิ่งที่เวิร์กที่สุดกลับง่ายกว่าที่คิด</p> <hr /> <h2 id="withiithiiaekaidcchring">วิธีที่แก้ได้จริง<a class="zola-anchor" href="#withiithiiaekaidcchring" aria-label="Anchor link for: withiithiiaekaidcchring" style="visibility: hidden;"></a> </h2> <p>หลังจากสังเกตข้อความดี ๆ จาก Error: มันมีการพูดถึง package ตัวนึงที่ไม่คุ้นเคยเลย <code>@kubernetes-models/base</code></p> <p>ผมเริ่มสงสัยว่ามันพยายามจะ reference ไปที่ <code>@kubernetes-models/base</code> โดยตรง ซึ่ง TypeScript ใช้ในการ resolve ชนิดของ object ที่ return ออกมา แต่พอลองเข้าไปเช็กจริง ๆ ใน <code>node_modules</code> กลับไม่เจอ path นี้อยู่เลย</p> <p>ตรงนี้ทำให้แน่ใจว่า package <code>@kubernetes-models/base</code> ไม่ได้ถูกติดตั้งอยู่ในระบบจริง ๆ แม้ว่า <code>kubernetes-models</code> จะใช้งานได้ก็ตาม พอเพิ่ม dependency ที่ขาดหายไปเข้าไปให้ครบ ก็ไม่มีปัญหาอีกต่อไป</p> <p>ผมลองติดตั้ง <code>@kubernetes-models/base</code> โดยตรงเพิ่มเข้าไปในโปรเจกต์ด้วยคำสั่ง:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">pnpm</span></span><span class="z-meta z-function-call z-arguments z-shell"> add @kubernetes-models/base</span> </span></code></pre> <p>ทันทีที่ติดตั้งเสร็จ TypeScript ก็หยุดร้อง ไม่มี error ใด ๆ อีกเลย ทั้ง ๆ ที่ผมไม่ได้ใช้ @kubernetes-models/base โดยตรงในไฟล์นั้นด้วยซ้ำ</p> <h2 id="srup">สรุป<a class="zola-anchor" href="#srup" aria-label="Anchor link for: srup" style="visibility: hidden;"></a> </h2> <p>ปัญหานี้เกิดจาก TypeScript พยายาม infer ชนิดของค่าที่ได้จากไลบรารี ซึ่งเบื้องหลังจริง ๆ แล้วไปอิง type ที่อยู่ใน @kubernetes-models/base แต่เราไม่ได้ติดตั้งไว้ มันเลยโยน warning ว่า type ไม่สามารถใช้งานแบบ portable ได้</p> <p>ถ้าใครเจอปัญหาคล้าย ๆ กัน โดยเฉพาะเวลาใช้ไลบรารีที่มี dependency ซ้อนกันหลายชั้น และ TypeScript เริ่มพูดถึง inferred type แบบ "cannot be named without a reference..." ให้ลองเช็กดูว่าไลบรารีที่เกี่ยวข้องจริง ๆ ถูกติดตั้งไว้หรือยัง</p> <p>การติดตั้งไลบรารีที่ขาดหายไปอาจเป็นวิธีที่ง่ายที่สุดและถูกต้องที่สุดในการแก้ปัญหาแบบนี้</p> <blockquote> <p>ป.ล. ปัญหานี้ไปถาม GPT ละ มันก็ตอบไม่ได้เหมือนกัน 555 เลยเอามาเขียนเป็นบทความ น่าจะเป็นประโยชน์กับใครที่เจอปัญหาเดียวกัน</p> </blockquote> <p>ไปละ บุย</p> 2025-03-19T00:00:00+00:00 2025-03-19T00:00:00+00:00 https://thadaw.com/posts/note-for-ioctopus-type-safe-typescript-ai/ <p>วันนี้จะมาคุยกันเรื่อง Dependency Injection (DI) ใน TypeScript โดยเฉพาะปัญหาที่เกิดขึ้นเมื่อใช้ DI บน Edge Runtime เช่น Vercel Edge ซึ่งเป็นข้อจำกัดของบาง Library ที่ใช้ Reflection API</p> <p><strong>Background: Dependency Injection ใน Framework ดังๆ</strong></p> <p>หลายๆ คนที่เขียน Backend กันอยู่แล้ว อาจจะเคยใช้ Framework พวก Nest.js หรือถ้า .NET หรือ Java Spring Boot สิ่งที่ Framework พวกนี้ทำคล้ายๆ กันก็คือ เรื่องของ Decorator สำหรับทำ Dependency Injection และใช่ครับ นั่นเป็นหนึ่งใน Use Case ที่พบเห็นได้ทั่วไป และเป็นส่วนประกอบสำคัญของระบบระบบถอดประกอบส่วนต่างๆ ได้ อย่างเช่น Clean Architecture ของ ลุง Bob...</p> <p>ตัวอย่างใน Nest.js:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">Controller</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-alias z-ts">Get</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@nestjs/common<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-decorator z-ts"><span class="z-punctuation z-decorator z-ts">@</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">Controller</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>example<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span> </span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">ExampleController</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-meta z-decorator z-ts"><span class="z-punctuation z-decorator z-ts">@</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">Get</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">getHello</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Hello, NestJS!<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <p>แต่จริงๆ แล้ว Dependency Injection ไม่จำเป็นต้องใช้ decorator ก็ได้นะ</p> <p>การที่ library ใน Node.js จะใช้ decorator เพื่อทำ Dependency Injection มันต้องใช้ Reflection API (Reflect-metadata) เพื่อที่จะทำให้มันเกิดได้ แต่มันปัญหาก็คือมันผูกอยู่กับ Node.js Runtime กับพวกอื่นๆ ถ้าเราจะทำให้มันทำงานทุก Runtime ได้ ตรงนี้จึงไม่ตอบโจทย์</p> <h2 id="aerngcchuungaicch-thamaimthueng-yaakaich-ioctopus">แรงจูงใจ: ทำไมถึงอยากใช้ ioctopus?<a class="zola-anchor" href="#aerngcchuungaicch-thamaimthueng-yaakaich-ioctopus" aria-label="Anchor link for: aerngcchuungaicch-thamaimthueng-yaakaich-ioctopus" style="visibility: hidden;"></a> </h2> <p>ช่วงที่ทำระบบ Dependency Injection (DI) ต้องการหา Runtime Agnostic Library ที่รองรับ Edge Runtime ของ Vercel หรือ Runtime อื่นๆ ได้ โดยที่ไม่ต้องใช้ <a rel="nofollow noreferrer" href="https://www.npmjs.com/package/reflect-metadata">Reflection API</a> ซึ่งเป็นข้อจำกัดของ <a rel="nofollow noreferrer" href="https://github.com/inversify/InversifyJS">Inversify</a> ทำให้ได้ลองใช้ <a rel="nofollow noreferrer" href="https://github.com/Evyweb/ioctopus">@evyweb/ioctopus</a> ซึ่งถูกออกแบบมาเพื่อลดความซับซ้อนและช่วยให้โค้ดสะอาดขึ้น</p> <blockquote> <p>version ของ @evyweb/ioctopus ณ ตอนนี้เป็นเวอร์ชั่น 1.2.0</p> </blockquote> <p>จริงๆ ไม่ใช่เฉพาะ Inversify นะ พวก DI ดังๆ อย่าง <a rel="nofollow noreferrer" href="https://github.com/microsoft/tsyringe">Tsyringe</a>, <a rel="nofollow noreferrer" href="https://github.com/typestack/typedi">Typedi</a> เองก็มีปัญหาเดียวกัน ที่ไม่สามารถใช้งานได้บน Edge Runtime ได้ สามารถไปดูจากวิดิโอและ github ของทางผู้สร้าง from <a rel="nofollow noreferrer" href="https://www.youtube.com/watch?v=Yliaah4oiZY">YouTube</a> และ <a rel="nofollow noreferrer" href="https://github.com/nikolovlazar/nextjs-clean-architecture/pull/11">Next.js Clean Architecture PR</a></p> <p>อ่านเพิ่มเติมเรื่อง Refection API ได้ที่นี่นะ <a rel="nofollow noreferrer" href="https://blog.bitsrc.io/typescripts-reflect-metadata-what-it-is-and-how-to-use-it-fb7b19cfc7e2">TypeScript’s Reflect Metadata: What it is and How to Use it</a></p> <p>โดยปกติแล้ว ioctopus มีการใช้งานดังนี้:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">CurriedFunctionWithDependencies</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">name</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span></span> <span class="z-meta z-type z-function z-return z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">curriedFunctionWithDependencies</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> </span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">dep1</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-arrow z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">CurriedFunctionWithDependencies</span> </span></span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">name</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span></span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Hello <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">name</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> with <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dep1</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Step 1: สร้าง DI เป็น Symbol</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">DI</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">InjectionTokens</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">DEP1</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-builtin z-ts">Symbol</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>DEP1<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">DEP2</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-builtin z-ts">Symbol</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>DEP2<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">HIGHER_ORDER_FUNCTION_WITH_DEPENDENCIES</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-builtin z-ts">Symbol</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>HIGHER_ORDER_FUNCTION_WITH_DEPENDENCIES<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Step 2: สร้าง Container</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">container</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createContainer</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Step 3: เริ่มผูกความสัมพันธ์ของ Dependencies ว่าแต่ละ Dependencies จะไปหาในไหน</span> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">bind</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-constant z-object z-ts">DI</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-constant z-property z-ts">DEP1</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toValue</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dependency1<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">bind</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-constant z-object z-ts">DI</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-constant z-property z-ts">DEP2</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toValue</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-constant z-numeric z-decimal z-ts">42</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">bind</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>CURRIED_FUNCTION_WITH_DEPENDENCIES<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toCurry</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">curriedFunctionWithDependencies</span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-variable z-other z-constant z-object z-ts">DI</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-constant z-property z-ts">DEP1</span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Step 4: ใช้งาน Dependencies ผ่าน Container</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ตรงนี้เราจะได้ Data จาก Dependencies ที่ผูกไว้ก่อนหน้า และเอาไปใช้งานได้จริง</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">myService</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">get</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">MyServiceInterface</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-constant z-object z-ts">DI</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-constant z-property z-ts">HIGHER_ORDER_FUNCTION_WITH_DEPENDENCIES</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>แต่ปัญหาของ <a rel="nofollow noreferrer" href="https://github.com/Evyweb/ioctopus">@evyweb/ioctopus</a> พบว่าเราไม่สามารถทำให้เกิด Type Safety ได้เลย เพราะไม่ว่าเราจะ Bind หรือตอนที่เราใช้ <code>toCurry</code> ใน dependencies เราใส่ Symbol แต่เราต้องใส่อะไรเข้าไปบ้าง ไม่มีการระบุ Type ของ Dependencies ที่เราใช้งาน ดังนั้นใน <a rel="nofollow noreferrer" href="https://github.com/thaitype/ioctopus/pull/2/file">@thaitype/ioctopus</a></p> <p>โดยที่มีเป้าหมายให้ Type-safety โดย จะเปลี่ยนเป็น</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Step 1: สร้าง serivceRegistry และกำหนด Type ของแต่ละ Dependencies โดยที่ไม่ต้องสร้าง Symbol เอง เพราะ serviceRegistry จะทำการ Map ให้เอง</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">serviceRegistry</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">ServiceRegistry</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span></span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">define</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>DEP1<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">mapTo</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-support z-type z-primitive z-ts">string</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">define</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>DEP2<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">mapTo</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-support z-type z-primitive z-ts">number</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">define</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>CURRIED_FUNCTION_WITH_DEPENDENCIES<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">mapTo</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">CurriedFunctionWithDependencies</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Step 2: สร้าง Container โดยที่รับ serviceRegistry เข้าไป</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">container</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createContainer</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">serviceRegistry</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">bind</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>DEP1<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toValue</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dependency1<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">bind</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>DEP2<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toValue</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-constant z-numeric z-decimal z-ts">42</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">bind</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>CURRIED_FUNCTION_WITH_DEPENDENCIES<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toCurry</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">curriedFunctionWithDependencies</span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>DEP1<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Step 3: ใช้งาน Dependencies ผ่าน Container</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">myService</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">get</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>CURRIED_FUNCTION_WITH_DEPENDENCIES<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>ถ้าสังเกตุจากโค๊ด เราจะเห็นว่าเราไม่ต้องมี <code>DI</code> object แล้ว และเราสามารถกำหนด Type ของ Dependencies ได้ใน <code>serviceRegistry</code> และเราสามารถใช้งาน Dependencies ได้ผ่าน <code>container.get</code> โดยที่ไม่ต้องใช้ Symbol อีกต่อไป และเราจะรู้เลยว่าเราใส่ค่าถูกต้องหรือไม่ เพราะมันจะบอก Type ให้เราทันที</p> <p>เช่น ตอนที่เราใช้แบบนี้ มันจะ Error เพราะว่า <code>curriedFunctionWithDependencies</code> ต้องการ DEP1 เป็น string แต่เราใส่เป็น number</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">bind</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>CURRIED_FUNCTION_WITH_DEPENDENCIES<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toCurry</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">curriedFunctionWithDependencies</span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>DEP2<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <blockquote> <p>หมายเหตุ: ณ เวลาที่เขียน function <code>toCurry</code> ใน @thaitype/ioctopus ยังบอก type ผิดอยู่ แต่ถ้าใช้ <code>toHigherOrderFunction</code> จะบอก Type ถูก เดี๋ยวจะแก้อีกทีนะ</p> </blockquote> <p>ตัวอย่าง Type-safety</p> <p><img src="https://thadaw.com/posts/note-for-ioctopus-type-safe-typescript-ai/./thaitype-ioctopus.jpg" alt="" /></p> <h2 id="klabmaathiiocchthykh-ngwanniikan">กลับมาที่โจทย์ของวันนี้กัน<a class="zola-anchor" href="#klabmaathiiocchthykh-ngwanniikan" aria-label="Anchor link for: klabmaathiiocchthykh-ngwanniikan" style="visibility: hidden;"></a> </h2> <p>เนื่องจากอาจจะตามกันไม่ทัน สามารถไปดูตัวอย่างโค๊ดเต็มๆ ได้ที่นี่ <a rel="nofollow noreferrer" href="https://github.com/thaitype/ioctopus/pull/2/files">https://github.com/thaitype/ioctopus/pull/2/files</a></p> <p>คือการเปลี่ยนโค้ดจาก:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">myService</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">get</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">MyServiceInterface</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-round z-ts">(</span> </span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">serviceRegistry</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">get</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>HIGHER_ORDER_FUNCTION_WITH_DEPENDENCIES<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>มาเป็นรูปแบบที่อ่านง่ายขึ้นแบบนี้ และ Type-safe โดยรับแค่ key ของ serviceRegistry มาเท่านั้น:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">myService</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">container</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">get</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>HIGHER_ORDER_FUNCTION_WITH_DEPENDENCIES<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>เพราะ <code>createContainer(serviceRegistry)</code> ได้รับ serviceRegistry อยู่แล้ว เลยไม่จำเป็นต้อง <code>serviceRegistry.get(...)</code> ก่อนเรียก <code>container.get(...)</code></p> <p>และเพื่อให้เห็นภาพมากขึ้นเราลองมาดูตัวอย่างโค๊ดกัน</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">createContainer</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">Services</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Record</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">string</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-support z-type z-primitive z-ts">unknown</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"> <span class="z-variable z-parameter z-ts">serviceRegistry</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">ServiceRegistry</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Services</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Container</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Services</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> 📌 A</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>serviceRegistry (before get):<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-object z-ts">serviceRegistry</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">keyMap</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ...</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts"><span class="z-entity z-name z-function z-ts">get</span></span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">dependency</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">DependencyKeyType</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Services</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-arrow z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span> </span></span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> 📌 B</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>serviceRegistry (after get):<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-object z-ts">serviceRegistry</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">keyMap</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">dependencyKey</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">serviceRegistry</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">get</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">dependency</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-operator z-logical z-ts">!</span><span class="z-variable z-other z-readwrite z-ts">dependencyKey</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-trycatch z-ts">throw</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Error</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>No key found for dependency: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dependencyKey</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ...</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ...</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">get</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></code></pre> <p>🔥 ปัญหาที่เจอ: Unit Test ไม่ผ่าน เพราะ <code>serviceRegistry.get(...)</code> คืนค่า undefined</p> <blockquote> <p>ป.ล. ใน Class ServiceRegistry จะมี field ที่ชื่อ keyMap ที่เก็บ key ของ service ทั้งหมดไว้ ดูที่โค๊ด <a rel="nofollow noreferrer" href="https://github.com/thaitype/ioctopus/blob/master.type-safe.container-get-type-safe/src/service-registry.ts#L2">https://github.com/thaitype/ioctopus/blob/master.type-safe.container-get-type-safe/src/service-registry.ts#L2</a></p> </blockquote> <p>หลังจากเปลี่ยนโค้ดและรัน Unit Test บน Jest / Vitest กลับพบว่า:</p> <ul> <li><code>serviceRegistry.keyMap</code> ตอนเริ่มต้น มีค่า (ตรง 📌 A)</li> <li>แต่ตอน <code>get(...)</code> ค่า <code>serviceRegistry.get(dependency)</code> กลับ <code>undefined</code> (ตรง 📌 B)</li> <li>ทำให้เกิด Error:</li> </ul> <pre class="z-code"><code><span class="z-text z-plain">Error: No key found for dependency: undefined </span></code></pre> <p>ตอนแรก คิดว่าเป็นปัญหาจาก Jest / Vitest Runtime เพราะใน AI ก็บอกมาแบบนั้น แต่เมื่อไปรันบน Node.js ตรงๆ กลับพบว่า ไม่เกี่ยวเลย! จากที่เคยเข้าใจว่า</p> <blockquote> <p>แต่ตอน get(...) ค่า serviceRegistry.get(dependency) กลับ undefined (ตรง 📌 B)</p> </blockquote> <p>เราดันไปเข้าใจว่า <code>serviceRegistry.keyMap</code> มันเป็น object ว่าง เกิดจาที่ AI บอกว่า serviceRegistry มากกว่าหนึ่งตัว แต่จริงๆ แล้วมันมีแค่ตัวเดียว และเราก็ไม่ได้มีปัญหาเรื่อง Duplicate Imports หรือ Circular Dependency ด้วย</p> <p>ปัญหาที่แท้จริงคือ container เรียก <code>get(...)</code> หลายรอบ โดยที่ไม่ได้เข้าใจกลไกของโค๊ดทั้งหมด และในการเรียกซ้ำ มันใช้ Symbol ที่ resolve มาแล้วแทน String Key เดิม ซึ่งทำให้ <code>serviceRegistry.get(...)</code> ไม่สามารถหา Symbol ได้ เพราะใน serviceRegistry มันเก็บเป็น String Key ไม่ใช่ Symbol ของ Key</p> <h2 id="cchudthiiekhaaaicchphid-khidwaapayhaakhuue-serviceregistry-thuuksraangcham">จุดที่เข้าใจผิด: คิดว่าปัญหาคือ serviceRegistry ถูกสร้างซ้ำ<a class="zola-anchor" href="#cchudthiiekhaaaicchphid-khidwaapayhaakhuue-serviceregistry-thuuksraangcham" aria-label="Anchor link for: cchudthiiekhaaaicchphid-khidwaapayhaakhuue-serviceregistry-thuuksraangcham" style="visibility: hidden;"></a> </h2> <p>ช่วงแรกมั่นใจมากว่า ปัญหาคือมี serviceRegistry มากกว่าหนึ่งตัว เพราะ AI (GPT-4 o1) พยายามตอบไปในทางนั้นซ้ำๆ ว่า:</p> <blockquote> <p>“Ensure every place references the same instance (imported from a single path, with no duplicates or circular imports).”</p> </blockquote> <p>แต่จริงๆ แล้ว:</p> <ul> <li>serviceRegistry ถูกสร้าง แค่ครั้งเดียว</li> <li>ไม่มีปัญหาเรื่อง Duplicate Imports</li> <li>ไม่มีปัญหาเรื่อง Circular Dependency</li> </ul> <p>ซึ่งทำให้เสียเวลามากกว่าที่ควรจะเป็น เพราะต้องคุยกับ AI หลาย Prompt จนกว่ามันจะเสนอคำตอบอื่นที่ใกล้เคียงกับปัญหาจริง</p> <h2 id="cchudthiiecch-hlangranbn-node-js">จุดที่เจอหลังรันบน Node.js<a class="zola-anchor" href="#cchudthiiecch-hlangranbn-node-js" aria-label="Anchor link for: cchudthiiecch-hlangranbn-node-js" style="visibility: hidden;"></a> </h2> <p>หลังจากลอง Debug บน Node.js โดยไม่ผ่าน Jest / Vitest ก็พบว่า:</p> <ol> <li> <p>ตอน <code>get(...)</code> ครั้งแรก: <code>container.get('DEP1');</code></p> <ul> <li>ระบบเอา <code>"DEP1"</code> ไปหา <code>Symbol(‘DEP1’)</code> จาก serviceRegistry.keyMap</li> </ul> </li> <li> <p>แต่พอ <code>get(...)</code> ครั้งต่อมา: <code>container.get(Symbol('DEP1'));</code></p> <ul> <li>มันใช้ <code>Symbol(‘DEP1’)</code> ที่ได้มาแล้ว ไปหาใน <code>serviceRegistry.keyMap</code></li> <li>แต่ <code>keyMap</code> เก็บเป็น <code>String Key (“DEP1”)</code> ไม่ใช่ Symbol Key</li> <li>เลยหาไม่เจอ ทำให้ <code>serviceRegistry.get(...)</code> คืนค่า undefined</li> </ul> </li> </ol> <h2 id="withiiaek-aichfangkchan-resolvedependencykey">วิธีแก้: ใช้ฟังก์ชัน resolveDependencyKey(...)<a class="zola-anchor" href="#withiiaek-aichfangkchan-resolvedependencykey" aria-label="Anchor link for: withiiaek-aichfangkchan-resolvedependencykey" style="visibility: hidden;"></a> </h2> <p>เพื่อแก้ปัญหานี้ จึงเพิ่มฟังก์ชัน resolveDependencyKey(...) ขึ้นมา เพื่อให้แน่ใจว่า ทุกครั้งที่เรียก get(...) จะใช้ String Key ก่อนเสมอ:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">createContainer</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">Services</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Record</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">string</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-support z-type z-primitive z-ts">unknown</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"> <span class="z-variable z-parameter z-ts">serviceRegistry</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">ServiceRegistry</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Services</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Container</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Services</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ...</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts"><span class="z-entity z-name z-function z-ts">resolveDependencyKey</span></span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">dependency</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">DependencyKeyType</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Services</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">let</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-readwrite z-ts">dependencyKey</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">symbol</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-builtin z-ts">undefined</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-operator z-expression z-typeof z-ts">typeof</span> <span class="z-variable z-other z-readwrite z-ts">dependency</span> <span class="z-keyword z-operator z-comparison z-ts">===</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>symbol<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ถ้าเป็น Symbol อยู่แล้ว ใช้ไปเลย</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">dependencyKey</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-variable z-other z-readwrite z-ts">dependency</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-conditional z-ts">else</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ถ้าเป็น String ให้ Lookup จาก serviceRegistry ก่อน</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">dependencyKey</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">serviceRegistry</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">get</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">dependency</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-variable z-other z-readwrite z-ts">dependencyKey</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts"><span class="z-entity z-name z-function z-ts">get</span></span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">dependency</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">DependencyKeyType</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Services</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-arrow z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span> </span></span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">dependencyKey</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">resolveDependencyKey</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">dependency</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-operator z-logical z-ts">!</span><span class="z-variable z-other z-readwrite z-ts">dependencyKey</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-trycatch z-ts">throw</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Error</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>No key found for dependency: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">dependency</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">toString</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ...</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></code></pre> <h3 id="phllaphthhlangaekaikh">ผลลัพธ์หลังแก้ไข:<a class="zola-anchor" href="#phllaphthhlangaekaikh" aria-label="Anchor link for: phllaphthhlangaekaikh" style="visibility: hidden;"></a> </h3> <ul> <li>ไม่ว่า <code>container.get(...)</code> จะถูกเรียกด้วย String หรือ Symbol ก็ทำงานได้ถูกต้อง</li> <li><code>serviceRegistry.get(...)</code> ไม่คืนค่า undefined อีกแล้ว</li> <li>Unit Test ผ่าน ✅</li> </ul> <h2 id="btheriiyncchaakkaaraich-ai-model-gpt-4-o1">บทเรียนจากการใช้ AI Model GPT-4 o1<a class="zola-anchor" href="#btheriiyncchaakkaaraich-ai-model-gpt-4-o1" aria-label="Anchor link for: btheriiyncchaakkaaraich-ai-model-gpt-4-o1" style="visibility: hidden;"></a> </h2> <ol> <li>AI บางครั้งมั่นใจเกินไป <ul> <li>Model พยายามตอบว่า “มี serviceRegistry ซ้ำกัน” ถึง 10 ครั้ง ซึ่งเป็น สมมติฐานผิด</li> <li>ต้องกดดัน AI ด้วยหลาย Prompt จนกว่ามันจะให้คำตอบที่ต่างออกไป</li> </ul> </li> <li>ต้อง Debug ข้อมูลเอง อย่าเชื่อ AI 100% <ul> <li>AI วิเคราะห์ปัญหาได้ดีในหลายกรณี แต่ก็พลาดง่ายๆ ในจุดที่ มนุษย์ คิดออกทันที</li> <li>ใช้ AI เป็น เครื่องมือช่วยคิด ไม่ใช่ เครื่องมือคิดแทน</li> </ul> </li> <li>อย่าหลงประเด็นของ AI นานเกินไป <ul> <li>ถ้า AI ตอบแนวเดิมซ้ำๆ ลอง หยุดเชื่อ AI แล้วกลับมาไล่โค้ดเอง</li> <li>ในเคสนี้ AI ย้ำเรื่อง Multiple Instances ทั้งที่ปัญหาจริงคือ Key Type Mismatch</li> </ul> </li> </ol> <h2 id="srup">สรุป<a class="zola-anchor" href="#srup" aria-label="Anchor link for: srup" style="visibility: hidden;"></a> </h2> <p>การตั้งสมมติฐานควรตั้งอย่างใจเย็น ค่อยๆ ลดความเป็นไปได้ลง อย่าเชื่อ AI เยอะ แม้ว่าจะเป็น Model ที่ฉลาดๆ อย่าง o1 ก็ตาม เพราะบริบทที่เข้าใจของ AI อาจจะไม่ตรงกับบริบทที่เราเข้าใจ และอาจจะทำให้เสียเวลาไปมากกว่าที่ควรจะเป็น</p> <p>ถ้าใครเคยเจอปัญหาแนวนี้ มาแชร์กันได้ในคอมเมนต์เลยครับ</p> 2025-03-15T00:00:00+00:00 2025-03-15T00:00:00+00:00 https://thadaw.com/posts/why-microsoft-choose-go-for-typescript-compiler/ <p>ตอนนี้เรื่อง TypeScript กำลังจะย้าย Compiler ไปใช้ Go แทน JavaScript กำลังเป็นประเด็นร้อน มีคนดังหลายคนในวงการออกมาวิเคราะห์กันเพียบ อย่าง Theo, Matt Pocock, และ Maximilian Schwarzmüller ซึ่งแน่นอนว่ามันต้องถึงเวลาของเพจ Thaitype แล้วแหละ แต่ว่าจะไม่ได้ดังอะไรขนาดนั้น 5555+ แต่เรื่องนี้น่าสนใจมากๆ</p> <h2 id="thamaimaimaich-rust-hruue-c">ทำไมไม่ใช้ Rust หรือ C#?<a class="zola-anchor" href="#thamaimaimaich-rust-hruue-c" aria-label="Anchor link for: thamaimaimaich-rust-hruue-c" style="visibility: hidden;"></a> </h2> <p>หลังจากที่ Microsoft ออกมาประกาศเรื่องนี้ บอกเลยว่าเกิดเสียงวิพากษ์วิจารณ์สนั่น หลายคนถามว่า "ทำไมไม่ใช้ Rust?" หรือแม้แต่ "C# ที่เป็นเรือธงของ Microsoft ทำไมไม่ใช้?" เพราะ Rust เป็นภาษาที่กำลังมาแรงโดยเฉพาะในสาย Tooling และ C# ก็เป็นภาษาที่ Microsoft ภูมิใจนำเสนอมากที่สุดอยู่แล้ว การเลือก Go ทำให้หลายคนตั้งคำถามว่ามันเหมาะสมจริงหรือไม่?</p> <h2 id="thamaimt-ngepn-go">ทำไมต้องเป็น Go?<a class="zola-anchor" href="#thamaimt-ngepn-go" aria-label="Anchor link for: thamaimt-ngepn-go" style="visibility: hidden;"></a> </h2> <p>เรื่องนี้ Anders Hejlsberg ซึ่งเป็น Co-creator ของ TypeScript และ Technical Fellow ของ Microsoft ออกมาอธิบายเหตุผลหลายข้อที่ฟังแล้วต้องบอกว่า Make sense มากๆ</p> <h3 id="white-check-mark-kaarphathnaaaebb-port-aimaich-rewrite">✅ <strong>การพัฒนาแบบ Port ไม่ใช่ Rewrite</strong><a class="zola-anchor" href="#white-check-mark-kaarphathnaaaebb-port-aimaich-rewrite" aria-label="Anchor link for: white-check-mark-kaarphathnaaaebb-port-aimaich-rewrite" style="visibility: hidden;"></a> </h3> <p>TypeScript Compiler เดิมเขียนด้วย JavaScript และเป้าหมายหลักของการเปลี่ยนแปลงครั้งนี้คือการ <strong>Port</strong> ไปยังภาษาใหม่โดยยังคง <strong>โครงสร้างเดิม</strong> ให้มากที่สุด เพื่อลดความเสี่ยงในการเกิด Bug และเพื่อให้การเปลี่ยนแปลงราบรื่น ซึ่ง Go มี Syntax และ Paradigm ที่ใกล้เคียง JavaScript มากที่สุดในบรรดาภาษาที่พวกเขาพิจารณา</p> <p><img src="https://thadaw.com/posts/why-microsoft-choose-go-for-typescript-compiler/typescript-go-compare-with-the-old.jpg" alt="" /></p> <h3 id="white-check-mark-go-r-ngrab-garbage-collection-chuengcchamepnt-typescript-compiler">✅ <strong>Go รองรับ Garbage Collection ซึ่งจำเป็นต่อ TypeScript Compiler</strong><a class="zola-anchor" href="#white-check-mark-go-r-ngrab-garbage-collection-chuengcchamepnt-typescript-compiler" aria-label="Anchor link for: white-check-mark-go-r-ngrab-garbage-collection-chuengcchamepnt-typescript-compiler" style="visibility: hidden;"></a> </h3> <p>ตัว Compiler ของ TypeScript ใช้ <strong>Cyclic Data Structures</strong> เยอะมาก (เช่น AST Nodes มีการอ้างอิง Parent-Child ไปมา) ซึ่งเป็นปัญหาใหญ่สำหรับ Rust เพราะ Rust ไม่มี Garbage Collection โดยธรรมชาติ ถ้าจะใช้ Rust จะต้องเปลี่ยน Data Structure ใหม่ทั้งหมด ซึ่งจะทำให้การ Port กลายเป็นการ Rewrite ไปเลย</p> <h3 id="white-check-mark-rust-aacchcchathamaiherwkwaa-aett-ngaichewlaanaanmaak">✅ <strong>Rust อาจจะทำให้เร็วกว่า แต่ต้องใช้เวลานานมาก</strong><a class="zola-anchor" href="#white-check-mark-rust-aacchcchathamaiherwkwaa-aett-ngaichewlaanaanmaak" aria-label="Anchor link for: white-check-mark-rust-aacchcchathamaiherwkwaa-aett-ngaichewlaanaanmaak" style="visibility: hidden;"></a> </h3> <p>Microsoft ทดลองเขียน Prototype ใน Rust, Go และ C# มาแล้ว ซึ่ง Rust มีประเด็นเรื่องการจัดการ Memory ที่ต้องใช้ Borrow Checker ซึ่งทำให้การแปลง Code ที่เดิมเขียนแบบ Dynamic ไปเป็น Rust ยุ่งยากขึ้นหลายเท่า ถ้าจะ Rewrite ใหม่ทั้งหมดใน Rust อาจใช้เวลา "หลายปี" กว่าที่จะทำให้มันเสถียร</p> <p><strong>หมายเหตุ:</strong> ซึ่งปัญหาไม่ได้อยู่ที่ตัวภาษา แต่อยู่การออกแบบตามแบบฉบับของตัวภาษานั้นๆ แล้วทำให้หน้าตาโค๊ดเปลี่ยนไปเยอะ จนทำให้ย้ายปรับปรุงให้เสร็จใช้เวลานาน เพราะฉะนั้นวัตถุประสงค์ของการเปลี่ยน Compiler คือการทำให้การเปลี่ยนแปลงเป็นไปอย่างราบรื่นและรวดเร็วที่สุด โดยที่ยังคงความเสถียรเหมือนเดิม</p> <h3 id="white-check-mark-parallelism-shared-memory-concurrency">✅ <strong>Parallelism &amp; Shared Memory Concurrency</strong><a class="zola-anchor" href="#white-check-mark-parallelism-shared-memory-concurrency" aria-label="Anchor link for: white-check-mark-parallelism-shared-memory-concurrency" style="visibility: hidden;"></a> </h3> <p>Go มี <strong>Goroutines</strong> และรองรับ <strong>Shared Memory Concurrency</strong> ทำให้สามารถรันการตรวจสอบ Type ได้หลาย Process พร้อมกัน ซึ่งช่วยให้ Compiler เร็วขึ้นแบบเห็นได้ชัด ในขณะที่ JavaScript ต้องใช้ Web Workers ซึ่งไม่สามารถแชร์ Memory ได้โดยตรง ทำให้การทำ Parallel Processing มี Overhead สูงกว่า</p> <h3 id="white-check-mark-community-phyaayaamtham-rust-typescript-compiler-maanaan-aetyangaimsamercch">✅ <strong>Community พยายามทำ Rust TypeScript Compiler มานาน แต่ยังไม่สำเร็จ</strong><a class="zola-anchor" href="#white-check-mark-community-phyaayaamtham-rust-typescript-compiler-maanaan-aetyangaimsamercch" aria-label="Anchor link for: white-check-mark-community-phyaayaamtham-rust-typescript-compiler-maanaan-aetyangaimsamercch" style="visibility: hidden;"></a> </h3> <p>ก่อนหน้านี้มีโปรเจคอย่าง <strong>stc (Speedy TypeScript Compiler)</strong> ที่พยายามเขียน TypeScript Compiler ใหม่ด้วย Rust แต่มันไม่เคยได้รับความนิยมในวงกว้าง และไม่ได้ไปถึงจุดที่สามารถแทน TSC ตัวปัจจุบันได้ การที่ Microsoft พยายาม Port ไป Rust อาจจะเจอปัญหาแบบเดียวกันและต้องเสียเวลาไปอีกหลายปี</p> <h2 id="aenwkhidkaareluue-kekhruue-ngmuue-aihehmaaakabngaan">แนวคิดการเลือกเครื่องมือให้เหมาะกับงาน<a class="zola-anchor" href="#aenwkhidkaareluue-kekhruue-ngmuue-aihehmaaakabngaan" aria-label="Anchor link for: aenwkhidkaareluue-kekhruue-ngmuue-aihehmaaakabngaan" style="visibility: hidden;"></a> </h2> <p>Anders Hejlsberg สรุปประเด็นนี้ไว้ได้ชัดเจนว่า <strong>"นี่ไม่ใช่การเลือกภาษาที่ดีที่สุด แต่เป็นการเลือกภาษาที่เหมาะสมที่สุดกับโปรเจคนี้"</strong> Microsoft ไม่ได้มองว่า Go ดีกว่า Rust ในทุกแง่ แต่เพราะ TypeScript Compiler เป็นโครงการที่ลงทุนมานานกว่า 10 ปี (คิดเป็น <strong>100 man-years of investment</strong>) การเลือกเครื่องมือที่ช่วยให้การเปลี่ยนแปลงเป็นไปอย่างราบรื่นและรวดเร็วที่สุดจึงเป็นเรื่องสำคัญกว่า</p> <h2 id="khwaamehnswntawkh-ngphm">ความเห็นส่วนตัวของผม<a class="zola-anchor" href="#khwaamehnswntawkh-ngphm" aria-label="Anchor link for: khwaamehnswntawkh-ngphm" style="visibility: hidden;"></a> </h2> <p>หลังจากศึกษาเรื่องนี้ ผมเห็นด้วยกับการตัดสินใจของทีม TypeScript มากๆ การเลือก Go มัน Make sense เพราะ:</p> <ul> <li><strong>มันเร็วขึ้น 10x</strong> โดยไม่ต้อง Rewrite ใหม่ทั้งหมด</li> <li><strong>มันใช้เวลาพัฒนาได้เร็วกว่า Rust</strong> ซึ่งถ้าเลือก Rust อาจต้องใช้ "หลายปี" กว่าจะเสร็จ</li> <li><strong>Go มี Community ที่ใหญ่และ Performance ดี</strong> ไม่ได้เป็นภาษาแย่ๆ แต่อย่างใด</li> </ul> <p>สิ่งที่ Matt Pocock พูดไว้ก็น่าสนใจ</p> <blockquote> <p>We're on version 5.8 now - so by the current cadence 7.0 will be around 33 months away.</p> </blockquote> <p>คืออีก <strong>3 ปี</strong> กว่า TypeScript 7.0 จะพร้อมใช้จริง ถ้าพวกเขาเลือก Rust ที่ต้อง Rewrite ใหม่ทั้งหมด เราอาจต้องรอไปอีกกี่ปีกัน?</p> <h3 id="srupngaay-kaareluue-k-go-khuue-kaareluue-kthiidiithiisudsamhrabt-nnii"><strong>สรุปง่ายๆ: การเลือก Go คือการเลือกที่ดีที่สุดสำหรับตอนนี้</strong><a class="zola-anchor" href="#srupngaay-kaareluue-k-go-khuue-kaareluue-kthiidiithiisudsamhrabt-nnii" aria-label="Anchor link for: srupngaay-kaareluue-k-go-khuue-kaareluue-kthiidiithiisudsamhrabt-nnii" style="visibility: hidden;"></a> </h3> <p>แม้มันจะไม่ใช่ภาษาที่ทุกคนอยากให้ใช้ แต่ถ้ามองจากมุมมองของวิศวกรรมซอฟต์แวร์ การเลือกเครื่องมือที่ "เหมาะสมกับบริบทของโปรเจค" สำคัญกว่า</p> <p>สุดท้ายแล้ว ถ้ามันเร็วขึ้น 10 เท่า และยังคงความเสถียรเหมือนเดิม ใช้ได้โดยความสามารถเท่าเดิม แค่นี้ผมก้ Happy มากๆ แล้วนะละ</p> <h2 id="aang-ingtaang">อ้างอิงต่างๆ<a class="zola-anchor" href="#aang-ingtaang" aria-label="Anchor link for: aang-ingtaang" style="visibility: hidden;"></a> </h2> <ul> <li>Official Post Annoucement byAnders : "A 10x Faster TypeScript": <a rel="nofollow noreferrer" href="https://devblogs.microsoft.com/typescript/typescript-native-port/">https://devblogs.microsoft.com/typescript/typescript-native-port/</a></li> <li>Official Video Announcement by Anders: <a rel="nofollow noreferrer" href="https://www.youtube.com/watch?v=pNlq-EVld70">https://www.youtube.com/watch?v=pNlq-EVld70</a></li> <li>Anders Hejlsberg: <a rel="nofollow noreferrer" href="https://github.com/microsoft/typescript-go/discussions/411#discussioncomment-12476218">https://github.com/microsoft/typescript-go/discussions/411#discussioncomment-12476218</a></li> <li>TypeScript is being ported to Go | interview with Anders Hejlsberg: <a rel="nofollow noreferrer" href="https://www.youtube.com/watch?v=10qowKUW82U">https://www.youtube.com/watch?v=10qowKUW82U</a></li> <li>Maximilian Schwarzmüller : <a rel="nofollow noreferrer" href="https://www.youtube.com/watch?v=tRiIcCOhN6A">https://www.youtube.com/watch?v=tRiIcCOhN6A</a></li> <li>Theo: <a rel="nofollow noreferrer" href="https://www.youtube.com/watch?v=3-W95H5_lX0">https://www.youtube.com/watch?v=3-W95H5_lX0</a></li> <li>Matt Pocock: <a rel="nofollow noreferrer" href="https://www.totaltypescript.com/typescript-announces-go-rewrite">https://www.totaltypescript.com/typescript-announces-go-rewrite</a></li> </ul> 2025-03-14T00:00:00+00:00 2025-03-14T00:00:00+00:00 https://thadaw.com/posts/who-watches-the-watchers/ <p>ช่วงนี้กำลังออกแบบระบบ Security อยู่ ตอนแรกคิดว่าไม่น่าจะยาก แค่ต้อง <strong>Encrypt ข้อมูลใน Vault</strong> ก็พอ แต่พอเริ่มทำจริงๆ เจอปัญหาคลาสสิกขึ้นมาเลย</p> <ul> <li>ถ้าผม Encrypt Vault ผมต้องเก็บ <strong>Key</strong> ไว้ที่ไหน?</li> <li>ถ้าผมมีที่เก็บ Key ผมต้อง Encrypt มันมั้ย? แล้ว Key ของตัวที่เก็บ Key ล่ะ?</li> <li>ถ้าผมมี Key ของตัวที่เก็บ Key แล้ว ผมจะเก็บมันที่ไหน?</li> </ul> <p>วนลูปไปเรื่อยๆ แบบไม่มีจุดสิ้นสุด</p> <p><img src="https://thadaw.com/posts/who-watches-the-watchers/who-watches-the-watcher.jpg" alt="" /></p> <h3 id="payhaa-aikhrefaayaam">ปัญหา "ใครเฝ้ายาม?"<a class="zola-anchor" href="#payhaa-aikhrefaayaam" aria-label="Anchor link for: payhaa-aikhrefaayaam" style="visibility: hidden;"></a> </h3> <p>เรื่องนี้ทำให้นึกถึงตอนเรียน Computer Security สมัยมหาลัย อาจารย์ชอบยกตัวอย่างว่า</p> <ul> <li>ถ้ามี <strong>ทรัพย์สิน (Vault)</strong> แล้วเราจ้าง <strong>ยาม</strong> มาเฝ้า</li> <li>แล้วเราต้องให้ <strong>ยามอีกคน</strong> มาเฝ้ายาม</li> <li>แล้วต้องมี <strong>ยามอีกคน</strong> เฝ้ายามของยาม</li> <li>แล้วก็ต้องมี <strong>ยามอีกคน</strong> เฝ้ายามของยามของยาม</li> </ul> <p>แบบนี้ไปเรื่อยๆ ไม่มีที่สิ้นสุด แล้วสุดท้าย...ใครจะเฝ้าคนสุดท้าย?</p> <h3 id="eraacchaaekpayhaaniiyangaing">เราจะแก้ปัญหานี้ยังไง?<a class="zola-anchor" href="#eraacchaaekpayhaaniiyangaing" aria-label="Anchor link for: eraacchaaekpayhaaniiyangaing" style="visibility: hidden;"></a> </h3> <p>ใน Security เรามีหลายวิธีแก้ปัญหานี้ ขึ้นอยู่กับบริบทของระบบที่ออกแบบ</p> <h3 id="1-aich-root-of-trust">1. <strong>ใช้ Root of Trust</strong><a class="zola-anchor" href="#1-aich-root-of-trust" aria-label="Anchor link for: 1-aich-root-of-trust" style="visibility: hidden;"></a> </h3> <ul> <li>ปัญหาจะจบลงเมื่อเรากำหนด "ต้นทางที่เชื่อถือได้" หรือ <strong>Root of Trust</strong></li> <li>ตัวอย่างเช่น <strong>HTTPS และ SSL/TLS Certificates</strong> ที่มี Root Certificate Authority (CA) เป็นผู้ที่เราเชื่อถืออยู่แล้ว ทำให้ไม่มีการวนลูปของความเชื่อถือ</li> </ul> <h3 id="2-aich-hardware-security-module-hsm">2. <strong>ใช้ Hardware Security Module (HSM)</strong><a class="zola-anchor" href="#2-aich-hardware-security-module-hsm" aria-label="Anchor link for: 2-aich-hardware-security-module-hsm" style="visibility: hidden;"></a> </h3> <ul> <li>แทนที่จะเก็บ Key ไว้ในซอฟต์แวร์ที่ต้อง Encrypt ซ้ำไปมา เราใช้ <strong>Hardware Security Module (HSM)</strong> ที่ออกแบบให้เก็บ Key อย่างปลอดภัย</li> <li>HSM มีฟังก์ชันที่ป้องกันการเข้าถึงโดยไม่ได้รับอนุญาต และทำให้เราไม่ต้อง Encrypt ซ้ำไปซ้ำมา อย่างเช่น Azure Key Vault ก็มีบริการที่เป็น <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/azure/key-vault/managed-hsm/overview?wt.mc_id=MVP_396631">Managed HSM Service</a> ด้วยเหมือนกัน ถ้าเราโฟกัสเรื่อง Security ที่มากขึ้นก็ลองไปดูเพิ่มได้</li> </ul> <h3 id="3-aich-multi-party-approval-split-knowledge">3. <strong>ใช้ Multi-Party Approval &amp; Split Knowledge</strong><a class="zola-anchor" href="#3-aich-multi-party-approval-split-knowledge" aria-label="Anchor link for: 3-aich-multi-party-approval-split-knowledge" style="visibility: hidden;"></a> </h3> <ul> <li>ระบบสำคัญบางอย่างอาจใช้แนวทางให้ <strong>หลายคนต้องอนุมัติ</strong> ก่อนเข้าถึงข้อมูล</li> <li>ตัวอย่างเช่น <strong>ในธนาคาร การโอนเงินที่เกินจำนวนหนึ่งจะต้องได้รับการอนุมัติจากผู้จัดการ 2 คน</strong> ก่อนที่เงินจะถูกโอนจริง</li> <li>หรือในระบบ Security บางระบบ เราใช้ <strong>Shamir’s Secret Sharing</strong> เพื่อแบ่ง Key ออกเป็นหลายส่วน แล้วให้แต่ละส่วนอยู่กับคนละฝ่าย ทำให้ไม่มีใครสามารถใช้ Key ได้โดยลำพัง ซึ่ง HashiCorp Vault เองก็ใช้ <a rel="nofollow noreferrer" href="https://developer.hashicorp.com/vault/docs/concepts/seal#shamir-seals">Shamir's Secret Sharing</a></li> </ul> <h3 id="4-aich-zero-trust-architecture">4. <strong>ใช้ Zero Trust Architecture</strong><a class="zola-anchor" href="#4-aich-zero-trust-architecture" aria-label="Anchor link for: 4-aich-zero-trust-architecture" style="visibility: hidden;"></a> </h3> <ul> <li>แทนที่จะสร้างความเชื่อถือเป็นชั้นๆ ไปเรื่อยๆ เราใช้หลัก <strong>“เชื่อถือเป็นศูนย์” (Never Trust, Always Verify)</strong></li> <li>ทุกครั้งที่มีการเข้าถึงข้อมูลสำคัญ ต้องมีการตรวจสอบสิทธิ์ใหม่เสมอ ไม่ว่าจะเป็น Admin หรือ System Process ก็ตาม</li> </ul> <h3 id="5-aich-immutable-logging-auditing">5. <strong>ใช้ Immutable Logging &amp; Auditing</strong><a class="zola-anchor" href="#5-aich-immutable-logging-auditing" aria-label="Anchor link for: 5-aich-immutable-logging-auditing" style="visibility: hidden;"></a> </h3> <ul> <li>แทนที่จะมีคนเฝ้ากันไปเรื่อยๆ เราใช้ <strong>ระบบตรวจสอบย้อนหลังที่แก้ไขไม่ได้</strong> เช่น <strong>Blockchain-based Audit Logs หรือ SIEM (Security Information and Event Management)</strong></li> <li>ตัวอย่างเช่น <strong>ในระบบ Blockchain การแก้ไขย้อนหลังเป็นไปไม่ได้ เพราะทุกธุรกรรมต้องได้รับฉันทามติจากโหนดที่เกี่ยวข้อง</strong></li> </ul> <h2 id="aenwkhidkaar-kaebbrabbkhwaampl-dphay">แนวคิดการออกแบบระบบความปลอดภัย<a class="zola-anchor" href="#aenwkhidkaar-kaebbrabbkhwaampl-dphay" aria-label="Anchor link for: aenwkhidkaar-kaebbrabbkhwaampl-dphay" style="visibility: hidden;"></a> </h2> <p>การเพิ่มระบความปลอดภัยของ Security <strong>ไม่ใช่แค่การเพิ่ม Layer ไปเรื่อยๆ</strong> แต่ควรออกแบบให้ถูกต้อง</p> <ul> <li>ถ้าเราต้องเฝ้ากันเป็นชั้นๆ โดยไม่มีจุดสิ้นสุด แสดงว่ามีบางอย่างผิดพลาดในการออกแบบ</li> <li>การสร้าง Layer ที่ซับซ้อนเกินไป อาจทำให้ระบบ <strong>ยากต่อการดูแล และยังมีช่องโหว่จากความผิดพลาดของมนุษย์</strong> เช่น <ul> <li>การตั้งค่าผิดพลาด</li> <li>การจัดการ Key ที่ยุ่งยาก</li> <li>การเปิดสิทธิ์มากเกินไปเพื่อ "ความสะดวก"</li> </ul> </li> </ul> <p>Security ที่เหมาะสมคือการ <strong>กำหนด Root of Trust และใช้หลัก Zero Trust เพื่อไม่ต้องพึ่ง Layer ที่ซับซ้อนเกินไป</strong> และขึ้นอยู่กับความสามารถยอมรับและความเสี่ยงของ Security ที่รับได้</p> <h2 id="btheriiyncchaakeruue-ngnii">บทเรียนจากเรื่องนี้<a class="zola-anchor" href="#btheriiyncchaakeruue-ngnii" aria-label="Anchor link for: btheriiyncchaakeruue-ngnii" style="visibility: hidden;"></a> </h2> <ol> <li><strong>Security ที่เหมาะสมต้องมีจุดเริ่มต้นที่ชัดเจน</strong> เช่น Root of Trust หรือ Hardware Security Module</li> <li><strong>Security ควรถูกออกแบบให้เรียบง่าย</strong> ไม่ใช่แค่เพิ่ม Layer ป้องกันที่ซับซ้อน</li> <li><strong>Automation &amp; Monitoring สำคัญกว่าการให้คนเฝ้ากันไปเรื่อยๆ</strong> ควรใช้ Immutable Logs และ AI-Based Security Monitoring</li> <li><strong>ความผิดพลาดของมนุษย์คือจุดอ่อนที่ใหญ่ที่สุดของ Security</strong> ดังนั้น การออกแบบที่ลดการพึ่งพามนุษย์ให้มากที่สุดจะช่วยลดความเสี่ยงได้</li> </ol> <h2 id="sudthaay-security-thiiehmaaasmsamhrabphm-kkhuue">สุดท้าย Security ที่เหมาะสมสำหรับผม ก็คือ<a class="zola-anchor" href="#sudthaay-security-thiiehmaaasmsamhrabphm-kkhuue" aria-label="Anchor link for: sudthaay-security-thiiehmaaasmsamhrabphm-kkhuue" style="visibility: hidden;"></a> </h2> <p>การออกแบบที่เหมาะสม ความสามารถในยอมรับจากการประเมินความเสี่ยง ทรัพยากรที่ต้องเสียไปกับการที่ทำให้ระบบแข็งแรงขึ้น มันคุ้มค่ากับของที่ต้องปกป้องมั้ย และการลดการใช้มนุษย์บางขั้นตอน อาจจะนำ AI หรือ ระบบคอมพิวเตอร์เข้ามาช่วยตรวจด้วยก็ได้</p> <p>ก่อนจะจากกันประเด็นเรื่อง Security เป็นประเด็นที่ยากมากสำหรับผมที่เขียนให้แล้วไม่ถูกวิพากษ์วิจารณ์ ถ้าสิ่งที่ผมเขียนไม่ถูกต้องอย่างไร อยากให้หยิบขึ้นมาประเด็นที่ถกเถียงกันด้วยเหตุและผล ผมเป็นเพียงคนจุดประเด็นเรื่องขึ้นมาพูดคุย ถ้าจุดไหนผมกล่าวผิดไป จะหยิบนำไปปรับปรุงต่อไป</p> <p>ขอบคุณที่อ่านและติดตามนะครับ</p> 2025-01-21T00:00:00+00:00 2025-01-21T00:00:00+00:00 https://thadaw.com/posts/secure-api-access/ <p>วันก่อนไปนั่งแกะ Authentication ของ Azure table มาเลย ว่าเวลาที่เค้ายืนยันตัวตน ผ่าน API เค้าทำยังไง แล้วก็เจอว่าเค้าใช้ เค้าใช้ Signature คู่กับ Access Key และบังเอิญโพสของ <a rel="nofollow noreferrer" href="https://x.com/alexxubyte">Alex Xu ใน X</a> ว่าด้วยเรื่องของ <a rel="nofollow noreferrer" href="https://x.com/alexxubyte/status/1881034986561982952?t=u2PahKOS7wvncXHEorTJzQ&amp;s=19">"How do we design effective and safe APIs?"</a> ซึ่งอธิบายเรื่องนึงที่ผมสังเกตุเห็นก็คือ</p> <pre data-lang="diff" class="language-diff z-code"><code class="language-diff" data-lang="diff"><span class="z-source z-diff">Secure Access API </span><span class="z-source z-diff"> </span><span class="z-source z-diff"><span class="z-markup z-deleted z-diff"><span class="z-punctuation z-definition z-deleted z-diff">-</span> GET /api/private </span></span><span class="z-source z-diff"><span class="z-markup z-deleted z-diff"><span class="z-punctuation z-definition z-deleted z-diff">-</span> Header: X-API-KEY: &lt;API_KEY&gt; </span></span><span class="z-source z-diff"> </span><span class="z-source z-diff"><span class="z-markup z-inserted z-diff"><span class="z-punctuation z-definition z-inserted z-diff">+</span> Header: X-API-KEY: &lt;API_KEY&gt; </span></span><span class="z-source z-diff"><span class="z-markup z-inserted z-diff"><span class="z-punctuation z-definition z-inserted z-diff">+</span> X-EXPIRY: &lt;API_KEY&gt; </span></span><span class="z-source z-diff"><span class="z-markup z-inserted z-diff"><span class="z-punctuation z-definition z-inserted z-diff">+</span> X-REQUEST-SIGNATURE: hmac(URL + Query + Expiry + Body) </span></span></code></pre> <p>ที่นี้เรามาดูกันดีกว่าว่าทำไม <a rel="nofollow noreferrer" href="https://x.com/alexxubyte">Alex Xu</a> ถึงแนะนำออกแบบไม่ให้ส่ง API KEY ไปตรงๆ แบบโจ่งแจ้งแบบนั้น</p> <p>ยกตัวอย่าง เวลาที่เราพัฒนาระบบระบบนึง เช่น E-commerce API อย่างเรามี API สำหรับการสร้างออเดอร์หรือดูรายละเอียดสินค้า หลายคนอาจเลือกใช้ API Key ในการยืนยันตัวตน เพราะมันใช้งานง่าย แค่ใส่ API Key ลงใน header เช่น <code>X-API-KEY</code> ระบบก็ทำงานได้ทันที แต่การใช้แค่ API Key อย่างเดียวกลับมีความเสี่ยงที่ในหลายๆ มิติ เราไปดูกัน</p> <h2 id="taw-yaangpayhaaain-api">ตัวอย่างปัญหาใน API<a class="zola-anchor" href="#taw-yaangpayhaaain-api" aria-label="Anchor link for: taw-yaangpayhaaain-api" style="visibility: hidden;"></a> </h2> <p>สมมติเราออกแบบ API สำหรับร้านค้าออนไลน์ โดย API มีฟังก์ชันสำคัญ เช่น:</p> <p>สร้างคำสั่งซื้อ:</p> <pre class="z-code"><code><span class="z-text z-plain">POST /api/orders </span><span class="z-text z-plain">Header: X-API-KEY: &lt;API_KEY&gt; </span><span class="z-text z-plain">Body: { &quot;productId&quot;: 123, &quot;quantity&quot;: 1 } </span></code></pre> <p>หาก API Key รั่วไหล ผู้ไม่หวังดีอาจสร้างคำสั่งซื้อปลอมในระบบ ส่งผลให้สต็อกสินค้าและการจัดการคำสั่งซื้อผิดพลาด</p> <h3 id="payhaakh-ngkaaraichaekh-api-key">ปัญหาของการใช้แค่ API Key<a class="zola-anchor" href="#payhaakh-ngkaaraichaekh-api-key" aria-label="Anchor link for: payhaakh-ngkaaraichaekh-api-key" style="visibility: hidden;"></a> </h3> <ol> <li> <p><strong>API Key สามารถถูกขโมยได้</strong></p> <p>ถ้าเราส่ง API Key ผ่านอินเทอร์เน็ตโดยไม่มีการเข้ารหัส เช่น ใช้ HTTP แทน HTTPS ผู้ไม่หวังดีสามารถดักจับ (sniffing) API Key ของเราไปใช้งานต่อได้ทันที ซึ่งถ้าระบบของเราไม่มีวิธีป้องกันเพิ่มเติม มันก็เหมือนเราให้ "กุญแจบ้าน" กับคนอื่นไปเลย หรือบางครั้งเราใส่ API KEY ไปที่ Query Params โดยตรงซึ่งเราอาจจะถูกดักจับได้จากพวก Router หรือพวก ISP ได้ครับ เช่น <code>GET /api/orders?key=XXXX</code></p> </li> <li> <p><strong>Replay Attacks</strong></p> <p>การใช้ API Key อย่างเดียว ทำให้ผู้โจมตีสามารถเอา Request เดิมๆ ของเรามาใช้อีกครั้งได้ เพราะ API Key ไม่ได้ผูกกับข้อมูลเฉพาะของ Request นั้นๆ เช่น เวลา (timestamp) หรือรายละเอียดของ Request</p> </li> <li> <p><strong>ตรวจสอบความถูกต้องไม่ได้</strong></p> <p>API Key ไม่สามารถบอกได้ว่า ข้อมูลใน Request นั้นถูกแก้ไขระหว่างทางหรือเปล่า เพราะมันไม่มีการลงนาม (signature) เพื่อยืนยันความถูกต้อง</p> </li> </ol> <h3 id="thamaimt-ngaich-signature">ทำไมต้องใช้ Signature?<a class="zola-anchor" href="#thamaimt-ngaich-signature" aria-label="Anchor link for: thamaimt-ngaich-signature" style="visibility: hidden;"></a> </h3> <p><strong>Signature</strong> คือ "ลายเซ็นดิจิทัล" ที่สร้างจากข้อมูลที่เราต้องการ เช่น ใน Request เราอาจจะใช้ URL, เวลา, และ Request Body โดยเข้ารหัส (hashed) ด้วย <strong>Secret Key</strong> ซึ่งมันช่วยให้การยืนยันตัวตนปลอดภัยขึ้นมาก</p> <ol> <li> <p><strong>ป้องกันการปลอม Request</strong></p> <p>เพราะ Signature ถูกสร้างขึ้นจากข้อมูลเฉพาะของ Request เช่น URL และเวลา หากไม่มี Secret Key ก็ไม่มีทางสร้าง Signature ที่ถูกต้องได้</p> </li> <li> <p><strong>ป้องกัน Replay Attacks</strong></p> <p>การใช้ Timestamp (เช่น <code>x-ms-date</code>) ช่วยให้ Signature มีอายุจำกัด ถ้า Request ถูกส่งซ้ำหลังเวลาที่กำหนด Request นั้นจะถูกปฏิเสธทันที</p> </li> <li> <p><strong>มั่นใจได้ว่าข้อมูลไม่ถูกแก้ไข</strong></p> <p>Signature ยืนยันได้ว่าข้อมูลใน Request ไม่ได้ถูกดัดแปลงระหว่างทาง เพราะ Signature จะเปลี่ยนทันทีหากข้อมูลเปลี่ยน</p> </li> </ol> <h3 id="kaaraich-signature-ephuue-aekpayhaa">การใช้ Signature เพื่อแก้ปัญหา<a class="zola-anchor" href="#kaaraich-signature-ephuue-aekpayhaa" aria-label="Anchor link for: kaaraich-signature-ephuue-aekpayhaa" style="visibility: hidden;"></a> </h3> <p>การเพิ่ม Signature ในการยืนยันตัวตนช่วยให้ Request แต่ละ Request ปลอดภัยยิ่งขึ้น ตัวอย่างเช่น ในระบบ E-commerce เราอาจออกแบบให้ Request POST หรือ PUT ต้องมี Signature แบบนี้ ในตัวอย่างข้างล่างเป็นแค่แนวคิด Algorithm ซึ่งสามารถนำไปประยุกต์ใช้ได้ทุกภาษา:</p> <ol> <li> <p>สร้างข้อความที่ต้องการจะ Sign รวมข้อมูลสำคัญใน Request เช่น HTTP Method, URL, Timestamp และ API Key อย่างเช่น:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-variable z-other z-readwrite z-ts">stringToSign</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>POST<span class="z-constant z-character z-escape z-ts">\n</span>/api/orders<span class="z-constant z-character z-escape z-ts">\n</span>x-timestamp:2025-01-21T10:00:00Z<span class="z-constant z-character z-escape z-ts">\n</span>productId=123&amp;quantity=1<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span> </span></code></pre> </li> <li> <p>สร้าง Signatureใช้ HMAC-SHA256 เข้ารหัส String to Sign ด้วย Secret Key (โดยที่ HMAC คือการเข้ารหัส Signature ด้วย Algorithm อะไรก็ได้ที่เป็น Hash function พร้อมกับ Secret:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-variable z-other z-readwrite z-ts">signature</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">hmac</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>sha-256<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">stringToSign</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">secretKey</span><span class="z-meta z-brace z-round z-ts">)</span> </span></code></pre> </li> <li> <p>แนบ Signature ใน Request ส่ง Signature และ Timestamp ไปใน header:</p> <pre class="z-code"><code><span class="z-text z-plain">POST /api/orders </span><span class="z-text z-plain">Headers: </span><span class="z-text z-plain">X-API-KEY: &lt;API_KEY&gt; </span><span class="z-text z-plain">X-TIMESTAMP: 2025-01-21T10:00:00Z </span><span class="z-text z-plain">X-SIGNATURE: &lt;Signature&gt; </span></code></pre> </li> <li> <p>ตรวจสอบ Signature ที่ฝั่งเซิร์ฟเวอร์ เซิร์ฟเวอร์จะสร้าง Signature ใหม่จาก Request ที่ได้รับ และตรวจสอบว่าตรงกับ Signature ที่ผู้ใช้ส่งมาหรือไม่ หากไม่ตรงกัน Request จะถูกปฏิเสธทันที แสดงว่าเราควรเก็บ Secret ให้ดี ดังนั้นเราไม่ควร Sign พวก Signature ที่ Browser เพราะเราสามารถเปิด source code เพื่อดู Secret ได้</p> </li> </ol> <h2 id="taw-yaangcchaak-azure-storage-table">ตัวอย่างจาก Azure Storage Table<a class="zola-anchor" href="#taw-yaangcchaak-azure-storage-table" aria-label="Anchor link for: taw-yaangcchaak-azure-storage-table" style="visibility: hidden;"></a> </h2> <p>ที่นี้เรามาดูตัวอย่างของจริงกันบ้าง ใน Azure มีบริการนึงชื่อว่า Azure Table ซึ่งเป็น Serverless NoSQL Database ที่เป็นแบบ Table ซึ่งเราสามารถเข้าถึง Data ของ Azure Table ได้</p> <p>ซึ่ง <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/azure/storage/common/authorize-data-access?tabs=tables">Azure Table สามารถยืนยันตัวตนและรับรองสิทธิของ Data ได้หลายวิธี</a>) ซึ่ง <strong>Shared Key Authorization</strong> ก็เป็นวิธีการรับรองสิทธิ์ที่ใช้สำหรับการเข้าถึงข้อมูลใน <strong>Azure Storage</strong> ซึ่งรองรับบริการต่าง ๆ เช่น Blobs, Files, Queues และ Tables โดยการทำงานจะเป็นดังนี้:</p> <p>เมื่อไคลเอนต์ (Client) ต้องการส่งคำขอ (Request) ไปยัง Azure Storage จะต้องแนบ <strong>Header</strong> ที่ถูกเซ็นด้วย <strong>Storage Account Access Key</strong> ซึ่งเป็นคีย์ลับสำหรับการเข้าถึงบัญชีเก็บข้อมูล ซึ่งเราสามารถดูวิธีการ <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/rest/api/storageservices/authorize-with-shared-key/">Authorize with Shared Key</a>.</p> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Note</strong></p> <p>ซึ่งใน Azure Table เราสามารถเลือกใช้ได้ 2 บริการ ก็คือ Azure Storage Account ซึ่งจะมีบริการ Table อยู่ข้างใน หรือจะใช้ <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/azure/cosmos-db/table/introduction">Azure Cosmos Table</a> ก็ได้เหมือนกัน</p> </div> </blockquote><h2 id="taw-yaangkaaraichngaancchringcchaak-azure-table">ตัวอย่างการใช้งานจริงจาก Azure Table<a class="zola-anchor" href="#taw-yaangkaaraichngaancchringcchaak-azure-table" aria-label="Anchor link for: taw-yaangkaaraichngaancchringcchaak-azure-table" style="visibility: hidden;"></a> </h2> <p>ในตัวอย่างผมแกะมาจาก Scheme ที่เป็น <strong>Shared Key Lite</strong> ซึ่งเป็นวิธีการ Authentication ไปยัง Azure Table วิธีการนึง <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/rest/api/storageservices/authorize-with-shared-key"><strong>Shared Key authorization</strong></a> ซึ่งผมได้แกะมาจาก Source Code ของ Azure Table Client ที่อยู่ใน npm <a rel="nofollow noreferrer" href="https://www.npmjs.com/package/@azure/data-tables">@azure/data-tables@13.3.0</a> โดยตัวอย่างข้างล่างผมหยิบมาจากตัวอย่างโค๊ด <a rel="nofollow noreferrer" href="https://github.com/Azure/azure-sdk-for-js/blob/%40azure/data-tables_13.3.0/sdk/tables/data-tables/src/tablesNamedCredentialPolicy.ts#L37-L64">tablesNamedCredentialPolicy.ts</a></p> <p>Azure Table Storage ใช้การยืนยันตัวตนแบบ <strong>Shared Key Lite</strong> โดยต้องสร้าง Signature จากข้อมูลใน Request เช่น:</p> <ul> <li><code>x-ms-date</code> (วันที่ใน Request )</li> <li>Canonicalized Resource (ข้อมูลทรัพยากร เช่น ชื่อตาราง)</li> </ul> <p>ตัวอย่างโค้ดสร้าง Authorization Header:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">stringToSign</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dateHeader</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-constant z-character z-escape z-ts">\n</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">getCanonicalizedResourceString</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">request</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">credential</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">signature</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">computeHMACSHA256</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">stringToSign</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-object z-ts">credential</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">key</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">authorizationHeader</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>SharedKeyLite <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-object z-ts">credential</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">name</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>:<span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">signature</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h3 id="withiikaarthamngaan">วิธีการทำงาน:<a class="zola-anchor" href="#withiikaarthamngaan" aria-label="Anchor link for: withiikaarthamngaan" style="visibility: hidden;"></a> </h3> <ol> <li><strong>สร้าง String to Sign</strong> รวมข้อมูลสำคัญ เช่น วันที่และข้อมูลทรัพยากร</li> <li><strong>สร้าง Signature</strong> ใช้ HMAC-SHA256 เพื่อเข้ารหัส String to Sign ด้วย Secret Key</li> <li><strong>ตรวจสอบ Signature</strong> ฝั่งเซิร์ฟเวอร์จะสร้าง Signature ใหม่จากข้อมูลใน Request ที่ได้รับ แล้วเปรียบเทียบกับ Signature ที่ส่งมาด้วย</li> </ol> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Note</strong></p> <p>ถ้าสังเกตุดีๆ จะเห็นว่า ตัวอย่างเรื่อง Signature ของ API Key ที่ยกตัวอย่างมา รวมถึงของทาง <a rel="nofollow noreferrer" href="https://x.com/alexxubyte">Alex Xu</a> และ Shared Key Authorization ของ Azure มีความต่างกันของ Header ที่จะส่งอยู่</p> <ol> <li>โดยทั่วไปแล้ว API Key สามารถให้เห็นได้ เพราะเราอาจจะใช้หลาย Token แล้วจำนวนต้องบอกไปยัง Server ว่าเราใช้ API Key ไหน</li> <li>แต่ในกรณีของ Azure เจ้า API Key หรือก็คือ Shared Key Authorization นั้น เป็นเหมือน Master Key ก็คือถ้าหลุดไป สามารถเข้าถึงได้เยอะมาก แต่มีได้แค่ Key เดียว ซึ่งฝั่ง Server จะรู้อยู่แล้วว่าต้องใช้ Key อะไรเอาไป Sign เพื่อเปรียบเทียบกัน</li> </ol> <p>ดังนั้นเลือก และตัดสินใจวิธีการ Authentication ด้วยความเข้าใจ ขอบเขตของความปลอดภัย</p> </div> </blockquote><h2 id="thamaim-microsoft-aenanamaihelikaich-shared-key-authorization-kab-azure-storage">ทำไม Microsoft แนะนำให้เลิกใช้ Shared Key Authorization กับ Azure Storage?<a class="zola-anchor" href="#thamaim-microsoft-aenanamaihelikaich-shared-key-authorization-kab-azure-storage" aria-label="Anchor link for: thamaim-microsoft-aenanamaihelikaich-shared-key-authorization-kab-azure-storage" style="visibility: hidden;"></a> </h2> <p>อย่างไรก็ตาม ทาง Azure แนะนำให้เรา <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/azure/storage/common/shared-key-authorization-prevent">ปิดการใช้งาน Shared Key authorization</a>เพราะมันไม่เหมาะกับบริบทนี้ แต่ไม่ได้หมายความว่าการ Sign Signature แบบนี้จะไม่ปลอดภัยซะทีเดียว มันอยู่ที่เรารับระดับของความปลอดภัยได้มากน้อนแค่ไหน</p> <p><strong>ทำไมการใช้ Shared Key Authorization ถึงต้องระมัดระวัง?</strong></p> <ul> <li><strong>ความสำคัญของ Access Key:</strong> คีย์นี้เป็นเหมือนกุญแจหลัก (Master Key) ของบัญชีเก็บข้อมูล ถ้าคีย์นี้ตกไปอยู่ในมือคนอื่น ไม่ว่าจะด้วยความผิดพลาดหรือการโจมตีทางไซเบอร์ ผู้ที่ได้คีย์ไปจะสามารถเข้าถึงข้อมูลทุกอย่างในบัญชีของคุณได้ รวมถึงการลบหรือแก้ไขข้อมูล</li> <li><strong>ไม่มีการควบคุมแบบละเอียด (Limited Control</strong>): การใช้ Shared Key ไม่สามารถกำหนดสิทธิ์เฉพาะเจาะจงให้ผู้ใช้แต่ละคนได้ เช่น การอนุญาตให้บางคนอ่านข้อมูลอย่างเดียว หรือให้สิทธิ์เฉพาะบางโฟลเดอร์</li> </ul> <h3 id="srup">สรุป<a class="zola-anchor" href="#srup" aria-label="Anchor link for: srup" style="visibility: hidden;"></a> </h3> <p>การใช้แค่ API Key อาจทำให้ระบบของเราถูกเจาะง่าย เช่น ถ้า API Key รั่วไหลไป ระบบของเราก็จะโดนใช้แบบไม่จำกัด การเพิ่ม Signature ช่วยให้ Request แต่ละ Request มีความเฉพาะตัว ป้องกันการปลอมแปลง ลดความเสี่ยงจาก Replay Attacks และยืนยันได้ว่า Request มาจากแหล่งที่ถูกต้อง เหมือนกับที่ Azure Table Storage ใช้วิธีนี้เพื่อความปลอดภัยของข้อมูล</p> <p>ถามว่า ทำไมผมถึงยกตัวอย่างของ Azure Table เพราะ Shared Key Authorization คล้ายกับการใช้ <strong>API Key</strong> โดยเซ็นข้อความ (Sign Signature) ด้วย <strong>HMAC (Hash-based Message Authentication Code)</strong> ซึ่งมีการเข้ารหัสที่แข็งแรงอยู่แล้ว ถ้าคุณไม่ได้กังวลเรื่องความปลอดภัยมากนัก หรือเป็นระบบที่ไม่ได้เก็บข้อมูลสำคัญ Shared Key ก็อาจจะยังเป็นตัวเลือกที่เหมาะสมอยู่นะ</p> <p>ดังนั้นเวลาเราออกแบบ เราควรจะเลือกวิธีการออกแบบให้เหมาะสมกับสถานการณ์นั้นๆ และการ Secure API Token ด้วย Signature ยังตอบโจทย์ในหลายสถานการณ์อยู่ครับ ถ้า Endpoint ของเราไม่ได้มีการ Shared การใช้งาน Resource ในลักษณะของ Azure Table ก็ยังถือว่าปลอดภัยอยู่ครับ</p> <p>แล้วพบกันใหม่นะครับ</p> 2024-12-27T00:00:00+00:00 2024-12-27T00:00:00+00:00 https://thadaw.com/posts/handle-loop-of-callback-in-javascript/ <p>สวัสดีครับ วันนี้เรามาจัดการเรื่องที่น่าปวดหัวของ JavaScript กัน ซึ่งถ้าใครเขียน Promise อยู่บ่อยๆ อยู่แล้ว ก็คงไม่ค่อยเจอกับปัญหาพวกนี้เท่าไหร่แล้วเนอะ แต่ถ้าคนที่เขียน JavaScript ยุคสมัยของ Callback อยู่ ก็คงเจอปัญหานี้บ่อยๆ แล้ว ซึ่งจะต้องเข้าใจการทำงานของ JavaScript Event Loop ก่อน</p> <p><img src="https://thadaw.com/posts/handle-loop-of-callback-in-javascript/./cover.jpg" alt="cover" /></p> <p>โดยเจ้า Callback เนี่ยแหละสร้างความปวดหัวในการทำงาน สำหรับคนที่คุ้นเคยกับเขียนแบบ Async/Await มากๆ เลย เพราะมันไม่ได้ทำงานตามลำดับที่เราคิด แต่มันจะเอาไปทำงานหลังบ้าน แล้วก็เสร็จเมื่อไหร่ก็ไม่รู้เลย 555+ น้ำตาจิไหล</p> <blockquote class="callout note"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"></path></svg> </div> <div class="content"> <p><strong>Note</strong></p> <p>ถึงแม้บทความนี้จะเขียนพฤติกรรมของ JavaScript แต่จะใช้ภาษา TypeScript ในการเขียนตัวอย่าง ใครที่อยากจะลองรันตาม แนะนำใช้ <a rel="nofollow noreferrer" href="https://bun.sh/">bun</a></p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">mkdir</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>p</span> demo-callback</span> <span class="z-keyword z-operator z-logical z-and z-shell">&amp;&amp;</span> <span class="z-meta z-function-call z-shell"><span class="z-support z-function z-cd z-shell">cd</span></span><span class="z-meta z-function-call z-arguments z-shell"> demo-callback</span> <span class="z-keyword z-operator z-logical z-and z-shell">&amp;&amp;</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">bun</span></span><span class="z-meta z-function-call z-arguments z-shell"> init<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>y</span></span> </span></code></pre> <p>จากนั้นมันจะสร้างไฟล์ index.ts ให้เรา แล้วเราก็เริ่มเขียนโค้ดตามตัวอย่างได้เลย โดยให้รันด้วยคำสั่ง <code>bun run index.ts</code></p> </div> </blockquote> <p>เรามาดูตัวอย่างของจริงกัน อย่างเช่น ปัญหา Classic อย่างเจ้า timeout กันก่อน</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-support z-function z-ts">setTimeout</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Timeout 1<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Start<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>ถ้าเรามองผ่านๆ เราอาจจะคิดว่ามันจะทำตามลำดับ ก็คือเริ่มด้วย <code>Timeout 1</code> แต่จริงๆ แล้วมันจะทำงานแบบนี้</p> <pre class="z-code"><code><span class="z-text z-plain">Start </span><span class="z-text z-plain">Timeout 1 </span></code></pre> <p>หมายความว่า มันจะทำงาน <code>Start</code> ก่อนแล้วค่อยทำ <code>Timeout 1</code> หลังจาก 1 วินาที ซึ่งถ้าเราไม่เข้าใจหลักการของ Event Loop นี้เราจะทำให้เราอ่านโค๊ดแล้วไม่เข้าใจ ถ้าเราต้องการทำงานตามลำดับ ให้ใช้ Promise หรือ Async/Await ก็ได้</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts"><span class="z-entity z-name z-function z-ts">timeout</span></span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-entity z-name z-function z-ts">fn</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span></span> <span class="z-meta z-type z-function z-return z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-support z-type z-primitive z-ts">void</span></span></span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">ms</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Promise</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">resolve</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-function z-ts">setTimeout</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">fn</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">resolve</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">ms</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Start<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">timeout</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Timeout 1<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>เราก็จัดการแปลงเจ้า <code>setTimeout</code> ให้เป็น Promise แล้วเรียกใช้งานด้วย <code>await</code> แล้วก็จะทำงานตามลำดับที่เราคิด</p> <h2 id="payhaakh-ngeraakh-ngkaarcchadkaar-loop-ain-callback">ปัญหาของเราของการจัดการ Loop ใน Callback<a class="zola-anchor" href="#payhaakh-ngeraakh-ngkaarcchadkaar-loop-ain-callback" aria-label="Anchor link for: payhaakh-ngeraakh-ngkaarcchadkaar-loop-ain-callback" style="visibility: hidden;"></a> </h2> <p>อย่างเขียนไปตรงหัวข้อว่า เรื่องของจัดการการวน Loop ของ Callback ใน JavaScript นั้น ซึ่งถ้าเป็น Modern JavaScript เรามักจะใช้ Promise เป็นมาตรฐานในการจัดการ Async แล้ว แต่เราก็อาจจะต้องทำงานกับบาง Library หรือโค้ดที่เขียนแบบ Callback อยู่ ซึ่งเราก็จะต้องเข้าใจการทำงานของ JavaScript Event Loop ก่อน</p> <p>ผมเองก็ได้มีโอกาสใช้ Library ตัวนึง สำหรับทำ Search แบบ Lightweight ชื่อ <a rel="nofollow noreferrer" href="https://github.com/nextapps-de/flexsearch">Flexsearch</a> มาลองดูตัวอย่างกัน</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-variable z-other z-readwrite z-alias z-ts">FlexSearch</span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>flexsearch<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">index</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-module z-ts">FlexSearch</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-ts">Document</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Index configuration</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Somehow we add data into index</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Export the index</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">index</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">export</span></span><span class="z-meta z-brace z-round z-ts">(</span> </span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">key</span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">data</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">fs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">writeFileSync</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">path</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">join</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">searchIndexPath</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">key</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>.json<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-json z-ts">JSON</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-json z-ts">stringify</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">data</span> <span class="z-keyword z-operator z-logical z-ts">??</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span><span class="z-source z-ts"><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>เราจะเห็นว่าเราจะใช้ <code>index.export</code> ในการ Export ข้อมูลออกมา แต่เราจะเจอปัญหาเรื่องการวน Loop ของ Callback ที่เราไม่รู้ว่าเมื่อไหร่จะเสร็จ แล้วเราจะทำอย่างไร แล้วมันเป็นปัญหายังไง มาดูตัวอย่างที่ทำให้เกิดปัญหากัน</p> <p>สมมติว่าต้องการเก็บว่าเจ้า method ที่ชื่อ <code>export</code> มีค่าของ <code>key</code> อะไรบ้าง ซึ่งเราไม่มีทางรู้ได้เลยใช่มั้ยว่ามันค่าอะไรบ้าง ดังนั้นเราจึงต้อง หาอะไรมาเก็บมัน เช่น</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">keys</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">index</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">export</span></span><span class="z-meta z-brace z-round z-ts">(</span> </span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">key</span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">data</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">fs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">writeFileSync</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">path</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">join</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">searchIndexPath</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">key</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>.json<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-json z-ts">JSON</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-json z-ts">stringify</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">data</span> <span class="z-keyword z-operator z-logical z-ts">??</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">keys</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">push</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">key</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span><span class="z-source z-ts"><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Exported keys:<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">keys</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>คำถามคือ บรรทัดสุดท้ายที่แสดงค่าของ <code>keys</code> ออกมา จะแสดงค่าอะไรออกมา คำตอบคือ มันจะแสดงค่าว่า <code>[]</code> ก็คือไม่มีค่่าอะไรเลย ซึ่งหมายความว่ามัน <code>export</code> เสร็จหลังจากที่เราแสดงค่าออกมาแล้ว</p> <p>แล้วถ้าเราใส่ Async/Await ลงไปใน callback function ดูล่ะ จะเป็นยังไง</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">index</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">export</span></span><span class="z-meta z-brace z-round z-ts">(</span> </span><span class="z-source z-ts"> <span class="z-meta z-arrow z-ts"><span class="z-storage z-modifier z-async z-ts">async</span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">key</span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">data</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">fs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">writeFile</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">path</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">join</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">searchIndexPath</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">key</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>.json<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-json z-ts">JSON</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-json z-ts">stringify</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">data</span> <span class="z-keyword z-operator z-logical z-ts">??</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">keys</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">push</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">key</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span><span class="z-source z-ts"><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>แบบนี้มีผลเหมือนเดิม ก็คือ ถึงแม้ว่าแต่ใน Callback จะเป็น Async แล้ว แต่ระหว่างการทำงานของ Callback นั้น มันจะไม่รอให้เสร็จก่อน แล้วค่อยทำต่อ แต่มันจะทำงานต่อไปเลย แล้วค่อยทำ Callback ต่อไป ซึ่งเราจะเห็นว่า <code>keys</code> จะยังเป็น <code>[]</code> อยู่เหมือนเดิม</p> <h2 id="withiikaaraekpayhaakaarwn-loop-kh-ng-callback">วิธีการแก้ปัญหาการวน Loop ของ Callback<a class="zola-anchor" href="#withiikaaraekpayhaakaarwn-loop-kh-ng-callback" aria-label="Anchor link for: withiikaaraekpayhaakaarwn-loop-kh-ng-callback" style="visibility: hidden;"></a> </h2> <p>วิธีนี้เราควรจะรู้จำนวนที่แน่นอนว่า Callback นั้นจะทำงานกี่ครั้ง ซึ่งในกรณีนี้ผมจะสังเกตุพฤติกรรมของ <code>index.export</code> ว่ามันจะเรียก Callback กี่ครั้ง แล้วเราจะใช้ Promise ในการจัดการ</p> <p>ซึ่งแนวคิดก็คือ เราจะสร้าง function ขึ้นมา 3 function ซึ่งทำหน้าที่ควบคุมการทำงานของ Callback และคอยตรวจสอบ ว่าเจ้า Callback จะทำเสร็จเมื่อไหร่</p> <ol> <li>function แรก ก็คือเราจะกำหนดก่อนว่า callback นั้นจะทำงานกี่ครั้ง</li> <li>function ที่สอง เราจะสร้างเป็น High-Order Function ที่จะรับ callback แล้วคอยเรียก callback นั้น และเมื่อ Callback นั้นทำงานเสร็จให้ลบ Counter ที่มาจาก Function แรกลง</li> <li>เขียน Promise ที่จะรอให้ Counter ที่มาจาก Function แรก ถูกลบหมด แล้วค่อย resolve</li> </ol> <p>จากขั้นตอนพวกนี้ เพื่อให้เห็นภาพมากขึ้น ผมจะเริ่มเขียนโค๊ดให้ดู</p> <h3 id="function-thii-1-sraang-object-kh-ng-callbackwaiter">Function ที่ 1: สร้าง Object ของ CallbackWaiter<a class="zola-anchor" href="#function-thii-1-sraang-object-kh-ng-callbackwaiter" aria-label="Anchor link for: function-thii-1-sraang-object-kh-ng-callbackwaiter" style="visibility: hidden;"></a> </h3> <p>สำหรับกำหนดจำนวนครั้งที่ Callback จะทำงาน</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">totalIndexFiles</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-constant z-numeric z-decimal z-ts">15</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ตรงนี้เรารู้จำนวนที่แน่นอนว่ามันจะทำงานกี่ครั้ง</span></span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">callbackWaiter</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">CallbackWaiter</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">totalIndexFiles</span><span class="z-meta z-brace z-round z-ts">)</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>จะเห็นได้ว่าเราจะสร้าง Object ขึ้นมาเพื่อกำหนดว่า Callback จะทำงานกี่ครั้ง โดยกำหนดชื่อ Class ว่า <code>CallbackWaiter</code></p> <h3 id="function-thii-2-sraang-high-order-function-samhrab-callback">Function ที่ 2: สร้าง High-Order Function สำหรับ Callback<a class="zola-anchor" href="#function-thii-2-sraang-high-order-function-samhrab-callback" aria-label="Anchor link for: function-thii-2-sraang-high-order-function-samhrab-callback" style="visibility: hidden;"></a> </h3> <p>จากตรงนี้เราจะเห็นว่า เจ้า <code>index.export</code> ไม่ได้จัดการให้เลยว่าเราจะรันยังไง รันไปกี่รอบแล้ว แล้วจะเสร็จเมื่อไหร่ แสดงว่าเราต้องหากลไกภายนอกมาควบคุมการทำงานของมันแทน โดยใช้ Class ที่เราสร้างขึ้นมา</p> <p>โดย method ที่ว่า <code>execute</code> จะรับ callback แล้วคอยเรียก callback นั้น และเมื่อ Callback นั้นทำงานเสร็จให้ลบ Counter ที่มาจาก Function แรกลง เพื่อคอยตรวจสอบว่าเสร็จหรือยัง</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">index</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">export</span></span><span class="z-meta z-brace z-round z-ts">(</span> </span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">key</span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">data</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">callbackWaiter</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">execute</span></span><span class="z-meta z-brace z-round z-ts">(</span> </span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">fs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">writeFileSync</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">path</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">join</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">searchIndexPath</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">key</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>.json<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-json z-ts">JSON</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-json z-ts">stringify</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">data</span> <span class="z-keyword z-operator z-logical z-ts">??</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h3 id="function-thii-3-sraang-promise-samhrabr-aih-callback-thamngaanesrcch">Function ที่ 3: สร้าง Promise สำหรับรอให้ Callback ทำงานเสร็จ<a class="zola-anchor" href="#function-thii-3-sraang-promise-samhrabr-aih-callback-thamngaanesrcch" aria-label="Anchor link for: function-thii-3-sraang-promise-samhrabr-aih-callback-thamngaanesrcch" style="visibility: hidden;"></a> </h3> <p>จากตรงนี้เราจะเห็นว่าเราจะสร้าง Promise ขึ้นมาเพื่อรอให้ Counter ที่มาจาก Function แรก ถูกลบหมด เมื่อทำงานเสร็จแล้วเราจึงปล่อยให้ทำงานอื่นต่อไป</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">callbackWaiter</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">wait</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>จากตรงนี้เราจะเห็นว่าเราจะรอให้ Callback ทำงานเสร็จก่อน แล้วค่อยทำงานต่อไป</p> <h2 id="srupphaaphrwm">สรุปภาพรวม<a class="zola-anchor" href="#srupphaaphrwm" aria-label="Anchor link for: srupphaaphrwm" style="visibility: hidden;"></a> </h2> <p>เพื่อให้เข้าใจง่ายขึ้น ผมจะเขียนโค๊ดทั้งหมดให้ดู</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">totalIndexFiles</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-constant z-numeric z-decimal z-ts">15</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ตรงนี้เรารู้จำนวนที่แน่นอนว่ามันจะทำงานกี่ครั้ง</span></span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">callbackWaiter</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">CallbackWaiter</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">totalIndexFiles</span><span class="z-meta z-brace z-round z-ts">)</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">index</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">export</span></span><span class="z-meta z-brace z-round z-ts">(</span> </span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">key</span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">data</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">callbackWaiter</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">execute</span></span><span class="z-meta z-brace z-round z-ts">(</span> </span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">fs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">writeFileSync</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">path</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">join</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">searchIndexPath</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">key</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>.json<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-json z-ts">JSON</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-json z-ts">stringify</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">data</span> <span class="z-keyword z-operator z-logical z-ts">??</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">callbackWaiter</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">wait</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>จากตรงนี้เราจะเห็นว่าเราจะรอให้ Callback ทำงานเสร็จก่อน แล้วค่อยทำงานต่อไป และมั่นใจว่าเราจะทำงานตามลำดับที่เราคิด</p> <p>และเพื่อให้เข้าใจมากขึ้น ผมจะเขียน Class ที่เราสร้างขึ้นมาให้ดู</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">CallbackWaiter</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-storage z-modifier z-ts">private</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">numberOfCallbackCalled</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Function ที่ 1: สร้าง Object ของ CallbackWaiter</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-storage z-type z-ts">constructor</span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">totalCallback</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">numberOfCallbackCalled</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-variable z-other z-readwrite z-ts">totalCallback</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Function ที่ 2: สร้าง High-Order Function สำหรับ Callback </span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> และเมื่อ Callback นั้นทำงานเสร็จให้ลบ Counter ที่มาจาก Function แรกลง</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-meta z-method z-declaration z-ts"><span class="z-storage z-modifier z-ts">public</span> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">execute</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-entity z-name z-function z-ts">fn</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span></span> <span class="z-meta z-type z-function z-return z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-support z-type z-primitive z-ts">any</span></span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">fn</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">numberOfCallbackCalled</span><span class="z-keyword z-operator z-decrement z-ts">--</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Function ที่ 3: สร้าง Promise สำหรับรอให้ Callback ทำงานเสร็จ</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ซึ่งจะคอยเข้าไปตรวจสอบค่าของ Counter ที่มาจาก Function แรก ว่าถึง 0 หรือยัง</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> โดยจะเข้าไปตรวจสอบทุกๆ 100 ms</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ถ้าเสร็จแล้ว ค่อย resolve เป็นอันเสร็จ</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-meta z-method z-declaration z-ts"><span class="z-storage z-modifier z-ts">public</span> <span class="z-storage z-modifier z-async z-ts">async</span> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">wait</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">delay</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-constant z-numeric z-decimal z-ts">100</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Promise</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">void</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Promise</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">resolve</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">interval</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-function z-ts">setInterval</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">numberOfCallbackCalled</span> <span class="z-keyword z-operator z-relational z-ts">&lt;=</span> <span class="z-constant z-numeric z-decimal z-ts">0</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-function z-ts">clearInterval</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">interval</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">resolve</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">delay</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <p>ใครอยากดูโค๊ดทั้งหมด สามารถดูได้ที่ เพื่อให้เห็นภาพรวมตัวอย่างการใช้งานลองดูที่ Github ผมได้เลยนะ <a rel="nofollow noreferrer" href="https://github.com/mildronize/blog-v8/blob/fcac407eb275da4e448834b334e5c8c94f71db66/snippets/src/libs/search/search-index-file.ts#L14-L36">mildronize/blog-v8</a></p> <h2 id="thingthaay">ทิ้งท้าย<a class="zola-anchor" href="#thingthaay" aria-label="Anchor link for: thingthaay" style="visibility: hidden;"></a> </h2> <p>เป็นยังไงกันบ้าง ถ้าเราเข้าใจหลักการของ JavaScript Event Loop ก็จะทำให้เราเข้าใจการหยุดรอการทำงานของ JavaScript รวมถึงการเขียน Promise ครอบ Callback เพื่อให้เราทำงานตามลำดับที่เราคิด แต่ถ้าเราต้องทำงานกับ Callback ที่ไม่รู้ว่าจะทำงานกี่ครั้ง จะทำได้มั้ยน้าาา 🤔 เอาเป็นว่าถ้าใครนึกออกว่าต้องเขียนยังไง ลองพิมพ์คอมมเมนต์มาดูนะครับ</p> <p>ถ้าใครชอบอย่าลืมกด Like หรือ Share ให้เพื่อนๆ ด้วยนะครับ แล้วเจอกันใหม่ในบทความต่อไปครับ</p> 2024-12-02T00:00:00+00:00 2024-12-02T00:00:00+00:00 https://thadaw.com/posts/get-to-know-rke2-rancher-an-easier-way-to-manage-kubernetes-cluster/ <p>เวลาที่เราพูดถึง <strong>Kubernetes</strong> มันจะมีสองมุมเสมอครับ ด้านหนึ่งคือฝั่ง <strong>Admin</strong> ที่ต้องคอย Setup และดูแล Cluster ตั้งแต่การติดตั้ง, การจัดการโหนด, ไปจนถึงการอัปเดตระบบ ส่วนอีกด้านคือฝั่ง <strong>Dev</strong> ที่ใช้ <code>kubectl</code> หรือเครื่องมือ CI/CD เพื่อ deploy แอปพลิเคชันโดยไม่ต้องสนใจเบื้องหลังของคลัสเตอร์ สำหรับบทความนี้ ผมจะพาเรามาโฟกัสที่ฝั่ง Admin โดยเฉพาะ และแนะนำเครื่องมือที่ช่วยให้การสร้างและจัดการ Kubernetes Cluster ง่ายขึ้นอย่าง <strong>Rancher</strong></p> <p>Rancher ถูกออกแบบมาเพื่อลดความยุ่งยากและซับซ้อนของการ Setup Cluster ทำให้ Admin สามารถสร้างและจัดการ Kubernetes ได้โดยไม่ต้องปวดหัวกับรายละเอียดที่ซับซ้อน ไม่ว่าคุณจะเป็นมือใหม่หรือผู้มีประสบการณ์ Rancher จะช่วยให้การทำงานของเราคล่องตัวขึ้น มารู้จัก Rancher ไปด้วยกัน แล้วคุณจะเห็นว่าการดูแล Kubernetes Cluster สามารถเป็นเรื่องง่ายได้จริงๆ</p> <p><img src="https://thadaw.com/posts/get-to-know-rke2-rancher-an-easier-way-to-manage-kubernetes-cluster/rancher.webp" alt="rancher icon" /></p> <h1 id="kubernetes-ekhaamaaaekpayhaa-aair"><strong>Kubernetes เข้ามาแก้ปัญหาอะไร</strong><a class="zola-anchor" href="#kubernetes-ekhaamaaaekpayhaa-aair" aria-label="Anchor link for: kubernetes-ekhaamaaaekpayhaa-aair" style="visibility: hidden;"></a> </h1> <p>Kubernetes หรือที่หลายคนเรียกสั้นๆ ว่า “K8s” เป็นแพลตฟอร์มจัดการ Container ที่ช่วยให้เราสามารถปรับใช้ (deploy), ขยายขนาด (scale), และจัดการแอปพลิเคชันที่รันอยู่ใน Container ได้อย่างอัตโนมัติและมีประสิทธิภาพ เหมือนเป็น “ผู้จัดการทีม” ที่คอยดูแลให้ทุกอย่างในระบบทำงานได้ราบรื่น Kubernetes เหมาะสำหรับคนที่ต้องการบริหารระบบขนาดใหญ่หรือแอปฯ แบบ microservices ที่ต้องการความยืดหยุ่นและเสถียรภาพครับ</p> <p>ผมอยากพูดถึงปัญหาที่ Kubernetes ถูกออกแบบมาเพื่อแก้ไข และทำให้การจัดการแอปพลิเคชันและระบบ IT ของเราง่ายขึ้น มีประสิทธิภาพมากขึ้น และตอบสนองความต้องการในยุคปัจจุบัน</p> <p><strong>1. ความพร้อมใช้งานตลอดเวลา (Availability)</strong></p> <p>ในยุคนี้ ทุกคนคาดหวังว่าแอปฯ จะต้องพร้อมใช้งานตลอด 24 ชั่วโมง ไม่มีคำว่า “ดาวน์ไทม์” Kubernetes จัดการเรื่องนี้โดยการวางแผนการรันคอนเทนเนอร์ในหลายๆ โหนด และใช้แนวคิด “desired state” เทียบกับ “actual state” ถ้ามีการล่มหรือขัดข้อง ระบบจะมองว่ามันคือ “ความต่าง” ที่ต้องแก้ไข และจะจัดการปรับสถานะให้กลับมาเป็นเหมือนที่ต้องการ</p> <p><strong>2. การพัฒนาและส่งมอบที่รวดเร็ว (CI/CD)</strong></p> <p>จากเดิม การพัฒนาแอปฯ มักเป็นแบบ monolithic ที่ใช้เวลาหลายเดือนในการปล่อยเวอร์ชันใหม่ๆ Kubernetes ช่วยทำให้กระบวนการ DevOps เป็นจริงได้ โดยใช้ไฟล์คอนฟิกและ desired state ในการตั้งค่าและรันงาน ซึ่งช่วยให้ทีมพัฒนาสามารถทดสอบและส่งมอบแอปฯ ได้อย่างต่อเนื่อง ทำให้ “พลาดเร็ว แก้เร็ว” ได้จริง</p> <p><strong>3. ความคุ้มค่าและประสิทธิภาพ (Efficiency)</strong></p> <p>ในอดีต การเตรียมระบบ IT มักมีค่าใช้จ่ายสูง เช่น ต้องมีเซิร์ฟเวอร์สำรองหลายตัวเพื่อรองรับการทำงาน Kubernetes ทำให้เราสร้างสภาพแวดล้อมใหม่ๆ ได้ง่าย เพียงแค่สร้าง namespace ทดสอบงาน และลบเมื่อเสร็จงาน ช่วยลดการใช้ทรัพยากรที่ไม่จำเป็น</p> <p><strong>4. การปรับขนาดอัตโนมัติ (Automate Scaling)</strong></p> <p>การขยายระบบในอดีตมักใช้เวลานาน ตั้งแต่เพิ่มเซิร์ฟเวอร์ ติดตั้งแอปฯ และตั้งค่าต่างๆ Kubernetes ทำให้การเพิ่มหรือลดขนาดระบบง่ายขึ้น เช่น หากเราต้องการเพิ่ม pod จาก 2 เป็น 3 ก็แค่เปลี่ยนจำนวน replicas แล้วระบบจะจัดการเพิ่ม pod ให้เอง และด้วย Horizontal Pod Autoscaler (HPA) Kubernetes สามารถเพิ่มหรือลด pod ตามเมตริก เช่น CPU, memory หรือ response time ของแอปฯ ได้แบบอัตโนมัติ นอกจากนี้ยังมี Vertical Pod Autoscaler (VPA) และ Node Scaling ที่ช่วยปรับทรัพยากรของ pod และโหนดในคลัสเตอร์ให้เหมาะสมโดยอัตโนมัติ เช่น ช่วงกลางวันระบบอาจใช้ 10 โหนด แต่ตอนกลางคืนอาจเหลือแค่ 1 โหนด เพื่อประหยัดค่าใช้จ่าย</p> <p>ทั้งหมดนี้ทำให้ Kubernetes ไม่เพียงช่วยให้เราจัดการระบบได้ง่ายขึ้น แต่ยังช่วยลดต้นทุนและเพิ่มความยืดหยุ่นให้กับระบบของเราอีกด้วยครับ</p> <h1 id="rancher-khuue-aair"><strong>Rancher คืออะไร?</strong><a class="zola-anchor" href="#rancher-khuue-aair" aria-label="Anchor link for: rancher-khuue-aair" style="visibility: hidden;"></a> </h1> <p>ผมอยากเล่าให้ฟังว่า <strong>Rancher</strong> คืออะไร และมันเชื่อมโยงกับ <strong>Kubernetes</strong> ยังไง</p> <p>Rancher คือแพลตฟอร์มบริหารจัดการ Kubernetes ที่ช่วยให้เราสามารถสร้างและจัดการคลัสเตอร์ Kubernetes ได้ทุกที่ ไม่ว่าจะเป็นคลาวด์ เช่น GKE (Google Kubernetes Engine), AKS (Azure Kubernetes Service), หรือ EKS (Amazon Elastic Kubernetes Service) หรือแม้แต่บนเซิร์ฟเวอร์ของเราเอง Rancher สามารถช่วยเราติดตั้ง Kubernetes ลงบนโหนด หรือแม้กระทั่งนำเข้าคลัสเตอร์ Kubernetes ที่มีอยู่แล้วเข้ามาจัดการในระบบ Rancher</p> <p>จุดเด่นของ Rancher คือการเพิ่มคุณค่าบน Kubernetes ที่มีอยู่แล้ว ตัวอย่างเช่น:</p> <ul> <li><strong>การรวมระบบยืนยันตัวตนและการควบคุมสิทธิ์ (RBAC)</strong>: Rancher ให้เราจัดการสิทธิ์การเข้าถึงคลัสเตอร์ทั้งหมดจากศูนย์กลาง เช่น ใช้ Active Directory สำหรับล็อกอิน หรือกำหนดนโยบายความปลอดภัยในทุกคลัสเตอร์ได้ในที่เดียว</li> <li><strong>การมอนิเตอร์และการแจ้งเตือน</strong>: Rancher ช่วยเราติดตามสุขภาพของคลัสเตอร์และทรัพยากรต่างๆ รวมถึงส่ง log ไปยังระบบภายนอกได้</li> <li><strong>การผสาน Helm และ DevOps Tools</strong>: Rancher มี Application Catalog ที่เชื่อมต่อกับ Helm และยังสามารถทำงานร่วมกับระบบ CI/CD ภายนอก หรือใช้ Fleet ของ Rancher เองในการ deploy และอัปเดต workloads แบบอัตโนมัติ</li> </ul> <p>Rancher เป็นเครื่องมือที่ช่วยให้ DevOps และ IT ทำงานได้ง่ายขึ้น ตัวอย่างเช่น:</p> <ul> <li>สำหรับ DevOps: Rancher มีอินเทอร์เฟซที่ใช้งานง่าย ไม่ต้องมีความรู้ลึกเกี่ยวกับ Kubernetes ก็สามารถบริหารจัดการ workloads ได้ และยังมีเครื่องมือเสริมอย่าง Rancher Catalog ที่รวม DevOps tools ไว้ให้พร้อมใช้งาน</li> <li>สำหรับ IT: Rancher ช่วยให้แอดมินดูสถานะและกำลังการทำงานของคลัสเตอร์ทั้งหมดได้จากหน้าจอเดียว และตั้งค่าความปลอดภัยหรือ enforce นโยบายต่างๆ ได้ทั่วทั้งองค์กร</li> </ul> <p>พูดง่ายๆ คือ Rancher เป็นตัวช่วยสำคัญที่ทำให้ Kubernetes พร้อมใช้งานในระดับโปรดักชัน และทำให้ทีม DevOps ของเราทำงานได้คล่องตัวขึ้น โดยที่ยังตอบโจทย์ข้อกำหนดของ IT ได้ครบถ้วนครับ</p> <h1 id="aenwkhidhlakkh-ng-rancher"><strong>แนวคิดหลักของ Rancher</strong><a class="zola-anchor" href="#aenwkhidhlakkh-ng-rancher" aria-label="Anchor link for: aenwkhidhlakkh-ng-rancher" style="visibility: hidden;"></a> </h1> <p>ผมอยากจะเล่าให้ฟังเกี่ยวกับแนวคิดหลักของ Rancher ซึ่งเป็นซอฟต์แวร์ที่ช่วยบริหารจัดการ Kubernetes ได้แบบมีประสิทธิภาพและยืดหยุ่นมาก แนวคิดที่เป็นหัวใจสำคัญของ Rancher มีอยู่หลายอย่างที่น่าสนใจครับ</p> <h2 id="epidkwaangdwy-open-source"><strong>เปิดกว้างด้วย Open Source</strong><a class="zola-anchor" href="#epidkwaangdwy-open-source" aria-label="Anchor link for: epidkwaangdwy-open-source" style="visibility: hidden;"></a> </h2> <p>Rancher ถูกสร้างขึ้นบนพื้นฐานของโอเพ่นซอร์ส ทุกส่วนของโค้ดและบริการที่เกี่ยวข้องล้วนเปิดให้เข้าถึงได้ฟรี ทำให้เกิดชุมชนขนาดใหญ่ที่มีทั้งผู้ใช้งานและผู้พัฒนาช่วยกันปรับปรุง แบ่งปันไอเดีย และสร้างเอกสารเพื่อช่วยเหลือกัน</p> <h2 id="aimmiikaarphuukmad-no-lock-ins"><strong>ไม่มีการผูกมัด (No Lock-ins)</strong><a class="zola-anchor" href="#aimmiikaarphuukmad-no-lock-ins" aria-label="Anchor link for: aimmiikaarphuukmad-no-lock-ins" style="visibility: hidden;"></a> </h2> <p>Rancher ออกแบบมาเพื่อไม่ให้เราต้องติดอยู่กับเทคโนโลยีใดเทคโนโลยีหนึ่ง หรือแม้แต่ตัว Rancher เอง เช่น เราสามารถถอด Rancher ออกจากระบบได้โดยไม่กระทบกับคลัสเตอร์ที่ใช้งานอยู่ เพราะ Rancher เปิดทางให้เราจัดการคลัสเตอร์ได้โดยตรง</p> <h2 id="thuk-yaangkhuue-kubernetes-object"><strong>ทุกอย่างคือ Kubernetes Object</strong><a class="zola-anchor" href="#thuk-yaangkhuue-kubernetes-object" aria-label="Anchor link for: thuk-yaangkhuue-kubernetes-object" style="visibility: hidden;"></a> </h2> <p>ตั้งแต่ Rancher เวอร์ชัน 2.0 เป็นต้นมา Rancher เปลี่ยนมาเก็บข้อมูลทุกอย่างในรูปแบบ Kubernetes Object แทนฐานข้อมูล MySQL เดิม ซึ่งช่วยเพิ่มความสามารถในการขยายระบบ และทำให้เราสามารถเข้าถึงข้อมูลผ่าน API ของ Kubernetes ได้เลย</p> <h2 id="stateless-aelayuuedhyun"><strong>Stateless และยืดหยุ่น</strong><a class="zola-anchor" href="#stateless-aelayuuedhyun" aria-label="Anchor link for: stateless-aelayuuedhyun" style="visibility: hidden;"></a> </h2> <p>เนื่องจาก Rancher ทุกส่วนเป็น Stateless หมายความว่า ถ้า Pod ของ Rancher ล่มหรือถูกทำลาย Kubernetes ก็สามารถสร้าง Pod ใหม่ขึ้นมาแทนได้โดยไม่กระทบกับการทำงาน</p> <h2 id="controller-model"><strong>Controller Model</strong><a class="zola-anchor" href="#controller-model" aria-label="Anchor link for: controller-model" style="visibility: hidden;"></a> </h2> <p>ทุกบริการของ Rancher ถูกออกแบบให้ทำงานบนแนวคิดของ Kubernetes Controller ซึ่งคอยตรวจสอบสถานะของระบบและปรับให้ตรงกับสถานะที่เราต้องการเสมอ นี่ช่วยให้ Rancher สามารถทำงานต่อเนื่องได้แม้จะเกิดความล้มเหลวในบางส่วน</p> <p>แนวคิดเหล่านี้ทำให้ Rancher เป็นเครื่องมือที่ตอบโจทย์สำหรับการจัดการ Kubernetes ของเราได้อย่างคล่องตัวและมั่นใจครับ</p> <h1 id="rke-khuue-aair"><strong>RKE คืออะไร</strong><a class="zola-anchor" href="#rke-khuue-aair" aria-label="Anchor link for: rke-khuue-aair" style="visibility: hidden;"></a> </h1> <p>การสร้าง Kubernetes Cluster แบบดั้งเดิมนั้นถือเป็นงานที่ซับซ้อนและใช้เวลามาก เรียกกันว่า <strong>“K8s the hard way”</strong> เพราะเราต้องทำหลายขั้นตอน เช่น การสร้างใบรับรอง (Certificates), การติดตั้งและตั้งค่า etcd, การเชื่อมต่อบริการต่างๆ อย่าง kube-apiserver, kube-controller-manager และ kube-scheduler รวมถึงการตั้งค่า worker nodes เพื่อเข้าร่วมคลัสเตอร์ กระบวนการนี้ซับซ้อนและเปลี่ยนแปลงได้ตามการพัฒนา Kubernetes จนผู้ใช้งานต้องเขียนสคริปต์หรือ Ansible Playbooks เพื่อช่วยจัดการ ซึ่งยังต้องอัปเดตอยู่เรื่อยๆ ตามการเปลี่ยนแปลงของ Kubernetes</p> <p><strong>RKE (Rancher Kubernetes Engine)</strong> เกิดขึ้นมาเพื่อลดความยุ่งยากเหล่านี้ Rancher ต้องการให้การสร้าง Kubernetes Cluster เป็นเรื่องง่ายทั้งสำหรับผู้ใช้งานทั่วไปและ Rancher Server เอง โดย RKE คือเครื่องมือสำหรับการจัดการและสร้างคลัสเตอร์ Kubernetes ที่ได้รับการรับรองจาก CNCF (Cloud Native Computing Foundation)</p> <h1 id="rke-thamngaan-yaangair"><strong>RKE ทำงานอย่างไร?</strong><a class="zola-anchor" href="#rke-thamngaan-yaangair" aria-label="Anchor link for: rke-thamngaan-yaangair" style="visibility: hidden;"></a> </h1> <p>RKE ใช้หลักการสำคัญที่ทุกอย่างในคลัสเตอร์ Kubernetes จะถูกรันใน Docker Containers แทนการติดตั้งไบนารีลงบนระบบปฏิบัติการโดยตรง ซึ่งหมายความว่า RKE ไม่สนใจว่าระบบปฏิบัติการเป็นอะไร ตราบใดที่สามารถรัน Docker ได้</p> <p>กระบวนการเริ่มต้นใช้งาน RKE คือการสร้างไฟล์ <code>cluster.yml</code> เพื่อกำหนดค่าคลัสเตอร์ เช่น จำนวนโหนดและการตั้งค่าของแต่ละส่วน จากนั้น RKE จะใช้ไฟล์นี้เพื่อรันคอนเทนเนอร์ที่จำเป็นสำหรับคลัสเตอร์ เช่น etcd, kube-apiserver, kube-controller-manager, และ kube-scheduler ทั้งหมดนี้ช่วยลดขั้นตอนที่ซับซ้อนและทำให้การสร้างคลัสเตอร์ง่ายขึ้น</p> <p><strong>RKE เหมาะกับใคร?</strong> RKE เหมาะสำหรับผู้ที่ต้องการสร้าง Kubernetes Cluster ได้อย่างรวดเร็วและยืดหยุ่น โดยไม่ต้องจัดการกับขั้นตอนที่ซับซ้อนของการติดตั้งและตั้งค่าแบบเดิม นอกจากนี้ RKE ยังรองรับการใช้งานบนหลายแพลตฟอร์มและเหมาะสำหรับการปรับแต่งการตั้งค่าต่างๆ อย่างเต็มที่ครับ</p> <h1 id="rke2-khuue-aair"><strong>RKE2 คืออะไร?</strong><a class="zola-anchor" href="#rke2-khuue-aair" aria-label="Anchor link for: rke2-khuue-aair" style="visibility: hidden;"></a> </h1> <p>RKE2 หรือที่รู้จักในชื่อ <strong>RKE Government</strong> เป็นโซลูชัน Kubernetes รุ่นใหม่จาก Rancher ที่พัฒนาขึ้นเพื่อแก้ไขข้อจำกัดของ RKE เดิม และเพิ่มความง่ายในการตั้งค่าจากแนวคิดของ K3s โดย RKE2 ได้รับการรับรองจาก CNCF ว่าเป็น Kubernetes Distribution เต็มรูปแบบ และถูกออกแบบมาเพื่อตอบสนองความต้องการพิเศษขององค์กรรัฐบาลสหรัฐฯ โดยเฉพาะ เช่น การให้ระบบปลอดภัยสูงตั้งแต่เริ่มต้น</p> <h2 id="aairthiithamaih-rke2-phiesskwaarunedim"><strong>อะไรที่ทำให้ RKE2 พิเศษกว่ารุ่นเดิม?</strong><a class="zola-anchor" href="#aairthiithamaih-rke2-phiesskwaarunedim" aria-label="Anchor link for: aairthiithamaih-rke2-phiesskwaarunedim" style="visibility: hidden;"></a> </h2> <p><strong>1) ความปลอดภัยที่ออกแบบมาให้พร้อมใช้งาน (Secure by Default)</strong></p> <ul> <li>ใน RKE เราจำเป็นต้องตั้งค่าตาม <em>hardening guide</em> ด้วยขั้นตอนที่ยุ่งยากเพื่อให้ผ่านมาตรฐาน CIS แต่ RKE2 ออกแบบมาให้ปลอดภัยตั้งแต่เริ่มต้น โดยแทบไม่ต้องตั้งค่าเพิ่มเติม</li> <li>รองรับ FIPS (Federal Information Processing Standards) ซึ่งเป็นข้อกำหนดที่สำคัญสำหรับลูกค้ารัฐบาลสหรัฐฯ</li> </ul> <p><strong>2) รองรับระบบ ARM64 และการผสมผสานระหว่างสถาปัตยกรรม</strong></p> <ul> <li>RKE2 รองรับทั้ง ARM64 และ AMD64 เช่นเดียวกับ K3s ทำให้เราสามารถใช้ RKE2 บน Raspberry Pi หรือโหนดที่ใช้พลังงานต่ำได้</li> <li>เราสามารถสร้างคลัสเตอร์ที่มีโหนดแบบผสม (ARM64 และ AMD64) และรัน workloads อย่าง multi-arch builds ได้อย่างง่ายดาย</li> </ul> <p><strong>3) การจัดการแบบ Self-Bootstrapping</strong></p> <ul> <li>ใน RKE เดิม เราต้องนิยามคลัสเตอร์ด้วย YAML และใช้ไบนารี RKE เพื่อสร้างและจัดการ แต่ใน RKE2 โหนดใหม่สามารถเข้าร่วมคลัสเตอร์ได้ง่ายๆ โดยใช้ <em>registration endpoint</em> ที่โหนดหลัก โดยต้องการเพียง Load Balancer ภายนอกหรือ Round-robin DNS</li> </ul> <p><strong>4) รองรับ Helm ในตัว</strong></p> <ul> <li>RKE2 สร้างขึ้นเพื่อรองรับ Rancher Fleet ซึ่งช่วยให้บริการต่างๆ ในคลัสเตอร์ เช่น <em>cert-manager</em> และ <em>OPA Gatekeeper</em> ถูกติดตั้งอัตโนมัติผ่าน Helm</li> </ul> <p><strong>5) เปลี่ยนจาก Docker ไปใช้ containerd</strong></p> <ul> <li>RKE2 เลิกพึ่งพา Docker และเปลี่ยนไปใช้ containerd ทำให้ K8s components เช่น etcd และ kube-apiserver ถูกรันในรูปแบบ <em>static pods</em> ซึ่งจัดการโดย kubelet โดยตรง สิ่งนี้ช่วยให้การดูแลและแก้ไขปัญหาทำได้ง่ายขึ้น</li> </ul> <p><strong>6) โอเพ่นซอร์สเต็มรูปแบบ</strong></p> <ul> <li>เช่นเดียวกับผลิตภัณฑ์อื่นๆ ของ Rancher, RKE2 เป็นโอเพ่นซอร์สแบบ 100% ไม่มีค่าใช้จ่ายหรือข้อจำกัดในการใช้งาน</li> </ul> <h2 id="thamaim-rke2-thuengehmaaakaberaa"><strong>ทำไม RKE2 ถึงเหมาะกับเรา?</strong><a class="zola-anchor" href="#thamaim-rke2-thuengehmaaakaberaa" aria-label="Anchor link for: thamaim-rke2-thuengehmaaakaberaa" style="visibility: hidden;"></a> </h2> <p>RKE2 เป็นทางเลือกที่เหมาะสำหรับใครก็ตามที่ต้องการสร้างคลัสเตอร์ Kubernetes ที่มีความปลอดภัยสูง ใช้งานง่าย และสามารถปรับตัวกับความต้องการที่หลากหลายได้ดี ไม่ว่าจะเป็นองค์กรทั่วไปหรือรัฐบาล RKE2 ก็ช่วยให้เราบริหารจัดการ Kubernetes ได้สะดวกและมีประสิทธิภาพมากขึ้นครับ!</p> <h1 id="rancher-vs-rke-aetktaangkanyangaing"><strong>Rancher vs. RKE: แตกต่างกันยังไง?</strong><a class="zola-anchor" href="#rancher-vs-rke-aetktaangkanyangaing" aria-label="Anchor link for: rancher-vs-rke-aetktaangkanyangaing" style="visibility: hidden;"></a> </h1> <p>เวลาที่เราใช้ Rancher ในการจัดการ Kubernetes Cluster เรามักจะได้ยินคำว่า <strong>Rancher</strong>, <strong>RKE</strong>, และ <strong>Custom Cluster</strong> ซึ่งสำหรับมือใหม่อาจจะสับสนได้ง่ายว่าความแตกต่างและบทบาทของแต่ละส่วนคืออะไร ผมจะอธิบายให้เข้าใจง่ายๆ ว่าแต่ละตัวช่วยอะไรเราได้บ้าง</p> <h2 id="rancher-khuue-aair-1"><strong>Rancher คืออะไร?</strong><a class="zola-anchor" href="#rancher-khuue-aair-1" aria-label="Anchor link for: rancher-khuue-aair-1" style="visibility: hidden;"></a> </h2> <p>อย่างที่เคยอธิบายไปข้างบนแล้วว่า Rancher คือเครื่องมือที่ช่วยให้เราสร้างและบริหาร Kubernetes Cluster ได้อย่างครบวงจร เหมือนเป็น “ผู้ช่วยจัดการ Kubernetes-as-a-Service” Rancher สามารถ:</p> <ul> <li><strong>สร้าง, อัปเกรด, และบริหาร Cluster</strong> ได้ง่ายผ่าน Web UI หรือ API</li> <li><strong>ทำงานร่วมกับ Kubernetes Providers ต่างๆ</strong> เช่น GKE, AKS, EKS หรือแม้กระทั่งนำเข้า Cluster ที่มีอยู่แล้ว</li> <li><strong>รองรับ Authentication และ Access Control</strong> ช่วยให้การบริหารสิทธิ์ผู้ใช้เป็นเรื่องง่าย</li> <li><strong>มีฟีเจอร์เสริมในตัว</strong> เช่น ระบบแจ้งเตือน, Logging, และ Pipeline สำหรับ CI/CD</li> </ul> <p>Rancher ถูกออกแบบให้ติดตั้งง่ายในรูปแบบ Docker Container ซึ่งเราสามารถเริ่มต้นได้ด้วยคำสั่ง:</p> <pre class="z-code"><code><span class="z-text z-plain">docker run -d -p 80:80 -p 443:443 rancher/rancher </span></code></pre> <p>แต่สำหรับ Production ควรใช้ Rancher แบบ High Availability (HA) โดยติดตั้ง Rancher บน Kubernetes Cluster ที่สร้างด้วย RKE เพื่อให้มั่นใจในความเสถียรและป้องกันการล่ม</p> <h2 id="rke-khuue-aair-1"><strong>RKE คืออะไร?</strong><a class="zola-anchor" href="#rke-khuue-aair-1" aria-label="Anchor link for: rke-khuue-aair-1" style="visibility: hidden;"></a> </h2> <p>เพื่อให้เข้าใจง่ายขึ้นก็คือ RKE (Rancher Kubernetes Engine) เป็นเครื่องมือ CLI ของ Rancher ที่ใช้สำหรับสร้างและบริหาร Kubernetes Cluster โดย RKE จะช่วยจัดการทุกอย่างตั้งแต่การติดตั้ง Kubernetes Components เช่น etcd, kube-apiserver, และ network add-ons ตามค่าที่เรากำหนดในไฟล์ <code>cluster.yml</code></p> <p>ข้อควรเข้าใจคือ <strong>RKE ไม่ได้ติดตั้ง Rancher ให้เรา</strong> แต่ RKE ใช้สร้าง Kubernetes Cluster ที่ Rancher สามารถนำไปบริหารต่อได้</p> <p><strong>สิ่งที่ต้องการสำหรับใช้งาน RKE:</strong></p> <ul> <li>โหนดแต่ละตัวต้องมี SSH Key และ Docker ติดตั้งอยู่</li> <li>สามารถเข้าถึง Docker Socket (<code>/var/run/docker.sock</code>) ได้</li> </ul> <p>หลังจากที่ RKE สร้าง Cluster เสร็จ มันจะสร้างไฟล์ kubeconfig ซึ่งเราสามารถใช้กับ <code>kubectl</code> เพื่อบริหาร Cluster ได้</p> <h2 id="rancher-thamngaanrwmkab-rke-yangaing"><strong>Rancher ทำงานร่วมกับ RKE ยังไง?</strong><a class="zola-anchor" href="#rancher-thamngaanrwmkab-rke-yangaing" aria-label="Anchor link for: rancher-thamngaanrwmkab-rke-yangaing" style="visibility: hidden;"></a> </h2> <p>Rancher ใช้ RKE ในการสร้าง Kubernetes Cluster อยู่เบื้องหลัง โดยมี 2 วิธีหลัก:</p> <ol> <li><strong>Rancher Launched Kubernetes: ใช้โหนดจาก Infrastructure Provider</strong>Rancher สามารถเชื่อมต่อกับผู้ให้บริการ เช่น AWS หรือ Azure เพื่อสร้างโหนดผ่าน Docker Machine Driver และกำหนดบทบาทของโหนดผ่าน Node Pools</li> <li><strong>Custom Cluster: ใช้โหนดของเราเอง</strong>เราสามารถเพิ่มโหนดที่เรามีอยู่แล้วในระบบ โดยเพียงแค่ติดตั้ง Docker และรันคำสั่งที่ Rancher ให้มา โหนดเหล่านี้จะถูกเพิ่มเข้าไปใน Cluster พร้อมบทบาทที่กำหนด</li> </ol> <h2 id="srupkhwaamaetktaangrahwaang-rancher-kab-rke"><strong>สรุปความแตกต่างระหว่าง Rancher กับ RKE</strong><a class="zola-anchor" href="#srupkhwaamaetktaangrahwaang-rancher-kab-rke" aria-label="Anchor link for: srupkhwaamaetktaangrahwaang-rancher-kab-rke" style="visibility: hidden;"></a> </h2> <ul> <li><strong>Rancher</strong>: เป็นเครื่องมือบริหาร Kubernetes Cluster ผ่าน UI, API, และมีฟีเจอร์เสริมในตัว</li> <li><strong>RKE</strong>: เป็น CLI สำหรับสร้างและอัปเดต Kubernetes Cluster โดยตรง</li> </ul> <p>ทั้งสองทำงานร่วมกันได้อย่างลื่นไหล Rancher ใช้ RKE เพื่อสร้าง Cluster และเพิ่มฟีเจอร์การจัดการเพิ่มเติม เช่น การควบคุมสิทธิ์, การมอนิเตอร์, และ CI/CD ทำให้การใช้งาน Kubernetes Cluster ง่ายและครบวงจรมากขึ้นครับ</p> <h1 id="bthsngthaay"><strong>บทส่งท้าย</strong><a class="zola-anchor" href="#bthsngthaay" aria-label="Anchor link for: bthsngthaay" style="visibility: hidden;"></a> </h1> <p>ทั้งหมดที่ผมเล่ามาคือภาพรวมของ <strong>RKE2 (Rancher)</strong> และความเกี่ยวข้องกับ Kubernetes ที่ช่วยให้เราจัดการคลัสเตอร์ได้ง่ายและสบายขึ้นมาก ไม่ว่าจะเป็นการเริ่มต้นจากศูนย์ด้วย RKE2, การใช้ Rancher เพื่อรวมศูนย์การจัดการ, หรือการเข้าใจความแตกต่างระหว่าง Rancher กับ RKE ทั้งหมดนี้ช่วยให้เราประหยัดเวลา ลดความซับซ้อน และเพิ่มประสิทธิภาพในการทำงาน</p> <p>Rancher และ RKE2 ไม่ได้เป็นแค่เครื่องมือ แต่มันเป็น “ตัวช่วย” ที่ทำให้เราโฟกัสกับสิ่งสำคัญได้เต็มที่ ไม่ว่าจะเป็นการพัฒนาแอปพลิเคชัน หรือการจัดการระบบในระดับโปรดักชัน ผมหวังว่าบทความนี้จะช่วยให้เรามองเห็นว่า RKE2 และ Rancher สามารถเข้ามาเป็นส่วนหนึ่งในการทำงานของเราได้ยังไง</p> <p>สุดท้ายนี้ หากใครกำลังมองหาวิธีทำให้ Kubernetes Cluster ของตัวเองเบาขึ้น ง่ายขึ้น และมีประสิทธิภาพมากขึ้น ผมแนะนำให้ลองใช้งาน RKE2 และ Rancher แล้วเราจะเข้าใจว่าทำไมมันถึงเป็นตัวเลือกที่ดีในยุคของ Kubernetes ครับ!</p> <p>แล้วเจอกันใหม่ สวัสดีครับ</p> <h1 id="aang-ingaela-aanephimetim"><strong>อ้างอิงและอ่านเพิ่มเติม</strong><a class="zola-anchor" href="#aang-ingaela-aanephimetim" aria-label="Anchor link for: aang-ingaela-aanephimetim" style="visibility: hidden;"></a> </h1> <ul> <li><a rel="nofollow noreferrer" href="https://www.amazon.com/Rancher-Deep-Dive-enterprise-Kubernetes/dp/180324609X">Rancher Deep Dive by Matthew Mattox</a></li> <li>Rancher: <a rel="nofollow noreferrer" href="https://ranchermanager.docs.rancher.com/">https://ranchermanager.docs.rancher.com/</a></li> <li>RKE: <a rel="nofollow noreferrer" href="https://rke.docs.rancher.com/">https://rke.docs.rancher.com/</a></li> <li>RKE2: <a rel="nofollow noreferrer" href="https://docs.rke2.io/">https://docs.rke2.io/</a></li> <li>Rancher vs. RKE: What Is the Difference?: <a rel="nofollow noreferrer" href="https://www.suse.com/c/rancher_blog/rancher-vs-rke-what-is-the-difference/">https://www.suse.com/c/rancher_blog/rancher-vs-rke-what-is-the-difference/</a></li> </ul> 2024-11-29T00:00:00+00:00 2024-11-29T00:00:00+00:00 https://thadaw.com/posts/create-and-manage-virtual-machine-on-azure-with-typescript-bun/ <p>สวัสดีครับ! วันนี้เราจะมาพูดถึงการสร้าง Virtual Machine (VM) บน Microsoft Azure โดยใช้ TypeScript ซึ่งเป็น Runtime ที่เร็วมากสำหรับ JavaScript และ TypeScript และในบทความนี้ เราจะอธิบายการเขียนสคริปต์ทีละส่วน พร้อมกับสอนการติดตั้งและการใช้งาน TypeScript แบบง่าย ๆ</p> <p><strong>คุณสมบัติเด่นที่คุณจะได้จากการรันสคริปต์นี้</strong></p> <ul> <li>สร้าง Virtual Machine (VM) พร้อมกำหนดค่าต่าง ๆ เช่น ชื่อเครื่อง ขนาด และระบบปฏิบัติการ</li> <li>เปิดพอร์ต 22 สำหรับ SSH อัตโนมัติ</li> <li>ติดตั้ง Ansible บน VM พร้อมใช้งาน</li> <li>กำหนด DNS ให้ VM เพื่อการเข้าถึงที่ง่ายขึ้น</li> <li>ทุกขั้นตอนจัดการผ่าน CLI โดยใช้คำสั่ง Azure CLI ผ่าน Bun</li> </ul> <h1 id="kaartidtang-bun-aelakaaretriiymsphaaphaewdl-m"><strong>การติดตั้ง Bun และการเตรียมสภาพแวดล้อม</strong><a class="zola-anchor" href="#kaartidtang-bun-aelakaaretriiymsphaaphaewdl-m" aria-label="Anchor link for: kaartidtang-bun-aelakaaretriiymsphaaphaewdl-m" style="visibility: hidden;"></a> </h1> <h1 id="1-tidtang-bun"><strong>1. ติดตั้ง Bun</strong><a class="zola-anchor" href="#1-tidtang-bun" aria-label="Anchor link for: 1-tidtang-bun" style="visibility: hidden;"></a> </h1> <p>ก่อนอื่น คุณต้องติดตั้ง Bun ในระบบของคุณ:</p> <pre class="z-code"><code><span class="z-text z-plain">curl https://bun.sh/install | bash </span></code></pre> <p>หลังจากติดตั้งเสร็จ ให้ตรวจสอบว่า Bun ทำงานได้ด้วยคำสั่ง</p> <pre class="z-code"><code><span class="z-text z-plain">bun -v </span></code></pre> <h1 id="2-sraangoprecchktaihmdwy-bun-init"><strong>2. สร้างโปรเจกต์ใหม่ด้วย <code>bun init</code></strong><a class="zola-anchor" href="#2-sraangoprecchktaihmdwy-bun-init" aria-label="Anchor link for: 2-sraangoprecchktaihmdwy-bun-init" style="visibility: hidden;"></a> </h1> <pre class="z-code"><code><span class="z-text z-plain">bun init </span></code></pre> <p>คำสั่งนี้จะสร้างไฟล์ <code>package.json</code> พร้อมโครงสร้างโปรเจกต์พื้นฐานให้คุณ</p> <h1 id="script-aelakaarthamngaanainaetlaswn"><strong>Script และการทำงานในแต่ละส่วน</strong><a class="zola-anchor" href="#script-aelakaarthamngaanainaetlaswn" aria-label="Anchor link for: script-aelakaarthamngaanainaetlaswn" style="visibility: hidden;"></a> </h1> <h1 id="script-thanghmd"><strong>Script ทั้งหมด</strong><a class="zola-anchor" href="#script-thanghmd" aria-label="Anchor link for: script-thanghmd" style="visibility: hidden;"></a> </h1> <p>ด้านล่างเป็นโค้ดทั้งหมดที่เราจะอธิบายทีละส่วน:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> *<span class="z-storage z-type z-class z-jsdoc"><span class="z-punctuation z-definition z-block z-tag z-jsdoc">@</span>ref</span> https://learn.microsoft.com/en-us/azure/virtual-machines/linux/mac-create-ssh-keys </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">$</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>bun<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-variable z-other z-readwrite z-alias z-ts">fs</span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>fs<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Edit these variables</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">RESOURCE_GROUP</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>rg-demo-vm-thada<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">LOCATION</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>southeastasia<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">VM_NAME</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>demovmthada<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">IMAGE</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Ubuntu2204<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Get value from `az vm image list --output table`</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">SIZE</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Standard_B1s<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> 1 Core/Ram 1 GB, Get value from `az vm list-sizes --location ${LOCATION} --output table`</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">ADMIN_USER</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>azureuser<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">SSH_PUBLIC_KEY_PATH</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-process z-ts">env</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-constant z-property z-ts">HOME</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>/.ssh/demovmthada/id_rsa.pub<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">SSH_KEY_PATH</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-process z-ts">env</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-constant z-property z-ts">HOME</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>/.ssh/demovmthada/id_rsa.pem<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createAzureVirtualMachine</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">resourceGroup</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-constant z-ts">RESOURCE_GROUP</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">location</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-constant z-ts">LOCATION</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">vmName</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-constant z-ts">VM_NAME</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">image</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-constant z-ts">IMAGE</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">size</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-constant z-ts">SIZE</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">adminUser</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-constant z-ts">ADMIN_USER</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">sshPublicKeyPath</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-constant z-ts">SSH_PUBLIC_KEY_PATH</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">sshKeyPath</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-constant z-ts">SSH_KEY_PATH</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-modifier z-async z-ts">async</span> <span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">createAzureVirtualMachine</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-variable z-parameter z-ts">resourceGroup</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-variable z-parameter z-ts">location</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-variable z-parameter z-ts">vmName</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-variable z-parameter z-ts">image</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-variable z-parameter z-ts">size</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-variable z-parameter z-ts">adminUser</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-variable z-parameter z-ts">sshPublicKeyPath</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-variable z-parameter z-ts">sshKeyPath</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">resourceGroup</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">location</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">vmName</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">image</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">size</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">adminUser</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">sshPublicKeyPath</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">sshKeyPath</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Check if SSH key exists</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-operator z-logical z-ts">!</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">fs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">existsSync</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">sshKeyPath</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">error</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>SSH key not found at <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">sshKeyPath</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>. Please generate one using ssh-keygen.<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-process z-ts">exit</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-constant z-numeric z-decimal z-ts">1</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-operator z-logical z-ts">!</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">fs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">existsSync</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">sshPublicKeyPath</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">error</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>SSH public key not found at <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">sshPublicKeyPath</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>. Please generate one using ssh-keygen.<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-process z-ts">exit</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-constant z-numeric z-decimal z-ts">1</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Creating resource group <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">resourceGroup</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> in location <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">location</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>...<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-string z-template z-ts"><span class="z-entity z-name z-function z-tagged-template z-ts">$</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>az group create --name <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">resourceGroup</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --location <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">location</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Creating VM <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">vmName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> in resource group <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">resourceGroup</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>...<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-string z-template z-ts"><span class="z-entity z-name z-function z-tagged-template z-ts">$</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>az vm create --resource-group <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">resourceGroup</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --name <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">vmName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --image <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">image</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --size <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">size</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --admin-username <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">adminUser</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --ssh-key-values <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">sshPublicKeyPath</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Opening port 22 for SSH on VM <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">vmName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>...<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-string z-template z-ts"><span class="z-entity z-name z-function z-tagged-template z-ts">$</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>az vm open-port --port 22 --resource-group <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">resourceGroup</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --name <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">vmName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">vmIp</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-string z-template z-ts"><span class="z-entity z-name z-function z-tagged-template z-ts">$</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>az vm list-ip-addresses --resource-group <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">resourceGroup</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --name <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">vmName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --query &quot;[0].virtualMachine.network.publicIpAddresses[0].ipAddress&quot; -o tsv<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">stdout</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">toString</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">trim</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>VM public IP: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">vmIp</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Assign DNS name</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">FQDN</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">assignDnsName</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">dnsLabel</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-readwrite z-ts">vmName</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">resourceGroup</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-readwrite z-ts">resourceGroup</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">vmName</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-readwrite z-ts">vmName</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-string z-template z-ts"><span class="z-entity z-name z-function z-tagged-template z-ts">$</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>ssh -o StrictHostKeyChecking=no -i <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">sshKeyPath</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">adminUser</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>@<span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-constant z-ts">FQDN</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> sudo apt update<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-string z-template z-ts"><span class="z-entity z-name z-function z-tagged-template z-ts">$</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>ssh -o StrictHostKeyChecking=no -i <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">sshKeyPath</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">adminUser</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>@<span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-constant z-ts">FQDN</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> sudo apt install -y ansible<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Ansible has been installed. You can SSH into the VM using: ssh -i <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">sshKeyPath</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">adminUser</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>@<span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-constant z-ts">FQDN</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-modifier z-async z-ts">async</span> <span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">assignDnsName</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-variable z-parameter z-ts">dnsLabel</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-variable z-parameter z-ts">resourceGroup</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-variable z-parameter z-ts">vmName</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">dnsLabel</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">vmName</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">resourceGroup</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Promise</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">string</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Retrieve the public IP resource associated with the VM</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Retrieving public IP resource for VM: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">vmName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>...<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">publicIpName</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-string z-template z-ts"><span class="z-entity z-name z-function z-tagged-template z-ts">$</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>az vm list-ip-addresses --resource-group <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">resourceGroup</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --name <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">vmName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --query &quot;[0].virtualMachine.network.publicIpAddresses[0].name&quot; -o tsv<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">stdout</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">toString</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">trim</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-operator z-logical z-ts">!</span><span class="z-variable z-other z-readwrite z-ts">publicIpName</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">error</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Unable to find public IP resource for VM &#39;<span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">vmName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>&#39;.<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-process z-ts">exit</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-constant z-numeric z-decimal z-ts">1</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Check if the fqdn is already assigned</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">assignedFqdn</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-string z-template z-ts"><span class="z-entity z-name z-function z-tagged-template z-ts">$</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>az network public-ip show --resource-group <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">resourceGroup</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --name <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">publicIpName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --query &quot;dnsSettings.fqdn&quot; -o tsv<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">stdout</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">toString</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">trim</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">assignedFqdn</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Public IP already has DNS name assigned: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">assignedFqdn</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-variable z-other z-readwrite z-ts">assignedFqdn</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Check if the DNS label is already in use</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Checking availability of DNS label: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dnsLabel</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>...<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">dnsAvailability</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-string z-template z-ts"><span class="z-entity z-name z-function z-tagged-template z-ts">$</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>az network public-ip list --query &quot;[?dnsSettings.domainNameLabel==&#39;<span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dnsLabel</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>&#39;]&quot; -o tsv<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">stdout</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">toString</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">trim</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">dnsAvailability</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">error</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>DNS label &#39;<span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dnsLabel</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>&#39; is already in use. Please choose a different label.<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-process z-ts">exit</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-constant z-numeric z-decimal z-ts">1</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Update the public IP with the DNS label</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Assigning DNS label &#39;<span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dnsLabel</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>&#39; to public IP: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">publicIpName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>...<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-string z-template z-ts"><span class="z-entity z-name z-function z-tagged-template z-ts">$</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>az network public-ip update --resource-group <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">resourceGroup</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --name <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">publicIpName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --dns-name <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dnsLabel</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Display the fully qualified domain name (FQDN)</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">fqdn</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-string z-template z-ts"><span class="z-entity z-name z-function z-tagged-template z-ts">$</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>az network public-ip show --resource-group <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">resourceGroup</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --name <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">publicIpName</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> --query &quot;dnsSettings.fqdn&quot; -o tsv<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">stdout</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">toString</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">trim</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>DNS name assigned! You can now access your VM at: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">fqdn</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-variable z-other z-readwrite z-ts">fqdn</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></code></pre> <h1 id="kaarkamhndkhaaphuuenthaan"><strong>การกำหนดค่าพื้นฐาน</strong><a class="zola-anchor" href="#kaarkamhndkhaaphuuenthaan" aria-label="Anchor link for: kaarkamhndkhaaphuuenthaan" style="visibility: hidden;"></a> </h1> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">RESOURCE_GROUP</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>rg-demo-vm-thada<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">LOCATION</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>southeastasia<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">VM_NAME</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>demovmthada<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">IMAGE</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Ubuntu2204<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">SIZE</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Standard_B1s<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">ADMIN_USER</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>azureuser<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">SSH_PUBLIC_KEY_PATH</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-process z-ts">env</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-constant z-property z-ts">HOME</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>/.ssh/demovmthada/id_rsa.pub<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">SSH_KEY_PATH</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-process z-ts">env</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-constant z-property z-ts">HOME</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>/.ssh/demovmthada/id_rsa.pem<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>ในส่วนนี้ เราได้กำหนดค่าต่าง ๆ ที่จำเป็นสำหรับการสร้าง VM เช่น:</p> <ul> <li><code>RESOURCE_GROUP</code>: ชื่อ Resource Group ใน Azure</li> <li><code>LOCATION</code>: ตำแหน่งภูมิศาสตร์ของ VM</li> <li><code>VM_NAME</code>: ชื่อของ VM</li> <li><code>IMAGE</code>: ระบบปฏิบัติการของ VM</li> <li><code>SIZE</code>: ขนาดของ VM</li> </ul> <p>ฟังก์ชันนี้ช่วยกำหนด DNS ให้กับ VM ทำให้สามารถเข้าถึงได้ด้วยชื่อที่จำง่ายขึ้น เช่น <code>demovmthada.southeastasia.cloudapp.azure.com</code></p> <h1 id="withiikaaraichngaan"><strong>วิธีการใช้งาน</strong><a class="zola-anchor" href="#withiikaaraichngaan" aria-label="Anchor link for: withiikaaraichngaan" style="visibility: hidden;"></a> </h1> <ol> <li>แก้ไขค่าต่าง ๆ เช่น <code>RESOURCE_GROUP</code>, <code>LOCATION</code> และ <code>VM_NAME</code> ตามที่ต้องการ</li> <li>รันสคริปต์ด้วยคำสั่ง:</li> </ol> <pre class="z-code"><code><span class="z-text z-plain">bun run script.ts </span></code></pre> <p>หลังจากรันสำเร็จ คุณจะได้รับ IP และ DNS สำหรับการเชื่อมต่อ VM</p> <p>เย้ ได้ Azure VM มาแล้ววว ใน 1 Command</p> <p><img src="https://thadaw.com/posts/create-and-manage-virtual-machine-on-azure-with-typescript-bun/azure-vm.webp" alt="เย้ ได้ Azure VM มาแล้ววว ใน 1 Command" /></p> <p>ไหนๆๆ ลองเช็คซิ DNS ของ VM มามั้ย มาเรียบร้อย</p> <p><img src="https://thadaw.com/posts/create-and-manage-virtual-machine-on-azure-with-typescript-bun/azure-vm-dns-name.webp" alt="ไหนๆๆ ลองเช็คซิ DNS ของ VM มามั้ย มาเรียบร้อย" /></p> <p>DNS มาแว้วว</p> <p>หลังจากนั้นก็ทดสอบ Login กับ DNS ได้เลย</p> <pre class="z-code"><code><span class="z-text z-plain">ssh -i ~/.ssh/demovmthada/id_rsa.pem adminuser@demovmthada.southeastasia.cloudapp.azure.com </span></code></pre> <h1 id="srup"><strong>สรุป</strong><a class="zola-anchor" href="#srup" aria-label="Anchor link for: srup" style="visibility: hidden;"></a> </h1> <p>บทความนี้แสดงให้เห็นถึงการสร้างและจัดการ Virtual Machine บน Azure อย่างมีประสิทธิภาพโดยใช้ TypeScript และ Azure CLI คุณสามารถปรับแต่งสคริปต์ตามความต้องการ เช่น เพิ่มการติดตั้งซอฟต์แวร์เพิ่มเติม หรือเปลี่ยนค่าต่าง ๆ เพื่อให้เหมาะกับโปรเจกต์ของคุณ!</p> <p>ลองทำดู แล้วคุณจะพบว่า TypeScript (Bun) เป็นเครื่องมือที่เร็วและใช้ง่ายมากสำหรับงาน Automation! ที่สำคัญคือ Type Safe ด้วยนะเออ</p> <p>อ้อ ลง Ansible ได้แว้วว จากนั้น ก็แท็กมือต่อจากใช้ Ansible ลุยต่อได้เยยย</p> <p>จบ ล่ะ บุย</p> 2024-11-28T00:00:00+00:00 2024-11-28T00:00:00+00:00 https://thadaw.com/posts/ubuntu-copy-files-remote-to-local-root-permissions/ <p>บางทีไฟล์ในเซิร์ฟเวอร์มันติดปัญหาเรื่อง <strong>สิทธิ์ (permissions)</strong> เพราะเป็นของผู้ใช้อื่น ทำให้เราใช้คำสั่ง <strong><code>scp</code></strong> ดึงไฟล์ออกมาไม่ได้ ถ้าเจอปัญหาแบบนี้ ลองทำตามวิธีนี้เลย ง่าย ๆ แค่ 2 ขั้นตอน!</p> <hr /> <h3 id="1-etriiymaiflainechirfew-r"><strong>1. เตรียมไฟล์ในเซิร์ฟเวอร์</strong><a class="zola-anchor" href="#1-etriiymaiflainechirfew-r" aria-label="Anchor link for: 1-etriiymaiflainechirfew-r" style="visibility: hidden;"></a> </h3> <p>ก่อนอื่น ไปที่เซิร์ฟเวอร์แล้วก็อปไฟล์ที่ต้องการไปไว้ในตำแหน่งที่ผู้ใช้ปัจจุบันเข้าถึงได้ และปรับสิทธิ์ให้เหมาะสม ตัวอย่างคำสั่ง:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">ssh</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.ssh/ttss-poc/ttss-poc adminuser@ttss-dev.southeastasia.cloudapp.azure.com <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>sudo cp -r /home/ttssdev/.ssh /tmp/ssh-ttssdev &amp;&amp; sudo chown -R adminuser:adminuser /tmp/ssh-ttssdev<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span></code></pre> <p><strong>คำอธิบายคำสั่งนี้แบบเข้าใจง่าย:</strong></p> <ul> <li><strong><code>ssh</code></strong>: ใช้เชื่อมต่อไปที่เซิร์ฟเวอร์</li> <li><strong><code>i</code></strong>: ระบุไฟล์คีย์ส่วนตัว (private key) เพื่อยืนยันตัวตน</li> <li><strong><code>sudo cp -r</code></strong>: ก็อปไฟล์ที่ต้องการ (ในตัวอย่างคือ <strong><code>.ssh</code></strong>) ไปไว้ที่ตำแหน่งชั่วคราว <strong><code>/tmp/ssh-ttssdev</code></strong></li> <li><strong><code>sudo chown</code></strong>: เปลี่ยนเจ้าของไฟล์ให้เป็น <strong><code>adminuser</code></strong> เพื่อให้เราเข้าถึงได้</li> </ul> <hr /> <h3 id="2-duengaiflklabmaathiiekhruue-ng"><strong>2. ดึงไฟล์กลับมาที่เครื่อง</strong><a class="zola-anchor" href="#2-duengaiflklabmaathiiekhruue-ng" aria-label="Anchor link for: 2-duengaiflklabmaathiiekhruue-ng" style="visibility: hidden;"></a> </h3> <p>เมื่อไฟล์พร้อมแล้ว ใช้คำสั่ง <strong><code>scp</code></strong> ดึงกลับมาที่เครื่องเราได้เลย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">scp</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.ssh/ttss-poc/ttss-poc<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>r</span> adminuser@ttss-dev.southeastasia.cloudapp.azure.com:/tmp/ssh-ttssdev <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/ssh-ttssdev</span> </span></code></pre> <p><strong>คำอธิบายคำสั่ง:</strong></p> <ul> <li><strong><code>scp</code></strong>: ใช้สำหรับโอนถ่ายไฟล์แบบปลอดภัย</li> <li><strong><code>r</code></strong>: ดึงโฟลเดอร์ทั้งโฟลเดอร์ (recursive)</li> <li><strong><code>adminuser@...:/tmp/ssh-ttssdev</code></strong>: ระบุตำแหน่งไฟล์ในเซิร์ฟเวอร์</li> <li><strong><code>~/ssh-ttssdev</code></strong>: ระบุที่เก็บไฟล์ในเครื่องเรา</li> </ul> <hr /> <h2 id="thamepn-bash-script-aichchamaidngaay"><strong>ทำเป็น Bash Script ใช้ซ้ำได้ง่าย ๆ</strong><a class="zola-anchor" href="#thamepn-bash-script-aichchamaidngaay" aria-label="Anchor link for: thamepn-bash-script-aichchamaidngaay" style="visibility: hidden;"></a> </h2> <p>ถ้าไม่อยากมาพิมพ์คำสั่งยาว ๆ ทุกครั้ง ลองเขียนเป็น <strong>Bash Script</strong> แบบนี้:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell">!/bin/bash</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> ตั้งค่าตัวแปร</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">REMOTE_USER</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>adminuser<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">REMOTE_HOST</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>ttss-dev.southeastasia.cloudapp.azure.com<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">REMOTE_PATH</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>/home/ttssdev/.ssh<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">TMP_PATH</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>/tmp/ssh-ttssdev<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">LOCAL_PATH</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">HOME</span></span>/ssh-ttssdev<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">SSH_KEY</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">HOME</span></span>/.ssh/ttss-poc/ttss-poc<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> 1. ก็อปไฟล์ไปยังตำแหน่งที่เข้าถึงได้</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Preparing files on remote server...<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">ssh</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">SSH_KEY</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">REMOTE_USER</span></span>@<span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">REMOTE_HOST</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-punctuation z-separator z-continuation z-line z-shell">\ </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-arguments z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>sudo cp -r <span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">REMOTE_PATH</span></span> <span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">TMP_PATH</span></span> &amp;&amp; sudo chown -R <span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">REMOTE_USER</span></span>:<span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">REMOTE_USER</span></span> <span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">TMP_PATH</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> 2. ดึงไฟล์กลับมาที่เครื่อง</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Copying files to local machine...<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">scp</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>i</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">SSH_KEY</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>r</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">REMOTE_USER</span></span>@<span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">REMOTE_HOST</span></span>:<span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">TMP_PATH</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">LOCAL_PATH</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-echo z-shell">echo</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Files copied successfully to <span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">LOCAL_PATH</span></span>!<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span></code></pre> <p><strong>วิธีใช้งาน:</strong></p> <ol> <li> <p>สร้างไฟล์สคริปต์ เช่น <strong><code>fetch_files.sh</code></strong> แล้ววางโค้ดด้านบนลงไป</p> </li> <li> <p>ให้สิทธิ์รันไฟล์:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">chmod</span></span><span class="z-meta z-function-call z-arguments z-shell"> +x fetch_files.sh</span> </span></code></pre> </li> <li> <p>รันสคริปต์ได้เลย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">./fetch_files.sh</span></span> </span></code></pre> </li> </ol> <h2 id="srup">สรุป<a class="zola-anchor" href="#srup" aria-label="Anchor link for: srup" style="visibility: hidden;"></a> </h2> <p>การดึงไฟล์จากเซิร์ฟเวอร์ที่มีปัญหาเรื่องสิทธิ์เป็นงานที่ดูซับซ้อน แต่สามารถแก้ไขได้ง่าย ๆ ด้วยการเตรียมไฟล์ให้เข้าถึงได้บนเซิร์ฟเวอร์ และใช้คำสั่ง scp ดึงไฟล์กลับมาที่เครื่องของเรา ขั้นตอนนี้ปลอดภัยและไม่กระทบไฟล์ต้นฉบับโดยตรง นอกจากนี้ การเขียน Bash Script ยังช่วยให้กระบวนการนี้สะดวกและนำกลับมาใช้ซ้ำได้อย่างรวดเร็ว หากทำตามวิธีที่แนะนำในบทความนี้ คุณจะสามารถจัดการไฟล์ที่มีปัญหาเรื่องสิทธิ์ได้อย่างมืออาชีพและมีประสิทธิภาพ! 🚀ง</p> <p>จบปิ้งง</p> 2024-11-26T00:00:00+00:00 2024-11-26T00:00:00+00:00 https://thadaw.com/posts/mount-disk-on-azure-vm-ubuntu-easy-steps/ <p>สวัสดีครับเพื่อนๆ วันนี้จะมาแชร์วิธี Mount Disk บน VM ที่สร้างใน Azure กันครับ 🖥️ หลายคนอาจเคยเพิ่ม Disk เข้าไปใน VM แล้วงงว่า “ทำไม Disk ยังไม่มาโชว์ใน Path ที่ต้องการ?” ไม่ต้องห่วงครับ เดี๋ยวพาไล่ Step-by-Step แบบง่ายๆ ทำตามได้เลย!</p> <hr /> <h3 id="phllaphththiiaidcchaakkaar-aan-blog-nii"><strong>ผลลัพธ์ที่ได้จากการอ่าน Blog นี้</strong><a class="zola-anchor" href="#phllaphththiiaidcchaakkaar-aan-blog-nii" aria-label="Anchor link for: phllaphththiiaidcchaakkaar-aan-blog-nii" style="visibility: hidden;"></a> </h3> <p>หลังจากอ่าน Blog นี้ คุณจะสามารถ:</p> <ul> <li>ตรวจสอบ Disk ใหม่ใน VM ได้</li> <li>สร้าง Partition และ Format Disk เพื่อใช้งาน</li> <li>Mount Disk ไปยัง Path ที่ต้องการใน Linux</li> <li>ตั้งค่าให้ Disk Mount อัตโนมัติทุกครั้งที่รีบูต VM</li> </ul> <hr /> <h3 id="singthiikhwretriiymmaak-n-prerequisite"><strong>สิ่งที่ควรเตรียมมาก่อน (Prerequisite)</strong><a class="zola-anchor" href="#singthiikhwretriiymmaak-n-prerequisite" aria-label="Anchor link for: singthiikhwretriiymmaak-n-prerequisite" style="visibility: hidden;"></a> </h3> <p>ก่อนเริ่มทำตาม Blog นี้ ให้เตรียมสิ่งต่อไปนี้:</p> <ol> <li><strong>VM ที่พร้อมใช้งานใน Azure</strong> <ul> <li>ต้องมีสิทธิ์เข้าถึง VM (ผ่าน SSH หรือ Console)</li> </ul> </li> <li><strong>Disk ที่ถูกเพิ่มเข้า VM เรียบร้อย</strong> <ul> <li>สามารถเพิ่ม Disk ได้จาก Azure Portal หรือ CLI</li> </ul> </li> <li><strong>พื้นฐานคำสั่ง Linux</strong> <ul> <li>เช่น การใช้ <strong><code>lsblk</code></strong>, <strong><code>fdisk</code></strong>, <strong><code>sudo</code></strong> และการแก้ไขไฟล์ด้วย <strong><code>nano</code></strong></li> </ul> </li> </ol> <p>ถ้าพร้อมแล้ว ลุยกันเลยครับ! 🚀</p> <h3 id="1-echkh-disk-k-n"><strong>1. เช็ค Disk ก่อน</strong><a class="zola-anchor" href="#1-echkh-disk-k-n" aria-label="Anchor link for: 1-echkh-disk-k-n" style="visibility: hidden;"></a> </h3> <p>เริ่มจากเช็คว่า Disk ใหม่ของเราถูก detect แล้วหรือยัง และมี partitions หรือยัง ด้วยคำสั่งนี้:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">lsblk</span></span> </span></code></pre> <p>จาก output เราเห็นว่า Disk <strong><code>sdc</code></strong> ยังไม่มี partitions (TYPE ยังเป็น <strong><code>disk</code></strong> เปล่าๆ) ดังนั้นเราต้องมาจัดการ partition และ format ก่อนครับ</p> <h3 id="2-sraang-partition"><strong>2. สร้าง Partition</strong><a class="zola-anchor" href="#2-sraang-partition" aria-label="Anchor link for: 2-sraang-partition" style="visibility: hidden;"></a> </h3> <p>ใช้คำสั่ง <strong><code>fdisk</code></strong> เพื่อสร้าง partition ใหม่:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> fdisk /dev/sdc</span> </span><span class="z-source z-shell z-bash"> </span></code></pre> <p>ใน <strong><code>fdisk</code></strong>:</p> <ol> <li>กด <strong><code>n</code></strong> เพื่อสร้าง partition ใหม่</li> <li>กด Enter เพื่อเลือก default options</li> <li>สุดท้าย กด <strong><code>w</code></strong> เพื่อบันทึกและออก</li> </ol> <hr /> <h3 id="3-format-disk"><strong>3. Format Disk</strong><a class="zola-anchor" href="#3-format-disk" aria-label="Anchor link for: 3-format-disk" style="visibility: hidden;"></a> </h3> <p>เมื่อสร้าง partition เสร็จแล้ว (เช่น <strong><code>/dev/sdc1</code></strong>) ก็ต้อง format เป็นไฟล์ระบบ (filesystem) ก่อน mount:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mkfs.ext4 /dev/sdc1</span> </span></code></pre> <hr /> <h3 id="4-sraang-mount-point"><strong>4. สร้าง Mount Point</strong><a class="zola-anchor" href="#4-sraang-mount-point" aria-label="Anchor link for: 4-sraang-mount-point" style="visibility: hidden;"></a> </h3> <p>สร้าง directory ที่เราจะใช้ mount disk:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mkdir<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>p</span> /mnt/data</span> </span></code></pre> <hr /> <h3 id="5-mount-disk"><strong>5. Mount Disk</strong><a class="zola-anchor" href="#5-mount-disk" aria-label="Anchor link for: 5-mount-disk" style="visibility: hidden;"></a> </h3> <p>Mount partition เข้าที่ path <strong><code>/mnt/data</code></strong>:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mount /dev/sdc1 /mnt/data</span> </span></code></pre> <hr /> <h3 id="6-trwcchs-bwaa-mount-samercch"><strong>6. ตรวจสอบว่า Mount สำเร็จ</strong><a class="zola-anchor" href="#6-trwcchs-bwaa-mount-samercch" aria-label="Anchor link for: 6-trwcchs-bwaa-mount-samercch" style="visibility: hidden;"></a> </h3> <p>เช็คด้วยคำสั่งนี้:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">df</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>h</span></span> </span></code></pre> <p>ถ้าเจอ <strong><code>/mnt/data</code></strong> พร้อมพื้นที่ disk โชว์อยู่ แปลว่าสำเร็จแล้วครับ 🎉</p> <hr /> <h3 id="7-tangkhaaaih-mount-atonmatihlang-reboot"><strong>7. ตั้งค่าให้ Mount อัตโนมัติหลัง Reboot</strong><a class="zola-anchor" href="#7-tangkhaaaih-mount-atonmatihlang-reboot" aria-label="Anchor link for: 7-tangkhaaaih-mount-atonmatihlang-reboot" style="visibility: hidden;"></a> </h3> <p>ถ้าอยากให้ disk mount เองทุกครั้งหลังรีบูต ทำตามนี้:</p> <ol> <li> <p>หาค่า UUID ของ disk:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> blkid</span> </span></code></pre> <p>สมมติได้ output แบบนี้:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">/dev/sdc1:</span></span><span class="z-meta z-function-call z-arguments z-shell"> UUID=<span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>abcd-1234<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> TYPE=<span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>ext4<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span></code></pre> </li> <li> <p>แก้ไขไฟล์ <strong><code>/etc/fstab</code></strong>:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> nano /etc/fstab</span> </span></code></pre> <p>แล้วเพิ่มบรรทัดนี้เข้าไป:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-variable z-other z-readwrite z-assignment z-shell">UUID</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell">abcd-1234</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">/mnt/data</span></span><span class="z-meta z-function-call z-arguments z-shell"> ext4 defaults 0 2</span> </span></code></pre> </li> <li> <p>บันทึกไฟล์แล้วลองทดสอบด้วย:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> mount<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>a</span></span> </span></code></pre> </li> </ol> <p>ถ้าไม่มี error ก็เรียบร้อยครับ! 🎊</p> <hr /> <h3 id="phllaphththiikhaadhwang">ผลลัพธ์ที่คาดหวัง<a class="zola-anchor" href="#phllaphththiikhaadhwang" aria-label="Anchor link for: phllaphththiikhaadhwang" style="visibility: hidden;"></a> </h3> <p><img src="https://thadaw.com/posts/mount-disk-on-azure-vm-ubuntu-easy-steps/result.webp" alt="Disk Mounted" /></p> <h3 id="srup"><strong>สรุป</strong><a class="zola-anchor" href="#srup" aria-label="Anchor link for: srup" style="visibility: hidden;"></a> </h3> <p>เสร็จแล้วครับ! เพียงไม่กี่ขั้นตอน Disk ของเราก็พร้อมใช้งานใน Path <strong><code>/mnt/data</code></strong> ได้เลย ใครลองแล้วติดปัญหาตรงไหนมาคุยกันได้นะครับ 😊</p> 2024-10-09T00:00:00+00:00 2024-10-09T00:00:00+00:00 https://thadaw.com/posts/run-container-docker-on-mac-m1-arm/ <p>Docker provides a powerful tool for containerization, but running it on a Mac M1 with an ARM CPU requires a specific approach. This article introduces <a rel="nofollow noreferrer" href="https://github.com/abiosoft/colima"><strong>Colima</strong></a>, a lightweight Docker runtime that serves as an alternative to Docker Desktop, providing a seamless experience for Apple Silicon users. Here, we will guide you through the process of setting up and using Colima on your Mac M1.</p> <h2 id="introduction-to-colima">Introduction to Colima<a class="zola-anchor" href="#introduction-to-colima" aria-label="Anchor link for: introduction-to-colima" style="visibility: hidden;"></a> </h2> <p><a rel="nofollow noreferrer" href="https://github.com/abiosoft/colima"><strong>Colima</strong></a> is a fast and efficient Docker runtime designed for both Apple Silicon (M1) and Intel-based Macs. It simplifies the process of running Docker containers on Mac M1, ensuring compatibility with various architectures and offering an alternative to <a rel="nofollow noreferrer" href="https://www.docker.com/products/docker-desktop/">Docker Desktop</a>. Colima provides a reliable way to utilize Docker without the performance concerns often associated with running x86 containers on ARM-based systems.</p> <h2 id="installation-and-setup-of-colima">Installation and Setup of Colima<a class="zola-anchor" href="#installation-and-setup-of-colima" aria-label="Anchor link for: installation-and-setup-of-colima" style="visibility: hidden;"></a> </h2> <p>To begin using Colima, you first need to install it. This can be done via Homebrew with the following command:</p> <pre data-lang="sh" class="language-sh z-code"><code class="language-sh" data-lang="sh"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">brew</span></span><span class="z-meta z-function-call z-arguments z-shell"> install colima</span> </span></code></pre> <p>Once installed, you can proceed with starting Colima.</p> <h2 id="starting-colima">Starting Colima<a class="zola-anchor" href="#starting-colima" aria-label="Anchor link for: starting-colima" style="visibility: hidden;"></a> </h2> <p>To run Docker commands with Colima, you must start the service. The command below initiates Colima, specifying the architecture to use:</p> <pre data-lang="sh" class="language-sh z-code"><code class="language-sh" data-lang="sh"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">colima</span></span><span class="z-meta z-function-call z-arguments z-shell"> start<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>arch</span> x86_64</span> </span></code></pre> <p>We recommend specifying the <code>x86_64</code> architecture, as some Docker images may not yet be available for ARM64. However, if you wish to run ARM64 containers, you can use the <code>--arch aarch64</code> option, or simply omit the flag to use the default architecture.</p> <h2 id="using-docker-with-colima">Using Docker with Colima<a class="zola-anchor" href="#using-docker-with-colima" aria-label="Anchor link for: using-docker-with-colima" style="visibility: hidden;"></a> </h2> <p>After starting Colima, you can execute Docker commands in the same manner as with Docker Desktop. For example, pulling and running an image can be done as follows:</p> <pre data-lang="sh" class="language-sh z-code"><code class="language-sh" data-lang="sh"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">docker</span></span><span class="z-meta z-function-call z-arguments z-shell"> pull hello-world</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">docker</span></span><span class="z-meta z-function-call z-arguments z-shell"> run<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>rm</span> hello-world</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">docker</span></span><span class="z-meta z-function-call z-arguments z-shell"> rmi hello-world</span> </span></code></pre> <p>These commands will demonstrate the basic functionality of Docker within the Colima environment.</p> <h2 id="stopping-colima">Stopping Colima<a class="zola-anchor" href="#stopping-colima" aria-label="Anchor link for: stopping-colima" style="visibility: hidden;"></a> </h2> <p>Since running Colima consumes system resources, it is advisable to stop it when not in use. To stop Colima, run the following command:</p> <pre data-lang="sh" class="language-sh z-code"><code class="language-sh" data-lang="sh"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">colima</span></span><span class="z-meta z-function-call z-arguments z-shell"> stop</span> </span></code></pre> <p>This will release system resources and halt Docker operations.</p> <h2 id="troubleshooting-colima">Troubleshooting Colima<a class="zola-anchor" href="#troubleshooting-colima" aria-label="Anchor link for: troubleshooting-colima" style="visibility: hidden;"></a> </h2> <p>If you encounter issues while using Colima, the simplest solution is often to delete the Colima instance and restart it. This can be done with the following command:</p> <pre data-lang="sh" class="language-sh z-code"><code class="language-sh" data-lang="sh"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">colima</span></span><span class="z-meta z-function-call z-arguments z-shell"> delete</span> </span></code></pre> <p>The system will prompt you to confirm the deletion of the Colima instance and its settings. Typing <code>y</code> will proceed with the deletion.</p> <h2 id="using-dive-with-colima">Using Dive with Colima<a class="zola-anchor" href="#using-dive-with-colima" aria-label="Anchor link for: using-dive-with-colima" style="visibility: hidden;"></a> </h2> <p>If you are using <a rel="nofollow noreferrer" href="https://github.com/wagoodman/dive">Dive</a>, a tool for inspecting Docker images, you may encounter an issue with the Docker socket. To resolve this, you can create a symbolic link to the Docker socket by running:</p> <pre data-lang="sh" class="language-sh z-code"><code class="language-sh" data-lang="sh"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> ln<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>sf</span> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.colima/docker.sock /var/run/docker.sock</span> </span></code></pre> <p>Note that you will need to execute this command each time after starting Colima.</p> <h2 id="conclusion">Conclusion<a class="zola-anchor" href="#conclusion" aria-label="Anchor link for: conclusion" style="visibility: hidden;"></a> </h2> <p>Colima provides an efficient and straightforward solution for running Docker containers on Mac M1 systems. By leveraging Colima, users can enjoy the benefits of Docker without encountering the compatibility issues that sometimes arise with Apple Silicon. Whether you are building applications or managing containerized environments, Colima offers a reliable alternative to Docker Desktop.</p> <h2 id="common-issues-with-docker-on-mac-m1">Common Issues with Docker on Mac M1<a class="zola-anchor" href="#common-issues-with-docker-on-mac-m1" aria-label="Anchor link for: common-issues-with-docker-on-mac-m1" style="visibility: hidden;"></a> </h2> <p>Occasionally, when building Docker images on the Mac M1, you may encounter platform-specific issues. For example, building with <code>esbuild</code> may result in errors due to the architecture mismatch. To resolve this, you can build images targeting the <code>amd64</code> platform:</p> <pre data-lang="sh" class="language-sh z-code"><code class="language-sh" data-lang="sh"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">docker</span></span><span class="z-meta z-function-call z-arguments z-shell"> buildx build<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>platform</span> linux/amd64<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>t</span> image-name .</span> </span></code></pre> <p>An example error during the build process might look like this:</p> <pre data-lang="css" class="language-css z-code"><code class="language-css" data-lang="css"><span class="z-source z-css"><span class="z-meta z-selector z-css">css </span></span><span class="z-source z-css"><span class="z-meta z-selector z-css">Copy <span class="z-entity z-name z-tag z-css">code</span> </span></span><span class="z-source z-css"><span class="z-meta z-selector z-css">#0 2.159 <span class="z-punctuation z-separator z-combinator z-css">&gt;</span> esbuild src</span>/<span class="z-meta z-selector z-css"><span class="z-entity z-name z-tag z-css">main</span><span class="z-entity z-other z-attribute-name z-class z-css"><span class="z-punctuation z-definition z-entity z-css">.</span>ts</span> --bundle --platform=node --target=node16 --format=cjs --outfile=dist</span>/<span class="z-meta z-selector z-css"><span class="z-entity z-name z-tag z-css">main</span><span class="z-entity z-other z-attribute-name z-class z-css"><span class="z-punctuation z-definition z-entity z-css">.</span>cjs</span> --minify </span></span><span class="z-source z-css"><span class="z-meta z-selector z-css">#0 2.159 </span></span><span class="z-source z-css"><span class="z-meta z-selector z-css">#0 2.255 </span>/<span class="z-meta z-selector z-css">app</span>/<span class="z-meta z-selector z-css">node_modules</span>/<span class="z-meta z-selector z-css"><span class="z-entity z-other z-attribute-name z-class z-css"><span class="z-punctuation z-definition z-entity z-css">.</span>bin</span></span>/<span class="z-meta z-selector z-css">esbuild: 13: </span>/<span class="z-meta z-selector z-css">app</span>/<span class="z-meta z-selector z-css">node_modules</span>/<span class="z-meta z-selector z-css"><span class="z-entity z-other z-attribute-name z-class z-css"><span class="z-punctuation z-definition z-entity z-css">.</span>bin</span></span>/<span class="z-meta z-selector z-css">..</span>/<span class="z-meta z-selector z-css">esbuild</span>/<span class="z-meta z-selector z-css">bin</span>/<span class="z-meta z-selector z-css">esbuild: Exec format error </span></span><span class="z-source z-css"><span class="z-meta z-selector z-css">#0 2.266  ELIFECYCLE  Command failed with exit <span class="z-entity z-name z-tag z-css">code</span> 126. </span></span><span class="z-source z-css"><span class="z-meta z-selector z-css"> </span></span></code></pre> <p>For further discussion on this topic, you can refer to the <a rel="nofollow noreferrer" href="https://github.com/evanw/esbuild/issues/642">esbuild issue</a> or consult resources like <a rel="nofollow noreferrer" href="https://zenn.dev/nixieminton/articles/c0933bbaae43f1">this article</a> for additional troubleshooting steps.</p> <h2 id="references">References<a class="zola-anchor" href="#references" aria-label="Anchor link for: references" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://www.izumanetworks.com/blog/build-docker-on-apple-m/">How to Build Docker Images on Apple M-Series</a></li> </ul> 2024-02-17T00:00:00+00:00 2024-02-17T00:00:00+00:00 https://thadaw.com/posts/mastering-table-driven-unit-tests-in-type-script/ <p>Hey there, fellow TypeScript enthusiasts!</p> <p>Are you eager to enhance your TypeScript proficiency? Join me on an exploration of a potent technique for crafting unit tests: <strong>the table-driven approach</strong>. Whether you're a seasoned developer or just beginning your TypeScript journey, this article promises to equip you with invaluable insights into writing efficient and maintainable unit tests. Let's embark on this enlightening journey together!</p> <h2 id="understanding-table-driven-unit-tests">Understanding Table-Driven Unit Tests<a class="zola-anchor" href="#understanding-table-driven-unit-tests" aria-label="Anchor link for: understanding-table-driven-unit-tests" style="visibility: hidden;"></a> </h2> <p>In the realm of TypeScript testing, the concept of table-driven tests shines as a beacon of efficiency and clarity. But what exactly are table-driven tests, and why should you care?</p> <p>Table-driven tests involve structuring test cases in a tabular format, empowering developers to manage and execute tests with remarkable efficiency. This approach proves invaluable, especially when dealing with functions that demand testing across various input-output permutations.</p> <h2 id="unveiling-the-power-of-table-driven-tests">Unveiling the Power of Table-Driven Tests<a class="zola-anchor" href="#unveiling-the-power-of-table-driven-tests" aria-label="Anchor link for: unveiling-the-power-of-table-driven-tests" style="visibility: hidden;"></a> </h2> <p>Let's dive into a practical example utilizing Jest/Vitest, a versatile testing framework widely adopted in the JavaScript and TypeScript communities:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">describe</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Test getPostDirectory<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Case</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">prefixPath</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">contentPath</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">expected</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">cases</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Case</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">prefixPath</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>_post<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">contentPath</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>_post/preview/test/my-post/readme.md<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">expected</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>preview/test/my-post<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">prefixPath</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>_post<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">contentPath</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>_post/preview/test.md<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">expected</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>preview<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">prefixPath</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>_post<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">contentPath</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>_post/preview.md<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">expected</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span><span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">prefixPath</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>_contents<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">contentPath</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>_contents/post/preview.md<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">expected</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>post<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">test</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">each</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">cases</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>getPostDirectory(%s, %s) should be %s<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">prefixPath</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-parameter z-ts">contentPath</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-parameter z-ts">expected</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">expect</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">getPostDirectory</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">prefixPath</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">contentPath</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toEqual</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">expected</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></code></pre> <p>See <a rel="nofollow noreferrer" href="https://github.com/mildronize/mt-astro-template/pull/2/files#diff-5d8bf088f3b546b8e580b6be694243cf704ff9b744db044c20123d730bc68638R34-R50">full example</a></p> <p>In this snippet, we define a test suite <code>Test getPostDirectory</code> that encompasses multiple test cases encapsulated within a structured table. Each test case includes inputs (<code>prefixPath</code> and <code>contentPath</code>) and the expected output (<code>expected</code>). Leveraging <code>test.each</code>, we iterate over these cases, ensuring the function <code>getPostDirectory</code> behaves as expected under diverse scenarios.</p> <p><strong>Let's break it down:</strong></p> <ul> <li><code>describe</code>: Provides a descriptive container for grouping related tests.</li> <li><code>test.each</code>: Iterates over the defined test cases, dynamically generating individual tests for each case.</li> <li><code>cases</code>: Defined in a structured format, facilitating clarity and ease of maintenance.</li> </ul> <h2 id="advantages-of-table-driven-testing">Advantages of Table-Driven Testing<a class="zola-anchor" href="#advantages-of-table-driven-testing" aria-label="Anchor link for: advantages-of-table-driven-testing" style="visibility: hidden;"></a> </h2> <p>Embracing table-driven tests in your TypeScript projects offers a myriad of benefits:</p> <ul> <li><strong>Improved Organization</strong>: Structured test cases enhance clarity and maintainability.</li> <li><strong>Efficient Execution</strong>: Automate test case generation and execution, saving time and effort.</li> <li><strong>Scalability</strong>: Easily accommodate new test cases without cluttering the test suite.</li> </ul> <h2 id="conclusion">Conclusion<a class="zola-anchor" href="#conclusion" aria-label="Anchor link for: conclusion" style="visibility: hidden;"></a> </h2> <p>In conclusion, table-driven unit tests serve as a cornerstone of robust TypeScript testing practices. By adopting this approach, you pave the way for cleaner, more maintainable codebases and expedite the development process. So why wait? Dive in, harness the power of table-driven testing, and elevate your TypeScript projects to new heights of excellence!</p> <p>Happy testing</p> 2024-02-13T00:00:00+00:00 2024-02-13T00:00:00+00:00 https://thadaw.com/posts/reusable-utility-function-for-guarding-type-for-complex-object-shape-using-zod/ <p>Hey there, fellow programmers!</p> <p>Are you looking to level up your TypeScript skills? Dive into this blog where we explore a powerful technique for type guarding complex object shapes using <a rel="nofollow noreferrer" href="https://zod.dev/">Zod</a>. Whether you're a seasoned developer or just getting started with TypeScript, this article will provide valuable insights into narrowing types and leveraging utility functions for efficient code validation. Let's embark on this journey together!</p> <p>Before delving into the details, let's understand the concept of narrowing types in TypeScript. Narrowing type refers to the process of refining the possible types of a value, enabling us to handle objects correctly.</p> <h2 id="narrowing-unknown-types">Narrowing Unknown Types<a class="zola-anchor" href="#narrowing-unknown-types" aria-label="Anchor link for: narrowing-unknown-types" style="visibility: hidden;"></a> </h2> <p>In TypeScript, we often encounter scenarios where we need to validate unknown values against complex object shapes. This process, known as narrowing types, ensures that we handle object types accurately. Let's consider an example to understand this concept better, <a rel="nofollow noreferrer" href="https://mariusschulz.com/blog/the-unknown-type-in-typescript">code from mariusschulz.com</a>.</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * A custom type guard function that determines whether </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * `value` is an array that only contains numbers. </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">isNumberArray</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">value</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">unknown</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-variable z-parameter z-ts">value</span> <span class="z-keyword z-operator z-expression z-is z-ts">is</span> <span class="z-support z-type z-primitive z-ts">number</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-builtin z-ts">Array</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">isArray</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">value</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-logical z-ts">&amp;&amp;</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">value</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">every</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-variable z-parameter z-ts">element</span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-keyword z-operator z-expression z-typeof z-ts">typeof</span> <span class="z-variable z-other z-readwrite z-ts">element</span> <span class="z-keyword z-operator z-comparison z-ts">===</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>number<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">unknownValue</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">unknown</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-constant z-numeric z-decimal z-ts">15</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">23</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">8</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">4</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">42</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">16</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">isNumberArray</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">unknownValue</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Within this branch, `unknownValue` has type `number[]`,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> so we can spread the numbers as arguments to `Math.max`</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">max</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-math z-ts">Math</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-math z-ts">max</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-keyword z-operator z-spread z-ts">...</span><span class="z-variable z-other z-readwrite z-ts">unknownValue</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">max</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <p><a rel="nofollow noreferrer" href="https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABDAzgORAWwEYFMBOAgvvgIYCeAFAG6kA2IuAXIuANZhwDuYAlC7Qa5kKRGCx58AbQC6iAN4AoRIny4oIfEkrKViYmXIA6VAYo16jXogBkNxIMZHc1AlVx1cmXGCiIAvAB8iFDkAA64cMCIHl4+fv6JiABE4jgEyby6vADcigC+iooQCCh+7Jw8AGqWzKxgHNxI-ohSAIwArAA0iABMAMw9ABw9ACxjvT1tAGwyeYow0ZSoGOlEJOYVTTVCvNZKKgD0h4gA6jBQABYwSFeoiNhkkJc9AAZb1bWviJekoqERRCvNKSWSvLq6Y6IFBwRBcYQQUhIFBhNSkAAmIUuwhBBFEf0QpHwAHMsPF-rDXgBZUhXIyYUgAD1euhKYDKiAZjICiBpdK5lCMQo+YB2VjyKjZMM8RjocGJlC5uQKQA">Playground</a></p> <p>Validating complex object shapes can be challenging with traditional type guards. Therefore, let's explore using Zod for type guarding complex objects.</p> <p>Now, let's narrow down and validate a Record Type using the Zod data validation library.</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">z</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>zod<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">isRecord</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">object</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">unknown</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-variable z-parameter z-ts">object</span> <span class="z-keyword z-operator z-expression z-is z-ts">is</span> <span class="z-entity z-name z-type z-ts">Record</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">string</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-support z-type z-primitive z-ts">unknown</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">recordSchema</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">record</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">unknown</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">recordSchema</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">safeParse</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">object</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">success</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">findLength</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">object</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">unknown</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">isRecord</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">object</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-builtin z-ts">Object</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">keys</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">object</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-ts">length</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-trycatch z-ts">throw</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Error</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Input object doesn&#39;t support type<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></code></pre> <p><a rel="nofollow noreferrer" href="https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgLzgXzgMyhEcDkyEAJvgNwBQFmArgHYDGMwEdcwAzgEoCmD0xABQQARgCs+MAFxx6AazoQA7nQCUM0RKbsOcXvyjEAPBxhRgdAOYAaWXQXK6APkQU4cfnVNwofAQGUGAAseEABDOABeFAA6XwMhZBj5RRVBVVVKd18YGig2eIDg0LCYjjDMHgAFMKgOHmFxSVUymgYGHg4OSjQqWkZmViwLYgAZHisYIMataTsHFXU4OhoQER4oV3dgTDhBTn0BGebVLfcfHlz8uAB5JqYYuR4ATw5jphaAGwnLKaz0NxwKY4JTLHiggCiUBwUEEAAMAJJ0MA0eCaSRwYgQTp0fDwDg0MCQWBA55gHhwzIUNBAA">Playground</a></p> <p>However, writing custom functions everywhere for such validations can lead to code duplication. Thus, we can create a utility function to streamline the process.</p> <p>While exploring utility functions, I came across a reusable utility function for guarding types for complex object shapes using Zod, shared by <a rel="nofollow noreferrer" href="https://twitter.com/ecyrbedev/status/1757318655799414830">ecyrbedev</a>.</p> <p>For instance, let's say we want to guard the type of a value that is an array of non-empty File Object using Zod:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">z</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>zod<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts"><span class="z-entity z-name z-function z-ts">is</span></span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-module z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-ts">ZodType</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">value</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">unknown</span></span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">schema</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-arrow z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-variable z-parameter z-ts">value</span> <span class="z-keyword z-operator z-expression z-is z-ts">is</span> <span class="z-entity z-name z-type z-module z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-ts">output</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">schema</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">safeParse</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">value</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">success</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">test</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span><span class="z-support z-type z-primitive z-ts">unknown</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-keyword z-control z-conditional z-ts">if</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">is</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">test</span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">array</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">instanceof</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-support z-class z-dom z-ts">File</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">nonempty</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">test</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts">^? const test: [File, ...File[]]</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <p><a rel="nofollow noreferrer" href="https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgLzgXzgMyhEcDkyEAJvgNwBQFAxhAHYDO8wDcAvHADwAqcApgA8YfOsVbIAdAC0S3AJ5g+APgAUANwCGAGwCufAFxwddANZ0IAdzoAaOA2oALPiA2HuASkObdfOCxQSEDowYME8SuwRCBRwsXBQfDA6UHR2js4aEgwamHwAChpQDHzq2nruWTrU1HwMDJRoVLSM8MJM+sZmlqkcANoAupTAmCosKm0w1pKFUBpyKpLALRp0NRAjAGLAWnzuFeZ0zmAw83vuiDFxE5exAPS3AHoA-BSNQA">Playground</a></p> <h2 id="summary">Summary<a class="zola-anchor" href="#summary" aria-label="Anchor link for: summary" style="visibility: hidden;"></a> </h2> <p>In this blog post, we've explored the concept of narrowing types in TypeScript and how it enables us to validate unknown values against complex object shapes. We've also seen how Zod, a powerful data validation library, can streamline the process of type guarding. By leveraging reusable utility functions, we can write cleaner and more efficient code, reducing the risk of errors and enhancing code maintainability.</p> <h2 id="wrapping-up">Wrapping Up<a class="zola-anchor" href="#wrapping-up" aria-label="Anchor link for: wrapping-up" style="visibility: hidden;"></a> </h2> <p>We hope you found this blog post insightful and informative! Keep exploring, experimenting, and leveling up your TypeScript skills. If you have any questions or feedback, feel free to reach out. Happy coding!</p> <p>Until next time, Thada</p> <h2 id="reference">Reference<a class="zola-anchor" href="#reference" aria-label="Anchor link for: reference" style="visibility: hidden;"></a> </h2> <ul> <li>Basic Typenarrowing (Thai) from: https://typescript-th.thadaw.com/docs/basic/narrowing-type</li> <li>Solution Code from <a rel="nofollow noreferrer" href="https://twitter.com/ecyrbedev/status/1757318655799414830">ecyrbedev</a></li> </ul> <hr /> <h2 id="q-a">Q&amp;A<a class="zola-anchor" href="#q-a" aria-label="Anchor link for: q-a" style="visibility: hidden;"></a> </h2> <p>We've received some insightful questions from our readers, <a rel="nofollow noreferrer" href="https://www.facebook.com/photo?fbid=885491666913829&amp;set=a.486562490140084">Thiti Baipad and Surapus Moonjaras</a>. Thank you both for your valuable inquiries! Let's address them one by one.</p> <h3 id="question-1-why-not-directly-use-zod-parse-instead-of-just-using-type-guards">Question 1: Why not directly use zod.parse instead of just using type guards?<a class="zola-anchor" href="#question-1-why-not-directly-use-zod-parse-instead-of-just-using-type-guards" aria-label="Anchor link for: question-1-why-not-directly-use-zod-parse-instead-of-just-using-type-guards" style="visibility: hidden;"></a> </h3> <p>In a quick response, when writing the blog, I didn't really dwell on this aspect much. I must admit, I was slightly distracted during the meeting.</p> <p>A fresh perspective on this is that separating the function out adds to readability. As for dependencies, it still depends on what you both prefer.</p> <p>If we were to write something like:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-keyword z-control z-conditional z-ts">if</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">array</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">number</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">safeParse</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">data</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">success</span>) <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> do something </span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <p>It might be a bit hard to read and doesn't carry the same meaning as a sentence. We'd have to interpret it.</p> <h3 id="question-2-what-s-the-reason-behind-applying-zod-schema-type-in-the-utility-function">Question 2: What's the reason behind applying Zod Schema type in the utility function?<a class="zola-anchor" href="#question-2-what-s-the-reason-behind-applying-zod-schema-type-in-the-utility-function" aria-label="Anchor link for: question-2-what-s-the-reason-behind-applying-zod-schema-type-in-the-utility-function" style="visibility: hidden;"></a> </h3> <p>The reason for this lies in the example function provided, which specifies the internal type of the Zod object. Admittedly, I'm not extensively knowledgeable about this, but understanding such aspects allows for flexibility and application in various scenarios.</p> <h3 id="question-3-why-remove-zod-dependency-from-the-is-function">Question 3: Why remove Zod dependency from the is function?<a class="zola-anchor" href="#question-3-why-remove-zod-dependency-from-the-is-function" aria-label="Anchor link for: question-3-why-remove-zod-dependency-from-the-is-function" style="visibility: hidden;"></a> </h3> <p>I've previously written an article on a generic TypeScript Validation Tool without relying solely on Zod, which <a rel="nofollow noreferrer" href="https://www.thadaw.com/s/z8daujr/">you can find here</a> (The article in Thai). Hence, it's possible to extend this concept to remove the Zod dependency from the is function.</p> <p>However, it doesn't mean that every solution must adhere to my recommendations. It's crucial to understand that we have various options and can apply them flexibly in different situations.</p> <p>Thank you once again for your questions!</p> 2024-02-03T00:00:00+00:00 2024-02-03T00:00:00+00:00 https://thadaw.com/posts/publish-docker-image-public-on-github-package-with-github-actions/ <p>Greetings, readers! If you've been using Docker Hub for managing your Docker images, did you know that GitHub offers an alternative with GitHub Package? In this blog post, we'll walk through the process of publishing your Docker images on GitHub Package, leveraging the power of GitHub Actions. This is particularly beneficial if you're already hosting your code on GitHub. Let's dive into the details and explore how to seamlessly integrate Docker image publishing into your GitHub workflows.</p> <h2 id="setting-up-github-actions-workflow">Setting Up GitHub Actions Workflow<a class="zola-anchor" href="#setting-up-github-actions-workflow" aria-label="Anchor link for: setting-up-github-actions-workflow" style="visibility: hidden;"></a> </h2> <p>To get started, create a GitHub Actions workflow file and configure it to build and publish your Docker image whenever changes are pushed to the main branch. We'll be using GitHub Container Registry (ghcr.io) for our image hosting. Below is the workflow file that you can use as a template, adopted from the <a rel="nofollow noreferrer" href="https://docs.github.com/en/actions/publishing-packages/publishing-docker-images#publishing-images-to-github-packages">GitHub Official Documentation</a>:</p> <pre data-lang="yml" class="language-yml z-code"><code class="language-yml" data-lang="yml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Create and publish a Docker image</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Configures this workflow to run every time a change is pushed to the branch called `release`. </span></span><span class="z-source z-yaml"><span class="z-constant z-language z-boolean z-yaml">on</span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">push</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">branches</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml">main</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Defines two custom environment variables for the workflow. These are used for the Container registry domain, and a name for the Docker image that this workflow builds. </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">env</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">REGISTRY</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">ghcr.io</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">IMAGE_NAME</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ github.repository }}</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> There is a single job in this workflow. It&#39;s configured to run on the latest available version of Ubuntu. </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">jobs</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">build-and-push-image</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">runs-on</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">ubuntu-latest</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job. </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">permissions</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">contents</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">read</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">packages</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">write</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">steps</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Checkout repository</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/checkout@v4</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Uses the `docker/login-action` action to log in to the Container registry registry using the account and password that will publish the packages. Once published, the packages are scoped to the account defined here. </span></span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Log in to the Container registry</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">registry</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ env.REGISTRY }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">username</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ github.actor }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">password</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.GITHUB_TOKEN }}</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> This step uses [docker/metadata-action](https://github.com/docker/metadata-action#about) to extract tags and labels that will be applied to the specified image. The `id` &quot;meta&quot; allows the output of this step to be referenced in a subsequent step. The `images` value provides the base name for the tags and labels. </span></span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Extract metadata (tags, labels) for Docker</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">meta</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">images</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> This step uses the `docker/build-push-action` action to build the image, based on your repository&#39;s `Dockerfile`. If the build succeeds, it pushes the image to GitHub Packages. </span></span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> It uses the `context` parameter to define the build&#39;s context as the set of files located in the specified path. For more information, see &quot;[Usage](https://github.com/docker/build-push-action#usage)&quot; in the README of the `docker/build-push-action` repository. </span></span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> It uses the `tags` and `labels` parameters to tag and label the image with the output from the &quot;meta&quot; step. </span></span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Build and push Docker image</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">docker/build-push-action@v5</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">context</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-float z-decimal z-yaml"><span class="z-punctuation z-separator z-decimal z-yaml">.</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">push</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-language z-boolean z-yaml">true</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">tags</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ steps.meta.outputs.tags }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">labels</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ steps.meta.outputs.labels }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">cache-from</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">type=gha</span> </span></code></pre> <p>This workflow file is designed to run on every push to the <code>main</code> branch, ensuring that your Docker image is automatically built and published when changes occur.</p> <h2 id="executing-the-workflow">Executing the Workflow<a class="zola-anchor" href="#executing-the-workflow" aria-label="Anchor link for: executing-the-workflow" style="visibility: hidden;"></a> </h2> <p>Once your workflow is set up, any push to the main branch will trigger the GitHub Actions workflow. Keep an eye on the Actions tab in your GitHub repository to monitor the progress and results.</p> <p><img src="https://thadaw.com/posts/publish-docker-image-public-on-github-package-with-github-actions/github-actions-run-result.png" alt="" /></p> <h2 id="exploring-the-published-docker-image">Exploring the Published Docker Image<a class="zola-anchor" href="#exploring-the-published-docker-image" aria-label="Anchor link for: exploring-the-published-docker-image" style="visibility: hidden;"></a> </h2> <p>Visit the GitHub Package page to view details about your published Docker image, including tags and labels.</p> <p><img src="https://thadaw.com/posts/publish-docker-image-public-on-github-package-with-github-actions/how-to-check-where-package-is-published.png" alt="" /></p> <h2 id="making-your-package-public">Making Your Package Public<a class="zola-anchor" href="#making-your-package-public" aria-label="Anchor link for: making-your-package-public" style="visibility: hidden;"></a> </h2> <p>Before pulling the image publicly, you need to make sure your GitHub Package is set to public. Easily change the visibility in the package settings.</p> <p><img src="https://thadaw.com/posts/publish-docker-image-public-on-github-package-with-github-actions/github-package-details.png" alt="" /></p> <p>Navigate to the settings, locate the option to change visibility, and switch it to public.</p> <p><img src="https://thadaw.com/posts/publish-docker-image-public-on-github-package-with-github-actions/github-package-settings.png" alt="" /></p> <h2 id="pulling-the-image">Pulling the Image<a class="zola-anchor" href="#pulling-the-image" aria-label="Anchor link for: pulling-the-image" style="visibility: hidden;"></a> </h2> <p>Once your package is public, pulling the image becomes straightforward. Use the following Docker command, replacing <code>&lt;username&gt;</code>, <code>&lt;repository&gt;</code>, and <code>&lt;tag&gt;</code> with your specific details:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">docker</span></span><span class="z-meta z-function-call z-arguments z-shell"> pull ghcr.io/<span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>username<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span>/<span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>repository<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span>:<span class="z-keyword z-operator z-assignment z-redirection z-shell">&lt;</span>tag<span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span> </span></span></code></pre> <p>For instance, pulling the <code>ghcr.io/thaitype/spy-reverse-proxy:main</code> image would look like this:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">docker</span></span><span class="z-meta z-function-call z-arguments z-shell"> pull ghcr.io/thaitype/spy-reverse-proxy:main</span> </span></code></pre> <p>You can also see the <a rel="nofollow noreferrer" href="https://github.com/thaitype/spy-proxy/releases/tag/v0.0.0">full example repo here</a>.</p> <p>Feel free to adapt the workflow and Docker image tags to align with your versioning strategy and project requirements.</p> <h2 id="in-summary">In Summary<a class="zola-anchor" href="#in-summary" aria-label="Anchor link for: in-summary" style="visibility: hidden;"></a> </h2> <p>Congratulations! You've successfully set up GitHub Actions to publish your Docker images on GitHub Package. This seamless integration provides a convenient way to manage your images within the GitHub ecosystem. If you ever need to update your images or adopt a different versioning strategy, you can easily modify the workflow to suit your needs.</p> <p>Thank you for joining us on this GitHub Actions journey. We hope this guide enhances your understanding of Docker image publishing and GitHub Package integration. Happy coding!</p> <p>Happy coding, and until next time!</p> 2024-02-01T00:00:00+00:00 2024-02-01T00:00:00+00:00 https://thadaw.com/posts/resolving-docker-multi-stage-build-errors-on-github-actions/ <p>Setting up a CI/CD pipeline with multi-stage Docker builds on GitHub Actions can be a powerful way to automate your workflow. However, you may encounter challenges, as I recently did, when building a Docker image using multi-stage builds and GitHub Actions.</p> <h2 id="the-problem">The Problem<a class="zola-anchor" href="#the-problem" aria-label="Anchor link for: the-problem" style="visibility: hidden;"></a> </h2> <p>The issue surfaced when I attempted to build a Docker image with multi-stage builds using the <code>pnpm</code> package manager. The problem is not related to pnpm itself; instead, I utilized an example from the pnpm documentation for multi-stage builds. The error that emerged during the Docker image build process, seemingly tied to pnpm, was actually rooted in the Dockerfile's implementation of multi-stage builds. The error message specifically highlighted an inconsistency in the cache key calculation, leading to confusion and the need for further investigation.</p> <p>The root cause of the issue lies in the <code>Dockerfile</code>, particularly during the implementation of multi-stage builds and the integration of the pnpm package manager. For reference, the approach was inspired by <a rel="nofollow noreferrer" href="https://pnpm.io/docker#example-1-build-a-bundle-in-a-docker-container">the official documentation</a>.</p> <pre data-lang="dockerfile" class="language-dockerfile z-code"><code class="language-dockerfile" data-lang="dockerfile"><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> node:<span class="z-entity z-name z-enum z-tag-digest">20-slim</span> <span class="z-keyword z-control z-dockerfile">AS</span> <span class="z-variable z-stage-name">base</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>PNPM_HOME=<span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>/pnpm<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>PATH=<span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>$PNPM_HOME:$PATH<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>corepack enable </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> . /app </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/app </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> base <span class="z-keyword z-control z-dockerfile">AS</span> <span class="z-variable z-stage-name">prod-deps</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>--mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> base <span class="z-keyword z-control z-dockerfile">AS</span> <span class="z-variable z-stage-name">build</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>--mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpm run build </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> base </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">prod-deps</span> /app/node_modules /app/node_modules </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">build</span> /app/dist /app/dist </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">EXPOSE </span>8000 </span><span class="z-source z-dockerfile"><span class="z-keyword z-operator z-dockerfile">CMD </span>[ <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>pnpm<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span>, <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>start<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span> ] </span></code></pre> <p>This section of the Dockerfile, influenced by the recommended practices outlined in the official <code>pnpm</code> documentation, initiates the build process. Despite following the prescribed steps, an unforeseen error arose during the GitHub Actions workflow, prompting the need for investigation and resolution.</p> <h2 id="github-actions-workflow">GitHub Actions Workflow<a class="zola-anchor" href="#github-actions-workflow" aria-label="Anchor link for: github-actions-workflow" style="visibility: hidden;"></a> </h2> <p>The GitHub Actions workflow responsible for building and pushing the Docker image looked like this:</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Build and push Docker image</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">docker/build-push-action@v5</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">context</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-float z-decimal z-yaml"><span class="z-punctuation z-separator z-decimal z-yaml">.</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">push</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-language z-boolean z-yaml">true</span> </span></code></pre> <p>The encountered error was as follows:</p> <pre class="z-code"><code><span class="z-text z-plain">buildx failed with: ERROR: failed to solve: failed to compute cache key: failed to calculate checksum of ref 8abab386-ee6f-4a46-817c-c1639873e713::8skhbm74dq1epjac59datwfm4: &quot;...&quot;: not found </span></code></pre> <h2 id="solution-1-consolidating-multi-stage-builds">Solution 1: Consolidating Multi-Stage Builds<a class="zola-anchor" href="#solution-1-consolidating-multi-stage-builds" aria-label="Anchor link for: solution-1-consolidating-multi-stage-builds" style="visibility: hidden;"></a> </h2> <p>One approach to resolve this issue is to consolidate the multi-stage build into a single stage:</p> <pre data-lang="dockerfile" class="language-dockerfile z-code"><code class="language-dockerfile" data-lang="dockerfile"><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> base <span class="z-keyword z-control z-dockerfile">AS</span> <span class="z-variable z-stage-name">build</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>--mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpm run build </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Ensure `&quot;type&quot;: &quot;module&quot;` is set in package.json </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">build</span> /app/package.json /app/package.json </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Production dependencies </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">build</span> /app/node_modules /app/node_modules </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Application </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">build</span> /app/dist /app </span></code></pre> <p>However, be cautious as this modification might lead to another error:</p> <pre class="z-code"><code><span class="z-text z-plain">Error: buildx failed with: ERROR: local cache importer requires src </span></code></pre> <h2 id="solution-2-modifying-github-actions-workflow">Solution 2: Modifying GitHub Actions Workflow<a class="zola-anchor" href="#solution-2-modifying-github-actions-workflow" aria-label="Anchor link for: solution-2-modifying-github-actions-workflow" style="visibility: hidden;"></a> </h2> <!-- I've found that the documentation for the `docker/build-push-action` shown in here [docker/build-push-action](https://github.com/docker/build-push-action/tree/v5.1.0?tab=readme-ov-file#inputs) provides that we can change the cache mechanism by adding `cache-from` e.g., `type=local,src=path/to/dir` , and I've found that in the [List of external cache sources](https://docs.docker.com/engine/reference/commandline/buildx_build/#cache-from) show `gha` (Github Actions Cache) for building docker. To address the additional error, modify the GitHub Actions workflow by adding `cache-from`: --> <p>In the pursuit of resolving the encountered error, I delved into the documentation for the <strong><code>docker/build-push-action</code></strong>, available at <a rel="nofollow noreferrer" href="https://github.com/docker/build-push-action/tree/v5.1.0?tab=readme-ov-file#inputs">docker/build-push-action</a>. Here, I discovered a valuable configuration option called <strong><code>cache-from</code></strong> that allows us to tweak the cache mechanism. For example, we can employ <strong><code>type=local,src=path/to/dir</code></strong> to change the caching strategy.</p> <p>Additionally, exploring the <a rel="nofollow noreferrer" href="https://docs.docker.com/engine/reference/commandline/buildx_build/#cache-from">List of external cache sources</a> revealed the use of <strong><code>gha</code></strong> (Github Actions Cache) as a viable option for Docker builds within the GitHub Actions environment.</p> <p>To mitigate the secondary error, it is recommended to enhance the GitHub Actions workflow by incorporating the <strong><code>cache-from</code></strong> parameter:</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Build and push Docker image</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">docker/build-push-action@v5</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">context</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-float z-decimal z-yaml"><span class="z-punctuation z-separator z-decimal z-yaml">.</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">push</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-language z-boolean z-yaml">true</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">cache-from</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">type=gha</span> </span></code></pre> <p>These solutions aim to provide a smoother experience when working with multi-stage Docker builds in GitHub Actions. Integrating these adjustments into your pipeline should help mitigate common errors, ensuring a more efficient and reliable CI/CD process for your project.</p> <p>Here's the full Dockerfile and GitHub Actions configuration:</p> <pre data-lang="dockerfile" class="language-dockerfile z-code"><code class="language-dockerfile" data-lang="dockerfile"><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> https://pnpm.io/docker#example-1-build-a-bundle-in-a-docker-container </span></span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> node:<span class="z-entity z-name z-enum z-tag-digest">20-slim</span> <span class="z-keyword z-control z-dockerfile">As</span> <span class="z-variable z-stage-name">base</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>PNPM_HOME=<span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>/pnpm<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>PATH=<span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>$PNPM_HOME:$PATH<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>corepack enable </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node . ./app </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/app </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">USER </span>node </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> base <span class="z-keyword z-control z-dockerfile">AS</span> <span class="z-variable z-stage-name">build</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>--mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpm run build </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Not Natively support ARM64 (M1) </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> alpine:<span class="z-entity z-name z-enum z-tag-digest">3.19</span> <span class="z-keyword z-control z-dockerfile">As</span> <span class="z-variable z-stage-name">production</span> </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>PORT=3333 </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Make sure `&quot;type&quot;: &quot;module&quot;` is set in package.json </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">build</span> /app/package.json /app/package.json </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Production dependencies </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">build</span> /app/node_modules /app/node_modules </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Application </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --from=<span class="z-variable z-stage-name">build</span> /app/dist /app </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>apk add --update --no-cache nodejs=$NODE_VERSION </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">EXPOSE </span>${PORT} </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Create a group and user </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>addgroup -g 1000 node \ </span><span class="z-source z-dockerfile"> &amp;&amp; adduser -u 1000 -G node -s /bin/sh -D node </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">USER </span>node </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-operator z-dockerfile">CMD </span>[ <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>node<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span>, <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>app/main.js<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span> ] </span></code></pre> <p>and Github Actions</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> https://docs.github.com/en/actions/publishing-packages/publishing-docker-images#publishing-images-to-github-packages </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Create and publish a Docker image</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Configures this workflow to run every time a change is pushed to the branch called `release`. </span></span><span class="z-source z-yaml"><span class="z-constant z-language z-boolean z-yaml">on</span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">push</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> branches: [&#39;release&#39;] </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">branches</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml">main</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Defines two custom environment variables for the workflow. These are used for the Container registry domain, and a name for the Docker image that this workflow builds. </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">env</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">REGISTRY</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">ghcr.io</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">IMAGE_NAME</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ github.repository }}</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> There is a single job in this workflow. It&#39;s configured to run on the latest available version of Ubuntu. </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">jobs</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">build-and-push-image</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">runs-on</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">ubuntu-latest</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job. </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">permissions</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">contents</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">read</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">packages</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">write</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">steps</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Checkout repository</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/checkout@v4</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Uses the `docker/login-action` action to log in to the Container registry registry using the account and password that will publish the packages. Once published, the packages are scoped to the account defined here. </span></span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Log in to the Container registry</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">registry</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ env.REGISTRY }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">username</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ github.actor }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">password</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.GITHUB_TOKEN }}</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> This step uses [docker/metadata-action](https://github.com/docker/metadata-action#about) to extract tags and labels that will be applied to the specified image. The `id` &quot;meta&quot; allows the output of this step to be referenced in a subsequent step. The `images` value provides the base name for the tags and labels. </span></span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Extract metadata (tags, labels) for Docker</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">meta</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">images</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> This step uses the `docker/build-push-action` action to build the image, based on your repository&#39;s `Dockerfile`. If the build succeeds, it pushes the image to GitHub Packages. </span></span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> It uses the `context` parameter to define the build&#39;s context as the set of files located in the specified path. For more information, see &quot;[Usage](https://github.com/docker/build-push-action#usage)&quot; in the README of the `docker/build-push-action` repository. </span></span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> It uses the `tags` and `labels` parameters to tag and label the image with the output from the &quot;meta&quot; step. </span></span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Build and push Docker image</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">docker/build-push-action@v5</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">context</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-float z-decimal z-yaml"><span class="z-punctuation z-separator z-decimal z-yaml">.</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">push</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-language z-boolean z-yaml">true</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">tags</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ steps.meta.outputs.tags }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">labels</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ steps.meta.outputs.labels }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">cache-from</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">type=gha</span> </span></code></pre> <p>You can also see the <a rel="nofollow noreferrer" href="https://github.com/thaitype/spy-proxy/releases/tag/v0.0.0">full example repo here</a>.</p> <h2 id="discussion"><strong>Discussion</strong><a class="zola-anchor" href="#discussion" aria-label="Anchor link for: discussion" style="visibility: hidden;"></a> </h2> <h3 id="investigating-multi-stage-builds"><strong>Investigating Multi-Stage Builds</strong><a class="zola-anchor" href="#investigating-multi-stage-builds" aria-label="Anchor link for: investigating-multi-stage-builds" style="visibility: hidden;"></a> </h3> <p>In dissecting the encountered challenges during the Docker image build process, it became evident that the initial error, seemingly attributed to the <strong><code>pnpm</code></strong> package manager, was, in fact, a consequence of the implementation of multi-stage builds in the Dockerfile. The chosen approach drew inspiration from the official <a rel="nofollow noreferrer" href="https://pnpm.io/docker#example-1-build-a-bundle-in-a-docker-container">pnpm documentation</a>. This revelation clarified that the issue did not originate from <strong><code>pnpm</code></strong> itself but rather from nuances in the Dockerfile structure.</p> <h3 id="navigating-dockerfile-complexity"><strong>Navigating Dockerfile Complexity</strong><a class="zola-anchor" href="#navigating-dockerfile-complexity" aria-label="Anchor link for: navigating-dockerfile-complexity" style="visibility: hidden;"></a> </h3> <p>The Dockerfile's multi-stage build, designed to optimize the image creation process, unintentionally introduced complexities that led to an error in cache key calculation. Recognizing the root cause and understanding the intricacies of multi-stage builds proved pivotal in devising effective solutions.</p> <h3 id="unveiling-github-actions-insights"><strong>Unveiling GitHub Actions Insights</strong><a class="zola-anchor" href="#unveiling-github-actions-insights" aria-label="Anchor link for: unveiling-github-actions-insights" style="visibility: hidden;"></a> </h3> <p>In the quest for resolution, a deep dive into the documentation for the <strong><a rel="nofollow noreferrer" href="https://github.com/docker/build-push-action/tree/v5.1.0?tab=readme-ov-file#inputs">docker/build-push-action</a></strong> shed light on valuable configuration options. The discovery of the <strong><code>cache-from</code></strong> parameter provided an avenue to refine the caching strategy, offering insights into optimizing the GitHub Actions workflow for Docker image builds.</p> <h2 id="solutions-explored"><strong>Solutions Explored</strong><a class="zola-anchor" href="#solutions-explored" aria-label="Anchor link for: solutions-explored" style="visibility: hidden;"></a> </h2> <h3 id="solution-1-consolidating-multi-stage-builds-1"><strong>Solution 1: Consolidating Multi-Stage Builds</strong><a class="zola-anchor" href="#solution-1-consolidating-multi-stage-builds-1" aria-label="Anchor link for: solution-1-consolidating-multi-stage-builds-1" style="visibility: hidden;"></a> </h3> <p>The first solution involved consolidating the multi-stage build into a single stage, modifying the Dockerfile structure. However, this adjustment posed the risk of triggering another error, necessitating a careful balance between optimization and potential pitfalls.</p> <h3 id="solution-2-refining-github-actions-workflow"><strong>Solution 2: Refining GitHub Actions Workflow</strong><a class="zola-anchor" href="#solution-2-refining-github-actions-workflow" aria-label="Anchor link for: solution-2-refining-github-actions-workflow" style="visibility: hidden;"></a> </h3> <p>The second solution focused on refining the GitHub Actions workflow by leveraging insights from the <a rel="nofollow noreferrer" href="https://github.com/docker/build-push-action/tree/v5.1.0?tab=readme-ov-file#inputs">docker/build-push-action documentation</a>. The introduction of the <strong><code>cache-from</code></strong> parameter, particularly using <strong><code>type=gha</code></strong> (GitHub Actions Cache), aimed to enhance the caching strategy, addressing the secondary error and offering a more stable foundation for Docker image building within the GitHub Actions environment.</p> <h2 id="conclusion"><strong>Conclusion</strong><a class="zola-anchor" href="#conclusion" aria-label="Anchor link for: conclusion" style="visibility: hidden;"></a> </h2> <p>In navigating the complexities of multi-stage Docker builds and GitHub Actions, this exploration has illuminated the importance of meticulous configuration and adaptation. While inspired by best practices from the <strong><code>pnpm</code></strong> documentation, it is crucial to recognize that each project's unique context may demand tailored solutions.</p> <p>The refinement of the Dockerfile structure and the optimization of the GitHub Actions workflow showcase the iterative nature of development. By embracing insights from documentation and understanding the tools at our disposal, we can pave the way for smoother CI/CD pipelines and more resilient Docker image builds.</p> 2024-01-09T00:00:00+00:00 2024-01-09T00:00:00+00:00 https://thadaw.com/posts/readable-unit-testing-for-local-timezone-using-dayjs/ <p>Unit testing is a crucial aspect of software development, and when it comes to testing functionality dependent on time and timezones, having readable and effective tests is essential.</p> <p>In this blog post, we'll explore how to perform unit testing for local timezones using TypeScript and <code>Dayjs</code>. We'll walk through a practical example involving a function to identify the state of a resource based on its environment and the current time. Additionally, we'll introduce a <code>Dayjs</code> timezone helper to facilitate seamless testing across different timezones.</p> <h2 id="example-code">Example Code<a class="zola-anchor" href="#example-code" aria-label="Anchor link for: example-code" style="visibility: hidden;"></a> </h2> <p>Let's start by examining the core function responsible for identifying the state of a resource:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * Identify the state of the resource </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * <span class="z-storage z-type z-class z-jsdoc"><span class="z-punctuation z-definition z-block z-tag z-jsdoc">@</span>param</span> <span class="z-variable z-other z-jsdoc">resource</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * <span class="z-storage z-type z-class z-jsdoc"><span class="z-punctuation z-definition z-block z-tag z-jsdoc">@</span>param</span> <span class="z-variable z-other z-jsdoc">date</span> - Passing date for testing purpose </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * <span class="z-storage z-type z-class z-jsdoc"><span class="z-punctuation z-definition z-block z-tag z-jsdoc">@</span>returns</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">identifyResourceState</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"> <span class="z-variable z-parameter z-ts">resource</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">env</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span> </span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-parameter z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"> <span class="z-variable z-parameter z-ts">date</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Date</span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Date</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_up<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_down<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-comment z-block z-documentation z-ts"> * If the resource is not `dev`, the state is scaled up. </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">resource</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">env</span> <span class="z-keyword z-operator z-comparison z-ts">!==</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dev<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_up<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-comment z-block z-documentation z-ts"> * Time between 8:00 UTC+7 to 19:00 UTC+7, the state is scaled up. </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-comment z-block z-documentation z-ts"> * Otherwise, the state is scaled down. </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">hour</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">date</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">getUTCHours</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">hour</span> <span class="z-keyword z-operator z-relational z-ts">&gt;=</span> <span class="z-constant z-numeric z-decimal z-ts">1</span> <span class="z-keyword z-operator z-logical z-ts">&amp;&amp;</span> <span class="z-variable z-other z-readwrite z-ts">hour</span> <span class="z-keyword z-operator z-relational z-ts">&lt;=</span> <span class="z-constant z-numeric z-decimal z-ts">12</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_up<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_down<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></code></pre> <h2 id="dayjs-timezone-helper">Dayjs Timezone helper<a class="zola-anchor" href="#dayjs-timezone-helper" aria-label="Anchor link for: dayjs-timezone-helper" style="visibility: hidden;"></a> </h2> <p>To enhance the testing process, we introduce a Dayjs helper to handle timezones effectively:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Dayjs helper</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-variable z-other z-readwrite z-alias z-ts">dayjs</span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dayjs<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-variable z-other z-readwrite z-alias z-ts">utc</span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dayjs/plugin/utc<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-variable z-other z-readwrite z-alias z-ts">timezone</span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dayjs/plugin/timezone<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">dayjs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">extend</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">utc</span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">dayjs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">extend</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">timezone</span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">createDateFromTimezone</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">date</span><span class="z-keyword z-operator z-optional z-ts">?</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-module z-ts">dayjs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-ts">ConfigType</span></span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">timezone</span><span class="z-keyword z-operator z-optional z-ts">?</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">date</span><span class="z-keyword z-operator z-optional z-ts">?</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-module z-ts">dayjs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-ts">ConfigType</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">dayjsFromTimezone</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">date</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">timezone</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toDate</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">dayjsFromTimezone</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">date</span><span class="z-keyword z-operator z-optional z-ts">?</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-module z-ts">dayjs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-ts">ConfigType</span></span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">timezone</span><span class="z-keyword z-operator z-optional z-ts">?</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">dayjs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">tz</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">date</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">timezone</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">utc</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></code></pre> <h2 id="implementation">Implementation<a class="zola-anchor" href="#implementation" aria-label="Anchor link for: implementation" style="visibility: hidden;"></a> </h2> <p>Now, let's look at how we can effectively test the <code>identifyResourceState</code> function using our Dayjs timezone helpe</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">expect</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-alias z-ts">test</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>vitest<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">createDateFromTimezone</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>./dayjs<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">identifyResourceState</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>./identify-resource-state<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">createBangkokDate</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createDateFromTimezone</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Asia/Bangkok<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">dateString</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>2023-12-15<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">test</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>identifyResourceState for dev<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">expect</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">identifyResourceState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">env</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dev<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createBangkokDate</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dateString</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> 06:00<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toBe</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_down<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">expect</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">identifyResourceState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">env</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dev<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createBangkokDate</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dateString</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> 09:00<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toBe</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_up<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">expect</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">identifyResourceState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">env</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dev<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createBangkokDate</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dateString</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> 12:00<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toBe</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_up<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">expect</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">identifyResourceState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">env</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dev<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createBangkokDate</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dateString</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> 20:00<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toBe</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_down<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">test</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>identifyResourceState for prod<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">expect</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">identifyResourceState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">env</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>prod<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createBangkokDate</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dateString</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> 06:00<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toBe</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_up<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">expect</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">identifyResourceState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">env</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>prod<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createBangkokDate</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dateString</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> 09:00<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toBe</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_up<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">expect</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">identifyResourceState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">env</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>prod<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createBangkokDate</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dateString</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> 12:00<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toBe</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_up<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">expect</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">identifyResourceState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">env</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>prod<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createBangkokDate</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span><span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">dateString</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> 20:00<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toBe</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>scaled_up<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>In this example, we've provided a clear introduction, added comments, and organized the content for better readability. Feel free to adapt this to suit your preferences and context!</p> 2024-01-06T00:00:00+00:00 2024-01-06T00:00:00+00:00 https://thadaw.com/posts/nammatham-v2x-a-type-safe-evolution-with-improved-dependency-injection/ <h2 id="introduction">Introduction:<a class="zola-anchor" href="#introduction" aria-label="Anchor link for: introduction" style="visibility: hidden;"></a> </h2> <p>When developing Nammatham v1.x, I acknowledged that the experience was somewhat limited. The integration with Dependency Injection (Inversify) was overly complex, leading to constraints in scalability and extensibility. 🥲</p> <p>Nammatham v2.x, on the other hand, underwent a complete overhaul! 🥳 We eliminated the tight coupling with Inversify and reduced the reliance on decorators, making it more type-safe. This version now supports easier expansion, steering away from the limitations of the past.</p> <p>For instance, it seamlessly integrates with Express for Azure Functions Dev, providing an alternative to the official approach, which suffered from slow startup times and the need to compile to JS before debugging. Additionally, libraries like tRPC are now compatible and contribute to the overall improved developer experience. 🤗</p> <h2 id="getting-to-the-point">Getting to the Point:<a class="zola-anchor" href="#getting-to-the-point" aria-label="Anchor link for: getting-to-the-point" style="visibility: hidden;"></a> </h2> <p>After successfully proving the concept with Nammatham v2.x, supporting Azure Functions v4 models with enhanced type safety and developer experience, a new challenge arose. The existing production code of v1.x heavily relied on Inversify's robust container. How could we address this without the need for a complete code rewrite? 🤩</p> <h2 id="the-solution">The Solution:<a class="zola-anchor" href="#the-solution" aria-label="Anchor link for: the-solution" style="visibility: hidden;"></a> </h2> <p>We decided to create helper functions that are type-safe and assist in resolving service dependencies for Inversify. This approach allows for a graceful migration from v1.x to v2.x without the need to overhaul the existing codebase. It's a work in progress (all libraries are currently in alpha stage with rigorous testing ongoing), but it holds promise for a smooth transition, as depicted in the image below. 👇👇</p> <p><img src="https://thadaw.com/posts/nammatham-v2x-a-type-safe-evolution-with-improved-dependency-injection/compare.png" alt="" /></p> <p>For those interested in the code, feel free to explore and give it a star if you find it useful! 📣</p> <ul> <li>Nammatham: https://github.com/thaitype/nammatham</li> <li>di-extra: https://github.com/thaitype/di-extra</li> </ul> <p>P.S. Nammatham is a TypeScript library designed to facilitate the development of serverless functions, such as Azure Functions and others in the future (assuming contributions are made 🙏).</p> 2023-12-05T00:00:00+00:00 2023-12-05T00:00:00+00:00 https://thadaw.com/posts/concurrency-in-typescript-promise-all-settled/ <p>การทำงานแบบ concurrency หรือการทำงานพร้อมกันหลายๆ งานที่ต้องใช้เวลานานใน TypeScript สามารถทำได้ง่ายๆ ด้วย <code>Promise.allSettled</code> ซึ่งช่วยให้เราสามารถรัน Promise หลายๆ ตัวพร้อมกันและรับผลลัพธ์ทั้งหมดได้ไม่ว่า Promise ตัวไหนจะสำเร็จหรือไม่สำเร็จก็ตาม</p> <p><img src="https://thadaw.com/posts/concurrency-in-typescript-promise-all-settled/concurrent-example-ts.png" alt="" /></p> <h2 id="taw-yaangkaaraichngaan">ตัวอย่างการใช้งาน<a class="zola-anchor" href="#taw-yaangkaaraichngaan" aria-label="Anchor link for: taw-yaangkaaraichngaan" style="visibility: hidden;"></a> </h2> <p>ในตัวอย่างนี้ เราจะมีฟังก์ชัน main ที่ใช้ <code>Promise.allSettled</code> เพื่อรัน Promise หลายๆ ตัวที่แทนงานที่ต้องใช้เวลานาน เช่นการเรียกใช้ API, การดึงข้อมูลจากฐานข้อมูล, หรือการประมวลผลข้อมูลที่มีขนาดใหญ่</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-modifier z-async z-ts">async</span> <span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">main</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> 1. สร้าง Reference ของ Promise ที่เป็น Array ว่างๆ ไว้ก่อน</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">promises</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Promise</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">number</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> 2. วนลูปเรียกใช้ longRunningTask 5 ครั้ง โดยที่ไม่ต้องใช้ Await เพื่อให้แต่ละ Task ทำงานพร้อมกัน</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-loop z-ts">for</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">let</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-readwrite z-ts">i</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-variable z-other z-readwrite z-ts">i</span> <span class="z-keyword z-operator z-relational z-ts">&lt;</span> <span class="z-constant z-numeric z-decimal z-ts">5</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-variable z-other z-readwrite z-ts">i</span><span class="z-keyword z-operator z-increment z-ts">++</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">promises</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">push</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">longRunningTask</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">i</span> <span class="z-keyword z-operator z-arithmetic z-ts">+</span> <span class="z-constant z-numeric z-decimal z-ts">1</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">5</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> 3. รอให้ทุก Task ทำงานเสร็จ</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">results</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-promise z-ts">Promise</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">allSettled</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">promises</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>--------------------------------------------------<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>All tasks finished<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">let</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-readwrite z-ts">i</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> 4. วนลูปเรียกใช้ console.log แสดงผลลัพธ์ที่ได้จากทุก Task ที่เสร็จสิ้น</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-loop z-ts">for</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">result</span></span> </span></span><span class="z-keyword z-operator z-expression z-of z-ts">of</span> <span class="z-variable z-other z-readwrite z-ts">results</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">result</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">status</span> <span class="z-keyword z-operator z-comparison z-ts">===</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>fulfilled<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Task <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">i</span> <span class="z-keyword z-operator z-arithmetic z-ts">+</span> <span class="z-constant z-numeric z-decimal z-ts">1</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> took <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-object z-ts">result</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">value</span> <span class="z-keyword z-operator z-arithmetic z-ts">/</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> seconds<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-conditional z-ts">else</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Task <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">i</span> <span class="z-keyword z-operator z-arithmetic z-ts">+</span> <span class="z-constant z-numeric z-decimal z-ts">1</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> failed with error: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-object z-ts">result</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">reason</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">i</span><span class="z-keyword z-operator z-increment z-ts">++</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">main</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h2 id="kaarthamngaankh-ng-promise-allsettled">การทำงานของ Promise.allSettled<a class="zola-anchor" href="#kaarthamngaankh-ng-promise-allsettled" aria-label="Anchor link for: kaarthamngaankh-ng-promise-allsettled" style="visibility: hidden;"></a> </h2> <p>เมื่อเรียกใช้ <code>Promise.allSettled</code> จะได้ผลลัพธ์เป็น <code>PromiseSettledResult&lt;T&gt;[]</code> โดย T คือประเภทข้อมูลที่ Promise ส่งกลับ</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">results</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-promise z-ts">Promise</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">allSettled</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">promises</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> PromiseSettledResult&lt;number&gt;[]</span> </span></code></pre> <p>โค้ดนี้ใช้ interface PromiseFulfilledResult และ PromiseRejectedResult ในการบอกสถานะของ Promise ว่าสำเร็จหรือไม่สำเร็จ</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-storage z-type z-interface z-ts">interface</span> <span class="z-entity z-name z-type z-interface z-ts">PromiseFulfilledResult</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">status</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>fulfilled<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">value</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-storage z-type z-interface z-ts">interface</span> <span class="z-entity z-name z-type z-interface z-ts">PromiseRejectedResult</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">status</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>rejected<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">reason</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">any</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">PromiseSettledResult</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">PromiseFulfilledResult</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-entity z-name z-type z-ts">PromiseRejectedResult</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>สังเกตุในโค๊ดตรงนี้จะเห็นได้ว่า <code>result</code> จะมี type เป็น <code>PromiseSettledResult&lt;number&gt;</code> ดังนั้นเราสามารถ guard type (ลดความเป็นไปได้ของ Type) นั่นคือ</p> <ul> <li>ถ้ามี <code>status</code> เท่ากับ <code>"fulfilled"</code> หมายความว่า TypeScript จะรู้ว่ามันคือ Type <code>PromiseFulfilledResult&lt;number&gt;</code> อัตโนมัติ ซึ่งก็ึคือมี key <code>value</code> ที่มี Type เป็น <code>number</code> นั่นเอง</li> <li>แต่ถ้ามี <code>status</code> ไม่เท่ากับ <code>"fulfilled"</code> (Else Condition) หมายความว่า TypeScript จะรู้ว่ามันคือ Type <code>PromiseRejectedResult&lt;number&gt;</code> อัตโนมัติ (เพราะมีโอกาสแค่ 2 แบบ ถ้าไม่ใช่แบบแรก ก็จะเป็นแบบที่ 2 ทันที) ซึ่งก็ึคือมี key <code>reason</code> ที่มี Type เป็น <code>any</code> นั่นเอง</li> </ul> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts">... Loop in `results` array then....</span> </span><span class="z-source z-ts"><span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">result</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">status</span> <span class="z-keyword z-operator z-comparison z-ts">===</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>fulfilled<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Task <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">i</span> <span class="z-keyword z-operator z-arithmetic z-ts">+</span> <span class="z-constant z-numeric z-decimal z-ts">1</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> took <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-object z-ts">result</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">value</span> <span class="z-keyword z-operator z-arithmetic z-ts">/</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> seconds<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-conditional z-ts">else</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Task <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">i</span> <span class="z-keyword z-operator z-arithmetic z-ts">+</span> <span class="z-constant z-numeric z-decimal z-ts">1</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> failed with error: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-object z-ts">result</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">reason</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <h2 id="taw-yaangkh-ngfangkchanthiirannaan">ตัวอย่างของฟังก์ชันที่รันนาน<a class="zola-anchor" href="#taw-yaangkh-ngfangkchanthiirannaan" aria-label="Anchor link for: taw-yaangkh-ngfangkchanthiirannaan" style="visibility: hidden;"></a> </h2> <p>ในตัวอย่างนี้ เราจำลองการทำงานที่ใช้เวลานานด้วยฟังก์ชัน longRunningTask ที่ทำการจำลองการทำงานและผลลัพธ์ที่สามารถเป็นไปได้</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">longRunningTask</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"> <span class="z-variable z-parameter z-ts">taskId</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span></span><span class="z-punctuation z-separator z-parameter z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"> <span class="z-variable z-parameter z-ts">minDurationSec</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span></span><span class="z-punctuation z-separator z-parameter z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"> <span class="z-variable z-parameter z-ts">maxDurationSec</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Promise</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">number</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">minDuration</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-variable z-other z-readwrite z-ts">minDurationSec</span> <span class="z-keyword z-operator z-arithmetic z-ts">*</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">maxDuration</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-variable z-other z-readwrite z-ts">maxDurationSec</span> <span class="z-keyword z-operator z-arithmetic z-ts">*</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">delay</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-math z-ts">Math</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-math z-ts">ceil</span></span><span class="z-meta z-brace z-round z-ts">(</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-math z-ts">Math</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-math z-ts">floor</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-math z-ts">Math</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-math z-ts">random</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-arithmetic z-ts">*</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">maxDuration</span> <span class="z-keyword z-operator z-arithmetic z-ts">-</span> <span class="z-variable z-other z-readwrite z-ts">minDuration</span> <span class="z-keyword z-operator z-arithmetic z-ts">+</span> <span class="z-constant z-numeric z-decimal z-ts">1</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-arithmetic z-ts">+</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"> <span class="z-variable z-other z-readwrite z-ts">minDuration</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-arithmetic z-ts">/</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"> <span class="z-constant z-numeric z-decimal z-ts">1000</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"> <span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-arithmetic z-ts">*</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Task <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">taskId</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> started, will take <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">delay</span> <span class="z-keyword z-operator z-arithmetic z-ts">/</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> seconds<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">let</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-readwrite z-ts">currentTime</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">interval</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-function z-ts">setInterval</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">currentTime</span> <span class="z-keyword z-operator z-assignment z-compound z-ts">+=</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Task <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">taskId</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> in progress, current time: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">currentTime</span> <span class="z-keyword z-operator z-arithmetic z-ts">/</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> seconds<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Promise</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">resolve</span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">reject</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-function z-ts">setTimeout</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-function z-ts">clearInterval</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">interval</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-math z-ts">Math</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-math z-ts">random</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-relational z-ts">&lt;</span> <span class="z-constant z-numeric z-decimal z-ts">0<span class="z-meta z-delimiter z-decimal z-period z-ts">.</span>5</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Task <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">taskId</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> failed<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">reject</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Task <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">taskId</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> failed<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-conditional z-ts">else</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Task <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">taskId</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span> finished<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">resolve</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">delay</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">delay</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></code></pre> <p>ผลลัพธ์จะแสดงข้อความเกี่ยวกับการทำงานที่รันนานและผลลัพธ์ของแต่ละงานที่สำเร็จหรือไม่สำเร็จ</p> <p>ด้วยการใช้ <code>Promise.allSettled</code> ใน TypeScript เราสามารถทำงาน concurrency ได้อย่างมีประสิทธิภาพและปรับให้เหมาะกับลำดับการทำงานที่ต้องการในแต่ละบล็อกของโปรแกรมของเราได้อย่างง่ายดาย</p> <h2 id="taw-yaangkaarthamngaankh-ngopraekrm">ตัวอย่างการทำงานของโปรแกรม<a class="zola-anchor" href="#taw-yaangkaarthamngaankh-ngopraekrm" aria-label="Anchor link for: taw-yaangkaarthamngaankh-ngopraekrm" style="visibility: hidden;"></a> </h2> <pre class="z-code"><code><span class="z-text z-plain">Task 1 started, will take 4 seconds </span><span class="z-text z-plain">Task 2 started, will take 4 seconds </span><span class="z-text z-plain">Task 3 started, will take 5 seconds </span><span class="z-text z-plain">Task 4 started, will take 4 seconds </span><span class="z-text z-plain">Task 5 started, will take 2 seconds </span><span class="z-text z-plain">Task 1 in progress, current time: 1 seconds </span><span class="z-text z-plain">Task 2 in progress, current time: 1 seconds </span><span class="z-text z-plain">Task 3 in progress, current time: 1 seconds </span><span class="z-text z-plain">Task 4 in progress, current time: 1 seconds </span><span class="z-text z-plain">Task 5 in progress, current time: 1 seconds </span><span class="z-text z-plain">Task 5 failed </span><span class="z-text z-plain">Task 1 in progress, current time: 2 seconds </span><span class="z-text z-plain">Task 2 in progress, current time: 2 seconds </span><span class="z-text z-plain">Task 3 in progress, current time: 2 seconds </span><span class="z-text z-plain">Task 4 in progress, current time: 2 seconds </span><span class="z-text z-plain">Task 1 in progress, current time: 3 seconds </span><span class="z-text z-plain">Task 2 in progress, current time: 3 seconds </span><span class="z-text z-plain">Task 3 in progress, current time: 3 seconds </span><span class="z-text z-plain">Task 4 in progress, current time: 3 seconds </span><span class="z-text z-plain">Task 1 finished </span><span class="z-text z-plain">Task 2 finished </span><span class="z-text z-plain">Task 4 failed </span><span class="z-text z-plain">Task 3 in progress, current time: 4 seconds </span><span class="z-text z-plain">Task 3 failed </span><span class="z-text z-plain">-------------------------------------------------- </span><span class="z-text z-plain">All tasks finished </span><span class="z-text z-plain">Task 1 took 4 seconds </span><span class="z-text z-plain">Task 2 took 4 seconds </span><span class="z-text z-plain">Task 3 failed with error: Task 3 failed </span><span class="z-text z-plain">Task 4 failed with error: Task 4 failed </span><span class="z-text z-plain">Task 5 failed with error: Task 5 failed </span></code></pre> 2023-12-01T00:00:00+00:00 2023-12-01T00:00:00+00:00 https://thadaw.com/posts/create-terraform-cloud-variables-via-javascript/ <p>การใช้งาน Terraform Cloud จะต้องใช้ User API Token เพื่อทำการจัดการ Workspace ของคุณ โดยคุณสามารถสร้าง Token ได้ที่ลิงก์ https://app.terraform.io/app/settings/tokens นี้</p> <p>หลังจากที่ได้ User API Token แล้ว คุณต้องมี Workspace ID เพื่อทำการเข้าถึง Workspace ที่ต้องการ โปรดทราบว่า Workspace ที่ใช้ในตัวอย่างนี้</p> <p><img src="https://thadaw.com/posts/create-terraform-cloud-variables-via-javascript/get-workspace-id.png" alt="" /></p> <p>เพื่อสร้างตัวแปรใหม่ใน Workspace โดยใช้ Workspace API ตามลิงก์ https://developer.hashicorp.com/terraform/cloud-docs/api-docs/workspace-variables คุณสามารถทำได้โดยใช้โค้ดต่อไปนี้ที่เขียนด้วย JavaScript และใช้ Axios เพื่อส่งคำขอ:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-variable z-other z-readwrite z-alias z-ts">axios</span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>axios<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">workspaceId</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>ws-1z8PbLVuFdcqqqFR<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">token</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>MY-TOKEN<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">data</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-json z-ts">JSON</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-json z-ts">stringify</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>data<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>type<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>vars<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>attributes<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>key<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>some_key<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>value<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>some_value<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>description<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>some description<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>category<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>terraform<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>hcl<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-language z-boolean z-false z-ts">false</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>sensitive<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-language z-boolean z-false z-ts">false</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">config</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">method</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>post<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">url</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>https://app.terraform.io/api/v2/workspaces/<span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">workspaceId</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>/vars<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">headers</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Content-Type<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>application/vnd.api+json<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Authorization<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Bearer <span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-arithmetic z-ts">+</span> <span class="z-variable z-other z-readwrite z-ts">token</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">data </span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-readwrite z-ts">data</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"></span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-keyword z-control z-trycatch z-ts">try</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">response</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">axios</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">config</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-support z-constant z-json z-ts">JSON</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-json z-ts">stringify</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">response</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">data</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-trycatch z-ts">catch</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">error</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">error</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <p>อย่าลืมแทนค่า <code>workspaceId</code> และ <code>token</code> ด้วยค่าจริงที่คุณได้รับจาก Terraform Cloud นะครับ</p> <p>นอกจากนี้ยังสามารถปรับแต่งค่าต่าง ๆ ในส่วนของตัวแปรที่ต้องการสร้างตามความเหมาะสมของโปรเจคของคุณได้</p> <p>สุดท้าย, หลังจากการส่งคำขอสร้างตัวแปรเสร็จสิ้น, คุณจะได้รับข้อมูลการตอบกลับที่แสดงถึงสถานะการทำงานของคำขอ</p> <p>หวังว่าบทความนี้จะมีประโยชน์สำหรับการจัดการและใช้งาน Terraform Cloud ของคุณครับ!</p> <h2 id="taw-yaangkaaraich-postman">ตัวอย่างการใช้ Postman<a class="zola-anchor" href="#taw-yaangkaaraich-postman" aria-label="Anchor link for: taw-yaangkaaraich-postman" style="visibility: hidden;"></a> </h2> <p><img src="https://thadaw.com/posts/create-terraform-cloud-variables-via-javascript/postman-test-result.png" alt="" /></p> 2023-11-18T00:00:00+00:00 2023-11-18T00:00:00+00:00 https://thadaw.com/posts/beware-circular-generic-params-in-typescript-can-lead-to-unpredictable-types/ <p>บทความนี้จะพาเราสู่โลกที่ลึกลับของ TypeScript และ Generic Params ที่ทำให้โปรแกรมเมอร์เราสามารถเขียนโค้ดที่ยืดหยุ่นและมีประสิทธิภาพได้มากยิ่งขึ้น! 🚀</p> <p><img src="https://thadaw.com/posts/beware-circular-generic-params-in-typescript-can-lead-to-unpredictable-types/summary.png" alt="" /></p> <h2 id="kaaraich-generic-params-ain-typescript">การใช้ Generic Params ใน TypeScript<a class="zola-anchor" href="#kaaraich-generic-params-ain-typescript" aria-label="Anchor link for: kaaraich-generic-params-ain-typescript" style="visibility: hidden;"></a> </h2> <p>ก่อนที่เราจะลุกไปเริ่มต้น มาเริ่มจากการเข้าใจหลักการของ Generic Params กันก่อนนะครับ ใน TypeScript, Generic Params จะช่วยให้เราสร้างโค้ดที่ใช้งานได้กับหลายประเภท โดยที่ไม่ต้องระบุประเภทนั้นๆ ในระหว่างการเขียนโค้ด</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">identity</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">arg</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-variable z-other z-readwrite z-ts">arg</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></code></pre> <p>ในตัวอย่างนี้ <code>T</code> คือ Generic Param ที่เราสามารถใช้กับประเภทใดๆ ก็ได้ โดยที่ไม่ต้องระบุประเภทไว้ล่วงหน้า</p> <p>ตัวอย่างการใช้งาน</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> สร้างตัวแปรแบบ string</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">stringValue</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">identity</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Hello<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ^? const stringValue: &quot;Hello&quot;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> สร้างตัวแปรแบบ number</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">numberValue</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">identity</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-constant z-numeric z-decimal z-ts">42</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ^? const numberValue: 42 </span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> สร้างตัวแปรแบบ object</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">objectValue</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">identity</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">key</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>value<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ^? const objectValue: { key: string; }</span> </span></code></pre> <hr /> <h2 id="kaar-infer-type-ain-function">การ Infer Type ใน Function<a class="zola-anchor" href="#kaar-infer-type-ain-function" aria-label="Anchor link for: kaar-infer-type-ain-function" style="visibility: hidden;"></a> </h2> <p>โดยปกติแล้ว TypeScript สามารถ Infer Type จาก Function Type ได้</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-storage z-type z-interface z-ts">interface</span> <span class="z-entity z-name z-type z-interface z-ts">Context</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">id</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">trackId</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">createEndpoint</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">TOutput</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"> <span class="z-variable z-parameter z-ts">name</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span><span class="z-punctuation z-separator z-parameter z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"> <span class="z-entity z-name z-function z-ts">handler</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">params</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">context</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Context</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span></span> <span class="z-meta z-type z-function z-return z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-entity z-name z-type z-ts">TOutput</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Mock type for Output Return Type</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-entity z-name z-type z-ts">TOutput</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></code></pre> <p>เช่น ในตัวอย่างข้างบน <code>handler</code> จะรับ parameter ที่เป็น handler ที่มี Type แบบนี้</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">params</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">context</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Context</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-variable z-other z-readwrite z-ts">TOutput</span> </span></code></pre> <p>โดยที่เมื่อผู้ใช้งานกำหนด Function ใน <code>handler</code> Return Type ของ <code>handler</code> ตัวนั้น ก็จะได้ Type ของ <code>TOutput</code> เหมือนกัน</p> <p>ในตัวอย่างนี้ มีการส่ง function เข้าไปใน <code>handler</code> params โดยมี Return Type เป็น <code>{ name: string }</code> ดังนั้น <code>createEndpoint</code> ก็สามารถ infer Type ออกมาได้เหมือนกับ Return Type ของ <code>handler</code> เช่นเดียวกัน</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">myEndpoint</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">createEndpoint</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>helloWorld<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">context</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Running on context id: <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-object z-ts">context</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">id</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>helloWorld<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>เมื่อเราเช็ค Type ของ <code>myEndpoint</code> ดูก็พบว่า Type จะตรงกับ Return Type กับ Handler เลย</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-variable z-other z-readwrite z-ts">myEndpoint</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ^? const myEndpoint: {</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> name: string;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> }</span> </span></code></pre> <h2 id="kaareriiykaichngaanaebb-circular">การเรียกใช้งานแบบ Circular<a class="zola-anchor" href="#kaareriiykaichngaanaebb-circular" aria-label="Anchor link for: kaareriiykaichngaanaebb-circular" style="visibility: hidden;"></a> </h2> <p>แต่มีข้อควรระวังในการใช้ Generic Params เวลาที่เราเรียกใช้งานแบบ Circular เช่นตัวอย่างนี้ <code>TOutput</code> เป็น Generic Params ที่จะ Infer Type มาจาก Return Type ของ <code>handler</code> ออกมา</p> <p>ตัวอย่างการเรียก Generic Params แบบ Circular</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">createEndpoint</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">TOutput</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"> <span class="z-variable z-parameter z-ts">name</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span><span class="z-punctuation z-separator z-parameter z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"> <span class="z-entity z-name z-function z-ts">handler</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">params</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> เพิ่ม TOutput ลงไปเพิ่มหลังจากที่ Infer Type Return แล้ว</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">output</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">TOutput</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">context</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Context</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"><span class="z-meta z-object z-type z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span></span> <span class="z-meta z-type z-function z-return z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-entity z-name z-type z-ts">TOutput</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-meta z-type z-annotation z-ts"></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Mock type for Output Return Type</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-entity z-name z-type z-ts">TOutput</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts">... const myEndpoint = createEndpoint(...)</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-variable z-other z-readwrite z-ts">myEndpoint</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ^? const myEndpoint: unknown</span> </span></code></pre> <p>โดยที่เมื่อเราพยายามใส่ <code>TOutput</code> ลงไปใน Type ของ <code>handler</code> ที่แท้จริงแล้ว Type จะมาจาก Return Type แล้ว Infer ออกมา แต่กลับ มีการเรียก Type Infer จาก Params ของ <code>handler</code> ด้วย กลับกลายเป็นว่า TypeScript ไม่สามารถคาดเดา Type ที่ถูกต้องกันได้ เพราะต่างฝ่ายต่างเรียกหากันเอง จึงทำให้ <code>myEndpoint</code> มีค่าเป็น <code>unknown</code> ไปเลย</p> <p>หวังว่าจะเป็นประโยชน์นะครับ แล้วพบกันใหม่ สวัสดีครับ</p> <h2 id="thamaimthuengeriiykwaa-circular-problem">ทำไมถึงเรียกว่า Circular Problem<a class="zola-anchor" href="#thamaimthuengeriiykwaa-circular-problem" aria-label="Anchor link for: thamaimthuengeriiykwaa-circular-problem" style="visibility: hidden;"></a> </h2> <blockquote> <p>ผมได้อธิบายไว้ใน <a rel="nofollow noreferrer" href="https://www.facebook.com/photo?fbid=827932616003068&amp;set=a.486562490140084">Post ของ Facebook ของเพจ ThaiType</a> และลูกเพจ คุณ Kasama Chenkaow ได้อธิบายได้ดีเลยทีเดียว และผมได้อธิบายว่าถึงผมใช้คำว่า Circular Problem</p> </blockquote> <p><img src="https://thadaw.com/posts/beware-circular-generic-params-in-typescript-can-lead-to-unpredictable-types/why-circular.jpg" alt="" /></p> <p>โดยส่วนตัวผมคิดว่าเรียกกำหนด <code>createEndpoint</code> แบบไม่ระบุ Generic Params มันจะ Infer Generic Type มาจาก Param ที่ใส่เข้าไปใน Function ถูกมั้ยครับ</p> <p>ดังนั้นเราก็จึงสามารถระบุ Generic Type ของ <code>createEndpoint</code> โดยการใส่ให้มัน เช่น <code>createEndpoint&lt;{ title: string }&gt;</code> แต่ถ้า Param ที่ใส่มา Type ไม่ตรง TypeScript ก็ TypeError ได้ ซึ่งก็เป็นเรื่องปกติ ทีนี้มาดูสาเหตุที่ผลถึงเรียกมันว่า Circular Issues กันครับ (ผมอาจจะเรียกไม่ถูกก็ได้ นะครับ ถ้าผิดก็ขออภัย) แต่ถ้าเราดูจากลำดับการ Infer Type ของ Generic Params เราจะเห็นว่า มันเป็นลำดับ 1,2,3 ตามในรูป ใช่มั้ยครับ</p> <p>ในข้อที่ 3. มันเกิด Conflict เนื่องด้วยมาจากที่มาจากการ Infer Type มาจากคนละ Source กัน</p> <p>ในข้อ 3. Infer Type จะมาจากการกำหนด Type ที่รู้ล่วงหน้ามาก่อนแล้วว่าจะมี Type อะไรอยู่ ส่วนข้อ 2. จะ Infer Type มาจากการที่เราใส่ Params ลงไปใน function ของ Generics เพื่อให้ TypeScript คาดเดา Type</p> <p>จากเหตุผลที่ว่า ทั้งข้อ 2,3 มาจาก source คนทิศทางกัน และในเมื่อมันมาบนจบกัน ซึ่งคือข้อ 2 จะ infer ไปหาข้อ 3. และข้อ 3. ก็จะ infer ไปหาข้อ 2.(ในกรณีที่ไม่ได้ระบุ Generic Type ให้กับ function ล่วงหน้าไว้ก่อน เช่น <code>createEndpoint(..)</code>)</p> <p>จากเหตุการดังกล่าวทำให้เกิดสิ่งที่เรียกว่า Circular Generic Params (จริงๆ อาจจะมีคำที่ดีกว่านี้ แต่ผมยังคิดคำที่ดีกว่านี้ไม่ออก ซึ่งอาจจะเป็นคำอื่นก็ได้)</p> <p>จึงเป็นที่มาของบทความนี้ครับ ว่าต้องการสื่อสารออกไปว่า บางครั้งเรามีการระบุ Type ของ Generic แบบ อ้างอิง Source เดียวกัน ซึ่ง TypeScript มีการ Infer Type แบบ Declarative Language ซึ่งเป็น common-problem ในทุกภาษา Declarative อยู่แล้วที่เราจะเจอ เช่นผมเขียน Terraform ผมก็ต้อง Avoid จุดๆ นี้ครบ</p> <p>แต่ถ้าหากมีคำอื่นเรียกปรากฏการณ์นี้ที่ดีกว่า Circular ก็รบกวนแนะนำหน่อยครับ พอดีผมยืมคำมาจาก Error ของ Terraform ที่สื่อความหมายได้ตรงไปตรงมาดี</p> 2023-09-20T00:00:00+00:00 2023-09-20T00:00:00+00:00 https://thadaw.com/posts/azure-functions-v4-weird-part-ep1/ <p>Welcome to the first episode of our "Azure Functions Node.js v4 with TypeScript Weird Part" series. In this series, we'll dive into some intriguing nuances and challenges you might come across while working with Azure Functions in Node.js version 4, especially when using TypeScript. In this episode, we'll explore a type-safety issue that arises when dealing with input and output bindings and provide a practical workaround.</p> <h2 id="the-official-documentation">The Official Documentation<a class="zola-anchor" href="#the-official-documentation" aria-label="Anchor link for: the-official-documentation" style="visibility: hidden;"></a> </h2> <p><a rel="nofollow noreferrer" href="https://www.npmjs.com/package/@azure/functions/v/4.0.0-alpha.12">Azure Functions version 4.0.0-alpha.12</a> introduces a host of exciting features and improvements. However, as you explore this version, you might encounter a seemingly peculiar issue when working with input and output bindings. Let's examine the official documentation to get a better understanding.</p> <h3 id="input-binding">Input Binding<a class="zola-anchor" href="#input-binding" aria-label="Anchor link for: input-binding" style="visibility: hidden;"></a> </h3> <p>According to the official documentation, you can define an input binding as follows:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">blobInput</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">input</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">storageBlob</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">connection</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>AzureWebJobsStorage<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">path</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>demo-input/xxx.txt<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> To retrieve the value in the handler function, you can use:</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">blobInputValue</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">context</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">extraInputs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">get</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">blobInput</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h3 id="output-binding">Output Binding<a class="zola-anchor" href="#output-binding" aria-label="Anchor link for: output-binding" style="visibility: hidden;"></a> </h3> <p>Similarly, for output bindings:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">blobOutput</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">output</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">storageBlob</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">connection</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>AzureWebJobsStorage<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">path</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>demo-output/xxx-{rand-guid}.txt<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> To set the value in the handler function, you can use:</span> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">context</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">extraOutputs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">set</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">blobOutput</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">blobInputValue</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h2 id="the-type-safety-issue">The Type-Safety Issue<a class="zola-anchor" href="#the-type-safety-issue" aria-label="Anchor link for: the-type-safety-issue" style="visibility: hidden;"></a> </h2> <p>At first glance, everything seems fine. However, there's a catch - a lack of type-safety. The issue becomes evident when you attempt to assign a name to your input or output bindings, like so:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">blobInput</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">input</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">storageBlob</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>MyBlobInput<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Error: &#39;name&#39; does not exist in type &#39;StorageBlobInputOptions&#39;.</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">connection</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>AzureWebJobsStorage<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">path</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>demo-input/xxx.txt<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">blobOutput</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">output</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">storageBlob</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>MyBlobOutput<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Error: &#39;name&#39; does not exist in type &#39;StorageBlobOptions&#39;.</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">connection</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>AzureWebJobsStorage<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">path</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>demo-output/xxx-{rand-guid}.txt<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>As you can see, TypeScript complains that 'name' does not exist in the type 'StorageBlobInputOptions' even though the documentation suggests using it. This can be quite frustrating for developers looking to add some meaningful names to their bindings.</p> <h3 id="the-workaround">The Workaround<a class="zola-anchor" href="#the-workaround" aria-label="Anchor link for: the-workaround" style="visibility: hidden;"></a> </h3> <p>But don't worry, there's a workaround that allows you to use 'name' and call it later in the handler function while maintaining type-safety. Let's see how it's done:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-alias z-ts">app</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-alias z-ts">input</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-alias z-ts">InvocationContext</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-alias z-ts">output</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-alias z-ts">HttpRequest</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-alias z-ts">StorageBlobInputOptions</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-alias z-ts">StorageBlobOptions</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@azure/functions<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">blobInput</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">input</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">storageBlob</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>MyBlobInput<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">connection</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>AzureWebJobsStorage<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">path</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>demo-input/xxx.txt<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-entity z-name z-type z-ts">StorageBlobInputOptions</span> <span class="z-keyword z-operator z-type z-ts">&amp;</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">name</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span> </span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">blobOutput</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">output</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">storageBlob</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>MyBlobOutput<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">connection</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>AzureWebJobsStorage<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">path</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>demo-output/xxx-{rand-guid}.txt<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-entity z-name z-type z-ts">StorageBlobOptions</span> <span class="z-keyword z-operator z-type z-ts">&amp;</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">name</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span> </span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">app</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">get</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>copyBlob<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">authLevel</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>anonymous<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">extraInputs</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-variable z-other z-readwrite z-ts">blobInput</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">extraOutputs</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-variable z-other z-readwrite z-ts">blobOutput</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-entity z-name z-function z-ts">handler</span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">req</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">HttpRequest</span></span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">context</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">InvocationContext</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">context</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Storage queue function processed work item:<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">req</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">blobInputValue</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">context</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">extraInputs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">get</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>MyBlobInput<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">context</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">extraOutputs</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">set</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>MyBlobOutput<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">blobInputValue</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">body</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Hello, <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">blobInputValue</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>!<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>By using type assertions (as) to extend the StorageBlobInputOptions and StorageBlobOptions types with the 'name' property, we can now use 'name' and maintain type-safety in our code.</p> <h2 id="in-conclusion">In Conclusion<a class="zola-anchor" href="#in-conclusion" aria-label="Anchor link for: in-conclusion" style="visibility: hidden;"></a> </h2> <p>In this episode of "Azure Functions Node.js v4 with TypeScript Weird Part," we've explored a type-safety issue related to defining names for input and output bindings. While this issue may appear unusual, we've provided a practical workaround that allows you to use the 'name' property as intended without compromising TypeScript's valuable type-checking features.</p> <p>As I prepare to submit your Pull Request and engage in discussions with the project's author, Keep an eye out for upcoming episodes in this series, where we'll continue to investigate and resolve other peculiar aspects of working with Azure Functions in Node.js v4 and TypeScript. Happy coding, fellow geeks!</p> 2023-09-15T00:00:00+00:00 2023-09-15T00:00:00+00:00 https://thadaw.com/posts/typecheck-schemas-on-existing-types/ <p>วันนี้เราจะมาพูดถึงวิธีการในการตรวจสอบความเข้ากันได้ระหว่าง <a rel="nofollow noreferrer" href="https://github.com/colinhacks/zod">Zod</a> Schema และ TypeScript อย่างสะดวกและรวดเร็ว ไอเดียดีๆ นี้มาจาก <a rel="nofollow noreferrer" href="https://github.com/colinhacks">@colinhacks</a> ซึ่งเป็นคนสร้าง Zod โดยการใช้ Zod และอยากแบ่งปันให้ทุกคน</p> <p>โดยปกติแล้ว เราบ่งบอกประเภทของข้อมูลด้วย TypeScript เพื่อให้รู้ว่าข้อมูลที่เราใช้เป็นแบบไหน แต่ถ้าเราใช้ Zod Schema เพื่อทำการตรวจสอบข้อมูล มีวิธีหนึ่งที่จะทำให้เราสามารถตรวจสอบความเข้ากันได้ระหว่าง Zod Schema และ TypeScript ได้อย่างมีประสิทธิภาพ และเรียบง่าย นั่นคือการใช้ฟังก์ชัน <code>schemaForType</code> ตามตัวอย่างด้านล่าง:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">z</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>zod<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Dog</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">name</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">neutered</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">boolean</span></span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"></span><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">schemaForType</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">TSchema</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">TZodSchema</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-module z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-ts">ZodType</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">TSchema</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-support z-type z-primitive z-ts">any</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">arg</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">TZodSchema</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-variable z-other z-readwrite z-ts">arg</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ใช้งานได้ประมาณนี้:</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">dog</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">schemaForType</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">Dog</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">(</span> </span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">object</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> name: z.string(), </span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">neutered</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">boolean</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ❌ Property &#39;name&#39; is missing in type </span> </span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> &#39;{ neutered: boolean; }&#39; but required in type &#39;Dog&#39;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>การทำงานของฟังก์ชันซ้อนกันนี้อาจดูแปลก ๆ แต่มันเป็นจำเป็น เพราะมีระดับการใช้ Generic สองระดับ</p> <ol> <li>TypeScript ที่ต้องการ <code>TSchema</code></li> <li>Schema ที่สร้างขึ้นอย่างอัตโนมัติ <code>TZodSchema</code> ซึ่งถูก จำกัดโดย <code>extends z.ZodType&lt;TSchema, any, any&gt;</code></li> </ol> <p>อย่างไรก็ตาม คุณไม่ต้องกังวลเกี่ยวกับ <code>any</code> ที่เหลือสองตัวนั้น เนื่องจากเรากำลังใช้ <code>TSchema</code> เป็น Type hint โดยตรง นั่นหมายความว่าเราต้องใช้ฟังก์ชันเพิ่มเติมที่ให้เราสามารถตรวจสอบประเภทของ <code>TZodSchema</code> ได้ ซึ่งนี้เป็นเพราะ TypeScript จำเป็นต้องระบุพารามิเตอร์ Generic ทั้งหมดโดยชัดเจนหรือให้มันถูก Infer ทั้งหมด ไม่สามารถเลือกหรือผสมผสานได้ แม้ว่ามีข้อเสนอรองเรื่องนี้อยู่ <a rel="nofollow noreferrer" href="https://github.com/microsoft/TypeScript/issues/26242">microsoft/TypeScript#26242</a> ในเดียวนี้</p> <p>ดังนั้น เราสามารตรวจสอบให้ Zod schemas ตรงกับ Type ที่ประกาศไว้อยู่แล้ว คุณสามารถใช้ฟังก์ชัน <code>schemaForType</code> เพื่อรักษาความ Consistency ในโปรเจคของคุณอีกด้วย! ขอบคุณที่ติดตามบทความนี้ครับและขอให้สนุกกับการเขียนโปรแกรมนะจ๊ะ</p> <h2 id="ref">Ref<a class="zola-anchor" href="#ref" aria-label="Anchor link for: ref" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://github.com/colinhacks/zod/issues/372#issuecomment-826380330">colinhacks/zod Issuse#372</a></li> <li>ใช้ ChatGPT ช่วยเรียบเรียงด้วย</li> </ul> 2023-09-12T00:00:00+00:00 2023-09-12T00:00:00+00:00 https://thadaw.com/posts/typescript-generic-data-validation/ <p>วันนี้เราจะมาเรียนรู้วิธีการสร้างฟังก์ชั่นทั่วไปสำหรับเครื่องมือตรวจสอบข้อมูลใน TypeScript กันครับ!</p> <p>ในรหัสนี้เราได้สร้างฟังก์ชั่นและประเภทข้อมูลที่ชื่อ <code>AcceptedParser</code> ขึ้นมาก่อน ซึ่งสามารถรับข้อมูลชนิด <code>T</code> และมีสองรูปแบบที่ยอมรับคือ:</p> <p>ฟังก์ชั่นที่รับ <code>input</code> และคืนค่าข้อมูลประเภท <code>T</code> จากข้อมูลที่รับเข้ามา. อ็อบเจ็กต์ที่มีเมธอด <code>parse</code> ที่รับ <code>input</code> และคืนค่าข้อมูลประเภท T จากข้อมูลที่รับเข้ามา.</p> <blockquote> <p>ขอบคุณ AcceptedParser จาก <a rel="nofollow noreferrer" href="https://github.com/total-typescript/untypeable/blob/main/src/types.ts">untypeable</a></p> </blockquote> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">AcceptedParser</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-meta z-type z-paren z-cover z-ts"><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">input</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">unknown</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span></span> <span class="z-meta z-type z-function z-return z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-entity z-name z-type z-ts">T</span></span><span class="z-meta z-brace z-round z-ts">)</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-entity z-name z-function z-ts">parse</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">input</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">unknown</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span></span> <span class="z-meta z-type z-function z-return z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-entity z-name z-type z-ts">T</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>หลังจากนั้นเราได้สร้างคลาส <code>Entity</code> ซึ่งใช้สำหรับการจัดการข้อมูลของเรา</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">Entity</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">TSchema</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-storage z-type z-ts">constructor</span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-storage z-modifier z-ts">public</span> <span class="z-variable z-parameter z-ts">schema</span><span class="z-keyword z-operator z-optional z-ts">?</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">AcceptedParser</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">TSchema</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-builtin z-ts">undefined</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">parse</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">data</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">unknown</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">TSchema</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-builtin z-ts">undefined</span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">schema</span> <span class="z-keyword z-operator z-logical z-ts">&amp;&amp;</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>parse<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-expression z-in z-ts">in</span> <span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">schema</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">schema</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">parse</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">data</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">schema</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">schema</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">data</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-variable z-other z-readwrite z-ts">data</span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-entity z-name z-type z-ts">TSchema</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <p>คลาสนี้ยังรับ <code>schema</code> ที่เป็น <code>AcceptedParser</code> ใน constructor ของมันด้วย และมีเมธอด <code>parse</code> ที่รับข้อมูล <code>data</code> และตรวจสอบ <code>schema</code> ว่ามี parse หรือไม่ ถ้ามีเราใช้ <code>parse</code> จาก <code>schema</code> นี้เพื่อแปลงข้อมูล <code>data</code> และคืนค่าออกมา ถ้าไม่มีเราใช้ <code>schema</code> โดยตรงเพื่อแปลงข้อมูล data และคืนค่าออกมา.</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">InferEntity</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Entity</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>นอกจากนี้เรายังสร้าง <code>InferEntity</code> ซึ่งเป็นประเภทที่ใช้สำหรับการดึงประเภทข้อมูลจาก <code>Entity</code> โดยอัตโนมัติ แต่ถ้าไม่ใช่ <code>Entity</code> ก็จะคืนค่า never.</p> <p>ต่อมาเรามาดูตัวอย่างการใช้งาน:</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Consumer</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-variable z-other z-readwrite z-alias z-ts">z</span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>zod<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">user</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Entity</span><span class="z-meta z-brace z-round z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-new z-expr z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">object</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">string</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">email</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">z</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">string</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">email</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-new z-expr z-ts"><span class="z-meta z-brace z-round z-ts">)</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">UserEntity</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">InferEntity</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-keyword z-operator z-expression z-typeof z-ts">typeof</span> <span class="z-entity z-name z-type z-ts">user</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">data</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">user</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">parse</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>John<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">email</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span><span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Type will be</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> const data: {</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> name: string;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> email: string;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> } | undefined</span> </span></code></pre> <p>ในตัวอย่างนี้เราสร้าง <code>Entity</code> ของผู้ใช้ (<code>UserEntity</code>) โดยใช้ Zod เป็น <code>schema</code> ที่กำหนดข้อมูลของผู้ใช้ และเราใช้ <code>parse</code> เพื่อแปลงข้อมูลที่เราส่งเข้ามาใน <code>data</code> กับ <code>schema</code> ของเรา ในที่นี้เราจะได้ผลลัพธ์ที่เป็น <code>UserEntity</code> หรือ <code>never</code> ถ้าไม่สามารถแปลงข้อมูลได้.</p> <p>หรือเราสามารถประกาศแค่ Generic ก็ได้โดยไม่ต้องใช้ Zod</p> <pre data-lang="typescript" class="language-typescript z-code"><code class="language-typescript" data-lang="typescript"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">user</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Entity</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">name</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span> </span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">data</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">user</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">parse</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>John<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Type will be</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> const data: {</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> name: string;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> } | undefined</span> </span></code></pre> <p>หวังว่าบทความนี้จะช่วยให้คุณเข้าใจการสร้างฟังก์ชั่นทั่วไปสำหรับเครื่องมือตรวจสอบข้อมูลใน TypeScript ได้เพิ่มเติมครับ!</p> <p><a rel="nofollow noreferrer" href="https://www.typescriptlang.org/play?noImplicitReturns=false#code/PTAEBkEsCMChZKAFgFxQBwM4C4QHNIUkBXaAOgGMB7AW2BSpQEMAbAWhQE90BTTCgE6R0KYMQB2XXk2gsewWVWjAaTSOOCYBFetz5kUmeDwAe6KgJSgpPUAEEKFHiJ4ATAApMBmHgIA8ACoAfKAAvLCgoAA+oAAUseroxCjYoBIA1uJUAO7iAJRhIQF5EdGgAN6lkZHoXj6pCeJJKWnimTn5haABANxVoAC+fbCm5pagFCxMmJigAKKShJyBAMoUSDyqIZWR1OKYKALEFAwCsUmykBSg-BuqAPypDk4uHnW+q+ubTCExEq48ABm6jcBXKA3gNXesVcTGYqQyWVyeVSATWdyYZX+QJBrgq-UggLiREgmDIt2+oAAZFTQAByWreHh00DqaxIUnkr6qMH9SICHgoYgCcTszkU1RkRk+GFwph5PrVQYEomxElkiXy-FK-mC4Wi9VcjGy5gK-oQpUCoUi0Cw5igabddHfRXKiEjMwWKw2UAASXEgN8CxQS0CIVC3VAphQPHErlmwdD6kDAlAAFUQvd06BUuIeAA3XzDBBgADCVH2xBovngkBoYysAC9QICBLR6Y2qK46cM9gc0j5UxG89l5osuLFSo2yEoAFY8E6xHbVcRMaupacHITiPCxPIAGn630gLA35MO6l3eTIx5Ye8PkQGJTNHob1j06cHia4YT9AaD47LDYVBEsQg5BL2Fb9namIRmBvhStCy6ruu9IAFJUEg4h0g+UaqCeqR0jhsBPn0iABB+2QniwoDQDwJYTFBVgwaklSIEqKE8KkW6XmRYBKre3EXjufGDFicY4nmrhAA">playground</a></p> <h2 id="aanephim">อ่านเพิ่ม<a class="zola-anchor" href="#aanephim" aria-label="Anchor link for: aanephim" style="visibility: hidden;"></a> </h2> <p>ลองดูตัวอย่างการรับ Data Validation หลายๆ เจ้าดูนะ โดยไม่ผูกติด</p> <ul> <li><a rel="nofollow noreferrer" href="https://github.com/decs/typeschema">TypeSchema</a> -- Universal adapter for schema validation</li> <li><a rel="nofollow noreferrer" href="https://trpc.io/">tRPC</a>'s <a rel="nofollow noreferrer" href="https://trpc.io/docs/server/validators">input &amp; output validators</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/total-typescript/untypeable/blob/main/src/types.ts">untypeable</a></li> </ul> 2023-08-20T00:00:00+00:00 2023-08-20T00:00:00+00:00 https://thadaw.com/posts/backup-database-prepare-migration-script-sql-server-via-command-line/ <blockquote> <p>หมายเหตุ บทความนี้ Draft ไว้ตั้งแต่วันที่ Sep 20, 2021 ถ้ามีเนื้อหาไหนที่ไม่ได้ Up-to-date ก็สามารถแจ้งได้เลยนะครับ</p> </blockquote> <p>สวัสดีครับ! วันนี้เรามีข้อมูลน่าสนใจเกี่ยวกับโปรแกรม <a rel="nofollow noreferrer" href="https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver15">SQL Server Management Studio (SSMS)</a> และ <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/sql/ssdt/sql-server-data-tools?view=sql-server-ver16">SQL Server Data Tools (SSDT)</a> ที่จะมาแนะนำให้คุณรู้จักเพิ่มเติมเกี่ยวกับวิธีการใช้งานเบื้องต้น สำหรับการจัดการฐานข้อมูล SQL Server อย่างสะดวกและง่ายดายโดยไม่ต้องใช้คำสั่ง command line อันซับซ้อนนะครับ!</p> <p>เริ่มต้นจาก SQL Server Management Studio (SSMS) ซึ่งเป็นโปรแกรมที่ช่วยให้คุณจัดการกับข้อมูลใน SQL Server ได้อย่างสะดวก คุณสามารถดาวน์โหลด SSMS ได้จาก ที่นี่ นะครับ.</p> <p>นอกจากนี้ยังมี SQL Server Data Tools (SSDT) ที่มาช่วยเพิ่มความสะดวกในการจัดการฐานข้อมูล SQL Server ด้วยครับ โดยคุณสามารถตั้งค่าสภาพแวดล้อมการทำงานของ SSDT ได้ที่ <code>C:\Program Files\Microsoft SQL Server\150\DAC\bin</code> นะครับ.</p> <p>ต่อไปเรามาดูวิธีการ Export ข้อมูลและ Schema กันครับ คุณสามารถทำเหมือนกับการ Export a Data-tier Application ใน SSMS ได้โดยใช้คำสั่ง PowerShell ซึ่ง Extension ไฟล์ที่ได้จะเป็น <code>.bacpac</code> ดังนี้:</p> <pre data-lang="powershell" class="language-powershell z-code"><code class="language-powershell" data-lang="powershell"><span class="z-source z-powershell">sqlpackage <span class="z-keyword z-operator z-assignment z-powershell">/</span>Action:Export <span class="z-keyword z-operator z-assignment z-powershell">/</span>SourceConnectionString:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>Data Source=.\SQLEXPRESS; Initial Catalog=TestDB; Integrated Security=True<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> <span class="z-keyword z-operator z-assignment z-powershell">/</span>TargetFile:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>D:\auto-deployment\database_backup.bacpac<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> </span></code></pre> <p>หลังจากนั้นถ้าคุณต้องการ Import ข้อมูลนี้เข้าสู่ระบบอื่น ๆ คุณสามารถใช้คำสั่ง PowerShell ต่อไปนี้:</p> <pre data-lang="powershell" class="language-powershell z-code"><code class="language-powershell" data-lang="powershell"><span class="z-source z-powershell">sqlpackage <span class="z-keyword z-operator z-assignment z-powershell">/</span>Action:Import <span class="z-keyword z-operator z-assignment z-powershell">/</span>TargetConnectionString:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>Data Source=.\SQLEXPRESS; Initial Catalog=Imported_TestDB; Integrated Security=True<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> <span class="z-keyword z-operator z-assignment z-powershell">/</span>SourceFile:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>D:\auto-deployment\database_backup.bacpac<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> </span></code></pre> <p>นอกจากนี้ยังมีการดึง Schema อย่างเดียวไม่รวม Data ไปใช้งานด้วยคำสั่ง Extract โดย Extension ไฟล์ที่ได้จะเป็น `.dacpac`` นะครับ:</p> <pre data-lang="powershell" class="language-powershell z-code"><code class="language-powershell" data-lang="powershell"><span class="z-source z-powershell">sqlpackage <span class="z-keyword z-operator z-assignment z-powershell">/</span>Action:Extract <span class="z-keyword z-operator z-assignment z-powershell">/</span>SourceConnectionString:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>Data Source=.\SQLEXPRESS; Initial Catalog=TestDB; Integrated Security=True<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> <span class="z-keyword z-operator z-assignment z-powershell">/</span>TargetFile:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>D:\auto-deployment\database_schema.dacpac<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> </span></code></pre> <p>หากคุณต้องการสร้างรายงาน Diff Report ระหว่าง Schema คุณสามารถใช้คำสั่ง DeployReport ดังนี้ โดย SourceFile ต้องเป็น <code>dacpac</code>:</p> <pre data-lang="powershell" class="language-powershell z-code"><code class="language-powershell" data-lang="powershell"><span class="z-source z-powershell">sqlpackage <span class="z-keyword z-operator z-assignment z-powershell">/</span>Action:DeployReport <span class="z-keyword z-operator z-assignment z-powershell">/</span>OutputPath:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>D:\auto-deployment\report.xml<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> <span class="z-keyword z-operator z-assignment z-powershell">/</span>OverwriteFiles:True <span class="z-keyword z-operator z-assignment z-powershell">/</span>SourceFile:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>D:\auto-deployment\TestDatabase\Snapshots\TestDatabase_20210916_17-58-02.dacpac<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> <span class="z-keyword z-operator z-assignment z-powershell">/</span>TargetConnectionString:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>Data Source=.\SQLEXPRESS; Initial Catalog=TestDB; Integrated Security=True<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> </span></code></pre> <p>และสุดท้าย หากคุณต้องการสร้างสคริปต์สำหรับการเคลื่อนย้ายข้อมูล คุณสามารถใช้คำสั่ง Script ดังนี้:</p> <pre data-lang="powershell" class="language-powershell z-code"><code class="language-powershell" data-lang="powershell"><span class="z-source z-powershell">sqlpackage <span class="z-keyword z-operator z-assignment z-powershell">/</span>Action:Script <span class="z-keyword z-operator z-assignment z-powershell">/</span>OutputPath:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>D:\auto-deployment\migration.sql<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> <span class="z-keyword z-operator z-assignment z-powershell">/</span>OverwriteFiles:True <span class="z-keyword z-operator z-assignment z-powershell">/</span>SourceFile:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>D:\auto-deployment\TestDatabase\Snapshots\TestDatabase_20210916_17-58-02.dacpac<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> <span class="z-keyword z-operator z-assignment z-powershell">/</span>TargetConnectionString:<span class="z-string z-quoted z-double z-powershell"><span class="z-punctuation z-definition z-string z-begin z-powershell">&quot;</span>Data Source=.\SQLEXPRESS; Initial Catalog=TestDB; Integrated Security=True<span class="z-punctuation z-definition z-string z-end z-powershell">&quot;</span></span> </span></code></pre> <h2 id="aehlng-aang-ing-aelasueksaaephimetim">แหล่งอ้างอิง และศึกษาเพิ่มเติม<a class="zola-anchor" href="#aehlng-aang-ing-aelasueksaaephimetim" aria-label="Anchor link for: aehlng-aang-ing-aelasueksaaephimetim" style="visibility: hidden;"></a> </h2> <p><a rel="nofollow noreferrer" href="https://www.mssqltips.com/sqlservertip/4759/sql-server-database-schema-synchronization-via-sqlpackageexe-and-powershell/">https://www.mssqltips.com/sqlservertip/4759/sql-server-database-schema-synchronization-via-sqlpackageexe-and-powershell/</a></p> <p><a rel="nofollow noreferrer" href="https://stackoverflow.com/questions/20673516/command-line-api-for-schema-compare-in-ssdt-sql-server-database-project">https://stackoverflow.com/questions/20673516/command-line-api-for-schema-compare-in-ssdt-sql-server-database-project</a></p> <p>How to: Create a New Database Project: <a rel="nofollow noreferrer" href="https://docs.microsoft.com/en-us/sql/ssdt/how-to-create-a-new-database-project?view=sql-server-ver15">https://docs.microsoft.com/en-us/sql/ssdt/how-to-create-a-new-database-project?view=sql-server-ver15</a></p> 2023-08-19T00:00:00+00:00 2023-08-19T00:00:00+00:00 https://thadaw.com/posts/how-to-hide-github-action-secrets/ <blockquote> <p>หมายเหตุ บทความนี้ Draft ไว้ตั้งแต่วันที่ Apr 11, 2022 ถ้ามีเนื้อหาไหนที่ไม่ได้ Up-to-date ก็สามารถแจ้งได้เลยนะครับ</p> </blockquote> <p>ปัญหาหลักที่เราพบคือการอ่านค่า Secrets จากไฟล์ที่เข้ารหัสแบบ SOPS และการซ่อนค่านี้ เรามีวิธีการแก้ไขในตัวอย่างต่อไปนี้ครับ</p> <p>ในตัวอย่างนี้ เราจะใช้ไฟล์ README.md มาเป็นตัวอย่าง ซึ่งเป็นไฟล์ปกติ แล้วเราจะนำค่าของไฟล์นี้มาซ่อน</p> <pre data-lang="yml" class="language-yml z-code"><code class="language-yml" data-lang="yml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">steps</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/checkout@v2</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Mask Password</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">mark_password</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">run</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-keyword z-control z-flow z-block-scalar z-literal z-yaml">|</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> secret=`cat &quot;README.md&quot;` </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> echo &quot;::add-mask::$secret&quot; </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> echo &quot;::set-output name=password::$secret&quot; </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"></span> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">run</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">echo &quot;${{ steps.mark_password.outputs.password }}&quot;</span> </span></code></pre> <p>ผลลัพธ์จากการทำงานข้างบนจะเป็นดังรูปภาพต่อไปนี้:</p> <p><img src="https://thadaw.com/posts/how-to-hide-github-action-secrets/screenshot.png" alt="image" /></p> <p>เราคิดว่าในขั้นตอนที่ใช้ `add-mask`` น่าจะเป็นวิธีให้ค่าที่เราซ่อนแสดงผลในคอนโซลได้ แบบที่เราไม่เห็นค่าจริงๆ</p> <p>หวังว่าข้อมูลนี้จะมีประโยชน์และช่วยให้ท่านสามารถแก้ปัญหาที่เจอได้ครับ</p> <p>อ้างอิง: https://github.com/actions/runner/issues/475#issuecomment-1092734499</p> 2023-08-18T00:00:00+00:00 2023-08-18T00:00:00+00:00 https://thadaw.com/posts/uptime-kuma-on-azure-virtual-machine/ <blockquote> <p>หมายเหตุ บทความนี้ Draft ไว้ตั้งแต่วันที่ Dec 21, 2022 ถ้ามีเนื้อหาไหนที่ไม่ได้ Up-to-date ก็สามารถแจ้งได้เลยนะครับ</p> </blockquote> <p>สวัสดีครับเพื่อนๆ ผู้อ่านทุกท่านที่กำลังมองหาวิธีการตั้งค่า Uptime Kuma บน Azure Virtual Machine ในบทความนี้เราจะมาแนะนำขั้นตอนการทำงานให้รู้เรื่องและเข้าใจง่ายๆ พร้อมกันนะครับ</p> <p>เมื่อคุณพยายามติดตั้ง Uptime Kuma บน Azure App Service โดยใช้ Azure Files แล้ว คุณอาจพบข้อผิดพลาดเช่นนี้ <strong><a rel="nofollow noreferrer" href="https://github.com/louislam/uptime-kuma/issues/1096">ดูรายละเอียดเพิ่มเติมที่ uptime-kuma#1096</a></strong></p> <pre class="z-code"><code><span class="z-text z-plain">vbnetCopy code </span><span class="z-text z-plain">[Error: PRAGMA journal_mode = WAL - SQLITE_BUSY: database is locked] </span></code></pre> <p>เมื่อลองใช้งาน Azure App Service กับ Kuma Uptime จะพบว่า Kuma ต้องการ SQLite ในรูปแบบที่เป็น local เท่าที่อ่านจาก <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/azure/app-service/configure-connect-to-azure-storage?tabs=portal&amp;pivots=container-linux">Official Doc "Mount Azure Storage as a local share in App Service"</a></p> <blockquote> <p>It isn't recommended to use storage mounts for local databases (such as SQLite) or for any other applications and components that rely on file handles and locks.</p> </blockquote> <p>พบว่าเค้าไม่แนะนำให้เรา mount volume จำพวก local database เช่น SQLite หรือพวกแอพที่ต้องจัดการเรื่องไฟล์ หรือกลไกการ Lock</p> <p>ดังนั้น สิ่งที่คุณควรทำคือใช้ Virtual Machine (VM) แทน ในขั้นตอนถัดไปคือการติดตั้ง Docker บน Azure Virtual Machine และคุณสามารถเพิ่ม Custom Domain ด้วย DNS A Record และ IP v4 ได้ตามขั้นตอนที่แนะนำไว้ในลิงก์นี้ <a rel="nofollow noreferrer" href="https://learn.microsoft.com/en-us/azure/virtual-machines/custom-domain">azure/virtual-machines/custom-domain</a></p> <p>เพื่อให้การเชื่อมต่อเป็น https คุณสามารถใช้ <a rel="nofollow noreferrer" href="https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy#https-portal">Docker-compose และ <strong><code>https-portal</code></strong></a> ได้นะ</p> <p>ตัวอย่างการตั้งค่า Docker Compose สำหรับ Uptime Kuma และ <strong><code>https-portal</code></strong> สามารถดูได้ดังนี้ครับ</p> <pre data-lang="yml" class="language-yml z-code"><code class="language-yml" data-lang="yml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">version</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>3.3<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">services</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">https-portal</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">image</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">steveltn/https-portal:1</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">ports</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>80:80<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>443:443<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">links</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml">uptime-kuma</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">restart</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">always</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">environment</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">DOMAINS</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>yourdomain.com -&gt; http://uptime-kuma:3001<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">STAGE</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>production<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Don&#39;t use production until staging works </span></span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> FORCE_RENEW: &#39;true&#39; </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">WEBSOCKET</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>true<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">volumes</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml">https-portal-data:/var/lib/https-portal</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uptime-kuma</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">image</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">louislam/uptime-kuma:1</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">container_name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">uptime-kuma</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">volumes</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml">./uptime-kuma:/app/data</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">ports</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml">3001:3001</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">restart</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">always</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">volumes</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">https-portal-data</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span></code></pre> <p>ถ้าคุณกำลังมองหาวิธีการตั้งค่า Uptime Kuma บน Azure Virtual Machine คุณสามารถทำตามขั้นตอนที่กล่าวมาได้อย่างง่ายดาย</p> <p>ป.ล. สำนวนภาษาอาจจะแปลกๆ บ้างนะ เพราะใช้ ChatGPT ช่วยเรียบเรียงให้</p> <h2 id="aanephimetim">อ่านเพิ่มเติม<a class="zola-anchor" href="#aanephimetim" aria-label="Anchor link for: aanephimetim" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://www.youtube.com/watch?v=q7J050yovuo">Using Azure File Shares as Container Volume Mounts in App Services</a></li> <li>ถ้าคุณต้องการเพิ่มความสามารถให้เว็บไซต์ของคุณมีความเสถียรและพร้อมใช้งานเสมอ ก็สามารถใช้ Uptime Kuma พร้อมกับ Docker และ Traefik ได้ตามคำแนะนำในลิงก์นี้เลย <strong><a rel="nofollow noreferrer" href="https://levelup.gitconnected.com/use-docker-uptime-kuma-and-traefik-to-monitor-your-website-593373f9e0c2">Use Docker, Uptime Kuma, and Traefik To Monitor Your Website</a></strong> สำหรับบริการดีๆ แบบนี้</li> </ul> 2023-08-07T00:00:00+00:00 2023-08-07T00:00:00+00:00 https://thadaw.com/posts/how-to-import-terraform-state-in-terraform-cloud/ <blockquote> <p>Terraform v1.5.2</p> </blockquote> <h2 id="payhaa">ปัญหา<a class="zola-anchor" href="#payhaa" aria-label="Anchor link for: payhaa" style="visibility: hidden;"></a> </h2> <p>เวลาเราใช้งาน Terraform Cloud มันจะมีประเด็นอยู่คือ Terraform ไม่ให้เรา Import Resource ใหม่ถ้าเราใช้ Variable ที่เป็น Secret ที่อยู่บน Terraform Cloud</p> <h2 id="withiiaekebuue-ngtn">วิธีแก้เบื้องต้น<a class="zola-anchor" href="#withiiaekebuue-ngtn" aria-label="Anchor link for: withiiaekebuue-ngtn" style="visibility: hidden;"></a> </h2> <ol> <li> <p>รันคำสั่ง เพื่อดึง State ที่อยู่บน Cloud ลงมาที่ local ก่อน</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">terraform</span></span><span class="z-meta z-function-call z-arguments z-shell"> state pull <span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span> terraform.tfstate</span> </span></code></pre> </li> <li> <p>ลบโฟลเดอร์ <code>.terraform</code> เพราะว่าเรามีการเชื่อมต่อกับ Terraform Cloud ไว้แล้ว (หมายถึงเก็บ Terraform State ที่ Terraform Cloud)</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">rm</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>rf</span> .terraform</span> </span></code></pre> </li> <li> <p>ให้ comment ส่วนของ block <code>cloud</code> ไว้ก่อน (Remote State) ยกตัวอย่าง Code ข้างล่างผมใช้ provide <a rel="nofollow noreferrer" href="https://registry.terraform.io/providers/hashicorp/azurerm/latest/docs">azurerm</a></p> <pre class="z-code"><code><span class="z-text z-plain">terraform { </span><span class="z-text z-plain"> required_version = &quot;&gt;= 1.5.2&quot; </span><span class="z-text z-plain"> required_providers { </span><span class="z-text z-plain"> azurerm = { </span><span class="z-text z-plain"> source = &quot;hashicorp/azurerm&quot; </span><span class="z-text z-plain"> version = &quot;~&gt; 3.58&quot; </span><span class="z-text z-plain"> } </span><span class="z-text z-plain"> } </span><span class="z-text z-plain"> </span><span class="z-text z-plain"> # cloud { </span><span class="z-text z-plain"> # organization = &quot;your-organization&quot; </span><span class="z-text z-plain"> # workspaces { </span><span class="z-text z-plain"> # name = &quot;my-terraform&quot; </span><span class="z-text z-plain"> # } </span><span class="z-text z-plain"> # } </span><span class="z-text z-plain">} </span><span class="z-text z-plain"> </span><span class="z-text z-plain">provider &quot;azurerm&quot; { </span><span class="z-text z-plain"> features {} </span><span class="z-text z-plain">} </span></code></pre> </li> <li> <p>สั่ง <code>terraform init</code> เพื่อเริ่มต้นติดตั้ง module ใหม่ทั้งหมด พอไม่มี block <code>cloud</code> terraform จะไปใช้งาน local state ซึ่งนั้่นก็คือไฟล์ <code>terraform.tfstate</code> ที่เราดาวน์โหลดลงมาในข้อ 1.</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">terraform</span></span><span class="z-meta z-function-call z-arguments z-shell"> init</span> </span></code></pre> </li> <li> <p>สั่ง <code>terraform state list</code> เพื่อดูว่ามี State อยู่ที่ Local จริงๆ นะ</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">terraform</span></span><span class="z-meta z-function-call z-arguments z-shell"> state list</span> </span></code></pre> </li> <li> <p>จากนั้นให้เริ่ม import resource ตามที่เราต้องการ เช่น ผมจะ import resource ที่ชื่อ <a rel="nofollow noreferrer" href="https://registry.terraform.io/providers/hashicorp/azurerm/latest/docs/resources/linux_web_app#import">azurerm_linux_web_app</a> ก็สามารถใช้ Syntax import ได้ตามปกติ</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">terraform</span></span><span class="z-meta z-function-call z-arguments z-shell"> import azurerm_linux_web_app.example /subscriptions/12345678-1234-9876-4563-123456789012/resourceGroups/resGroup1/providers/Microsoft.Web/sites/site1</span> </span></code></pre> </li> <li> <p>จากนั้นสั่ง <code>terraform state list</code> เพื่อดูว่าที่ import เข้ามาอยู่ใน State แล้วหรือยัง</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">terraform</span></span><span class="z-meta z-function-call z-arguments z-shell"> state list</span> </span></code></pre> </li> <li> <p>ให้เอา comment ออกในส่วนของ <code>cloud</code> (Remote State)</p> <pre class="z-code"><code><span class="z-text z-plain">terraform { </span><span class="z-text z-plain"> required_version = &quot;&gt;= 1.5.2&quot; </span><span class="z-text z-plain"> required_providers { </span><span class="z-text z-plain"> azurerm = { </span><span class="z-text z-plain"> source = &quot;hashicorp/azurerm&quot; </span><span class="z-text z-plain"> version = &quot;~&gt; 3.58&quot; </span><span class="z-text z-plain"> } </span><span class="z-text z-plain"> } </span><span class="z-text z-plain"> </span><span class="z-text z-plain"> cloud { </span><span class="z-text z-plain"> organization = &quot;your-organization&quot; </span><span class="z-text z-plain"> workspaces { </span><span class="z-text z-plain"> name = &quot;my-terraform&quot; </span><span class="z-text z-plain"> } </span><span class="z-text z-plain"> } </span><span class="z-text z-plain">} </span><span class="z-text z-plain"> </span><span class="z-text z-plain">provider &quot;azurerm&quot; { </span><span class="z-text z-plain"> features {} </span><span class="z-text z-plain">} </span></code></pre> </li> <li> <p>ลบโฟลเดอร์ <code>.terraform</code> เพราะว่าเรามีการเชื่อมต่อใช้ Terraform State อยู่ใน Local ไว้อยู่</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">rm</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>rf</span> .terraform</span> </span></code></pre> </li> <li> <p>สั่ง <code>terraform init</code> เพื่อเริ่มต้นติดตั้ง module ใหม่ทั้งหมด พอมี block <code>cloud</code> (Remote State) มันก็จะต่อไปที่ Terraform Cloud อีกครั้ง</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">terraform</span></span><span class="z-meta z-function-call z-arguments z-shell"> init</span> </span></code></pre> <p>ซึ่งในขั้นตอนนี้ Terraform จะข้อความมายาวๆ เพื่อถามว่าจะให้ Terraform State บน Local ไปทับ State บน Cloud มั้ย (แนะนำให้ Backup local state ไว้ก่อนทุกครั้ง) จากนั้นให้กด Yes เพื่อเริ่มทำงาน</p> </li> </ol> <p>Ref: https://github.com/hashicorp/terraform/issues/26494</p> <p>แอบเหนื่อยนิดนึง แต่ก็แก้ปัญหาได้นะ ใครมี Solution ดีๆ มา share กันได้นะ</p> 2023-02-19T00:00:00+00:00 2023-02-19T00:00:00+00:00 https://thadaw.com/posts/recursive-type-with-typeof-operator/ <h2 id="i-ve-got-a-problem-i-ve-ask-chatgpt">I've got a problem, I've ask ChatGPT<a class="zola-anchor" href="#i-ve-got-a-problem-i-ve-ask-chatgpt" aria-label="Anchor link for: i-ve-got-a-problem-i-ve-ask-chatgpt" style="visibility: hidden;"></a> </h2> <p>In typescript</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">GetAnyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-storage z-modifier z-ts">readonly</span> <span class="z-support z-type z-primitive z-ts">any</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">Head</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">Tail</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-support z-type z-primitive z-ts">any</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-entity z-name z-type z-ts">GetAnyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Tail</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">a</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-constant z-numeric z-decimal z-ts">1</span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-constant z-numeric z-decimal z-ts">2</span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-constant z-numeric z-decimal z-ts">3</span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-storage z-modifier z-ts">const</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Result</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">GetAnyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-keyword z-operator z-expression z-typeof z-ts">typeof</span> <span class="z-entity z-name z-type z-ts">a</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Result is []</span> </span><span class="z-source z-ts"> </span></code></pre> <p>Why the <code>Result</code> type is <code>[]</code>, i expect <code>[any, any, any]</code>, When I pass:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Result2</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">GetAnyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-constant z-numeric z-decimal z-ts">1</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">2</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">3</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>the <code>Result2</code> is correct type that is <code>[any, any, any]</code>,</p> <h2 id="chatgpt-solution">ChatGPT Solution<a class="zola-anchor" href="#chatgpt-solution" aria-label="Anchor link for: chatgpt-solution" style="visibility: hidden;"></a> </h2> <p>I apologize for the confusion. The issue is that the typeof operator in TypeScript behaves differently for array literals and readonly array literals.</p> <p>When you define a as [1, 2, 3] as const, it creates a readonly array literal. However, when you use typeof a, the resulting type is readonly [1, 2, 3], which is not considered to be a tuple type by the TypeScript compiler.</p> <p>To make your original implementation work with readonly array literals, you can add an additional conditional type to handle the case where the input is a readonly array:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">GetAnyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-storage z-modifier z-ts">readonly</span> <span class="z-support z-type z-primitive z-ts">any</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">any</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-storage z-modifier z-ts">readonly</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">Head</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">Tail</span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-entity z-name z-type z-ts">Head</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-entity z-name z-type z-ts">GetAnyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Tail</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">Head</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">Tail</span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-entity z-name z-type z-ts">Head</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-entity z-name z-type z-ts">GetAnyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Tail</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">a</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-constant z-numeric z-decimal z-ts">1</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">2</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">3</span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-storage z-modifier z-ts">const</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Result</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">GetAnyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-keyword z-operator z-expression z-typeof z-ts">typeof</span> <span class="z-entity z-name z-type z-ts">a</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> [1, 2, 3]</span> </span></code></pre> <p>In this updated implementation, we use two conditional types to handle both regular arrays and readonly arrays. The first conditional type checks if the input is a readonly tuple type, and the second conditional type checks if the input is a regular tuple type.</p> <p>I hope this helps!</p> <p><img src="https://thadaw.com/posts/recursive-type-with-typeof-operator/chatgpt-solution.png" alt="" /></p> 2023-01-25T00:00:00+00:00 2023-01-25T00:00:00+00:00 https://thadaw.com/posts/nammatham-note-2-convert-array-of-keys-and-array-of-values-to-object/ <p>This orignial question is from <a rel="nofollow noreferrer" href="https://stackoverflow.com/questions/67021405/ts-types-convert-arrays-of-keys-and-array-of-values-to-object">Stackoverflow</a>. The <a rel="nofollow noreferrer" href="https://catchts.com/tuples#zip">full description</a> how to construct this type utility (from catchts.com)</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">A</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>cat<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>dog<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">B</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>red<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>yellow<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Expected</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">cat</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>red<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">dog</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>yellow<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></code></pre> <p>The original solution</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Length</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">length</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">L</span> </span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">L</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">CompareLength</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"> <span class="z-entity z-name z-type z-ts">X</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"> <span class="z-entity z-name z-type z-ts">Y</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"> <span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">Length</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">X</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Length</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Y</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-support z-type z-builtin z-ts">true</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-builtin z-ts">false</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * Let&#39;s operate on primitives </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Keys</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-support z-type z-primitive z-ts">string</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">number</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">symbol</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">AllowedKeys</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-storage z-modifier z-ts">readonly</span> <span class="z-entity z-name z-type z-ts">Keys</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Mapper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Keys</span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Keys</span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Record</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * Recursive iteration through two arrays </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Zip</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Keys</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Keys</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"> <span class="z-entity z-name z-type z-ts">Result</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Record</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">string</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-entity z-name z-type z-ts">CompareLength</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-support z-type z-builtin z-ts">true</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Result</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">HeadT1</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">HeadU1</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Result</span> <span class="z-keyword z-operator z-type z-ts">&amp;</span> <span class="z-entity z-name z-type z-ts">Mapper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">HeadT1</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">HeadU1</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">HeadT2</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">TailT2</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">HeadU2</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">TailU2</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Zip</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">AllowedKeys</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">TailT2</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">AllowedKeys</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">TailU2</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">Result</span> <span class="z-keyword z-operator z-type z-ts">&amp;</span> <span class="z-entity z-name z-type z-ts">Mapper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">HeadT2</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">HeadU2</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * Apply Zip only if arrays length is equal, otherwise return never </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Zipper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Keys</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Keys</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-entity z-name z-type z-ts">CompareLength</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-support z-type z-builtin z-ts">true</span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Zip</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">A</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>cat<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>dog<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">B</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>red<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>yellow<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Result</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">Zipper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">A</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">B</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">zip</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Result</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">cat</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>red<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">dog</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>yellow<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"></span><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ok</span></span> </span></code></pre> <p><a rel="nofollow noreferrer" href="https://www.typescriptlang.org/play?#code/C4TwDgpgBAMhB2BzYALAPAFShAHsBAJgM5QBKEAhgQPbwA2IAggE7MUhoXwgB8PUAXihZc+eMSgBvKHQTIUALigBLeADMIzWFAC+AWABQUKAH5Yh40vgQAbpoDchw6EhQAwtQC2YCswhwkVDQLKAANbDxCEnIqWgYWNg4uXgAaEIBNCLEJGJp6JlZ2Tm4eEP4hAPk0UP5RKNg5IPT+M2BmAFdoJTUKOiIIRwNDAHoAKlGLUYbgAHISakg2fChaKDBmZU9lYGU7Iknh53BoAGkIEBIhIjbVRCgAHyh4ds8AI00HqCIQN+o6QZc0EYdDo1AA7hACGcLphysIsvU-LF8lBoUQANoAXVM8KstgcTgMgKgAFkKGBFpgUlAAKpwkSRcQkNE4mkIpmo84kMzkADG1GYBCptP4eLsWjFBKGBjGEyMUz57WYRF20G2mgoO1WqGY1HaiBQUGAYOoUF8iX28sOROOUAAWsowMEDAzstFKHl4oUOGieGkjGy6hzcnECok0L7-WQIER2nRgOychB+YK0NcNkhqck4ZIdOUQh5vL5-I10BhqXTEyQ2p0QmZXfUsXXo7H41AFCEGxz0aoNFoABIejAARkxzcDjIkPfUH0HVBpo+b5FbCYAZKTyZS5wQR9TtwvRU98RLO1WoNO+1BtxgAEzUgB0j97HwwFGUdFvY6MrLPF9nHppO8oEfe9ny0V930Ar9jDMB0nWBUEIShLlMDfD8bz9KAEPBSE0VQyCMOpZc4zXDcKU0NBryA-cMNKb9JWYEIGKYo9xUGEZxkmLCKQYe1HRWFFlDUM1vRIWRAkNZQSAgABHdpempahUE0MEpOgPxgCVeBWM0A4jlcODKS7JNkS9cNI1pM8Q3yBIil9fNv0LHw-EqIJyxFM8a2gWDHWFSsGPYm1XEYQRzwAIl5TUwupMKaEQMLMQBW0ACFQvRMK-AIaKoDCkAIBBcEEqS1xiLbIRDIoxhqWSnhAv5eBrigAAvR0lFKhMhEkEJIuAJQMshaKQjivq8oKsEwsMHQoGGYYVgAayAA">playground</a></p> <p>I want the Type support value any type, not only <code>string | number | symbol</code> as already defined in:</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Keys</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-support z-type z-primitive z-ts">string</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">number</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">symbol</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">AllowedKeys</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-storage z-modifier z-ts">readonly</span> <span class="z-entity z-name z-type z-ts">Keys</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h2 id="my-solution">My Solution<a class="zola-anchor" href="#my-solution" aria-label="Anchor link for: my-solution" style="visibility: hidden;"></a> </h2> <p><a rel="nofollow noreferrer" href="https://www.typescriptlang.org/play?#code/C4TwDgpgBAMhB2BzYALAPAFShAHsBAJgM5QBKEAhgQPbwA2IAggE7MUhoXwgB8PUAXihZc+eMSgBvKHQTIUALigBLeADMIzWFAC+UAPzal8CADdNAbgCwAKFCQoAYWoBbMBWYQ4SVGgAa2HiEJORUtAwsbBxcvAA0UACagWISoTT0TKzsnNx8grByvn78osEFPugJPLZQBlDAzACuEDVQSmoUdEQQ1ja2APQAVIM1gwXAAOQk1JBs+FC0UGDMyi7KwMrmRKP9tvbQANIQICRCRA2qiFAAPlDwjS4ARpo3UEQgT9R0vftQALIUMCzTDxACq-CEIiC4hIRxOdTIEAAxtRmAQQVBwbVjGZLLY9uBoIw6HRqAB3CAEOFETAQ4TJMqeMIZKDUgDaAF06lgceZmL0BsNRoikY1mERNtB1poKBtFqhmNRGogUPUydQoB4otsbFBBrs7ISoAAtZRgNCtKEpEKUdIRLIcak8WKtUEMmGI5n2qI5OKtchERp0YDu1LI1Ho84rJDxGJ0yQ6Wx05xuDxeQroDBgkrQiQNZqtQxWsqc1q1QwBoPAMttemlD1s1QaLQACVtGAAjBya4Y3fWJI31C821RQV2a+XEYHg1AAGT-QHAkcETvxZdj6q62rb3maGtKYsNpvD9sAJniADor8etBgKMo6BhT92t5O+7mSIPm1B1+eoFeLxvYR7zoUFnwnOpTXNYlSQpKljhpO8HyfZ1gIfMD4krGd5wBIFNDQZcnzXW0wL4CDd2Yfc7lxSitwogUbCGEZdTGRggQYE0zQWFllDUTUHRIWQKhUEgIAAR0aTp4moVBNDJZRuigTxgDFeBqL5HYCQcKDgUPMMvUyH0nTBUMbQMyJsjjZNXHcTxvHkDEsX7Eh8xaLdDCgxzN2xdS8T6GwkToCgiBtAgpETAKgpCxIIBJclwvxQ0HEYfI2QAIiRWU0viNKaEQNKOR+I0ACFUvIAh4gSWLYMKrToCwkMhB0-DGHiYqeAYlF4HOKAAC8zSUBr8kkVpMuAQbKRdLc8qUKq4rJWw9H6foFgAayAA">Playground</a></p> <p>To modify the original code, I've revise</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Keys</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-support z-type z-primitive z-ts">string</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">number</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">symbol</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Mapper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Keys</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Keys</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Record</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>โดยตัว <code>Mapper</code> ต้องการ value ของที่จะมา Map (<code>U</code>) เป็น <code>Keys</code> เท่านั้น ซึ่งก็คือ <code>string | number | symbol</code> อย่างใดอย่างหนึ่ง ซึ่งผมต้องการให้ <code>Mapper</code> รับ value ที่เป็นอะไรก็ได้</p> <p>ดังนั้นจึงเหลือแค่เช็คว่า Key ที่รับเข้ามาเป็น Valid key หรือไม่ ซึ่งก็คือ <code>string | number | symbol</code></p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Mapper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Keys</span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Record</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>จุดที่ 2 ที่แก้ไขก็คือ การนิยาย type <code>Zip</code></p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Keys</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-support z-type z-primitive z-ts">string</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">number</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">symbol</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Zip</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Keys</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Keys</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"> <span class="z-entity z-name z-type z-ts">Result</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Record</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">string</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ...</span> </span></span></code></pre> <p>โดยที่ Type รับ parameter 2 ตัวที่เป็น Readonly Array ที่เป็น <code>Key</code> ทั้ง key และ value เลยจึงทำให้ในการใช้งาน <code>Zip</code></p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> v--- 2nd parameter needs to be `string | number | symbol`</span> </span><span class="z-source z-ts"><span class="z-support z-class z-node z-ts">Zip</span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>cat<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>dog<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>red<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>yellow<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-keyword z-operator z-relational z-ts">&gt;</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>จึงแก้ไขให้รับ <code>any</code> type แทน</p> <h2 id="final-solution">Final Solution<a class="zola-anchor" href="#final-solution" aria-label="Anchor link for: final-solution" style="visibility: hidden;"></a> </h2> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Length</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">length</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">L</span> </span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">L</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">CompareLength</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">X</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">Y</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">Length</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">X</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Length</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Y</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-support z-type z-builtin z-ts">true</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-builtin z-ts">false</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * Let&#39;s operate on primitives </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Keys</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-support z-type z-primitive z-ts">string</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">number</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">symbol</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Mapper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Keys</span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Record</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">AllowedKeys</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-storage z-modifier z-ts">readonly</span> <span class="z-entity z-name z-type z-ts">Keys</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * Recursive iteration through two arrays </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Zip</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Keys</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"> <span class="z-entity z-name z-type z-ts">Result</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">Record</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">string</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">CompareLength</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-support z-type z-builtin z-ts">true</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Result</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">HeadT1</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">HeadU1</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Result</span> <span class="z-keyword z-operator z-type z-ts">&amp;</span> <span class="z-entity z-name z-type z-ts">Mapper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">HeadT1</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">HeadU1</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">HeadT2</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">TailT2</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">HeadU2</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">TailU2</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Zip</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">AllowedKeys</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">TailT2</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">TailU2</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">Result</span> <span class="z-keyword z-operator z-type z-ts">&amp;</span> <span class="z-entity z-name z-type z-ts">Mapper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">HeadT2</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">HeadU2</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * Apply Zip only if arrays length is equal, otherwise return never </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Zipper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Keys</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">ReadonlyArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">CompareLength</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-support z-type z-builtin z-ts">true</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Zip</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">Red</span> <span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">Yellow</span> <span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">A</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>cat<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>dog<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">B</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-entity z-name z-type z-ts">Red</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">Yellow</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Result</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">Zipper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">A</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">B</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">zip</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">Result</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">cat</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-readwrite z-ts">Red</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">dog</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-readwrite z-ts">Yellow</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"></span><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ok</span></span> </span></code></pre> 2023-01-25T00:00:00+00:00 2023-01-25T00:00:00+00:00 https://thadaw.com/posts/nammatham-note-3-extract-type-from-object-key-to-object/ <p>สวัสดีคับ ผมหวังว่าผู้อ่านน่าจะคุ้นเคย Azure Function TypeScript มาพอสมควรแล้ว ถ้ายังไม่คุ้นก็เดี๋ยวจะได้เริ่มคุ้นเลยนะ เย้</p> <p>จาก Issuse #24 (https://github.com/mildronize/nammatham/issues/24)</p> <p>(Refer to <code>@azure/functions@3.5.x</code>)</p> <p>The <code>Context.bindings</code> is type <a rel="nofollow noreferrer" href="https://github.com/Azure/azure-functions-nodejs-library/blob/v3.x/types/Context.d.ts#L76-L79">ContextBindings</a>.</p> <p>This will accept <code>string</code> from <a rel="nofollow noreferrer" href="https://github.com/Azure/azure-functions-nodejs-library/blob/v3.x/types/Context.d.ts#L21-L24">the source</a></p> <blockquote> <p>Input and trigger binding data, as defined in function.json. Properties on this object are dynamically generated and named based off of the "name" property in function.json.</p> </blockquote> <p>here is the definition of <code>Context Binding</code></p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * Context bindings object. Provided to your function binding data, as defined in function.json. </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-interface z-ts">interface</span> <span class="z-entity z-name z-type z-interface z-ts">ContextBindings</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-indexer z-declaration z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-variable z-parameter z-ts">name</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <h2 id="expected-behavior">Expected Behavior<a class="zola-anchor" href="#expected-behavior" aria-label="Anchor link for: expected-behavior" style="visibility: hidden;"></a> </h2> <p>If we binding function with name <code>response</code> in <code>function.json</code></p> <pre data-lang="json" class="language-json z-code"><code class="language-json" data-lang="json"><span class="z-source z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>bindings<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-punctuation z-section z-sequence z-begin z-json">[</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"> <span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>type<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>http<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>direction<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>out<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>name<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>response<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"> <span class="z-punctuation z-section z-sequence z-end z-json">]</span></span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></code></pre> <p>The type should allow only <code>Context.bindings.response</code> type, not any <code>string</code> type.</p> <h2 id="solution">Solution<a class="zola-anchor" href="#solution" aria-label="Anchor link for: solution" style="visibility: hidden;"></a> </h2> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">AuthorizationLevel</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-alias z-ts">BaseController</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-alias z-ts">controller</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-alias z-ts">functionName</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>nammatham<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">Context</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-alias z-ts">ContextBindings</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-alias z-ts">HttpRequest</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@azure/functions<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> import { BindingTypeEnum } from &#39;inversify&#39;;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-keyword z-control z-type z-ts">type</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">UnionToIntersection</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>type-fest<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">type</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>os<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> https://catchts.com/union-array</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Converts union to overloaded function</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">UnionToOvlds</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">U</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">UnionToIntersection</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">U</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-support z-type z-primitive z-ts">any</span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">f</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">U</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span></span> <span class="z-meta z-type z-function z-return z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-support z-type z-primitive z-ts">void</span> </span><span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">PopUnion</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">U</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">UnionToOvlds</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">U</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-function z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">a</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">A</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span></span> <span class="z-meta z-type z-function z-return z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-support z-type z-primitive z-ts">void</span> </span><span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">A</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">never</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">IsUnion</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-entity z-name z-type z-ts">UnionToIntersection</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-support z-type z-builtin z-ts">false</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-builtin z-ts">true</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Finally me)</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">UnionToArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">A</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-support z-type z-primitive z-ts">unknown</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">IsUnion</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-support z-type z-builtin z-ts">true</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">UnionToArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Exclude</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">PopUnion</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-entity z-name z-type z-ts">PopUnion</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-entity z-name z-type z-ts">A</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-entity z-name z-type z-ts">A</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> https://catchts.com/union-array</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-interface z-ts">interface</span> <span class="z-entity z-name z-type z-interface z-ts">BaseFunctionBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">N</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">type</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">direction</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>in<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>out<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">name</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">N</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-interface z-ts">interface</span> <span class="z-entity z-name z-type z-interface z-ts">HttpTriggerResponseBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-other z-inherited-class z-ts">BaseFunctionBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>http<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">name</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">type</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>http<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">direction</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>out<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-interface z-ts">interface</span> <span class="z-entity z-name z-type z-interface z-ts">HttpTriggerRequestBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-other z-inherited-class z-ts">BaseFunctionBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>httpTrigger<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">name</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">type</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>httpTrigger<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">direction</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>in<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">route</span></span><span class="z-keyword z-operator z-optional z-ts">?</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"><span class="z-punctuation z-definition z-comment z-ts">/**</span> </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> * Custom Function Binding can assign any type value </span></span><span class="z-source z-ts"><span class="z-comment z-block z-documentation z-ts"> <span class="z-punctuation z-definition z-comment z-ts">*/</span></span> </span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-interface z-ts">interface</span> <span class="z-entity z-name z-type z-interface z-ts">CustomFunctionBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-other z-inherited-class z-ts">BaseFunctionBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-support z-type z-primitive z-ts">string</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">T</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-other z-inherited-class z-ts">Record</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-support z-type z-primitive z-ts">string</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-support z-type z-primitive z-ts">any</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">name</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">T</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">type</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">DefinedFunctionBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-support z-type z-primitive z-ts">unknown</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">HttpTriggerRequestBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-entity z-name z-type z-ts">HttpTriggerResponseBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">T</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">bindings</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>req<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">type</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>httpTrigger<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">direction</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>in<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">route</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>/home<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-entity z-name z-type z-ts">HttpTriggerRequestBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>req<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>res<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">direction</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>out<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">type</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>http<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-entity z-name z-type z-ts">HttpTriggerResponseBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>res<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-brace z-square z-ts">]</span></span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-storage z-modifier z-ts">const</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">BindingType</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-keyword z-operator z-expression z-typeof z-ts">typeof</span> <span class="z-entity z-name z-type z-ts">bindings</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-support z-type z-primitive z-ts">number</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">BindingTypeName</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">UnionToArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">BindingType</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>name<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">BindingTypeArray</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">UnionToArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">BindingType</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>type<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">AllBindings</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">DefinedFunctionBinding</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-support z-type z-primitive z-ts">unknown</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>type<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> type AllBindings = &quot;http&quot; | &quot;httpTrigger&quot;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">GetBindingObjectFromType</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">AllBindings</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>httpTrigger<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">HttpRequest</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">GetBindingObjectArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">AllBindings</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">T</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">Head</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-keyword z-operator z-expression z-infer z-ts">infer</span> <span class="z-entity z-name z-type z-ts">Tail</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Head</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">AllBindings</span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-entity z-name z-type z-ts">Tail</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-ts">AllBindings</span><span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-entity z-name z-type z-ts">GetBindingObjectFromType</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Head</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-rest z-ts">...</span><span class="z-entity z-name z-type z-ts">GetBindingObjectArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">Tail</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">BindingObjectArray</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">GetBindingObjectArray</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">BindingTypeArray</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> https://catchts.com/tuples</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">BindingTypeMapping</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">Zipper</span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-entity z-name z-type z-ts">BindingTypeName</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-type z-ts">BindingObjectArray</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">MyContextBindings</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-entity z-name z-type z-ts">ContextBindings</span> <span class="z-keyword z-operator z-type z-ts">&amp;</span> <span class="z-entity z-name z-type z-ts">BindingTypeMapping</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">myContextBindings</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">MyContextBindings</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Mock type</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">req</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-entity z-name z-type z-ts">HttpRequest</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">res</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span><span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"><span class="z-variable z-other z-object z-ts">myContextBindings</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">req</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">headers</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-decorator z-ts"><span class="z-punctuation z-decorator z-ts">@</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">controller</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span> </span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">MyHttpController</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-other z-inherited-class z-ts">BaseController</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-meta z-decorator z-ts"><span class="z-punctuation z-decorator z-ts">@</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">functionName</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>MyHttp<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-keyword z-operator z-spread z-ts">...</span><span class="z-variable z-other z-readwrite z-ts">bindings</span><span class="z-meta z-brace z-round z-ts">)</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-meta z-method z-declaration z-ts"><span class="z-storage z-modifier z-ts">public</span> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">getName</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">req</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">HttpRequest</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">void</span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">name</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-variable z-other z-object z-ts">req</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">query</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">name</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">context</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Context Log<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">context</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">bindings</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">req</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> this.res.send(`hello get user with ${name}`);</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">res</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">json</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">data</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>[MyHttp] hello get user with <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">name</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>}<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <h2 id="read-more-ccha">Read More จ๊ะ<a class="zola-anchor" href="#read-more-ccha" aria-label="Anchor link for: read-more-ccha" style="visibility: hidden;"></a> </h2> <ul> <li>How to make a map object type from a union type in TypeScript? !!! https://melvingeorge.me/blog/make-map-object-type-from-union-types-typescript</li> <li>https://catchts.com/union-array</li> <li>https://stackoverflow.com/questions/65375625/typescript-convert-union-of-similar-objects-to-object-type</li> <li>https://stackoverflow.com/questions/60862509/typescript-types-from-array-to-object <ul> <li>Use <code>UnionToIntersection</code> from <code>type-fest</code></li> </ul> </li> </ul> 2022-12-22T00:00:00+00:00 2022-12-22T00:00:00+00:00 https://thadaw.com/posts/reduce-nestjs-docker-image-size-with-esbuild-bundle/ <blockquote> <p>Update วันที่ 24 Dec 2022: เพิ่ม Step ที่ 5 ใช้ Alpine เป็น base image และลบ Prisma ไฟล์บางอย่างที่ไม่ได้ใช้งานออก</p> </blockquote> <p>เจ็บปวดกันมาเท่าไหร่กับ ขนาดของ project nodejs ที่ใหญ่มโหฬาร วันนี้ผมจะมาแชร์ประสบการณ์ Workaround ของผมว่าจะลด 80% ได้ยังไง ด้วย esbuild Bundle</p> <p><strong>Before</strong></p> <pre class="z-code"><code><span class="z-text z-plain">REPOSITORY TAG IMAGE ID CREATED SIZE </span><span class="z-text z-plain">remote-state-api debian f42e4b8e75cb 4 days ago 2.64GB </span></code></pre> <p><strong>After</strong></p> <pre class="z-code"><code><span class="z-text z-plain">REPOSITORY TAG IMAGE ID CREATED SIZE </span><span class="z-text z-plain">remote-state-api alpine-unused 12b08b0bfc1f 8 seconds ago 77.8MB </span></code></pre> <p>โดยสรุปลดจาก 2.64 GB เหลือ 77.8 MB โดยลดไปประมาณ 97%</p> <h2 id="stack-thiiaich">Stack ที่ใช้<a class="zola-anchor" href="#stack-thiiaich" aria-label="Anchor link for: stack-thiiaich" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://www.prisma.io/">Prisma</a> 4.8.0</li> <li><a rel="nofollow noreferrer" href="https://nestjs.com/">Nestjs</a> 9.0.0</li> <li><a rel="nofollow noreferrer" href="https://nx.dev/">Nx</a> (Monorepo Tools) 15.3.3</li> </ul> <p>ถ้าเราเริ่มต้นใช้งาน Nestjs แล้วเริ่มต้นติดตั้ง node_modules ขนาดของ</p> <pre class="z-code"><code><span class="z-text z-plain">du -sh ./node_modules </span><span class="z-text z-plain">495M ./node_modules </span></code></pre> <p>แล้วถ้าเราใช้ Nx เพื่อกำหนดโครงสร้าง Monorepo ใน repo ของเรามันจะทำให้ใน node_modules ของเราใหญ่ขึ้นมากๆ โดยไม่จำเป็น ซึ่ง Nx จะมี mode ให้ใช้หลักๆ อยู่ 2 แบบ คือ</p> <ol> <li> <p><a rel="nofollow noreferrer" href="https://nx.dev/getting-started/package-based-repo-tutorial">Package-Based Repos</a> อันนี้จะเป็นแนวเวลาเราใช้งาน monorepo ทั่วๆ ไป โดยที่แต่ละ project จะมี <code>package.json</code> แยกกันเลย จึงทำให้เราสามารถจัดการแต่ละ project แยกกันง่าย และเวลา deploy package แต่ละ Project จะไม่ปนกัน</p> <ul> <li>แต่ข้อเสียคือ การ config ให้ tsconfig, eslint, jest ให้มีการใช้งานร่วมกันระหว่างโปรเจ็คได้ ค่อนข้างใช้เวลาเยอะ และ เราไม่สามารถใช้ความสามารถ Generator ของ Nx ได้ ที่สามารถเสก Template TypeScript Project ง่ายๆ</li> <li>ตัวอย่าง Monorepo ที่ลักษณะคล้ายๆ กันก็คือจะมี <a rel="nofollow noreferrer" href="https://yarnpkg.com/features/workspaces">Yarn Workspace</a>, <a rel="nofollow noreferrer" href="https://pnpm.io/workspaces">pnpm Workspace</a>, <a rel="nofollow noreferrer" href="https://github.com/lerna/lerna">Lerna</a>, <a rel="nofollow noreferrer" href="https://turbo.build/repo">turborepo</a></li> </ul> </li> <li> <p><a rel="nofollow noreferrer" href="https://nx.dev/getting-started/integrated-repo-tutorial">Integrated Repos</a> อันนี้จะเป็นลักษณะพิเศษที่จะมีเฉพาะ Nx อย่างที่บอกไปแล้วว่าข้อดีคือ สามารถใช้ความสามารถ Generator ของ Nx ได้ ที่สามารถเสก Template TypeScript Project ง่ายๆ พร้อม config ที่เราใช้งานโดยทั่วไปคือ tsconfig, eslint และ jest</p> <ul> <li>แต่ข้อเสียคือ Learning Curve สูงกว่าแบบแรกแน่นอน แต่อย่าลืมว่า การ config ให้ tsconfig, eslint, jest ให้มีการใช้งานร่วมกันระหว่างโปรเจ็คได้ ก็ใช้เวลาเยอะเช่นกัน</li> <li>อีกข้อดีและข้อเสีย ก็คือการที่มี package.json ที่เดียวในตำแหน่ง root ของ repo เท่านั้น ซึ่งข้อดีก็คือทำให้เราจัดการ package version ไม่ซ้ำซ้อนกัน เช่น Library ที่ใช้งานร่วมกันก็ควรมี dependencies ที่มี version เดียวกัน ดังนั้นการเปลี่ยน version ทุก project จึงเป็นเรื่องไม่ค่อยอยากทำ ส่วนข้อเสียก็คือ เวลาเราจะ deploy หรือ publish บาง project ขนาดของ node_modules จะอ้วนมากๆ</li> <li>ตัวอย่าง Template ที่ Nx มีให้ใช้ก็เยอะมากๆ หลักๆ คือ React, Angular, Vue, Nestjs และพวก Library Project ต่างๆ ดู plugin ทั้งหมดได้ใน <a rel="nofollow noreferrer" href="https://nx.dev/packages">Nx Packages</a></li> </ul> </li> </ol> <h3 id="cchaakmiimthiiekhaach-baechw-kanain-node-modules">จากมีมที่เค้าชอบแซวๆ กันใน node_modules<a class="zola-anchor" href="#cchaakmiimthiiekhaach-baechw-kanain-node-modules" aria-label="Anchor link for: cchaakmiimthiiekhaach-baechw-kanain-node-modules" style="visibility: hidden;"></a> </h3> <p>ใน Project นี้เราจะจึง Stack ที่มีแต่ทำให้ node_modules บวมๆ ขึ้นมากๆ</p> <p><img src="https://thadaw.com/posts/reduce-nestjs-docker-image-size-with-esbuild-bundle/node-modules-too-big.png" alt="Ref: https://tsh.io/blog/reduce-node-modules-for-better-performance/" /></p> <h2 id="t">ต่อๆ<a class="zola-anchor" href="#t" aria-label="Anchor link for: t" style="visibility: hidden;"></a> </h2> <p>ดังนั้นผมจึงเลือก Integrated Repos ของ Nx มาใช้ในงานนี้ อย่างที่บอกไปว่า Nx แบบ Integrated Repos นั้น ทำให้มี node_modules บางตัวที่ไม่ได้ใช้งาน การที่เราจะ Deploy หรือ Publish ทำให้ขนาดของแอพใหญ่ขึ้นมากๆ <a rel="nofollow noreferrer" href="https://github.com/nrwl/nx/issues/1777">nrwl/nx Issues#177</a></p> <h2 id="step-1-first-docker-image">Step 1: First Docker Image<a class="zola-anchor" href="#step-1-first-docker-image" aria-label="Anchor link for: step-1-first-docker-image" style="visibility: hidden;"></a> </h2> <p>จากที่แสดงข้างบนบทความจะเห็นได้ว่าแอพตัวนี้มีขนาด 2.64GB</p> <pre class="z-code"><code><span class="z-text z-plain">REPOSITORY TAG IMAGE ID CREATED SIZE </span><span class="z-text z-plain">remote-state-api debian f42e4b8e75cb 4 days ago 2.64GB </span></code></pre> <p>โดยเรามีการใช้งาน image <code>node:18</code> แค่ Image เปล่าๆ ก็ขนาด 942 MB เข้าไปแล้ว</p> <pre class="z-code"><code><span class="z-text z-plain">REPOSITORY TAG IMAGE ID CREATED SIZE </span><span class="z-text z-plain">node 18 c6b41dff69c8 20 hours ago 942MB </span></code></pre> <p>แสดงว่าแอพของเราไม่รวม base image จะมีขนาดประมาณ 1.72 GB โอ้วแม่เจ้า อะไรจะใหญ่ขนาดนี้</p> <h3 id="taw-yaang-dockerfile-thiiaichain-step-nii">ตัวอย่าง Dockerfile ที่ใช้ใน Step นี้<a class="zola-anchor" href="#taw-yaang-dockerfile-thiiaichain-step-nii" aria-label="Anchor link for: taw-yaang-dockerfile-thiiaichain-step-nii" style="visibility: hidden;"></a> </h3> <pre data-lang="dockerfile" class="language-dockerfile z-code"><code class="language-dockerfile" data-lang="dockerfile"><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> node:<span class="z-entity z-name z-enum z-tag-digest">18</span> <span class="z-keyword z-control z-dockerfile">As</span> <span class="z-variable z-stage-name">development</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/app </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> ./dist/apps/remote-state-server . </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> apps/remote-state-server/prisma ./prisma/ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> package.json pnpm-lock.yaml ./ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>PORT=3333 </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">EXPOSE </span>${PORT} </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpm fetch --prod </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpm install </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpx prisma generate </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> We don&#39;t have the existing sqlite file </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> So, we will create a fresh sqlite every time when build </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> This migration should be run every time when build </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpx prisma migrate deploy </span><span class="z-source z-dockerfile"><span class="z-keyword z-operator z-dockerfile">CMD </span>node ./main.js </span></code></pre> <p>ซึ่งใน Dockerfile นี้ผมไม่ได้ Build ใน Docker แต่จะ Build ที่เครื่อง Host ให้เสร็จแล้ว copy เข้ามาตอน build แทน ซึ่งก่อน Build ผมจะรัน</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">nx</span></span><span class="z-meta z-function-call z-arguments z-shell"> run remote-state-server:build:production</span> </span></code></pre> <p>ป.ล. <code>remote-state-server:build:production</code> ตัวนี้เป็น executor default ของ template Nestjs โดยจะใช้ executor ที่ชื่อว่า <a rel="nofollow noreferrer" href="https://nx.dev/packages/webpack/executors/webpack">@nrwl/webpack:webpack</a></p> <p>โดยใน Docker Image ผมจะมีการรัน <code>prisma generate</code> เพื่อรัน <a rel="nofollow noreferrer" href="https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client">script postinstall ของ Prisma เอง</a> และรัน <code>prisma migrate deploy</code> ทุกครั้งที่ Build เพราะผมใช้ Sqlite ใน image นี้ด้วย และต้องการให้มัน clean ทุกครั้งที่ build ส่วนใครที่ไม่ใช้งานสามารถลบออกไปได้คับ</p> <h2 id="step-2-swasdii-alpine-image">Step 2: สวัสดี Alpine Image<a class="zola-anchor" href="#step-2-swasdii-alpine-image" aria-label="Anchor link for: step-2-swasdii-alpine-image" style="visibility: hidden;"></a> </h2> <p>ใน Step นี้ผมจะใช้ Docker multi-stage และติดตั้งเฉพาะ dependencies สำหรับ Production อย่างเดียว ซึ่งผมจะไม่ลงรายละเอียด แต่ไปศึกษาเพิ่มเติมกันได้ <a rel="nofollow noreferrer" href="https://www.tomray.dev/nestjs-docker-production">How to write a NestJS Dockerfile optimized for production</a></p> <p>เมื่อเสร็จสิ้นกระบวนการ จะได้ขนาด Image ประมาณ 1.18 GB</p> <pre class="z-code"><code><span class="z-text z-plain">REPOSITORY TAG IMAGE ID CREATED SIZE </span><span class="z-text z-plain">remote-state-api alpine f42e4b8e75cb 4 days ago 1.18GB </span></code></pre> <p>เมื่อเราเช็คขนาด Image ของ Alpine จะอยู่ที่ 167 MB</p> <pre class="z-code"><code><span class="z-text z-plain">REPOSITORY TAG IMAGE ID CREATED SIZE </span><span class="z-text z-plain">node 18-alpine 8a6b96edfa16 9 days ago 167MB </span></code></pre> <p>แสดงว่าแอพของเราไม่รวม base image จะมีขนาดประมาณ 1 GB อันนี้คือ Nx ที่รวม node_modules ทุก Project ที่อยู่ใน monorepo เดียวกันเลย แสดงว่า devDependencies จะอยู่ที่ประมาณ 700 MB เลยทีเดียว</p> <h3 id="taw-yaang-dockerfile">ตัวอย่าง Dockerfile<a class="zola-anchor" href="#taw-yaang-dockerfile" aria-label="Anchor link for: taw-yaang-dockerfile" style="visibility: hidden;"></a> </h3> <pre data-lang="dockerfile" class="language-dockerfile z-code"><code class="language-dockerfile" data-lang="dockerfile"><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> BUILD FOR DEVELOPMENT </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> node:<span class="z-entity z-name z-enum z-tag-digest">18</span> <span class="z-keyword z-control z-dockerfile">As</span> <span class="z-variable z-stage-name">development</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/app </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node . . </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpm install --frozen-lockfile </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpx nx run remote-state-server:build:production </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">USER </span>node </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> BUILD FOR PRODUCTION </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> node:<span class="z-entity z-name z-enum z-tag-digest">18</span> <span class="z-keyword z-control z-dockerfile">As</span> <span class="z-variable z-stage-name">build</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/app </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node package.json pnpm-lock.yaml ./ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node apps/remote-state-server/prisma ./prisma/ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node --from=development /app/dist/apps/remote-state-server . </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>NODE_ENV production </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpm install --prod --frozen-lockfile </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">USER </span>node </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> PRODUCTION </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> node:<span class="z-entity z-name z-enum z-tag-digest">18-alpine</span> <span class="z-keyword z-control z-dockerfile">As</span> <span class="z-variable z-stage-name">production</span> </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/app </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node --from=build /app . </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>apk add --update --no-cache openssl1.1-compat curl </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> We don&#39;t have the existing sqlite file </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> So, we will create a fresh sqlite every time when build </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> This migration should be run every time when build </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>npx prisma migrate deploy </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Prepare prima library </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>npx prisma generate </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Clean up with https://github.com/tj/node-prune </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>curl -sf https://gobinaries.com/tj/node-prune | sh </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Run cleanup necessary dependencies Ref: Fix npm by https://bobbyhadz.com/blog/npm-fix-the-upstream-dependency-conflict-installing-npm-packages </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> RUN npm prune --force --legacy-peer-deps --production </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>/usr/local/bin/node-prune </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> remove unused dependencies </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> https://tsh.io/blog/reduce-node-modules-for-better-performance/ </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> https://medium.com/@alpercitak/nest-js-reducing-docker-container-size-4c2672369d30 </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>rm -rf node_modules/rxjs/src/ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>rm -rf node_modules/rxjs/bundles/ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>rm -rf node_modules/rxjs/_esm5/ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>rm -rf node_modules/rxjs/_esm2015/ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>rm -rf node_modules/swagger-ui-dist/*.map </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>PORT=3333 </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">EXPOSE </span>${PORT} </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-operator z-dockerfile">CMD </span>[ <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>node<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span>, <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>main.js<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span> ] </span></code></pre> <p>ถ้าสังเกตุใน dockerfile จะเห็นได้ว่าผมใช้ <code>prisma generate</code> ใน Alpine ซึ่งโดยปกติเราเวลาใช้ Alpine เรามักจะจัดการทุกอย่างให้เสร็จก่อนใน debian image แล้วค่อย copy file มาที่ Alpine</p> <p>แต่ Prisma ไม่อนุญาตเรา build ไว้ก่อนใน debian เพราะ OS ไม่ตรงกับที่ runtime ผมเลยจำใจต้องมา build ใน Alpine แทน</p> <p>ในการรัน Prisma ใน Alpine นั้นจะขาด libary ที่ชื่อว่า <code>openssl1.1-compat</code> ไม่งั้นจะ Error ว่า <strong>"Error: Unable to establish a connection to query-engine-node-api library. It seems there is a problem with your OpenSSL installation!"</strong> ขอบคุณ <a rel="nofollow noreferrer" href="https://github.com/prisma/prisma/issues/14073">prisma/prisma issues#14073</a></p> <h2 id="step-3-cchadkaar-dependencies-thiiaimekiiywkh-ngkaboprecchkhnan-kaipcchaak-nx">Step 3: จัดการ dependencies ที่ไม่เกี่ยวข้องกับโปรเจ็คนั้นๆ ออกไปจาก Nx<a class="zola-anchor" href="#step-3-cchadkaar-dependencies-thiiaimekiiywkh-ngkaboprecchkhnan-kaipcchaak-nx" aria-label="Anchor link for: step-3-cchadkaar-dependencies-thiiaimekiiywkh-ngkaboprecchkhnan-kaipcchaak-nx" style="visibility: hidden;"></a> </h2> <p>ซึ่งการที่จะหาว่าใน Project นั้นใช้ dependenies อะไรบ้างนั้น Nx ไม่ได้ให้ Tool สำหรับหา ดังนั้นเราต้องใช้ tool นอก ซึ่งผมจะใช้ <a rel="nofollow noreferrer" href="https://github.com/depcheck/depcheck">depcheck</a> ในการรันเช็คใน Project นั้นๆ</p> <p>แต่มันก็ไม่ได้ง่ายแบบนั้น เพราะ Nx สามารถเรียก Library ที่อยู่ภายใน Monorepo เดียวกันได้เลย ดังนั้นเราต้องรัน depcheck ทุก project ที่เกี่ยวข้องทั้งหมด แล้วเราจะหาได้ยังไงว่า Project เราใช้ Libary อะไรบ้าง ในเมื่อมันไม่ได้มี package.json แยกแต่ละ project</p> <p>เราสามารถหาได้ 2 วิธี</p> <ol> <li>เราสามารถใช้ <code>depcheck</code> เพื่อดู <strong>Missing dependencies</strong> ใน Project เรา ส่วนใหญ่แล้ว Missing dependencies จะเป็นการอ้างอิงภายใน monorepo เดียวกัน เพราะมันไม่ได้อยู่ใน package.json ที่อยู่ root ของ repo</li> <li>เราสามารถใช้ tool ของ Nx ในการ <a rel="nofollow noreferrer" href="https://nx.dev/recipes/other/export-project-graph">Export Project Graph to JSON</a> ได้โดยใช้ <code>nx graph --file=output.json</code></li> </ol> <p>จากนั้นในบทความหลายๆ ที่ก็แนะนำให้ใช้ <code>npm prune</code> และ <a rel="nofollow noreferrer" href="https://github.com/tj/node-prune">node-prune</a> และผมก็ได้ลอง</p> <ul> <li><a rel="nofollow noreferrer" href="https://medium.com/trendyol-tech/how-we-reduce-node-docker-image-size-in-3-steps-ff2762b51d5a">How We Reduce Node Docker Image Size In 3 Steps</a></li> <li><a rel="nofollow noreferrer" href="https://tsh.io/blog/reduce-node-modules-for-better-performance/">Honey, I shrunk the node_modules! ...and improved app’s performance in the process. On node module size</a></li> </ul> <p>และเมื่อเราได้ dependencies ของทุก project ที่เกี่ยวข้องกันแล้ว เราก็เอา package.json ในแต่ละ project มารวมกันที่เดียวเรา npm install ใหม่เพื่อให้ได้ lock file มา แล้วเอา 2 files นี้ไป build ใน docker image</p> <p>และเมื่อผมทำมาทั้งหมดที่ว่ามาแล้ว ก็จะเหลือขนาด image ประมาณ 831 MB แสดงว่าขนาดแอพเราจะอยู่ที่ 664 MB ซึ่งก็ยังเยอะอยู่ดี</p> <pre class="z-code"><code><span class="z-text z-plain">REPOSITORY TAG IMAGE ID CREATED SIZE </span><span class="z-text z-plain">remote-state-api alpine-unused 907254a67d28 4 days ago 831MB </span></code></pre> <p>ใน Step นี้จะใช้ dockerfile เดียวกันกับ step ที่แล้ว</p> <h2 id="step-4-bundle-nestjs-odyaich-esbuild">Step 4: Bundle Nestjs โดยใช้ esbuild<a class="zola-anchor" href="#step-4-bundle-nestjs-odyaich-esbuild" aria-label="Anchor link for: step-4-bundle-nestjs-odyaich-esbuild" style="visibility: hidden;"></a> </h2> <p>จริง ผมเคยมีความพยายามจะ Bundle Nestjs ด้วย esbuild หลายครั้งแล้ว ซึ่งเป็นวิธีเดียวกันกับเวลาเรา bundle JS เพื่อใช้ Browser เลย โดยที่เราไม่ต้องใส่ ืnode_modules ลงไปใน docker images เลย เย้ๆ จึงทำให้ขนาดของ Nestjs แอพที่ bundle แล้วจะอยู่ที่ 2.3 MB เท่านั้นเอง โอ้ว เล็กมากๆ</p> <p>แต่มัน build แบบ bundle ไม่ผ่านครับ เพราะมันจะบอกว่าเราไม่ได้ลง packages พวก <code>cache-manager</code>, <code>@nestjs/microservices</code>, <code>class-transformer/storage</code> ไว้ ทำให้มันหาไม่เจอ</p> <p>เพราะว่า Nestjs มีการเรียกหา packages พวกนั้นด้วย แต่เราไม่ได้ใช้งานนี่สิ ทำไมเราต้องลง ซึ่งใน esbuild เองเราสามารถเอา package ที่เราไม่ต้องการออกจาก bundle ให้ (ก็คือถ้าไม่อยู่ใน bundle มันจะไปหาใน node_modules แทน) โดยการใช้ config ประมาณนี้</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">build</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-alias z-ts">BuildOptions</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>esbuild<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">buildConfig</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">BuildOptions</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ...</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">external</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>cache-manager<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@nestjs/microservices<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>class-transformer/storage<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> ...</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">build</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">buildConfig</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>แต่ว่าเราก็ไม่สามารถทำงานได้อีก รอบนี้ดูเหมือน Depedency Injection ของ Nestjs ไม่ทำงาน ต้องขอบคุณ คุณ Anton Golub ที่เขียน blog เรื่อง <a rel="nofollow noreferrer" href="https://dev.to/antongolub/nestjs-esbuild-workarounds-99i">NestJS + esbuild workarounds</a> ซึ่งเค้าได้อธิบายว่า esbuild จะไม่ได้ bundle พวก decorator ให้เรา ดังนั้นเค้าจึงเขียน plugin ใน esbuild ที่ชื่อ <a rel="nofollow noreferrer" href="https://github.com/anatine/esbuildnx">@anatine/esbuild-decorators</a> เพื่อมาจัดการตรงนี้</p> <p>และผมก็เจอปัญหาลักษณะเดียวกันกับ Prisma เช่นกัน ผมเลยจึงเอา <code>prisma</code> และ <code>@prisma/client</code> ออกจาก bundle ด้วย แล้วค่อยไปลงใหม่ใน docker build แทน</p> <p>โดยในที่สุดก็จะได้ image ขนาด 376 MB หรือถ้าตัด base image ออก จะเหลือ 209 MB</p> <pre class="z-code"><code><span class="z-text z-plain">REPOSITORY TAG IMAGE ID CREATED SIZE </span><span class="z-text z-plain">remote-state-api alpine-bundle 022a0feda515 4 days ago 376MB </span></code></pre> <h2 id="taw-yaang-dockerfile-1">ตัวอย่าง Dockerfile<a class="zola-anchor" href="#taw-yaang-dockerfile-1" aria-label="Anchor link for: taw-yaang-dockerfile-1" style="visibility: hidden;"></a> </h2> <p>custom esbuild config</p> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-variable z-other z-readwrite z-alias z-ts">fs</span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>fs<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-variable z-other z-readwrite z-alias z-ts">path</span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>path<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">program</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>commander<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">build</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-alias z-ts">BuildOptions</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>esbuild<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">typecheckPlugin</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@jgoz/esbuild-plugin-typecheck<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-import z-ts"><span class="z-keyword z-control z-import z-ts">import</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-variable z-other z-readwrite z-alias z-ts">esbuildDecorators</span> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-from z-ts">from</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@anatine/esbuild-decorators<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">cwd</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-process z-ts">cwd</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">outfile</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">path</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-promise z-ts">resolve</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">cwd</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>output.js<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">tsconfig</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">path</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-promise z-ts">resolve</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">cwd</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>tsconfig.json<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">isVerbose</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-process z-ts">env</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">verbose</span> <span class="z-keyword z-operator z-comparison z-ts">===</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>true<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-constant z-language z-boolean z-true z-ts">true</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-constant z-language z-boolean z-false z-ts">false</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-storage z-type z-interface z-ts">interface</span> <span class="z-entity z-name z-type z-interface z-ts">ICommandOption</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">output</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">string</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">watch</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">boolean</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-interface z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-variable z-other z-readwrite z-ts">program</span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">description</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Script for building atom CLI<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">option</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>-w, --watch<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Enable watch mode<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">option</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>-o, --output &lt;path&gt;<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>output file<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span><span class="z-source z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">action</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-storage z-modifier z-async z-ts">async</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">opts</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">program</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">opts</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-entity z-name z-type z-ts">ICommandOption</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">main</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">watch</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-object z-ts">opts</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">watch</span> <span class="z-keyword z-operator z-logical z-ts">??</span> <span class="z-constant z-language z-boolean z-false z-ts">false</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">output</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-object z-ts">opts</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">output</span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">path</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-promise z-ts">resolve</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">opts</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">output</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>dist<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">program</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">parse</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-support z-variable z-object z-process z-ts">process</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-process z-ts">argv</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-modifier z-async z-ts">async</span> <span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">main</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">option</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">ICommandOption</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">config</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">BuildOptions</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">entryPoints</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>apps/remote-state-server/src/main.ts<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">bundle</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-language z-boolean z-true z-ts">true</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">platform</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>node<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">target</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>node18<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>es2021<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">outdir</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-object z-ts">option</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">output</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">tsconfig</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">plugins</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">typecheckPlugin</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">esbuildDecorators</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">tsconfig</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">cwd</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">option</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">output</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">buildConfig</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">BuildOptions</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">external</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>commander<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>cache-manager<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@nestjs/microservices<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>prisma<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@prisma/client<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>kafkajs<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>mqtt<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>amqplib<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>amqp-connection-manager<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>nats<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@grpc/grpc-js<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@grpc/proto-loader<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@nestjs/websockets/socket-module<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>class-transformer/storage<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-keyword z-operator z-spread z-ts">...</span><span class="z-variable z-other z-readwrite z-ts">config</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">developConfig</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">BuildOptions</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-keyword z-operator z-spread z-ts">...</span><span class="z-variable z-other z-readwrite z-ts">config</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">external</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>commander<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">watch</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">onRebuild</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">build</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">option</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">watch</span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-variable z-other z-readwrite z-ts">developConfig</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-variable z-other z-readwrite z-ts">buildConfig</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">onRebuild</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">error</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">result</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">any</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-return z-type z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">void</span> </span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">error</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">error</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>watch build failed<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">isVerbose</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">error</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">result</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">error</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-conditional z-ts">else</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Date</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toISOString</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-arithmetic z-ts">+</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span> watch build succeeded <span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></code></pre> <p>project.json</p> <pre data-lang="json" class="language-json z-code"><code class="language-json" data-lang="json"><span class="z-source z-json"><span class="z-comment z-line z-double-slash z-js"><span class="z-punctuation z-definition z-comment z-json">//</span> project.json </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>targets<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>build-esbuild<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>executor<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>nx:run-commands<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>options<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>commands<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-punctuation z-section z-sequence z-begin z-json">[</span> </span></span></span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"> <span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>tsx src/scripts/build.ts --output &#39;../../dist/apps/remote-state-server&#39;<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span> </span></span></span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"> <span class="z-punctuation z-section z-sequence z-end z-json">]</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>parallel<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-constant z-language z-json">false</span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>cwd<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>apps/remote-state-server<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span> </span></span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></span></code></pre> <p>Dockerfile</p> <pre data-lang="dockerfile" class="language-dockerfile z-code"><code class="language-dockerfile" data-lang="dockerfile"><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> BUILD </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> node:<span class="z-entity z-name z-enum z-tag-digest">18</span> <span class="z-keyword z-control z-dockerfile">As</span> <span class="z-variable z-stage-name">development</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/app </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node . . </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpm install --frozen-lockfile </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpx nx run remote-state-server:build-esbuild </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">USER </span>node </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Install Dependencies </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> node:<span class="z-entity z-name z-enum z-tag-digest">18</span> <span class="z-keyword z-control z-dockerfile">As</span> <span class="z-variable z-stage-name">build</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/app </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node apps/remote-state-server/prisma ./prisma/ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node --from=development /app/dist/apps/remote-state-server . </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>NODE_ENV production </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpm install @prisma/client@^4.7.1 </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">USER </span>node </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> PRODUCTION </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> node:<span class="z-entity z-name z-enum z-tag-digest">18-alpine</span> <span class="z-keyword z-control z-dockerfile">As</span> <span class="z-variable z-stage-name">production</span> </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/app </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node --from=build /app . </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> For Prisma client in Alpine </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Fix &quot;Error: Unable to establish a connection to query-engine-node-api library. It seems there is a problem with your OpenSSL installation!&quot; </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Ref: https://github.com/prisma/prisma/issues/14073 </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>apk add --update --no-cache openssl1.1-compat </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> We don&#39;t have the existing sqlite file </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> So, we will create a fresh sqlite every time when build </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> This migration should be run every time when build </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>npx prisma migrate deploy </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Prepare prima library </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>npx prisma generate </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>PORT=3333 </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">EXPOSE </span>${PORT} </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-operator z-dockerfile">CMD </span>[ <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>node<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span>, <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>main.js<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span> ] </span></code></pre> <h2 id="step-5-aich-alpine-eplaa-aelalbaiflaimcchamepn-k">Step 5: ใช้ Alpine เปล่าๆ และลบไฟล์ไม่จำเป็นออก<a class="zola-anchor" href="#step-5-aich-alpine-eplaa-aelalbaiflaimcchamepn-k" aria-label="Anchor link for: step-5-aich-alpine-eplaa-aelalbaiflaimcchamepn-k" style="visibility: hidden;"></a> </h2> <p>ใน Step นี้ เปลี่ยนไปใช้ alpine base image แล้วก็ลง nodejs เอง ลบไฟล์ที่ไม่จำเป็นออกทั้งหมด แล้วก็ติดตั้ง Prisma version โดยอ่านจาก <code>package.json</code> ไฟล์ รวมถึง set user เป็น non root</p> <p>แล้วก็ใช้ <a rel="nofollow noreferrer" href="https://github.com/wagoodman/dive">dive</a> ในการวิเคราะห์ในแต่ละ Layer ว่ามีไฟล์อะไรอยู่บ้าง จะได้ลบไฟล์ที่ไม่ได้ใช้ออกไป</p> <pre data-lang="dockerfile" class="language-dockerfile z-code"><code class="language-dockerfile" data-lang="dockerfile"><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> BUILD FOR PRODUCTION </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> node:<span class="z-entity z-name z-enum z-tag-digest">18</span> <span class="z-keyword z-control z-dockerfile">As</span> <span class="z-variable z-stage-name">build</span> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/app </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node . . </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpm install --frozen-lockfile </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>pnpx nx run remote-state-server:build-esbuild </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">USER </span>node </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> PRODUCTION </span></span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span>################## </span></span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Not Natively support ARM64 (M1) </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">FROM</span> alpine:<span class="z-entity z-name z-enum z-tag-digest">3.17</span> <span class="z-keyword z-control z-dockerfile">As</span> <span class="z-variable z-stage-name">production</span> </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>PORT=3333 </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>NODE_VERSION 18.12.1-r0 </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>NPM_VERSION 9.1.2-r0 </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">ENV </span>OPENSSL_COMPAT_VERSION 1.1.1s-r0 </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">WORKDIR </span>/app </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node package.json . </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node apps/remote-state-server/prisma ./prisma/ </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">COPY</span> --chown=node:node --from=build /app/dist/apps/remote-state-server . </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>apk add --update --no-cache nodejs=$NODE_VERSION </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>apk add --update --no-cache \ </span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> For getting node-prune </span></span><span class="z-source z-dockerfile"> curl \ </span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> For Prisma client in Alpine </span></span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Fix &quot;Error: Unable to establish a connection to query-engine-node-api library. It seems there is a problem with your OpenSSL installation!&quot; </span></span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Ref: https://github.com/prisma/prisma/issues/14073 </span></span><span class="z-source z-dockerfile"> openssl1.1-compat=$OPENSSL_COMPAT_VERSION \ </span><span class="z-source z-dockerfile"> npm=$NPM_VERSION \ </span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> npx will look the local node_modules first, if not it will install globally </span></span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Ref: https://stackoverflow.com/questions/22420564/install-only-one-package-from-package-json </span></span><span class="z-source z-dockerfile"> &amp;&amp; PRISMA_CLIENT_VERSION=$(node -pe <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>require(&#39;./package&#39;).dependencies[&#39;@prisma/client&#39;]<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span>) \ </span><span class="z-source z-dockerfile"> &amp;&amp; PRISMA_VERSION=$(node -pe <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>require(&#39;./package&#39;).dependencies[&#39;prisma&#39;]<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span>) \ </span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> We don&#39;t need package.json anymore </span></span><span class="z-source z-dockerfile"> &amp;&amp; rm -rf package.json \ </span><span class="z-source z-dockerfile"> &amp;&amp; npm install @prisma/client@$PRISMA_CLIENT_VERSION \ </span><span class="z-source z-dockerfile"> &amp;&amp; npm install -D prisma@$PRISMA_VERSION \ </span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> We don&#39;t have the existing sqlite file </span></span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> So, we will create a fresh sqlite every time when build </span></span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> This migration should be run every time when build </span></span><span class="z-source z-dockerfile"> &amp;&amp; npx prisma migrate deploy \ </span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Prepare prisma library </span></span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> If we don&#39;t have package.json, prisma will create for you, and create a local node_modules </span></span><span class="z-source z-dockerfile"> &amp;&amp; npx prisma generate \ </span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Prune non-used files </span></span><span class="z-source z-dockerfile"> &amp;&amp; npm prune --production \ </span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Clean Prisma non-used files https://github.com/prisma/prisma/issues/11577 </span></span><span class="z-source z-dockerfile"> &amp;&amp; rm -rf node_modules/.cache/ \ </span><span class="z-source z-dockerfile"> &amp;&amp; rm -rf node_modules/@prisma/engines/ \ </span><span class="z-source z-dockerfile"> &amp;&amp; rm -rf node_modules/@prisma/engines-version \ </span><span class="z-source z-dockerfile"> &amp;&amp; rm -rf node_modules/prisma \ </span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Remove cache </span></span><span class="z-source z-dockerfile"> &amp;&amp; rm -rf /root/.cache/ \ </span><span class="z-source z-dockerfile"> &amp;&amp; rm -rf /root/.npm/ \ </span><span class="z-source z-dockerfile"><span class="z-punctuation z-whitespace z-comment z-leading z-dockerfile"> </span><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Remove all unused dependecies </span></span><span class="z-source z-dockerfile"> &amp;&amp; apk del openssl1.1-compat npm curl </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">EXPOSE </span>${PORT} </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-comment z-dockerfile"><span class="z-punctuation z-definition z-comment z-dockerfile">#</span> Create a group and user </span></span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">RUN </span>addgroup -g 1000 node \ </span><span class="z-source z-dockerfile"> &amp;&amp; adduser -u 1000 -G node -s /bin/sh -D node </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-control z-dockerfile">USER </span>node </span><span class="z-source z-dockerfile"> </span><span class="z-source z-dockerfile"><span class="z-keyword z-operator z-dockerfile">CMD </span>[ <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>node<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span>, <span class="z-string z-quoted z-double z-dockerfile"><span class="z-punctuation z-definition z-string z-begin z-dockerfile">&quot;</span>main.js<span class="z-punctuation z-definition z-string z-end z-dockerfile">&quot;</span></span> ] </span></code></pre> <h2 id="srup">สรุป<a class="zola-anchor" href="#srup" aria-label="Anchor link for: srup" style="visibility: hidden;"></a> </h2> <p>โดยในที่สุดก็จะได้ image ขนาด 77 MB เมื่อตัด runtime ทุกอย่างออก ตัว node app จะเหลือที่ 25 MB (ดูใน dive)</p> <pre class="z-code"><code><span class="z-text z-plain">REPOSITORY TAG IMAGE ID CREATED SIZE </span><span class="z-text z-plain">remote-state-api alpine-unused 12b08b0bfc1f 8 seconds ago 77.8MB </span></code></pre> <p>พอได้ใช้ <code>dive</code> ส่องดูก็พบว่า ขนาดเล็กกำลังดีเลย</p> <p><img src="https://thadaw.com/posts/reduce-nestjs-docker-image-size-with-esbuild-bundle/final-image-with-dive.png" alt="" /></p> <p>ป.ล. ได้มีการลองใช้ Distroless ของ Google ด้วยแต่ยังติดปัญหากับ Prisma ถ้าใครรู้วิธีก็มาแชร์กันได้น้าา</p> <h2 id="acknowledgement">Acknowledgement<a class="zola-anchor" href="#acknowledgement" aria-label="Anchor link for: acknowledgement" style="visibility: hidden;"></a> </h2> <p>ขอบคุณคุณ <a rel="nofollow noreferrer" href="https://www.facebook.com/neutrons">Neutron Soutmun</a> ใน Facebook Group Docker in Thai มากๆ เลยคับ พอดีไม่ได้จับ Docker นาน <a rel="nofollow noreferrer" href="https://www.facebook.com/photo?fbid=10230189576151414&amp;set=gm.6041709002535607&amp;idorvanity=858633044176588">เลยสงสัยว่าทำไมลบไฟล์ใน Dockerfile ไปแล้ว ทำไมขนาดของ image ถึงไม่เล็กลง</a></p> <blockquote> <p>Docker image จะทำ RUN บน storage layer คนละ layer ครับ layer ที่ทำผ่านไปแล้ว ด้วย RUN ก่อนหน้า จะคงอยู่อย่างนั้น เปลี่ยนแปลงไม่ได้ ด้วย RUN ที่ตามหลังมาครับ</p> <p>ถ้าคาดหวังจะให้ files ถูกลบ ต้องทำภายใน RUN หรือ layer เดียวกันกับ layer ที่ files นั้น ๆ ถูกเพิ่มเข้ามาครับ RUN touch test.txt &amp;&amp; rm -rf test.txt By <a rel="nofollow noreferrer" href="https://www.facebook.com/neutrons">Neutron Soutmun</a></p> </blockquote> <h2 id="aehlng-aang-ing">แหล่งอ้างอิง<a class="zola-anchor" href="#aehlng-aang-ing" aria-label="Anchor link for: aehlng-aang-ing" style="visibility: hidden;"></a> </h2> <h3 id="docker">Docker<a class="zola-anchor" href="#docker" aria-label="Anchor link for: docker" style="visibility: hidden;"></a> </h3> <ul> <li>Multi-Stage: https://www.tomray.dev/nestjs-docker-production</li> <li>Best Practice: https://snyk.io/blog/10-best-practices-to-containerize-nodejs-web-applications-with-docker/</li> <li>Reduce File Size Node.js: https://medium.com/trendyol-tech/how-we-reduce-node-docker-image-size-in-3-steps-ff2762b51d5a</li> <li>Honey, I shrunk the node_modules! ...and improved app’s performance in the process. On node module size: https://tsh.io/blog/reduce-node-modules-for-better-performance/</li> </ul> <h3 id="docker-read-more">Docker Read more<a class="zola-anchor" href="#docker-read-more" aria-label="Anchor link for: docker-read-more" style="visibility: hidden;"></a> </h3> <ul> <li>https://medium.com/swlh/nx-nestjs-react-docker-deploys-928a55fc19fd</li> <li>https://www.codefeetime.com/post/using-docker-compose-with-nx-monorepo-for-multi-apps-development/</li> </ul> <h3 id="kube">Kube<a class="zola-anchor" href="#kube" aria-label="Anchor link for: kube" style="visibility: hidden;"></a> </h3> <ul> <li>https://creotip.io/posts/nx-monorepo-running-microservices-locally-with-docker-kubernetes</li> </ul> <h3 id="bff">BFF<a class="zola-anchor" href="#bff" aria-label="Anchor link for: bff" style="visibility: hidden;"></a> </h3> <ul> <li>https://github.com/mildronize/bff-demo</li> </ul> 2022-11-23T00:00:00+00:00 2022-11-23T00:00:00+00:00 https://thadaw.com/posts/typescript-satisfies/ <p>อย่างที่รู้กันว่าตอนนี้ <a rel="nofollow noreferrer" href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-9/">TypeScript 4.9</a> release ออกมาแล้ว มี feature หนึ่งที่น่าสนใจคือ <code>satisfies</code></p> <h2 id="ex-1-safe-upcast">Ex.1 - Safe Upcast<a class="zola-anchor" href="#ex-1-safe-upcast" aria-label="Anchor link for: ex-1-safe-upcast" style="visibility: hidden;"></a> </h2> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">RGB</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-storage z-modifier z-ts">readonly</span> <span class="z-meta z-type z-tuple z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-entity z-name z-label z-ts">red</span><span class="z-punctuation z-separator z-label z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-label z-ts">green</span><span class="z-punctuation z-separator z-label z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-entity z-name z-label z-ts">blue</span><span class="z-punctuation z-separator z-label z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span><span class="z-meta z-brace z-square z-ts">]</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Color</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">value</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-entity z-name z-type z-ts">RGB</span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-support z-type z-primitive z-ts">string</span> </span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">myColor</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">value</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>red<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-variable z-other z-readwrite z-ts">satisfies</span> <span class="z-variable z-other z-readwrite z-ts">Color</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> works</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">myIncorrectColor</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">value</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">100</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-variable z-other z-readwrite z-ts">satisfies</span> <span class="z-variable z-other z-readwrite z-ts">Color</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> throws error</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">myColor</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">value</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">toUpperCase</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> valid operation as myColor is a string</span> </span></code></pre> <h2 id="ex-2-safe-upcast">Ex.2 - Safe Upcast<a class="zola-anchor" href="#ex-2-safe-upcast" aria-label="Anchor link for: ex-2-safe-upcast" style="visibility: hidden;"></a> </h2> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Animal</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">kind</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>cat<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">meows</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-builtin z-ts">true</span> </span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">kind</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>dog<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">barks</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-builtin z-ts">true</span> </span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">let</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-readwrite z-ts">p</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">kind</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>cat<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-as z-ts">as</span> <span class="z-entity z-name z-type z-ts">Animal</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Missing meows!</span> </span><span class="z-source z-ts"><span class="z-keyword z-control z-conditional z-ts">if</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-object z-ts">p</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">kind</span> <span class="z-keyword z-operator z-comparison z-ts">===</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>dog<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-keyword z-control z-conditional z-ts">else</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-object z-ts">p</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">meows</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Reported &#39;true&#39;, actually &#39;undefined&#39;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <h3 id="solution">Solution<a class="zola-anchor" href="#solution" aria-label="Anchor link for: solution" style="visibility: hidden;"></a> </h3> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">let</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-readwrite z-ts">p</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">kind</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>cat<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">meows</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-language z-boolean z-true z-ts">true</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-variable z-other z-readwrite z-ts">satisfies</span> <span class="z-variable z-other z-readwrite z-ts">Animal</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h2 id="ex-3-property-name-constraining">Ex.3 - Property Name Constraining<a class="zola-anchor" href="#ex-3-property-name-constraining" aria-label="Anchor link for: ex-3-property-name-constraining" style="visibility: hidden;"></a> </h2> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Keys</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>a<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>b<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>c<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>d<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">p2</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">a</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">b</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>hello<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">x</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">8</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Should error, &#39;x&#39; isn&#39;t in &#39;Keys&#39;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"></span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Should be OK -- retain info that a is number and b is string</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">let</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-readwrite z-ts">a</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">p2</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">a</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">toFixed</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">let</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-readwrite z-ts">b</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-variable z-other z-object z-ts">p2</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">b</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-ts">length</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Should error even though &#39;d&#39; is in &#39;Keys&#39;</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">let</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-readwrite z-ts">d</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-variable z-other z-object z-ts">p2</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">d</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h3 id="solution-1">Solution<a class="zola-anchor" href="#solution-1" aria-label="Anchor link for: solution-1" style="visibility: hidden;"></a> </h3> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-variable z-other z-readwrite z-ts">p2</span> <span class="z-variable z-other z-readwrite z-ts">satisfies</span> <span class="z-variable z-other z-readwrite z-ts">Partial</span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-other z-readwrite z-ts">Record</span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-other z-readwrite z-ts">Keys</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">unknown</span><span class="z-keyword z-operator z-bitwise z-shift z-ts">&gt;&gt;</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h2 id="ex-4-property-name-fulfillment">EX.4 - Property Name Fulfillment<a class="zola-anchor" href="#ex-4-property-name-fulfillment" aria-label="Anchor link for: ex-4-property-name-fulfillment" style="visibility: hidden;"></a> </h2> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Keys2</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>a<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>b<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>c<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> <span class="z-keyword z-operator z-type z-ts">|</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>d<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">p3</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">a</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">b</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>hello<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">c</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-language z-boolean z-true z-ts">true</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Should error because &#39;d&#39; is missing</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Should be OK</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">t</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">boolean</span> </span></span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-variable z-other z-object z-ts">p3</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">c</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h3 id="solution-2">Solution<a class="zola-anchor" href="#solution-2" aria-label="Anchor link for: solution-2" style="visibility: hidden;"></a> </h3> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"><span class="z-variable z-other z-readwrite z-ts">p3</span> <span class="z-variable z-other z-readwrite z-ts">satisfies</span> <span class="z-variable z-other z-readwrite z-ts">Record</span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-other z-readwrite z-ts">Keys</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">unknown</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span><span class="z-punctuation z-terminator z-statement z-ts">;</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <pre data-lang="ts" class="language-ts z-code"><code class="language-ts" data-lang="ts"><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-type z-declaration z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-storage z-type z-type z-ts">type</span> <span class="z-entity z-name z-type z-alias z-ts">Color2</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">r</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">g</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">b</span></span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-support z-type z-primitive z-ts">number</span> </span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> All of these should be Colors, but I only use some of them here.</span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">Palette</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">white</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">r</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">255</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">g</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">255</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">b</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">255</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">black</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">r</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">g</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">d</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> &lt;- oops! &#39;d&#39; in place of &#39;b&#39;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">blue</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">r</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">g</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">b</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">255</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">Palette2</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">white</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">r</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">255</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">g</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">255</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">b</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">255</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">black</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">r</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">g</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">d</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> &lt;- error is now detected</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">blue</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">r</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">g</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">b</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">255</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> <span class="z-variable z-other z-readwrite z-ts">satisfies</span> <span class="z-variable z-other z-readwrite z-ts">Record</span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-other z-readwrite z-ts">string</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">Color2</span></span>&gt;</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>ขอบคุณตัวอย่างจาก https://github.com/microsoft/TypeScript/issues/47920</p> <h2 id="sueksaaephim">ศึกษาเพิ่ม<a class="zola-anchor" href="#sueksaaephim" aria-label="Anchor link for: sueksaaephim" style="visibility: hidden;"></a> </h2> <p>https://www.youtube.com/watch?v=6uJeT7y6CCo</p> 2022-05-07T00:00:00+00:00 2022-05-07T00:00:00+00:00 https://thadaw.com/posts/100-secrets-github-actions-sops-with-azure-key-vault/ <h2 id="talks-info">Talks Info<a class="zola-anchor" href="#talks-info" aria-label="Anchor link for: talks-info" style="visibility: hidden;"></a> </h2> <ul> <li>Event: Global Azure Thailand.</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/100-secrets-github-actions-sops-with-azure-key-vault">Demo Repo in Talk</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/sops-with-azure-keyvault-secrets">SOPS for Azure Key Vault Boilerplate on GitHub</a></li> </ul> <hr /> <p>ก่อนที่จะอ่านบทความนี้ควรที่จะเข้าใจการใช้งาน GitHub Actions เบื้องต้นก่อน</p> <h1 id="1-introduction">1. Introduction<a class="zola-anchor" href="#1-introduction" aria-label="Anchor link for: 1-introduction" style="visibility: hidden;"></a> </h1> <p>เชื่อว่าหลายๆ คนมีการอัพโหลด secret ไปที่ GitHub Secrets เพื่อที่จะ deploy ไปที่ server</p> <p>แต่ประเด็นคือ ใน 1 GitHub Action repo เราใช้ secret ของ GitHub Action ได้ไม่เกิน 100 ตัว เพื่อแก้ปัญหาดังกล่าว เราเลยมีทางออกประมาณ 3 วิธี</p> <h2 id="possible-solution">Possible Solution<a class="zola-anchor" href="#possible-solution" aria-label="Anchor link for: possible-solution" style="visibility: hidden;"></a> </h2> <ol> <li>ย้ายไปสร้างที่ Organization แทน มันใส่ได้ 1,000 ตัว เพราะว่า secret จะไปเห็นที่ repo อื่นๆ ด้วย จึงไม่ผ่านเรื่อง security</li> <li>สร้าง Service Principal ของแต่ละ resource group แล้ว ตอน deploy ให้ไป download publish profile ทุกครั้ง แทน เพื่อลดจำนวน secrets แต่วิธีการนี้ ก็ปัญหาเรื่อง security เช่นกัน เพราะ เรามี secret ที่มีสิทธิสูงเกินความจำเป็น ถ้าใช้หลักการของ zero trust เราควรทำให้ secret มีสิทธิ์เพียงแค่เท่าที่ใช้งานเท่านั้น (Principle of least privilege)</li> <li>เราจะเก็บ Decryption Key ใน Github secrets โดยแยกแต่ละ Environment หรือ group ที่เรากำหนดไว้ เวลาจะใช้ ก็ decrypt ออกมา ซึ่งไฟล์ encrypted secrets อยู่ใน Private Repo แทน อ่านเพิ่ม <a rel="nofollow noreferrer" href="https://docs.github.com/en/actions/security-guides/encrypted-secrets#limits-for-secrets">https://docs.github.com/en/actions/security-guides/encrypted-secrets#limits-for-secrets</a></li> </ol> <p><a rel="nofollow noreferrer" href="https://github.com/mozilla/sops">https://github.com/mozilla/sops</a></p> <h2 id="our-solution">Our Solution<a class="zola-anchor" href="#our-solution" aria-label="Anchor link for: our-solution" style="visibility: hidden;"></a> </h2> <p>เราเลือกที่จะไปทางข้อ Solution ข้อที่ 3 โดยเราเลือกใช้ <a rel="nofollow noreferrer" href="https://github.com/mozilla/sops">Mozilla SOPS</a> ซึ่งเป็น Tools ที่เป็นที่นิยมมากๆ ในการจัดการ secrets โดยใช้วิธีการ symmetric encyption ไฟล์ Yaml เพื่อจะ encrypt secrets ต่างๆ โดย SOPS support การ Encrypt จาก Cloud ไม่ว่าจะเป็น Azure, AWS, หรือ GCP รวมถึง <a rel="nofollow noreferrer" href="https://www.vaultproject.io/">HashiCorp Vault</a> ด้วย และยังสามารถใช้ Local Encrypt จาก <a rel="nofollow noreferrer" href="https://github.com/FiloSottile/age">Age</a> และ <a rel="nofollow noreferrer" href="https://www.openpgp.org/">PGP</a> ได้อีกด้วย</p> <h3 id="saaehtuthiieluue-kaich-sops">สาเหตุที่เลือกใช้ SOPS<a class="zola-anchor" href="#saaehtuthiieluue-kaich-sops" aria-label="Anchor link for: saaehtuthiieluue-kaich-sops" style="visibility: hidden;"></a> </h3> <p>มีการพูดถึง SOPS ใน <a rel="nofollow noreferrer" href="https://www.cncf.io/">Cloud Native Computing Foundation (CNCF)</a> เกี่ยวกับการจัดการ Secrets <a rel="nofollow noreferrer" href="https://www.cncf.io/blog/2021/04/22/revealing-the-secrets-of-kubernetes-secrets/">สำหรับ Kubernates</a> และอยู่ใน <a rel="nofollow noreferrer" href="https://radar.cncf.io/2021-02-secrets-management">CNCF Radar 2021 ระดับ Assess</a> และอยู่ใน <a rel="nofollow noreferrer" href="https://www.thoughtworks.com/en-th/radar/tools/mozilla-sops">thoughtworks Technology Radar 2021 ระดับ Assess</a> เครื่องมือ <a rel="nofollow noreferrer" href="https://fluxcd.io/docs/guides/mozilla-sops/">Flux CD ก็เขียนคู่มือการใช้งาน SOPS ไว้</a></p> <p>แต่ SOPS เองก็มีประเด็นต้องพิจารณาเพิ่มเติมด้วย</p> <ol> <li>เราจะเก็บ Cipher text (Encrypted data) ไว้ที่ไหนถึงจะปลอดภัย</li> <li>เรื่องของ Key Rotation อาจจะต้องการจัดเอง</li> </ol> <p>เราไม่สามารถเก็บ secrets ทั้งหมดได้ใน github Secrets เพราะจากจำนวน secrets ที่เยอะ จึงไม่สามารถเก็บใน 1 Github Secrets ที่มีขนาดไม่เกิน 64 KB</p> <blockquote> <p>Secrets are limited to 64 KB in size. To use secrets that are larger than 64 KB, you can store encrypted secrets in your repository and save the decryption passphrase as a secret on GitHub. อ่านเพิ่ม <a rel="nofollow noreferrer" href="https://docs.github.com/en/actions/security-guides/encrypted-secrets#limits-for-secrets">https://docs.github.com/en/actions/security-guides/encrypted-secrets#limits-for-secrets</a></p> </blockquote> <p>ดังนั้น ถ้าเราเก็บ SOPS Encrypted Secrets ตรงๆ ใน GitHub Secrets ไม่ได้เนื่องจากขนาดเกิน การเก็บ Encrypted Secrets ใน Git Repo ก็ทางเลือกหนึ่งที่พอรับได้ แต่สิ่งที่ต้องเผชิญต่อไปคือ Internal Threat</p> <h2 id="thaangeluue-k-uuen-ephuue-pidch-ngohweruue-ng-internal-treat">ทางเลือกอื่นๆ เพื่อปิดช่องโหว่เรื่อง Internal Treat<a class="zola-anchor" href="#thaangeluue-k-uuen-ephuue-pidch-ngohweruue-ng-internal-treat" aria-label="Anchor link for: thaangeluue-k-uuen-ephuue-pidch-ngohweruue-ng-internal-treat" style="visibility: hidden;"></a> </h2> <p>ถ้าการใช้ SOPS อาจจะยังไม่ตอบโจทย์เรื่องความปลอดภัยเพียงพอ เราอาจจะต้องใช้ External Secret Management Tool เช่น <a rel="nofollow noreferrer" href="https://www.vaultproject.io/">HashiCorp Vault</a></p> <p>แต่สิ่งที่พิจารณาเพิ่มเติมคือ เรื่อง External Threat แทนที่จะเป็นเรื่องของ Internal Threat เวลาใช้ SOPS เก็บ secrets ใน Git Repo</p> <p>ดังนั้น การที่ทำให้อุดช่องโหว่เรื่อง External Threat คือการทำ Private Connection ระหว่าง HashiCorp Vault Server และ GitHub Action Runner แทน ซึ่งเราจะต้อง Setup Self-Host GitHub Action Runner ขึ้นมาเอง และตั้งค่าให้อยู่ภายใน Private Network เดียวกันกับ HashiCorp Vault Server ดูตัวอย่างได้ใน <strong><a rel="nofollow noreferrer" href="https://www.youtube.com/watch?v=rhB72KFiL48">Secure GitOps Workflows with GitHub Actions and HashiCorp Vault</a></strong></p> <p>ถ้าเราจะเชื่อมต่อ HashiCorp ******Cloud Platform (HCP) กับ Cloud AWS แบบ Private connection เราสามารถใช้ <a rel="nofollow noreferrer" href="https://learn.hashicorp.com/tutorials/cloud/amazon-peering-hcp?in=vault/cloud-ops">AWS VPC</a></p> <p>แต่สำหรับ Azure เองยังไม่ support HCP เราอาจจะต้องตั้งค่า deploy vault server เอง</p> <h2 id="our-final-decision">Our Final Decision<a class="zola-anchor" href="#our-final-decision" aria-label="Anchor link for: our-final-decision" style="visibility: hidden;"></a> </h2> <p>เนื่องจากข้อจำกัดทางด้านเวลา และทรัพยากรที่เรามี เราจึงเลือกที่เก็บ SOPS encrypted secrets ใน Git Repo แทน จึงทำให้เราต้องมาพิจารณาเรื่อง internal threat แทน และขอไม่รับ External Threat มาเพิ่ม</p> <h1 id="2-kaaraichngaan-sops-dwy-age-encryption">2. การใช้งาน SOPS ด้วย Age Encryption<a class="zola-anchor" href="#2-kaaraichngaan-sops-dwy-age-encryption" aria-label="Anchor link for: 2-kaaraichngaan-sops-dwy-age-encryption" style="visibility: hidden;"></a> </h1> <p><a rel="nofollow noreferrer" href="https://github.com/mozilla/sops#22encrypting-using-age">ใน Docs ของ SOPS ไม่แนะนำให้ใช้ PGP แล้ว ให้เปลี่ยนมาใช้ Age Encryption แทน</a> โดย Age Encryption ใช้เป็น X25519 is an elliptic curve <a rel="nofollow noreferrer" href="https://en.wikipedia.org/wiki/Diffie%E2%80%93Hellman_key_exchange">Diffie-Hellman key exchange</a> using <a rel="nofollow noreferrer" href="https://en.wikipedia.org/wiki/Curve25519">Curve25519</a>.</p> <p>Install age via brew</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">brew</span></span><span class="z-meta z-function-call z-arguments z-shell"> install age</span> </span></code></pre> <p>Generate Age Key</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">age-keygen</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>o</span> key.txt</span> </span></code></pre> <p>The contain in file <code>key.txt</code> :</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> created: 2022-04-11T15:36:32+07:00</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> public key: age1js5yl37ghup68pzf8f2kutf6xtuwc4m6lpha0llgmcup93q3sp9qtfwvr8</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">AGE-SECRET-KEY-15YXVYTPWNT4UF3KY05K27LZN2SAT83SJKX7UH4MXQEQAWRWPFNYSDHK860</span></span> </span></code></pre> <p><strong>DO NOT PUBLISH AGE SECRET KEY</strong> (This is for example in this repo only)</p> <p>Encrypt</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sops</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>encrypt</span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>age</span> age1js5yl37ghup68pzf8f2kutf6xtuwc4m6lpha0llgmcup93q3sp9qtfwvr8 examples/data.yaml <span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span> examples/data.age-enc.yaml</span> </span></code></pre> <p>เราก็ได้ไฟล์ <code>data.age-enc.yaml</code> ที่ถูกเข้ารหัสแล้ว เราก็นำไฟล์นี้ Commit ขึ้น Git Repo ได้เลย</p> <p>อันนี้เป็นตัวอย่างไฟล์ SOPS ที่ถูก Encrypt แล้ว</p> <p><img src="https://thadaw.com/posts/100-secrets-github-actions-sops-with-azure-key-vault/Screen_Shot_2565-04-14_at_13.24.48.png" alt="Screen Shot 2565-04-14 at 13.24.48.png" /></p> <p>หลังจากนั้น ตั้งค่า GitHub Secret ด้วย Age Secret key</p> <p>ตัวอย่างการใช้งาน</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">steps</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/checkout@v3</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">mildronize/actions-get-secret-sops@v1</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">sops</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>examples/data.age-enc.yaml<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Encrypted SOPS yaml path </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">property-path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>.scope_a.app_service.app1<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> yq/jq expression syntax for getting a particular value </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">decrypting-key</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.Age_SOPS_github_action }}</span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Age Secret Key </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">sops-version</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>3.7.2<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">run</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">echo &quot;${{ steps.sops.outputs.secret }}&quot;</span> </span></code></pre> <blockquote> <p>ในการใช้งาน <a rel="nofollow noreferrer" href="https://github.com/marketplace/actions/get-secrets-from-encrypted-sops">mildronize/actions-get-secret-sops</a> จะต้องกำหนด <code>property-path</code> สำหรับเข้าถึง secret ที่เราต้องการผ่าน path ของ yaml ไฟล์ โดยใช้ syntax ของ <a rel="nofollow noreferrer" href="https://stedolan.github.io/jq/">jq</a> หรือ <a rel="nofollow noreferrer" href="https://github.com/mikefarah/yq">yq</a> ก็ได้</p> </blockquote> <p>การ Decrypt ให้เราใช้ Age Secret key ตั้งค่าไว้ใน environment variable ชื่อ <code>SOPS_AGE_KEY</code></p> <p>โดยใช้</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml">sops --decrypt examples/data.age-enc.yaml &gt; examples/data.yaml</span> </span></code></pre> <p>แต่ปัญหาก็คือใครเป็นคนเก็บ Age Secret Key และการแจกจ่าย key ให้คนอื่นใช้โดยไม่รู้ว่าใครเป็นคนใช้งาน ถือว่าเป็นปัญหาหนึ่งของ security ในรูปเป็นตัวอย่างในการใช้ Age Encryption โดยเก็บ Age Secret Key ไว้ใน 1password</p> <p><img src="https://thadaw.com/posts/100-secrets-github-actions-sops-with-azure-key-vault/Untitled.png" alt="Untitled" /></p> <p><a rel="nofollow noreferrer" href="https://blog.thenets.org/how-to-commit-encrypted-files-to-git-with-mozilla-sops/">https://blog.thenets.org/how-to-commit-encrypted-files-to-git-with-mozilla-sops/</a></p> <p>แต่ก็กลับมาประเด็นเดิมคือ การแจกจ่าย Key (Key Distribution) ให้คนอื่นใช้โดยไม่รู้ว่าใครเป็นคนใช้งาน อาจจะเกิดปัญหาเรื่อง Key หลุดแล้ว Track ไม่ได้ว่าเกิดอะไร ดังนั้นการใช้ 3rd Party Secret Management ช่วย ก็จะเป็นทางออกที่ดี ในที่นี้ผมจะใช้ Azure Key Vault เพราะแทนที่เราจะเก็บตัว Private Key นั้นเอง เราให้ Azure Key Vault ช่วยเก็บให้ และการเอาออกมาใช้ ด้วยสิทธิ์ของ User ที่อยู่ใน Azure แทน แบบนี้เราก็สามารถ track ได้ว่า user ที่มีสิทธิ์เท่านั้นนะ สามารถเข้าถึง key ได้ รวมถึงมีประวัติการใช้งาน key อีกด้วย</p> <h1 id="3-kaaraich-sops-dwy-azure-key-vault">3. การใช้ SOPS ด้วย Azure Key Vault<a class="zola-anchor" href="#3-kaaraich-sops-dwy-azure-key-vault" aria-label="Anchor link for: 3-kaaraich-sops-dwy-azure-key-vault" style="visibility: hidden;"></a> </h1> <p>ในการใช้ SOPS ด้วย Azure Key Vault ดูประกอบดังนี้</p> <p><img src="https://thadaw.com/posts/100-secrets-github-actions-sops-with-azure-key-vault/DevOps_-_Secrets_Management.jpg" alt="DevOps - Secrets Management.jpg" /></p> <ol> <li>โดยเริ่มต้นสร้าง Azure Key Vault ก่อน และสร้าง Key สำหรับ SOPS แล้วก็สร้าง Service Principle สำหรับใช้ใน GitHub Actions</li> </ol> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">az</span></span><span class="z-meta z-function-call z-arguments z-shell"> login</span> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> ตั้งค่า default subscription</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">az</span></span><span class="z-meta z-function-call z-arguments z-shell"> account set<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>subscription</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Your subscription Name<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> สร้าง Resource Group ถ้ายังไม่มี</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">az</span></span><span class="z-meta z-function-call z-arguments z-shell"> group create<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>name</span> rg-common<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>location</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Central US<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> Create a Vault, a key, and give the service principal access:</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">az</span></span><span class="z-meta z-function-call z-arguments z-shell"> keyvault create<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>name</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>kv-github-action<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>resource-group</span> rg-common<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>location</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Central US<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">az</span></span><span class="z-meta z-function-call z-arguments z-shell"> keyvault key create<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>name</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>sops-key<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>vault-name</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>kv-github-action<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>protection</span> software<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>ops</span> encrypt decrypt</span> </span></code></pre> <p>จากนั้นสร้าง Service Principle สำหรับ Key Vault เพื่อให้มีสิทธิ์เท่าที่จำเป็น (Principle of least privilege)</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">az</span></span><span class="z-meta z-function-call z-arguments z-shell"> ad sp create-for-rbac<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>n</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Display Name of Service Principle<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>role</span> Contributor<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>scopes</span> /subscriptions/<span class="z-keyword z-control z-regexp z-set z-begin z-shell">[</span>Subscription ID<span class="z-keyword z-control z-regexp z-set z-end z-shell">]</span>/resourceGroups/<span class="z-keyword z-control z-regexp z-set z-begin z-shell">[</span>resource_Group_name<span class="z-keyword z-control z-regexp z-set z-end z-shell">]</span>/providers/Microsoft.KeyVault/vaults/<span class="z-keyword z-control z-regexp z-set z-begin z-shell">[</span>vault_name<span class="z-keyword z-control z-regexp z-set z-end z-shell">]</span></span> </span></code></pre> <p>เรื่อง Role Contributor อาจจะมีสิทธิสูงเกินไป อาจจะเลือก Role อื่นตามความเหมาะสม โดยผลลัพธ์จะออกมาหน้าตาประมาณนี้</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-punctuation z-definition z-compound z-braces z-begin z-shell">{</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>appId<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span>:</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>&lt;some-uuid&gt;<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span>,</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>displayName<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span>:</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>my-keyvault-sp<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span>,</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>name<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span>:</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>http://my-keyvault-sp<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span>,</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>password<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span>:</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>&lt;some-uuid&gt;<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span>,</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>tenant<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span>:</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>&lt;tenant-id&gt;<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-punctuation z-definition z-compound z-braces z-end z-shell">}</span> </span></code></pre> <p>จากนั้นตั้งค่า Environment Variable โดยเอา Value จากข้างบน และให้สิทธิ์ Key Vault ให้กับ Service Principle</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-storage z-modifier z-shell">export</span> <span class="z-variable z-other z-readwrite z-assignment z-shell">AZURE_CLIENT_ID</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>appId<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-storage z-modifier z-shell">export</span> <span class="z-variable z-other z-readwrite z-assignment z-shell">AZURE_TENANT_ID</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>tenant<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-storage z-modifier z-shell">export</span> <span class="z-variable z-other z-readwrite z-assignment z-shell">AZURE_CLIENT_SECRET</span><span class="z-keyword z-operator z-assignment z-shell">=</span><span class="z-string z-unquoted z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>password<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span></span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">az</span></span><span class="z-meta z-function-call z-arguments z-shell"> keyvault set-policy<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>name</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>kv-github-action<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>resource-group</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>rg-common<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>spn</span> <span class="z-meta z-group z-expansion z-parameter z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-variable z-other z-readwrite z-shell">AZURE_CLIENT_ID</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>key-permissions</span> encrypt decrypt</span> </span></code></pre> <ol> <li>ต่อไปเราจะอ่าน Azure Key Vault ID มา จะเป็นหน้าตามประมาณนี้ <code>[https://sops.vault.azure.net/keys/sops-key/some-string](https://sops.vault.azure.net/keys/sops-key/some-string)</code> และใช้ในการ Encrypt SOPS</li> </ol> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> Read the key id:</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">az</span></span><span class="z-meta z-function-call z-arguments z-shell"> keyvault key show<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>name</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>sops-key<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>vault-name</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>kv-github-action<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>query</span> key.kid</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> Encrypt</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sops</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>encrypt</span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>azure-kv</span> https://sops.vault.azure.net/keys/sops-key/some-string examples/data.yaml <span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;</span> examples/data.azure-enc.yaml</span> </span></code></pre> <p>โดยจะมีหน้าตาประมาณนี้</p> <p><img src="https://thadaw.com/posts/100-secrets-github-actions-sops-with-azure-key-vault/Screen_Shot_2565-04-14_at_16.12.50.png" alt="Screen Shot 2565-04-14 at 16.12.50.png" /></p> <ol> <li>Upload Service Principle ไปที่ GitHub Secrets</li> <li>จากนั้น Commit ไฟล์ที่ผ่านการ Encrypt แล้ว เช่น <code>examples/data.azure-enc.yaml</code> ไปยัง Private Git Repo</li> <li>ตั้งค่าให้ GitHub Actions สามารถที่จะ Decrypt secret ที่เราต้องการออกมาได้ จาก Path ที่อยู่ใน yaml file</li> </ol> <p>ตัวอย่างการใช้งาน</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">steps</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/checkout@v3</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">mildronize/actions-get-secret-sops/azure@v1</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">sops</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>azure.enc.yaml<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Encrypted SOPS yaml path </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">property-path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>.scope_a.app_service.app1<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> yq/jq expression syntax for getting a particular value </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">decrypting-key</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.Azure_Credential }}</span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Azure Service Principle </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">sops-version</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>3.7.2<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">run</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">echo &quot;${{ steps.sops.outputs.secret }}&quot;</span> </span></code></pre> <blockquote> <p>ในการใช้งาน <a rel="nofollow noreferrer" href="https://github.com/marketplace/actions/get-secrets-from-encrypted-sops">mildronize/actions-get-secret-sops</a> จะต้องกำหนด <code>property-path</code> สำหรับเข้าถึง secret ที่เราต้องการผ่าน path ของ yaml ไฟล์ โดยใช้ syntax ของ <a rel="nofollow noreferrer" href="https://stedolan.github.io/jq/">jq</a> หรือ <a rel="nofollow noreferrer" href="https://github.com/mikefarah/yq">yq</a> ก็ได้</p> </blockquote> <h1 id="4-taw-yaangkaaraichngaancchring-sops-dwy-azure-key-vault-aelaekb-encrypted-secrets-bn-private-git-repo">4. ตัวอย่างการใช้งานจริง SOPS ด้วย Azure Key Vault และเก็บ Encrypted Secrets บน Private Git repo<a class="zola-anchor" href="#4-taw-yaangkaaraichngaancchring-sops-dwy-azure-key-vault-aelaekb-encrypted-secrets-bn-private-git-repo" aria-label="Anchor link for: 4-taw-yaangkaaraichngaancchring-sops-dwy-azure-key-vault-aelaekb-encrypted-secrets-bn-private-git-repo" style="visibility: hidden;"></a> </h1> <p>โค๊ดนี้<a rel="nofollow noreferrer" href="https://github.com/mildronize/deploy-multiple-azure-app-services-using-github-actions-matrix/blob/main/.github/workflows/build-and-deploy.yml">ปรับปรุงโค๊ด GitHub Actions เดิม</a> สามารถไปตามการพูดของผมเรื่อง <a rel="nofollow noreferrer" href="https://github.com/mildronize/deploy-multiple-azure-app-services-using-github-actions-matrix">“<strong><strong>Deploy .NET Core 6 to Multiple Azure App Services using GitHub Actions Matrix</strong></strong>”</a> เมื่อวันที่ 7 เม.ย. 2565 ที่ผ่านมาได้</p> <p>ตัวนี้จะเป็นการ Build .NET Core 6 และ Deploy ไปยัง Azure App Service จำนวน 3 servers พร้อมๆ กันโดยใช้ GitHub Actions และอ่าน Azure Service Principle จาก GitHub Secrets จากนั้น นำไปอ่านค่า SOPS Secrets จากใน Private Repo</p> <p>โดยตั้งค่า GitHub Secret Name ดังนี้</p> <ul> <li><code>AzureKeyVault_ServicePrinciple__kv_github_action__sp_sops_github_action</code> เอาไว้เก็บ Service Principal จากหัวข้อที่ผ่านมา</li> <li><code>GH_TOKEN_PAT</code> เอาไว้เก็บ Personal Access Token สำหรับ Checkout GitHub Private Repo</li> </ul> <p>และนี่เป็นตัวอย่าง SOPS data เก็บไว้ในไฟล์ <code>my-sops.enc.yaml</code> ที่เอาไว้เก็บ Publish Profile ของแต่ละ App Service</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">thadaw</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">app_service</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">cat</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Publish Profile of Cat Server from Azure App Service</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">dog</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Publish Profile of Dog Server from Azure App Service</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">ant</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Publish Profile of Ant Server from Azure App Service</span> </span></code></pre> <p>GitHub Actions:</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>Build and Deploy .NET Core<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Controls when the workflow will run </span></span><span class="z-source z-yaml"><span class="z-constant z-language z-boolean z-yaml">on</span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Allows you to run this workflow manually from the Actions tab </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">workflow_dispatch</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> This env is sharing between jobs </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">env</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">dotnet_version</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>6.0<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">artifact_name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">web-api</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">project_path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">src/DemoWebAPI</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">my_private_repo_secrets_version</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>0.0.1<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">sops_service_principle_gh_secret_name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">AzureKeyVault_ServicePrinciple__kv_github_action__sp_sops_github_action</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">sops_secrets_path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">./my-sops.enc.yaml</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">sops_version</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>3.7.2<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">jobs</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">build</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">runs-on</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">ubuntu-latest</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">steps</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Checkout Code</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/checkout@v2</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Setup .NET Core</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/setup-dotnet@v1</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">dotnet-version</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ env.dotnet_version }}</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Publish folder</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">run</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-keyword z-control z-flow z-block-scalar z-literal z-yaml">|</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> cd &quot;./${{ env.project_path }}&quot; </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> dotnet restore </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> dotnet build --configuration Release </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> dotnet publish --configuration Release --output ./output </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"></span> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Upload artifact for deployment job</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/upload-artifact@v2</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ env.artifact_name }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>${{ env.project_path }}/output<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">retention-days</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-integer z-decimal z-yaml">1</span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Keep artifact on remote only 1 day </span></span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">deploy</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">🚀 Deploy to ${{ matrix.id }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">runs-on</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">ubuntu-latest</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">needs</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">build</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">strategy</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">fail-fast</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-language z-boolean z-yaml">false</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">matrix</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">include</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">demo_multi_app_cat</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">thadaw-demo-multi-app-cat</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">property_path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">.thadaw.app_service.cat</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">demo_multi_app_dog</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">thadaw-demo-multi-app-dog</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">property_path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">.thadaw.app_service.dog</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">demo_multi_app_ant</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">thadaw-demo-multi-app-ant</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">property_path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">.thadaw.app_service.ant</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">steps</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Download artifact from build job</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/download-artifact@v2</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ env.artifact_name }}</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Checkout My Private repo Secrets</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/checkout@v3</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">repository</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">mildronize/my-private-repo-secrets</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">ref</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>${{ env.my_private_repo_secrets_version }}<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">token</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.GH_TOKEN_PAT }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">./my-private-repo-secrets</span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Get Credential from SOPS</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">mildronize/actions-get-secret-sops/azure@v1</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">sops</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>./my-private-repo-secrets/${{ env.sops_secrets_path }}<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">property-path</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>${{ matrix.property_path }}<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">decrypting-key</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets[env.sops_service_principle_gh_secret_name] }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">sops-version</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-double z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&quot;</span>${{ env.sops_version }}<span class="z-punctuation z-definition z-string z-end z-yaml">&quot;</span></span> </span><span class="z-source z-yaml"> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Deploy to Azure Web App</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">deploy-to-webapp</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">azure/webapps-deploy@v2</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">app-name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ matrix.name }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">publish-profile</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ steps.sops.outputs.secret }}</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">package</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-float z-decimal z-yaml"><span class="z-punctuation z-separator z-decimal z-yaml">.</span></span> </span></code></pre> <p>ก็จบกันไปแล้วนะคับ ใครมีประเด็นเรื่องใดอยากจะนำเสนอ สามารถพูดคุยกันได้เสมอครับ</p> <p>ขอบคุณที่อ่านจนจบ แล้วพบกันใหม่</p> 2022-03-19T00:00:00+00:00 2022-03-19T00:00:00+00:00 https://thadaw.com/posts/you-are-outside-of-a-module-and-outside-of-dollargopathsrc/ <p>จากที่ลองทำตาม Tutorial ในการ import Go Module ใน Official Docs</p> <ol> <li><a rel="nofollow noreferrer" href="https://go.dev/doc/tutorial/create-module">Create a module</a> -- Write a small module with functions you can call from another module.</li> <li><a rel="nofollow noreferrer" href="https://go.dev/doc/tutorial/call-module-code.html">Call your code from another module</a> -- Import and use your new module.</li> </ol> <p>มี Project Structure</p> <pre class="z-code"><code><span class="z-text z-plain">. </span><span class="z-text z-plain">├── greetings </span><span class="z-text z-plain">│ ├── go.mod </span><span class="z-text z-plain">│ └── greetings.go </span><span class="z-text z-plain">└── hello </span><span class="z-text z-plain"> ├── go.mod </span><span class="z-text z-plain"> └── hello.go </span></code></pre> <p>จากนั้น Vs Code ก็แจ้ง Error ว่า "Error loading workspace: You are outside of a module and outside of $GOPATH/src."</p> <p><img src="https://thadaw.com/posts/you-are-outside-of-a-module-and-outside-of-dollargopathsrc/error-sample.png" alt="" /></p> <h2 id="solution">Solution<a class="zola-anchor" href="#solution" aria-label="Anchor link for: solution" style="visibility: hidden;"></a> </h2> <p>จากที่ไปอ่านมา ตัว <code>gopls</code> ซึ่งเป็น libs ที่ช่วยในพวก Editor ต่างๆ พบว่า <a rel="nofollow noreferrer" href="https://github.com/golang/tools/blob/master/gopls/doc/workspace.md#one-module">ถ้าเป็น Go 1.17 ลงไปจะสามารถเปิดได้แค่ 1 module/workspace</a> เท่านั้น</p> <p>พอลองเปิดแยก Module ก็พบว่าจริงไม่ Error แล้ว <img src="https://thadaw.com/posts/you-are-outside-of-a-module-and-outside-of-dollargopathsrc/one-module-go.1.17.png" alt="" /></p> <p>ถ้าเราจะ<a rel="nofollow noreferrer" href="https://github.com/golang/tools/blob/master/gopls/doc/workspace.md#multiple-modules">ใช้งานหลาย Modules พร้อมกันใน 1 Workspace เราควรใช้ Go 1.18</a></p> <p>พออัพเกรดไป go 1.18 ก็ใช้งานได้แล้ว</p> <p><img src="https://thadaw.com/posts/you-are-outside-of-a-module-and-outside-of-dollargopathsrc/multiple-modules.png" alt="" /></p> <h2 id="ref">Ref:<a class="zola-anchor" href="#ref" aria-label="Anchor link for: ref" style="visibility: hidden;"></a> </h2> <p>https://github.com/golang/go/issues/45015#issuecomment-802556434</p> 2021-12-08T00:00:00+00:00 2021-12-08T00:00:00+00:00 https://thadaw.com/posts/how-setup-ssh-for-git-on-windows-wsl-mac-ubuntu/ <p>ถ้าใครจะตั้งค่า SSH สำหรับ Remote Server อื่นๆ ก็ใช้หลักการเดียวกันได้ เพียงแต่ในบทความนี้ยกตัวอย่าง GitHub</p> <p>บทความนี้จะแบ่งจะเป็น 2 ส่วนใหญ่ๆ คือฝั่ง Unix-based (Mac OS, Ubuntu, WSL) และฝั่ง Windows ครับ ก่อนจะเข้าเรื่อง ผมขออธิบายหลักการของ SSH เบื้องต้นนะครับ การเชื่อมต่อผ่าน SSH หรือ Secure Shell นั้น คือการเชื่อมต่อไปเครื่องต้นทาง (Local) ไปยังเครื่องปลายทาง (Remote) ผ่านการเข้ารหัส ซึ่งมั่นใจได้ว่าการเชื่อมต่อนั้นปลอดภัยในระดับที่ยอมรับได้ในระดับสากล</p> <p>ในการเชื่อมต่อนั้นจะเป็นแบบ Asymmetric Encryption หรือ การเข้ารหัสแบบไม่สมมาตร โดยก่อนจะมีการส่งข้อมูลจะมีการสร้างคู่ของกุญแจ ที่ก็ต้องใช้ร่วมกันเท่านั้น เราจะเรียกว่า Public key และ Private key ซึ่งวิธีเข้ารหัสที่ได้รับนิยมคือ RSA</p> <ul> <li>Public key คือ กุญแจสาธารณะ ซึ่งคือสามารถเผยแพร่ให้ เครื่องปลายทางได้</li> <li>Private key คือ กุญแจส่วนตัว ซึ่งไม่ควรเผยแพร่ และเจ้าของข้อมูลควรจะถือไว้เท่านั้น</li> </ul> <p>โดยก่อนที่จะมีการส่งข้อมูลจะมีการเข้ารหัสด้วย Public Key ทุกครั้ง และเมื่อข้อมูลถูกส่งมายั่งเครื่องต้นทางที่มี Private key แล้วก็จะสามารถถอดรหัสเพื่อเห็นข้อมูลจริงๆ ได้</p> <p><img src="https://thadaw.com/posts/how-setup-ssh-for-git-on-windows-wsl-mac-ubuntu/Asymmetric-Encryption.jpg" alt="" /></p> <p>สามารถอ่านเพิ่มได้ที่ <a rel="nofollow noreferrer" title="4 Cryptography Concept ที่ Developer ทุกคนควรรู้" href="https://medium.com/scb-techx/4-cryptography-concept-%E0%B8%97%E0%B8%B5%E0%B9%88-developer-%E0%B8%97%E0%B8%B8%E0%B8%81%E0%B8%84%E0%B8%99%E0%B8%84%E0%B8%A7%E0%B8%A3%E0%B8%A3%E0%B8%B9%E0%B9%89-15a806b6771d">4 Cryptography Concept ที่ Developer ทุกคนควรรู้</a> โดยคุณ Kittitorn Kanokwalai</p> <p>ก่อนที่เข้าเรื่องในบทความนี้จะเป็นวิธีการใช้ OpenSSH ที่ใช้อยากแพร่หลายใน Linux และ Mac มาอย่างยาวนาน และแนะนำวิธีการตั้งค่า OpenSSH บน Windows (แทนที่จะเป็น Putty) โดยการใช้งาน OpenSSH จะมี <code>ssh-agent</code> ที่เป็น service ที่ทำงานหลังบ้าน เพื่อให้เราสามารถนำ key ของเราไปเชื่อมต่อกับ server ปลายทางได้</p> <h2 id="1-mac-os-ubuntu-wsl">1. Mac OS, Ubuntu, WSL<a class="zola-anchor" href="#1-mac-os-ubuntu-wsl" aria-label="Anchor link for: 1-mac-os-ubuntu-wsl" style="visibility: hidden;"></a> </h2> <h3 id="1-1-withiikaarsraang-ssh-keys-aelakaaraichngaan">1.1 วิธีการสร้าง SSH Keys และการใช้งาน<a class="zola-anchor" href="#1-1-withiikaarsraang-ssh-keys-aelakaaraichngaan" aria-label="Anchor link for: 1-1-withiikaarsraang-ssh-keys-aelakaaraichngaan" style="visibility: hidden;"></a> </h3> <p>สร้าง SSH key</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> ssh-keygen<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>t</span> rsa<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>b</span> 4096<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>C</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>your_email@example.com<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>f</span> <span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/.ssh/id_rsa</span> </span></code></pre> <blockquote> <p>Note: ถ้าเป็น Windows ต้องใส่ <code>-f ~/.ssh/id_rsa</code> ไม่งั้นจะ error ว่า <a rel="nofollow noreferrer" href="https://newbedev.com/ssh-keygen-no-such-file-or-directory">SSH-Keygen "no such file or directory"</a></p> </blockquote> <p>Copy ข้อมูลในไฟล์ <code>~/.ssh/id_rsa.pub</code> (ซึ่งก็คือ Public Key) ไปวางที่ GitHub account settings (https://github.com/settings/keys).</p> <p>ติดตั้ง SSH Agent</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-support z-function z-eval z-shell">eval</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span><span class="z-meta z-group z-expansion z-command z-parens z-shell"><span class="z-punctuation z-definition z-variable z-shell">$</span><span class="z-punctuation z-section z-parens z-begin z-shell">(</span><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">ssh-agent</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>s</span></span><span class="z-punctuation z-section z-parens z-end z-shell">)</span></span><span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span></code></pre> <p>Add ตัว private key</p> <pre class="z-code"><code><span class="z-text z-plain">ssh-add ~/.ssh/id_rsa </span></code></pre> <p>ลองทดสอบ SSH key:</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> ssh<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>T</span> git@github.com</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Hi</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-keyword z-control z-regexp z-set z-begin z-shell">[</span>Your Username<span class="z-keyword z-control z-regexp z-set z-end z-shell">]</span>! You<span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>ve successfully authenticated, but GitHub does not provide shell access. </span></span></span></code></pre> <p>ไปยังโฟลเดอร์ที่ของ Git Repo ในเครื่องเราแล้วเปลี่ยน Git remote ให้เป็นแบบ SSH</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> git remote set-url origin git@github.com:username/your-repository.git</span> </span></code></pre> <p>จากนั้นลอง commit และ push ดู ระบบไม่ควรถามหารหัสผ่านแล้ว</p> <p>Ref: <a rel="nofollow noreferrer" href="https://gist.github.com/developius/c81f021eb5c5916013dc">Finnian Anderson</a>, <a rel="nofollow noreferrer" href="https://docs.github.com/en/github-ae@latest/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent">GitHub Official Doc</a></p> <h2 id="2-windows-10-11">2. Windows 10, 11<a class="zola-anchor" href="#2-windows-10-11" aria-label="Anchor link for: 2-windows-10-11" style="visibility: hidden;"></a> </h2> <p>เมื่อปี 2018 ผมได้เขียนบทความ <a href="/s/mo4feik/">วิธีตั้งค่าการใช้งาน Github (แบบไม่ต้องกรอกรหัสผ่านทุกครั้ง) ผ่าน SSH บน Windows</a> ซึ่งได้แนะนำวิธีการใช้ Putty สำหรับทำงานเป็นเบื้องหลัง แต่เราจำเป็นต้องเปิดตัว agent ขึ้นมาทุกครั้ง หรือถ้าไม่อย่างนั้นก็ต้อง ตั้งค่า startup เอง</p> <p>เมื่อปี 2019 Windows ได้ปล่อยความสามารถอย่างหนึ่งคือ OpenSSH Client ที่เป็น service อยู่บน Windows ซึ่งดีมากๆ เลย ที่เราไม่ต้องพึ่งโปรแกรมอื่นๆ อย่างเช่น Putty</p> <p>ในหัวข้อนี้จะเน้นที่ Powershell เท่านั้นนะครับ ถ้าใครใช้ WSL หรือ Git Bash บน Windows แล้วแนะนำให้ใช้หัวข้อข้างบนแทน</p> <h3 id="2-1-etriiym-ssh-samhrab-windows-10">2.1 เตรียม SSH สำหรับ Windows 10<a class="zola-anchor" href="#2-1-etriiym-ssh-samhrab-windows-10" aria-label="Anchor link for: 2-1-etriiym-ssh-samhrab-windows-10" style="visibility: hidden;"></a> </h3> <p>OpenSSH ได้ถูกปล่อยออกมาเป็นส่วนหนึ่งของ Windows 10 ทำให้เราสามารถใช้คำสั่ง SSH ผ่าน cmd หรือ powershell ได้ เพื่อให้สามารถใช้งาน OpenSSH ได้เราจำเป็นจะต้องติดตั้ง OpenSSH และสั่งให้ service <code>ssh-agent</code> ทำงานเบื้องหลังไว้</p> <ol> <li> <p>เปิด <code>Manage optional features</code> จาก start menu แล้วติดตั้ง <code>OpenSSH Client</code></p> </li> <li> <p>เปิด Powershell แบบ Admin</p> </li> </ol> <pre data-lang="powershell" class="language-powershell z-code"><code class="language-powershell" data-lang="powershell"><span class="z-source z-powershell"><span class="z-support z-function z-powershell">Get-Service</span> <span class="z-keyword z-operator z-assignment z-powershell">-</span>Name ssh<span class="z-keyword z-operator z-assignment z-powershell">-</span>agent <span class="z-keyword z-operator z-other z-powershell">|</span> <span class="z-support z-function z-powershell">Set-Service</span> <span class="z-keyword z-operator z-assignment z-powershell">-</span>StartupType Automatic </span><span class="z-source z-powershell"><span class="z-support z-function z-powershell">Get-Service</span> <span class="z-keyword z-operator z-assignment z-powershell">-</span>Name ssh<span class="z-keyword z-operator z-assignment z-powershell">-</span>agent <span class="z-keyword z-operator z-other z-powershell">|</span> <span class="z-support z-function z-powershell">Set-Service</span> <span class="z-keyword z-operator z-assignment z-powershell">-</span>Status Running </span></code></pre> <p>แนะนำให้อ่าน<a rel="nofollow noreferrer" title="Official Docs" href="https://docs.microsoft.com/en-us/windows-server/administration/openssh/openssh_keymanagement">บทความการตั้งค่า OpenSSH ของ Microsoft</a> เพิ่มเติม</p> <p>ถ้าใครไม่ถนัดการใช้ผ่าน command-line สามารถดูการตั้งค่าแบบ UI ได้ที่ <a rel="nofollow noreferrer" href="https://newbedev.com/how-to-run-ssh-add-on-windows">newbedev.com</a> หรือ <a rel="nofollow noreferrer" title="SSH keys on Windows 10" href="https://richardballard.co.uk/ssh-keys-on-windows-10/">SSH keys on Windows 10</a> โดย Richard Ballard</p> <h3 id="2-2-withiikaarsraang-ssh-keys-aelakaaraichngaan-bn-powershell">2.2 วิธีการสร้าง SSH Keys และการใช้งาน บน PowerShell<a class="zola-anchor" href="#2-2-withiikaarsraang-ssh-keys-aelakaaraichngaan-bn-powershell" aria-label="Anchor link for: 2-2-withiikaarsraang-ssh-keys-aelakaaraichngaan-bn-powershell" style="visibility: hidden;"></a> </h3> <p>สามารถใช้วิธีการเดียวกันจาก Mac OS, Ubuntu, WSL ได้เลย ที่เขียนไว้แล้วข้างบน</p> <h2 id="3-withiikaarthiitham-ssh-agent-ccham-key-passphrase">3. วิธีการที่ทำ SSH Agent จำ Key passphrase<a class="zola-anchor" href="#3-withiikaarthiitham-ssh-agent-ccham-key-passphrase" aria-label="Anchor link for: 3-withiikaarthiitham-ssh-agent-ccham-key-passphrase" style="visibility: hidden;"></a> </h2> <p>เราสามารถใช้งานทั้ง Mac OS, Ubuntu, WSL และ Windows เลย โดยมี 2 วิธี ขอบคุณ <a rel="nofollow noreferrer" title="How to make Powershell remember the SSH key passphrase." href="https://gist.github.com/danieldogeanu/16c61e9b80345c5837b9e5045a701c99">Daniel Dogeanu</a></p> <h3 id="3-1-aich-command-ssh-add">3.1 ใช้ Command ssh-add<a class="zola-anchor" href="#3-1-aich-command-ssh-add" aria-label="Anchor link for: 3-1-aich-command-ssh-add" style="visibility: hidden;"></a> </h3> <ol> <li>Add your SSH key to the <code>ssh-agent</code> by issuing the <code>ssh-add</code> command and entering your passphrase:</li> </ol> <pre class="z-code"><code><span class="z-text z-plain">ssh-add $HOME/.ssh/your_file_name </span></code></pre> <blockquote> <p>ถ้าใครจะใช้ SSH Key มากกว่าหนึ่ง แนะนำให้ใช้วิธีการที่ 2 ซึ่งเราสามารถ setup ชื่อของ Host ที่แตกต่างกันได้ เมื่อเราใช้คนละ account กัน แนะนำให้ดูเพิ่มใน หัวข้อที่ 4. การใช้งานหลาย Key ในเครื่องเดียวกัน</p> </blockquote> <h3 id="3-2-tangkhaaaiflain-ssh-config">3.2 ตั้งค่าไฟล์ใน <code>~/.ssh/config</code><a class="zola-anchor" href="#3-2-tangkhaaaiflain-ssh-config" aria-label="Anchor link for: 3-2-tangkhaaaiflain-ssh-config" style="visibility: hidden;"></a> </h3> <ol> <li>ตั้งค่าให้ SSH สามารถที่จะเพิ่ม key ลงไปใน agent โดยการแก้ไขไฟล์ config ที่อยู่ใน <code>$HOME\.ssh\config</code></li> </ol> <pre class="z-code"><code><span class="z-text z-plain">Host * </span><span class="z-text z-plain"> AddKeysToAgent yes </span><span class="z-text z-plain"> IdentitiesOnly yes </span></code></pre> <p>โดยที่เราสามารถใส่ config ของ SSH key ที่เราสร้างขึ้นมาได้ หรือจะสามารถใส่หลาย key ได้ด้วย</p> <pre class="z-code"><code><span class="z-text z-plain">Host github.com </span><span class="z-text z-plain"> HostName github.com </span><span class="z-text z-plain"> User your_user_name </span><span class="z-text z-plain"> IdentityFile ~/.ssh/your_file_name </span></code></pre> <ol start="2"> <li>เรียบร้อยแล้ว ถ้ายังใช้งานไม่ได้ให้ restart shell</li> </ol> <h2 id="4-kaaraichngaanhlaay-key-ainekhruue-ngediiywkan">4. การใช้งานหลาย Key ในเครื่องเดียวกัน<a class="zola-anchor" href="#4-kaaraichngaanhlaay-key-ainekhruue-ngediiywkan" aria-label="Anchor link for: 4-kaaraichngaanhlaay-key-ainekhruue-ngediiywkan" style="visibility: hidden;"></a> </h2> <p>เราสามารถใช้งานทั้ง Mac OS, Ubuntu, WSL และ Windows เลย โดยการเข้าไปแก้ไขไฟล์ <code>~/.ssh/config</code> และเพิ่มหัวข้อ Host ใหม่ โดยในทีนี้ผมเลือกให้ <code>Host github.com</code> เป็นค่าเริ่มต้นของ account github ส่วนตัว และใช้ <code>Host work.github.com</code> เป็น host สำหรับ account github ที่ทำงาน</p> <pre class="z-code"><code><span class="z-text z-plain">Host * </span><span class="z-text z-plain"> AddKeysToAgent yes </span><span class="z-text z-plain"> IdentitiesOnly yes </span><span class="z-text z-plain"> </span><span class="z-text z-plain">Host github.com </span><span class="z-text z-plain"> HostName github.com </span><span class="z-text z-plain"> User personal-user </span><span class="z-text z-plain"> IdentityFile ~/.ssh/personal_rsa </span><span class="z-text z-plain"> </span><span class="z-text z-plain">Host work.github.com </span><span class="z-text z-plain"> HostName github.com </span><span class="z-text z-plain"> User work-user </span><span class="z-text z-plain"> IdentityFile ~/.ssh/work_rsa </span></code></pre> <p>ลองตรวจสอบดูว่า key ของเราถูกติดตั้งหรือยัง?</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">ssh-add</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>l</span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">4096</span></span><span class="z-meta z-function-call z-arguments z-shell"> SHA256:XXXXXXXXXXXXXX personal@email.com (RSA</span><span class="z-meta z-function-call z-shell"></span>) </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">4096</span></span><span class="z-meta z-function-call z-arguments z-shell"> SHA256:XXXXXXXXXXXXXX work@email.com (RSA</span><span class="z-meta z-function-call z-shell"></span>) </span></code></pre> <p>ตัวอย่างวิธีการใช้ เราสามารถใช้</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"># สำหรับเปลี่ยน Remote location ของบัญชีส่วนตัว</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> remote set-url origin git@work.github.com:your-username/your-repo.git</span> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"># สำหรับเปลี่ยน Clone ของบัญชีส่วนตัว</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> clone git@work.github.com:your-username/your-repo.git</span> </span></code></pre> <blockquote> <p>ซึ่งตรงนี้จะเหมือนกับหน้าเว็บ GitHub แนะนำเลย</p> </blockquote> <p>แต่ถ้าเราจะใช้ <code>Host work.github.com</code> เป็น host สำหรับ account github ที่ทำงาน เพียงแค่เปลี่ยน host ใน URL เท่านั้นเอง</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"># สำหรับเปลี่ยน Remote location ของบัญชีที่ทำงาน</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> remote set-url origin git@github.com:your-username/your-repo.git</span> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"># สำหรับเปลี่ยน Remote location ของบัญชีที่ทำงาน</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> clone origin git@github.com:your-username/your-repo.git</span> </span></code></pre> <h2 id="5-withiikaaraekpayhaa">5. วิธีการแก้ปัญหา<a class="zola-anchor" href="#5-withiikaaraekpayhaa" aria-label="Anchor link for: 5-withiikaaraekpayhaa" style="visibility: hidden;"></a> </h2> <ol> <li>ถ้าเป็นแบบนี้ แสดงว่า SSH Agent ยังไม่ได้ทำงาน background ให้ใช้ คำสั่ง <code>eval "$(ssh-agent -s)"</code> เพื่อ Start Agent ขึ้นมา (เฉพาะ Mac, Linux, WSL)</li> </ol> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> ssh-add<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>l</span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Could</span></span><span class="z-meta z-function-call z-arguments z-shell"> not open a connection to your authentication agent.</span> </span></code></pre> <ol start="2"> <li>ถ้าเป็นแบบนี้ แสดงว่า SSH Agent ทำงานแล้ว แต่ยังไม่ได้ติดตั้ง key ของเราเลย อาจจะต้องใช้คำสั่ง <code>ssh-add /path/key</code> ไปก่อน เพื่อเพิ่ม key เข้าไป</li> </ol> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> ssh-add<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>l</span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">The</span></span><span class="z-meta z-function-call z-arguments z-shell"> agent has no identities.</span> </span></code></pre> <ol start="3"> <li>ถ้ายังไม่ได้ลองดู Verbose ของ SSH ดู</li> </ol> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">ssh</span></span><span class="z-meta z-function-call z-arguments z-shell"><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>vv</span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>T</span> git@work.github.com</span> </span></code></pre> <p>ถ้าลองทำแล้วได้ไม่ได้ยังไง มาแบ่งปันกันได้นะครับ</p> <h3 id="withiiaichngaanrwmkab-sourcetree">วิธีใช้งานร่วมกับ SourceTree<a class="zola-anchor" href="#withiiaichngaanrwmkab-sourcetree" aria-label="Anchor link for: withiiaichngaanrwmkab-sourcetree" style="visibility: hidden;"></a> </h3> <p><img src="https://thadaw.com/posts/how-setup-ssh-for-git-on-windows-wsl-mac-ubuntu/openssh-sourcetree.png" alt="" /></p> <blockquote> <p>เราจำเป็นต้องใช้ <strong>SourceTree แบบ Admin</strong> ถ้าสังเกตุในหัวข้อ 2.1 เตรียม SSH สำหรับ Windows 10 มีการสั่งให้ service <code>ssh-agent</code> เริ่มทำงาน จำเป็นต้องใช้สิทธิ Admin ไปด้วยในการใช้งานบน SourceTree มิเช่นนั้นมันจะ Error "ssh-agent failed with code-1 system.componentmodel.win32exception access is denied"</p> </blockquote> <p>Sourcetree สามารถอ่านไฟล์ <code>~/.ssh/config</code> ได้ ดังนั้น custom hostname เราจะสามารถใช้งานได้</p> <p>ให้เราอัพเดท Remote ไปที่</p> <pre class="z-code"><code><span class="z-text z-plain">git@work.github.com:your-username/your-repo.git </span></code></pre> <h2 id="aanephimetim">อ่านเพิ่มเติม<a class="zola-anchor" href="#aanephimetim" aria-label="Anchor link for: aanephimetim" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" title="4 Cryptography Concept ที่ Developer ทุกคนควรรู้" href="https://medium.com/scb-techx/4-cryptography-concept-%E0%B8%97%E0%B8%B5%E0%B9%88-developer-%E0%B8%97%E0%B8%B8%E0%B8%81%E0%B8%84%E0%B8%99%E0%B8%84%E0%B8%A7%E0%B8%A3%E0%B8%A3%E0%B8%B9%E0%B9%89-15a806b6771d">4 Cryptography Concept ที่ Developer ทุกคนควรรู้</a> โดยคุณ Kittitorn Kanokwalai</li> <li><a rel="nofollow noreferrer" title="SSH keys on Windows 10" href="https://richardballard.co.uk/ssh-keys-on-windows-10/">SSH keys on Windows 10</a> - Richard Ballard</li> <li><a rel="nofollow noreferrer" title="Official Docs" href="https://docs.microsoft.com/en-us/windows-server/administration/openssh/openssh_keymanagement">OpenSSH key management</a> by Microsoft</li> <li><a rel="nofollow noreferrer" href="https://linuxize.com/post/using-the-ssh-config-file/">วิธีการใช้งาน ~/.ssh/config เพิ่มเติม</a></li> <li><a rel="nofollow noreferrer" href="https://www.ssh.com/academy/ssh/agent">Understand Basic SSH Agent</a></li> <li><a rel="nofollow noreferrer" href="https://docs.github.com/en/enterprise-server@3.4/developers/overview/using-ssh-agent-forwarding">Using SSH agent forwarding</a> - GitHub Official Doc</li> </ul> <h2 id="aang-ing">อ้างอิง<a class="zola-anchor" href="#aang-ing" aria-label="Anchor link for: aang-ing" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://newbedev.com/how-to-run-ssh-add-on-windows">How to run ssh-add on windows?</a> - Newbedev.com</li> <li><a rel="nofollow noreferrer" title="How to make Powershell remember the SSH key passphrase." href="https://gist.github.com/danieldogeanu/16c61e9b80345c5837b9e5045a701c99">How to make Powershell remember the SSH key passphrase.</a> - Daniel Dogeanu</li> <li><a rel="nofollow noreferrer" href="https://newbedev.com/ssh-keygen-no-such-file-or-directory">SSH-Keygen "no such file or directory" </a> - Newbedev.com</li> <li><a rel="nofollow noreferrer" href="https://gist.github.com/developius/c81f021eb5c5916013dc">Setup SSH keys for use with GitHub/GitLab/BitBucket etc </a> - Finnian Anderson</li> </ul> 2021-11-27T00:00:00+00:00 2021-11-27T00:00:00+00:00 https://thadaw.com/posts/compare-complex-object-with-fluent-assertion/ <p>สมมติว่าเรามี Data Structure ดังนี้ คำถามคือเราจะ Assert อย่างไร</p> <pre data-lang="cs" class="language-cs z-code"><code class="language-cs" data-lang="cs"><span class="z-source z-cs"><span class="z-storage z-modifier z-access z-cs">public</span> <span class="z-meta z-class z-cs"><span class="z-storage z-type z-class z-cs">class</span> <span class="z-entity z-name z-class z-cs">Todo</span> </span></span><span class="z-source z-cs"><span class="z-meta z-class z-cs"></span><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-begin z-cs">{</span> </span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-storage z-modifier z-access z-cs">public</span> <span class="z-storage z-type z-cs">int</span> <span class="z-meta z-property z-cs"><span class="z-variable z-other z-member z-cs">ID</span></span><span class="z-meta z-property z-cs"> <span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-begin z-cs">{</span></span></span><span class="z-meta z-property z-cs"><span class="z-meta z-block z-cs"> <span class="z-meta z-method z-cs"><span class="z-storage z-type z-function z-accessor z-get z-cs">get</span><span class="z-punctuation z-terminator z-cs">;</span></span> <span class="z-meta z-method z-cs"><span class="z-storage z-type z-function z-accessor z-set z-cs">set</span><span class="z-punctuation z-terminator z-cs">;</span></span> <span class="z-punctuation z-section z-block z-end z-cs">}</span></span></span><span class="z-meta z-property z-cs"> </span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-property z-cs"> </span><span class="z-storage z-modifier z-access z-cs">public</span> <span class="z-storage z-type z-cs">string</span> <span class="z-meta z-property z-cs"><span class="z-variable z-other z-member z-cs">Title</span></span><span class="z-meta z-property z-cs"> <span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-begin z-cs">{</span></span></span><span class="z-meta z-property z-cs"><span class="z-meta z-block z-cs"> <span class="z-meta z-method z-cs"><span class="z-storage z-type z-function z-accessor z-get z-cs">get</span><span class="z-punctuation z-terminator z-cs">;</span></span> <span class="z-meta z-method z-cs"><span class="z-storage z-type z-function z-accessor z-set z-cs">set</span><span class="z-punctuation z-terminator z-cs">;</span></span> <span class="z-punctuation z-section z-block z-end z-cs">}</span></span></span><span class="z-meta z-property z-cs"> </span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-property z-cs"> </span><span class="z-storage z-modifier z-access z-cs">public</span> <span class="z-storage z-type z-cs">bool</span> <span class="z-meta z-property z-cs"><span class="z-variable z-other z-member z-cs">Completed</span></span><span class="z-meta z-property z-cs"> <span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-begin z-cs">{</span></span></span><span class="z-meta z-property z-cs"><span class="z-meta z-block z-cs"> <span class="z-meta z-method z-cs"><span class="z-storage z-type z-function z-accessor z-get z-cs">get</span><span class="z-punctuation z-terminator z-cs">;</span></span> <span class="z-meta z-method z-cs"><span class="z-storage z-type z-function z-accessor z-set z-cs">set</span><span class="z-punctuation z-terminator z-cs">;</span></span> <span class="z-punctuation z-section z-block z-end z-cs">}</span></span></span><span class="z-meta z-property z-cs"> </span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-property z-cs"></span><span class="z-punctuation z-section z-block z-end z-cs">}</span></span></span> </span><span class="z-source z-cs"> </span><span class="z-source z-cs"><span class="z-storage z-modifier z-access z-cs">public</span> <span class="z-meta z-class z-cs"><span class="z-storage z-type z-class z-cs">class</span> <span class="z-entity z-name z-class z-cs">TodoList</span> </span></span><span class="z-source z-cs"><span class="z-meta z-class z-cs"></span><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-begin z-cs">{</span> </span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"> </span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-storage z-modifier z-access z-cs">public</span> <span class="z-support z-type z-cs">IEnumerable</span><span class="z-meta z-generic z-cs"><span class="z-punctuation z-definition z-generic z-begin z-cs">&lt;</span></span><span class="z-meta z-generic z-cs"><span class="z-support z-type z-cs">Todo</span></span><span class="z-meta z-generic z-cs"><span class="z-punctuation z-definition z-generic z-end z-cs">&gt;</span></span> <span class="z-meta z-method z-cs"><span class="z-entity z-name z-function z-cs">GetTodoList</span></span><span class="z-meta z-method z-parameters z-cs"><span class="z-punctuation z-section z-parameters z-begin z-cs">(</span></span><span class="z-meta z-method z-parameters z-cs"><span class="z-punctuation z-section z-parameters z-end z-cs">)</span></span><span class="z-meta z-method z-cs"> </span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-cs"> </span><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-begin z-cs">{</span> </span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-keyword z-control z-flow z-return z-cs">return</span> <span class="z-meta z-instance z-cs"><span class="z-keyword z-operator z-new z-cs">new</span></span><span class="z-meta z-instance z-cs"> </span><span class="z-meta z-instance z-cs"><span class="z-meta z-brackets z-cs"><span class="z-punctuation z-section z-brackets z-begin z-cs">[</span><span class="z-punctuation z-section z-brackets z-end z-cs">]</span></span> </span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"> <span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-begin z-cs">{</span></span></span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-meta z-instance z-cs"><span class="z-keyword z-operator z-new z-cs">new</span></span><span class="z-meta z-instance z-cs"> </span><span class="z-meta z-instance z-cs"><span class="z-support z-type z-cs">Todo</span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-begin z-cs">{</span></span></span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">ID</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-numeric z-integer z-decimal z-cs">0</span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Title</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-string z-quoted z-double z-cs"><span class="z-punctuation z-definition z-string z-begin z-cs">&quot;</span>Shopping<span class="z-punctuation z-definition z-string z-end z-cs">&quot;</span></span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Completed</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-language z-cs">false</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-end z-cs">}</span></span></span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-meta z-instance z-cs"><span class="z-keyword z-operator z-new z-cs">new</span></span><span class="z-meta z-instance z-cs"> </span><span class="z-meta z-instance z-cs"><span class="z-support z-type z-cs">Todo</span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-begin z-cs">{</span></span></span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">ID</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-numeric z-integer z-decimal z-cs">1</span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Title</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-string z-quoted z-double z-cs"><span class="z-punctuation z-definition z-string z-begin z-cs">&quot;</span>Running<span class="z-punctuation z-definition z-string z-end z-cs">&quot;</span></span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Completed</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-language z-cs">true</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-end z-cs">}</span></span></span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-meta z-instance z-cs"><span class="z-keyword z-operator z-new z-cs">new</span></span><span class="z-meta z-instance z-cs"> </span><span class="z-meta z-instance z-cs"><span class="z-support z-type z-cs">Todo</span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-begin z-cs">{</span></span></span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">ID</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-numeric z-integer z-decimal z-cs">2</span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Title</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-string z-quoted z-double z-cs"><span class="z-punctuation z-definition z-string z-begin z-cs">&quot;</span>Reading a book<span class="z-punctuation z-definition z-string z-end z-cs">&quot;</span></span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Completed</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-language z-cs">false</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-end z-cs">}</span></span></span> </span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-end z-cs">}</span></span></span><span class="z-punctuation z-terminator z-statement z-cs">;</span> </span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-punctuation z-section z-block z-end z-cs">}</span></span></span> </span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-end z-cs">}</span></span></span> </span></code></pre> <p>ถ้าใช้ xUnit อย่างเดียว อาจจะยุ่งยาก ลองใช้ <a rel="nofollow noreferrer" href="https://www.nuget.org/packages/FluentAssertions">FluentAssertions</a></p> <h2 id="getting-started">Getting Started<a class="zola-anchor" href="#getting-started" aria-label="Anchor link for: getting-started" style="visibility: hidden;"></a> </h2> <ol> <li> <p>ติดตั้ง <a rel="nofollow noreferrer" href="https://www.nuget.org/packages/FluentAssertions">FluentAssertions</a></p> <pre data-lang="sh" class="language-sh z-code"><code class="language-sh" data-lang="sh"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">dotnet</span></span><span class="z-meta z-function-call z-arguments z-shell"> add package FluentAssertions<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>version</span> 5.10.3</span> </span></code></pre> </li> <li> <p>เรียก <code>using FluentAssertions;</code> แล้วเราสามารถใช้งาน <a rel="nofollow noreferrer" href="https://www.nuget.org/packages/FluentAssertions">FluentAssertions</a> ได้เลย</p> <pre data-lang="cs" class="language-cs z-code"><code class="language-cs" data-lang="cs"><span class="z-source z-cs"><span class="z-keyword z-control z-import z-cs">using</span> <span class="z-meta z-path z-cs">Xunit</span><span class="z-punctuation z-terminator z-cs">;</span> </span><span class="z-source z-cs"><span class="z-keyword z-control z-import z-cs">using</span> <span class="z-meta z-path z-cs">FluentAssertions</span><span class="z-punctuation z-terminator z-cs">;</span> </span><span class="z-source z-cs"> </span><span class="z-source z-cs"><span class="z-storage z-modifier z-access z-cs">public</span> <span class="z-meta z-class z-cs"><span class="z-storage z-type z-class z-cs">class</span> <span class="z-entity z-name z-class z-cs">TodoListTest</span> </span></span><span class="z-source z-cs"><span class="z-meta z-class z-cs"></span><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-begin z-cs">{</span> </span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"> </span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-meta z-annotation z-cs"><span class="z-punctuation z-definition z-annotation z-begin z-cs">[</span><span class="z-variable z-annotation z-cs">Fact</span><span class="z-punctuation z-definition z-annotation z-end z-cs">]</span></span> </span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-storage z-modifier z-access z-cs">public</span> <span class="z-storage z-type z-cs">void</span> <span class="z-meta z-method z-cs"><span class="z-entity z-name z-function z-cs">GetTodoListTest</span></span><span class="z-meta z-method z-parameters z-cs"><span class="z-punctuation z-section z-parameters z-begin z-cs">(</span></span><span class="z-meta z-method z-parameters z-cs"><span class="z-punctuation z-section z-parameters z-end z-cs">)</span></span><span class="z-meta z-method z-cs"> </span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-cs"> </span><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-begin z-cs">{</span> </span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"> </span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-storage z-type z-variable z-cs">var</span> <span class="z-variable z-other z-cs">todoList</span> <span class="z-keyword z-operator z-assignment z-variable z-cs">=</span> <span class="z-meta z-instance z-cs"><span class="z-keyword z-operator z-new z-cs">new</span></span><span class="z-meta z-instance z-cs"> </span><span class="z-meta z-instance z-cs"><span class="z-support z-type z-cs">TodoList</span><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-begin z-cs">(</span></span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-end z-cs">)</span></span></span><span class="z-punctuation z-terminator z-statement z-cs">;</span> </span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-storage z-type z-variable z-cs">var</span> <span class="z-variable z-other z-cs">expected</span> <span class="z-keyword z-operator z-assignment z-variable z-cs">=</span> <span class="z-meta z-instance z-cs"><span class="z-keyword z-operator z-new z-cs">new</span></span><span class="z-meta z-instance z-cs"> </span><span class="z-meta z-instance z-cs"><span class="z-meta z-brackets z-cs"><span class="z-punctuation z-section z-brackets z-begin z-cs">[</span><span class="z-punctuation z-section z-brackets z-end z-cs">]</span></span> </span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"> <span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-begin z-cs">{</span></span></span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-meta z-instance z-cs"><span class="z-keyword z-operator z-new z-cs">new</span></span><span class="z-meta z-instance z-cs"> </span><span class="z-meta z-instance z-cs"><span class="z-support z-type z-cs">Todo</span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-begin z-cs">{</span></span></span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">ID</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-numeric z-integer z-decimal z-cs">0</span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Title</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-string z-quoted z-double z-cs"><span class="z-punctuation z-definition z-string z-begin z-cs">&quot;</span>Shopping<span class="z-punctuation z-definition z-string z-end z-cs">&quot;</span></span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Completed</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-language z-cs">false</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-end z-cs">}</span></span></span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-meta z-instance z-cs"><span class="z-keyword z-operator z-new z-cs">new</span></span><span class="z-meta z-instance z-cs"> </span><span class="z-meta z-instance z-cs"><span class="z-support z-type z-cs">Todo</span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-begin z-cs">{</span></span></span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">ID</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-numeric z-integer z-decimal z-cs">1</span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Title</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-string z-quoted z-double z-cs"><span class="z-punctuation z-definition z-string z-begin z-cs">&quot;</span>Running<span class="z-punctuation z-definition z-string z-end z-cs">&quot;</span></span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Completed</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-language z-cs">true</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-end z-cs">}</span></span></span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-meta z-instance z-cs"><span class="z-keyword z-operator z-new z-cs">new</span></span><span class="z-meta z-instance z-cs"> </span><span class="z-meta z-instance z-cs"><span class="z-support z-type z-cs">Todo</span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-begin z-cs">{</span></span></span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">ID</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-numeric z-integer z-decimal z-cs">2</span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Title</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-string z-quoted z-double z-cs"><span class="z-punctuation z-definition z-string z-begin z-cs">&quot;</span>Reading a book<span class="z-punctuation z-definition z-string z-end z-cs">&quot;</span></span><span class="z-punctuation z-separator z-array-element z-cs">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> <span class="z-variable z-other z-cs">Completed</span> <span class="z-keyword z-operator z-assignment z-cs">=</span> <span class="z-constant z-language z-cs">false</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-end z-cs">}</span></span></span> </span></span></span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"> </span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-braces z-cs"><span class="z-punctuation z-section z-braces z-end z-cs">}</span></span></span><span class="z-punctuation z-terminator z-statement z-cs">;</span> </span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"> </span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-storage z-type z-variable z-cs">var</span> <span class="z-variable z-other z-cs">result</span> <span class="z-keyword z-operator z-assignment z-variable z-cs">=</span> <span class="z-variable z-other z-cs">todoList</span><span class="z-punctuation z-accessor z-dot z-cs">.</span><span class="z-meta z-function-call z-cs"><span class="z-variable z-function z-cs">GetTodoList</span><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-begin z-cs">(</span></span></span><span class="z-meta z-function-call z-cs"><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-end z-cs">)</span></span></span><span class="z-punctuation z-terminator z-statement z-cs">;</span> </span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-variable z-other z-cs">result</span><span class="z-punctuation z-accessor z-dot z-cs">.</span><span class="z-meta z-function-call z-cs"><span class="z-variable z-function z-cs">Should</span><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-begin z-cs">(</span></span></span><span class="z-meta z-function-call z-cs"><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-end z-cs">)</span></span></span><span class="z-punctuation z-accessor z-dot z-cs">.</span><span class="z-meta z-function-call z-cs"><span class="z-variable z-function z-cs">BeEquivalentTo</span><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-begin z-cs">(</span></span></span><span class="z-meta z-function-call z-cs"><span class="z-meta z-group z-cs"><span class="z-variable z-other z-cs">expected</span><span class="z-punctuation z-section z-group z-end z-cs">)</span></span></span><span class="z-punctuation z-terminator z-statement z-cs">;</span> </span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-punctuation z-section z-block z-end z-cs">}</span></span></span> </span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-end z-cs">}</span></span></span> </span></code></pre> </li> </ol> <h2 id="ref">Ref<a class="zola-anchor" href="#ref" aria-label="Anchor link for: ref" style="visibility: hidden;"></a> </h2> <ul> <li>https://fluentassertions.com/</li> </ul> <hr /> <p><em>Cross published at <a rel="nofollow noreferrer" href="https://www.dotnetthailand.com/testing/fluent-assertions">.NET Thailand</a></em></p> <p><em>Acknowledgement: Thank you .net thailand team to review this article: <a rel="nofollow noreferrer" href="https://www.dotnetthailand.com">dotnetthailand.github.io</a></em></p> 2021-09-04T00:00:00+00:00 2021-09-04T00:00:00+00:00 https://thadaw.com/posts/run-c-sharp-scripts-from-dotnet-cli/ <p>วิธีการรัน C# ไฟล์เดียวโดยที่ไม่ต้องสร้างเป็นโปรเจ็คโดยใช้ .NET CLI</p> <p>เนื่องจากได้รู้จักกับ <a rel="nofollow noreferrer" href="https://leetcode.com/">LeetCode</a> เว็บสำหรับฝึกฝนทักษะการเขียนโปรแกรม โดยที่มีหลายภาษามากๆ และแน่นอนมีภาษา C# ด้วย</p> <h2 id="1-tidtang">1. ติดตั้ง<a class="zola-anchor" href="#1-tidtang" aria-label="Anchor link for: 1-tidtang" style="visibility: hidden;"></a> </h2> <p>แค่ติดตั้ง dotnet-script โดยใช้คำสั่ง</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">dotnet</span></span><span class="z-meta z-function-call z-arguments z-shell"> tool install<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>g</span> dotnet-script</span> </span></code></pre> <h2 id="2-sraangaifl-omnisharp-json">2. สร้างไฟล์ omnisharp.json<a class="zola-anchor" href="#2-sraangaifl-omnisharp-json" aria-label="Anchor link for: 2-sraangaifl-omnisharp-json" style="visibility: hidden;"></a> </h2> <pre data-lang="json" class="language-json z-code"><code class="language-json" data-lang="json"><span class="z-source z-json"><span class="z-comment z-line z-double-slash z-js"><span class="z-punctuation z-definition z-comment z-json">//</span> Filename: omnisharp.json </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>script<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"> <span class="z-comment z-line z-double-slash z-js"><span class="z-punctuation z-definition z-comment z-json">//</span> เพื่อให้รู้ว่าเราจะเขียน dotnet แบบ script </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>enableScriptNuGetReferences<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-constant z-language z-json">true</span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-comment z-line z-double-slash z-js"><span class="z-punctuation z-definition z-comment z-json">//</span> ใช้ .net 5 </span></span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>defaultTargetFramework<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>net5.0<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></code></pre> <blockquote> <p>ถ้าเราใช้คำสั่ง <code>dotnet script init</code> จะสร้างไฟล์ <code>omnisharp.json</code> แบบนี้ให้อัตโนมัติเลย</p> </blockquote> <h2 id="3-ekhiiynaiflthiit-ngkaarran">3. เขียนไฟล์ที่ต้องการรัน<a class="zola-anchor" href="#3-ekhiiynaiflthiit-ngkaarran" aria-label="Anchor link for: 3-ekhiiynaiflthiit-ngkaarran" style="visibility: hidden;"></a> </h2> <pre data-lang="c#" class="language-c# z-code"><code class="language-c#" data-lang="c#"><span class="z-source z-cs"><span class="z-comment z-line z-double-slash z-cs"><span class="z-punctuation z-definition z-comment z-cs">//</span> Filename: HelloWorld.csx </span></span><span class="z-source z-cs"><span class="z-storage z-modifier z-access z-cs">public</span> <span class="z-meta z-class z-cs"><span class="z-storage z-type z-class z-cs">class</span> <span class="z-entity z-name z-class z-cs">HelloWorld</span> </span><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-begin z-cs">{</span> </span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-storage z-modifier z-access z-cs">public</span> <span class="z-storage z-type z-cs">string</span> <span class="z-meta z-method z-cs"><span class="z-entity z-name z-function z-cs">GetString</span></span><span class="z-meta z-method z-parameters z-cs"><span class="z-punctuation z-section z-parameters z-begin z-cs">(</span></span><span class="z-meta z-method z-parameters z-cs"><span class="z-punctuation z-section z-parameters z-end z-cs">)</span></span><span class="z-meta z-method z-cs"> </span><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-begin z-cs">{</span> </span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-keyword z-control z-flow z-return z-cs">return</span> <span class="z-string z-quoted z-double z-cs"><span class="z-punctuation z-definition z-string z-begin z-cs">&quot;</span>Hello World<span class="z-punctuation z-definition z-string z-end z-cs">&quot;</span></span><span class="z-punctuation z-terminator z-statement z-cs">;</span> </span></span></span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-meta z-method z-body z-cs"><span class="z-meta z-block z-cs"> <span class="z-punctuation z-section z-block z-end z-cs">}</span></span></span> </span></span></span><span class="z-source z-cs"><span class="z-meta z-class z-body z-cs"><span class="z-meta z-block z-cs"><span class="z-punctuation z-section z-block z-end z-cs">}</span></span></span> </span><span class="z-source z-cs"> </span><span class="z-source z-cs"><span class="z-variable z-other z-cs">Console</span><span class="z-punctuation z-accessor z-dot z-cs">.</span><span class="z-meta z-function-call z-cs"><span class="z-variable z-function z-cs">WriteLine</span><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-begin z-cs">(</span></span></span><span class="z-meta z-function-call z-cs"><span class="z-meta z-group z-cs"><span class="z-meta z-instance z-cs"><span class="z-keyword z-operator z-new z-cs">new</span></span><span class="z-meta z-instance z-cs"> </span><span class="z-meta z-instance z-cs"><span class="z-support z-type z-cs">HelloWorld</span><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-begin z-cs">(</span></span></span><span class="z-meta z-instance z-cs"><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-end z-cs">)</span></span></span><span class="z-punctuation z-accessor z-dot z-cs">.</span><span class="z-meta z-function-call z-cs"><span class="z-variable z-function z-cs">GetString</span><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-begin z-cs">(</span></span></span><span class="z-meta z-function-call z-cs"><span class="z-meta z-group z-cs"><span class="z-punctuation z-section z-group z-end z-cs">)</span></span></span><span class="z-punctuation z-section z-group z-end z-cs">)</span></span></span><span class="z-punctuation z-terminator z-statement z-cs">;</span> </span></code></pre> <p>ถ้าเราสังเกตุเราสามารถเขียนคำสั่งนอก Class ได้เลย ซึ่งสะดวกมากๆ สำหรับการเขียน script</p> <blockquote> <p>ใน Docs เค้าแนะนำให้ใช้ <code>.csx</code> เพราะว่าจะได้แยกแยะออกว่าอันนี้คือ scripts</p> </blockquote> <h3 id="okhrngsraangaiflkhwrepnaebbnii">โครงสร้างไฟล์ควรเป็นแบบนี้<a class="zola-anchor" href="#okhrngsraangaiflkhwrepnaebbnii" aria-label="Anchor link for: okhrngsraangaiflkhwrepnaebbnii" style="visibility: hidden;"></a> </h3> <pre class="z-code"><code><span class="z-text z-plain">. </span><span class="z-text z-plain">├── HelloWorld.csx </span><span class="z-text z-plain">└── omnisharp.json </span></code></pre> <h2 id="4-aelwranaidely">4. แล้วรันได้เลย<a class="zola-anchor" href="#4-aelwranaidely" aria-label="Anchor link for: 4-aelwranaidely" style="visibility: hidden;"></a> </h2> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> dotnet-script .<span class="z-constant z-character z-escape z-shell">\H</span>elloWorld.csx</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Hello</span></span><span class="z-meta z-function-call z-arguments z-shell"> World</span> </span></code></pre> <h2 id="tip-sraang-scripts-epn-folder">Tip: สร้าง scripts เป็น folder<a class="zola-anchor" href="#tip-sraang-scripts-epn-folder" aria-label="Anchor link for: tip-sraang-scripts-epn-folder" style="visibility: hidden;"></a> </h2> <p>เราสามารถใช้ โดยการสร้าง Folder ไว้แล้ว รันคำสั่งใน Folder นั้นเลย</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">dotnet</span></span><span class="z-meta z-function-call z-arguments z-shell"> script init</span> </span></code></pre> <p>This will create <code>main.csx</code> along with the launch configuration needed to debug the script in VS Code.</p> <pre class="z-code"><code><span class="z-text z-plain">. </span><span class="z-text z-plain">├── .vscode </span><span class="z-text z-plain">│ └── launch.json </span><span class="z-text z-plain">├── main.csx </span><span class="z-text z-plain">└── omnisharp.json </span></code></pre> <h2 id="ref">Ref<a class="zola-anchor" href="#ref" aria-label="Anchor link for: ref" style="visibility: hidden;"></a> </h2> <p>https://github.com/filipw/dotnet-script</p> 2021-08-27T00:00:00+00:00 2021-08-27T00:00:00+00:00 https://thadaw.com/posts/github-actions-previews-deploy-using-vercel/ <p>นี่เป็นตัวอย่างการใช้งานคร่าวๆ นะครับ</p> <p><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/pull/29">Pull request example</a></p> <p><img src="https://thadaw.com/posts/github-actions-previews-deploy-using-vercel/preview.png" alt="" /></p> <h2 id="withiikaaraich">วิธีการใช้<a class="zola-anchor" href="#withiikaaraich" aria-label="Anchor link for: withiikaaraich" style="visibility: hidden;"></a> </h2> <h3 id="1-thaamiikaarechuue-mt-vercel-kab-github-aihpidkaarechuue-mt-k-n">1. ถ้ามีการเชื่อมต่อ Vercel กับ Github ให้ปิดการเชื่อมต่อก่อน<a class="zola-anchor" href="#1-thaamiikaarechuue-mt-vercel-kab-github-aihpidkaarechuue-mt-k-n" aria-label="Anchor link for: 1-thaamiikaarechuue-mt-vercel-kab-github-aihpidkaarechuue-mt-k-n" style="visibility: hidden;"></a> </h3> <p>เพราะว่าเราต้องการให้ github actions build and deploy แทนที่ Vercel (ซึ่งโดยปกติ Vercel จะ build และ deploy ให้อัตโนมัติ) <a rel="nofollow noreferrer" href="https://github.com/marketplace/actions/vercel-action#disable-vercel-for-github">Read More</a></p> <blockquote> <p>The Vercel for GitHub integration automatically deploys your GitHub projects with Vercel, providing Preview Deployment URLs, and automatic Custom Domain updates. <a rel="nofollow noreferrer" href="https://vercel.com/docs/v2/git-integrations">link</a></p> </blockquote> <p>Set <code>github.enabled</code>: false in <code>vercel.json</code>, see example <code>vercel.json</code> file below:</p> <pre data-lang="json" class="language-json z-code"><code class="language-json" data-lang="json"><span class="z-source z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>version<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-constant z-numeric z-integer z-decimal z-json">2</span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>public<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-constant z-language z-json">false</span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>github<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>enabled<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-constant z-language z-json">false</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-mapping z-value z-json"> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>builds<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-punctuation z-section z-sequence z-begin z-json">[</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"> <span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>src<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>./public/**<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>use<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>@now/static<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"> <span class="z-punctuation z-section z-sequence z-end z-json">]</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>routes<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"><span class="z-punctuation z-section z-sequence z-begin z-json">[</span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"> <span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>src<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>/(.*)<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span> </span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>dest<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span> </span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>public/$1<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span> <span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-meta z-sequence z-json"> <span class="z-punctuation z-section z-sequence z-end z-json">]</span></span> </span></span><span class="z-source z-json"><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></code></pre> <p>When set to false, Vercel for GitHub will not deploy the given project regardless of the GitHub app being installed.</p> <h2 id="2-khunkhwrechuue-mt-github-kab-vercel-thiiekhruue-ngkh-ngkhun">2. คุณควรเชื่อมต่อ Github กับ Vercel ที่เครื่องของคุณ<a class="zola-anchor" href="#2-khunkhwrechuue-mt-github-kab-vercel-thiiekhruue-ngkh-ngkhun" aria-label="Anchor link for: 2-khunkhwrechuue-mt-github-kab-vercel-thiiekhruue-ngkh-ngkhun" style="visibility: hidden;"></a> </h2> <p>https://github.com/marketplace/actions/vercel-action#project-linking</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> vercel</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">?</span></span><span class="z-meta z-function-call z-arguments z-shell"> Set up and deploy “<span class="z-meta z-group z-expansion z-tilde"><span class="z-variable z-language z-tilde z-shell">~</span></span>/web/my-lovely-project”<span class="z-keyword z-operator z-regexp z-quantifier z-shell">?</span> <span class="z-keyword z-control z-regexp z-set z-begin z-shell">[</span>Y/n<span class="z-keyword z-control z-regexp z-set z-end z-shell">]</span> y</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">?</span></span><span class="z-meta z-function-call z-arguments z-shell"> Which scope do you want to deploy to<span class="z-keyword z-operator z-regexp z-quantifier z-shell">?</span> My Awesome Team</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">?</span></span><span class="z-meta z-function-call z-arguments z-shell"> Link to existing project<span class="z-keyword z-operator z-regexp z-quantifier z-shell">?</span> <span class="z-keyword z-control z-regexp z-set z-begin z-shell">[</span>y/N<span class="z-keyword z-control z-regexp z-set z-end z-shell">]</span> y</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">?</span></span><span class="z-meta z-function-call z-arguments z-shell"> What’s the name of your existing project<span class="z-keyword z-operator z-regexp z-quantifier z-shell">?</span> my-lovely-project</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">🔗</span></span><span class="z-meta z-function-call z-arguments z-shell"> Linked to awesome-team/my-lovely-project (created .vercel and added it to .gitignore</span><span class="z-meta z-function-call z-shell"></span>) </span></code></pre> <p>Once set up, a new .vercel directory will be added to your directory. The .vercel directory contains both the organization(vercel-org-id) and project(vercel-project-id) id of your project.</p> <pre data-lang="json" class="language-json z-code"><code class="language-json" data-lang="json"><span class="z-source z-json"><span class="z-meta z-mapping z-json"><span class="z-punctuation z-section z-mapping z-begin z-json">{</span></span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>orgId<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span></span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>example_org_id<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-separator z-mapping z-pair z-json">,</span></span><span class="z-meta z-mapping z-key z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>projectId<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span></span><span class="z-meta z-mapping z-value z-json"><span class="z-punctuation z-separator z-mapping z-key-value z-json">:</span></span><span class="z-meta z-mapping z-value z-json"><span class="z-string z-quoted z-double z-json"><span class="z-punctuation z-definition z-string z-begin z-json">&quot;</span>example_project_id<span class="z-punctuation z-definition z-string z-end z-json">&quot;</span></span><span class="z-punctuation z-section z-mapping z-end z-json">}</span></span> </span></code></pre> <p>คุณสามารถเก็บ secret ได้ตาม <a rel="nofollow noreferrer" href="https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets">link</a></p> <h3 id="3-kamhnd-github-actions">3. กำหนด Github Actions<a class="zola-anchor" href="#3-kamhnd-github-actions" aria-label="Anchor link for: 3-kamhnd-github-actions" style="visibility: hidden;"></a> </h3> <blockquote> <p>TL;DR: Combining <code>pull_request_target</code> workflow trigger with an explicit checkout of an untrusted PR is a dangerous practice that may lead to repository compromise. We use <code>pull_request</code> trigger. <a rel="nofollow noreferrer" href="https://securitylab.github.com/research/github-actions-preventing-pwn-requests/">Ref</a></p> </blockquote> <pre data-lang="yml" class="language-yml z-code"><code class="language-yml" data-lang="yml"><span class="z-source z-yaml"><span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span># https://github.com/marketplace/actions/vercel-action </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Preview deploy</span> </span><span class="z-source z-yaml"><span class="z-constant z-language z-boolean z-yaml">on</span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">pull_request</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">branches</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml">main</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">jobs</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">deploy</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">runs-on</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">ubuntu-latest</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">steps</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">actions/checkout@v2</span> </span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">uses</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">amondnet/vercel-action@v20</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">vercel-action</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">with</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">vercel-token</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.VERCEL_TOKEN }}</span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Required </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">github-token</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.PUBLIC_REPO_ACCESS_TOKEN }}</span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span>Optional </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">vercel-org-id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.VERCEL_ORG_ID}}</span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span>Required </span></span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">vercel-project-id</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">${{ secrets.VERCEL_PROJECT_ID}}</span> <span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span>Required </span></span><span class="z-source z-yaml"> <span class="z-punctuation z-definition z-block z-sequence z-item z-yaml">-</span> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">name</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">preview-url</span> </span><span class="z-source z-yaml"> <span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">run</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-keyword z-control z-flow z-block-scalar z-literal z-yaml">|</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-block z-yaml"> echo ${{ steps.vercel-action.outputs.preview-url }} </span></span></code></pre> <h3 id="4-kamhndkhaathiit-ngaich-thang-github-secrets-aela-vercel">4. กำหนดค่าที่ต้องใช้ ทั้ง GitHub Secrets และ Vercel<a class="zola-anchor" href="#4-kamhndkhaathiit-ngaich-thang-github-secrets-aela-vercel" aria-label="Anchor link for: 4-kamhndkhaathiit-ngaich-thang-github-secrets-aela-vercel" style="visibility: hidden;"></a> </h3> <table><thead><tr><th>Secret key</th><th>Secret value</th></tr></thead><tbody> <tr><td>VERCEL_TOKEN</td><td>ต้องสร้างจาก https://vercel.com/account/tokens</td></tr> <tr><td>PUBLIC_REPO_ACCESS_TOKEN</td><td>ต้องกำหนด <strong>repo</strong> access โดยกำหนด Token ของ github <a rel="nofollow noreferrer" href="https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token">read more</a></td></tr> <tr><td>VERCEL_ORG_ID</td><td>ID ของ team ที่เราใช้ แต่ถ้าใช้ Personal ให้เอาจาก <a rel="nofollow noreferrer" href="https://vercel.com/account">account setting</a> ใน Your ID</td></tr> <tr><td>VERCEL_PROJECT_ID</td><td>เอามาจาก Project ID ใน Project Setting</td></tr> </tbody></table> <p>สำหรับการตั้งค่าอื่นๆ เพิ่มเติมที่ <a rel="nofollow noreferrer" href="https://github.com/amondnet/vercel-action">Vercel Action - GitHub Action</a></p> <h2 id="read-more">Read More<a class="zola-anchor" href="#read-more" aria-label="Anchor link for: read-more" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://sanderknape.com/2020/05/deploy-pull-requests-github-actions-deployments/">Deploy your pull requests with GitHub Actions and GitHub Deployments</a></li> <li><a rel="nofollow noreferrer" href="https://securitylab.github.com/research/github-actions-preventing-pwn-requests/">Keeping your GitHub Actions and workflows secure Part 1: Preventing pwn requests</a></li> </ul> <hr /> <p><em>Cross published at <a rel="nofollow noreferrer" href="https://www.dotnetthailand.com/programming-cookbook/github-actions/deploy-preview-when-pr">.NET Thailand</a></em></p> <p><em>Acknowledgement: Thank you .net thailand team to review this article: <a rel="nofollow noreferrer" href="https://github.com/dotnetthailand/dotnetthailand.github.io/pull/139">dotnetthailand.github.io#139</a></em></p> 2021-08-21T00:00:00+00:00 2021-08-21T00:00:00+00:00 https://thadaw.com/posts/react-typescript-design-pattern-import-export/ <h2 id="default-export">Default export<a class="zola-anchor" href="#default-export" aria-label="Anchor link for: default-export" style="visibility: hidden;"></a> </h2> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> MyComponent.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">MyComponent</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx">Hey, MyComponent</span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-keyword z-control z-default z-tsx">default</span> <span class="z-variable z-other z-readwrite z-tsx">MyComponent</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> App.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">MyComponent</span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>./MyComponent<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></code></pre> <h2 id="export">Export<a class="zola-anchor" href="#export" aria-label="Anchor link for: export" style="visibility: hidden;"></a> </h2> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> MyComponent.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">MyComponent</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx">Hey, MyComponent</span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> App.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">MyComponent</span> <span class="z-punctuation z-definition z-block z-tsx">}</span></span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>./MyComponent<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></code></pre> <h2 id="rename-import">Rename import<a class="zola-anchor" href="#rename-import" aria-label="Anchor link for: rename-import" style="visibility: hidden;"></a> </h2> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> MyComponent.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">MyComponent</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx">Hey, MyComponent</span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> App.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> <span class="z-variable z-other z-readwrite z-tsx">MyComponent</span> <span class="z-keyword z-control z-as z-tsx">as</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">MySuperComponent</span> <span class="z-punctuation z-definition z-block z-tsx">}</span></span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>./MyComponent<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">App</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-tag z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx"><span class="z-support z-class z-component z-tsx">MySuperComponent</span></span><span class="z-meta z-tag z-attributes z-tsx"> </span><span class="z-punctuation z-definition z-tag z-end z-tsx">/&gt;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></code></pre> <h2 id="group-all-imports-and-rename">Group all imports and rename<a class="zola-anchor" href="#group-all-imports-and-rename" aria-label="Anchor link for: group-all-imports-and-rename" style="visibility: hidden;"></a> </h2> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> MyComponent.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">Switch</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx">Hey, Switch</span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">Group</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx">Hey, Group</span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> App.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> <span class="z-constant z-language z-import-export-all z-tsx">*</span> <span class="z-keyword z-control z-as z-tsx">as</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">MyComponent</span> <span class="z-punctuation z-definition z-block z-tsx">}</span></span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>./MyComponent<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">App</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx"><span class="z-support z-class z-component z-tsx">MyComponent.Switch</span></span><span class="z-meta z-tag z-attributes z-tsx"> </span><span class="z-punctuation z-definition z-tag z-end z-tsx">/&gt;</span></span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx"><span class="z-support z-class z-component z-tsx">MyComponent.Group</span></span><span class="z-meta z-tag z-attributes z-tsx"> </span><span class="z-punctuation z-definition z-tag z-end z-tsx">/&gt;</span></span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-brace z-round z-tsx">)</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></code></pre> <h2 id="re-export-all">Re-export all<a class="zola-anchor" href="#re-export-all" aria-label="Anchor link for: re-export-all" style="visibility: hidden;"></a> </h2> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> MyComponent.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">Switch</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx">Hey, Switch</span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">Group</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx">Hey, Group</span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> MyParentComponent.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-export z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-constant z-language z-import-export-all z-tsx">*</span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>./MyComponent<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> App.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">Switch</span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">Group</span> <span class="z-punctuation z-definition z-block z-tsx">}</span></span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>./MyParentComponent<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">App</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx"><span class="z-support z-class z-component z-tsx">Switch</span></span><span class="z-meta z-tag z-attributes z-tsx"> </span><span class="z-punctuation z-definition z-tag z-end z-tsx">/&gt;</span></span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx"><span class="z-support z-class z-component z-tsx">Group</span></span><span class="z-meta z-tag z-attributes z-tsx"> </span><span class="z-punctuation z-definition z-tag z-end z-tsx">/&gt;</span></span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-brace z-round z-tsx">)</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></code></pre> <h2 id="re-export-then-group-all-imports-and-rename">Re-export, then group all imports and rename<a class="zola-anchor" href="#re-export-then-group-all-imports-and-rename" aria-label="Anchor link for: re-export-then-group-all-imports-and-rename" style="visibility: hidden;"></a> </h2> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> MyComponent.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">Switch</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx">Hey, Switch</span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">Group</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx">Hey, Group</span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> MyParentComponent.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-export z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-constant z-language z-import-export-all z-tsx">*</span> <span class="z-keyword z-control z-as z-tsx">as</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">MyComponent</span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>./MyComponent<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> App.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">MyComponent</span> <span class="z-punctuation z-definition z-block z-tsx">}</span></span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>./MyParentComponent<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">App</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx"><span class="z-support z-class z-component z-tsx">MyComponent.Switch</span></span><span class="z-meta z-tag z-attributes z-tsx"> </span><span class="z-punctuation z-definition z-tag z-end z-tsx">/&gt;</span></span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx"><span class="z-support z-class z-component z-tsx">MyComponent.Group</span></span><span class="z-meta z-tag z-attributes z-tsx"> </span><span class="z-punctuation z-definition z-tag z-end z-tsx">/&gt;</span></span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-brace z-round z-tsx">)</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></code></pre> <h2 id="export-type">Export type<a class="zola-anchor" href="#export-type" aria-label="Anchor link for: export-type" style="visibility: hidden;"></a> </h2> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> MyComponent.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-type z-declaration z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-type z-tsx">type</span> <span class="z-entity z-name z-type z-alias z-tsx">Gender</span> <span class="z-keyword z-operator z-assignment z-tsx">=</span> <span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>Male<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span> <span class="z-keyword z-operator z-type z-tsx">|</span> <span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>Female<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> <span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> Accept only &quot;Male&quot; or &quot;Female&quot;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> App.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">Gender</span> <span class="z-punctuation z-definition z-block z-tsx">}</span></span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>./MyComponent<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span> </span></code></pre> <h2 id="export-interface">Export interface<a class="zola-anchor" href="#export-interface" aria-label="Anchor link for: export-interface" style="visibility: hidden;"></a> </h2> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> MyComponent.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-storage z-type z-interface z-tsx">interface</span> <span class="z-entity z-name z-type z-interface z-tsx">IUser</span> <span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-meta z-field z-declaration z-tsx"> <span class="z-meta z-definition z-property z-tsx"><span class="z-variable z-object z-property z-tsx">id</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-support z-type z-primitive z-tsx">string</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-meta z-field z-declaration z-tsx"> <span class="z-meta z-definition z-property z-tsx"><span class="z-variable z-object z-property z-tsx">name</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-support z-type z-primitive z-tsx">string</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> App.tsx</span> </span><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">IUser</span> <span class="z-punctuation z-definition z-block z-tsx">}</span></span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>./MyComponent<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span> </span></code></pre> <hr /> <p><em>Cross published at <a rel="nofollow noreferrer" href="https://www.dotnetthailand.com/frontend-web/react-typescript/design-pattern">.NET Thailand</a></em></p> <p><em>Acknowledgement: Thank you .net thailand team to review this article: <a rel="nofollow noreferrer" href="https://github.com/dotnetthailand/dotnetthailand.github.io/pull/84/files">dotnetthailand.github.io#84</a></em></p> 2021-08-20T00:00:00+00:00 2021-08-20T00:00:00+00:00 https://thadaw.com/posts/react-typescript-design-pattern-use-effect/ <p>Side effects เป็น function โดยส่วนใหญ่แล้ว เราจะจัดการกับ Side Effect ของ Component โดยมี 3 scenarios:</p> <ul> <li>ทำงานเฉพาะครั้งแรกที่ Component mount (Only when a component mounts)</li> <li>เคลียร์ค่าต่างๆ โดยใช้ return a function (Cleaning up by returning a function)</li> <li>ทำงานเมื่อ dependencies มีการเปลี่ยนแปลง (Running when specific dependencies change)a</li> </ul> <h2 id="1-thamngaanechphaaakhrangaerkthii-component-mount">1. ทำงานเฉพาะครั้งแรกที่ Component mount<a class="zola-anchor" href="#1-thamngaanechphaaakhrangaerkthii-component-mount" aria-label="Anchor link for: 1-thamngaanechphaaakhrangaerkthii-component-mount" style="visibility: hidden;"></a> </h2> <p>จะทำครั้งแรก ครั้งเดียวเมื่อ Component โหลดเสร็จ</p> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-storage z-type z-function z-tsx">function</span> <span class="z-meta z-definition z-function z-tsx"><span class="z-entity z-name z-function z-tsx">FirstExecuteComponent</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-whitespace z-comment z-leading z-tsx"> </span><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> Add event listeners (Flux Store, WebSocket, document, etc.)</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">useEffect</span></span><span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> </span><span class="z-meta z-function-call z-tsx"><span class="z-support z-class z-console z-tsx">console</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-function z-console z-tsx">log</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>Component loaded<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-separator z-comma z-tsx">,</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-array z-literal z-tsx"> <span class="z-meta z-brace z-square z-tsx">[</span><span class="z-meta z-brace z-square z-tsx">]</span></span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span> <span class="z-constant z-language z-null z-tsx">null</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span></span> </span></code></pre> <p>ข้อสังเกตุ <code>useEffect</code> ต้องการรับ 2 parameters ถ้าอยากให้เหมือน <code>componentDidMount()</code> ให้ใส่ Array เปล่าๆ ใน parameters ตัวที่สอง <code>[]</code></p> <h2 id="2-ekhliiyrkhaataang-odyaich-return-a-function">2. เคลียร์ค่าต่างๆ โดยใช้ return a function<a class="zola-anchor" href="#2-ekhliiyrkhaataang-odyaich-return-a-function" aria-label="Anchor link for: 2-ekhliiyrkhaataang-odyaich-return-a-function" style="visibility: hidden;"></a> </h2> <p>จะทำงานครั้งสุดท้ายครั้งเดียวก่อนที่ Component ถูกเอาออก (Component is unmounted and destroyed)</p> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-storage z-type z-function z-tsx">function</span> <span class="z-meta z-definition z-function z-tsx"><span class="z-entity z-name z-function z-tsx">FirstAndLastExecuteComponent</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-whitespace z-comment z-leading z-tsx"> </span><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> Remove event listeners (Flux Store, WebSocket, document, etc.)</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">useEffect</span></span><span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-support z-class z-console z-tsx">console</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-function z-console z-tsx">log</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>Component loaded<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> </span><span class="z-meta z-function-call z-tsx"><span class="z-support z-class z-console z-tsx">console</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-function z-console z-tsx">log</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>Component unloaded<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-punctuation z-definition z-block z-tsx">}</span></span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-array z-literal z-tsx"> <span class="z-meta z-brace z-square z-tsx">[</span><span class="z-meta z-brace z-square z-tsx">]</span></span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span> <span class="z-constant z-language z-null z-tsx">null</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span></span> </span></code></pre> <p>เราสามารถใช้ประโยชน์จาก function <code>useEffect</code> ได้ ตรงที่ return ของ parameters ตัวแรกของ <code>useEffect</code> โดยเราสามารถ remove event listeners หรือล้างข้อมูลอะไรบางอย่าง ก็ได้ครับ</p> <h3 id="taw-yaangkaarekhliiyrkhaa-eventlistener-kh-ng-window-resize">ตัวอย่างการเคลียร์ค่า EventListener ของ Window Resize<a class="zola-anchor" href="#taw-yaangkaarekhliiyrkhaa-eventlistener-kh-ng-window-resize" aria-label="Anchor link for: taw-yaangkaarekhliiyrkhaa-eventlistener-kh-ng-window-resize" style="visibility: hidden;"></a> </h3> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">React</span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">useState</span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">useEffect</span> <span class="z-punctuation z-definition z-block z-tsx">}</span></span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>react<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-storage z-type z-function z-tsx">function</span> <span class="z-meta z-definition z-function z-tsx"><span class="z-entity z-name z-function z-tsx">getWindowSize</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span><span class="z-meta z-objectliteral z-tsx"> <span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-objectliteral z-tsx"> <span class="z-meta z-object z-member z-tsx"><span class="z-meta z-object-literal z-key z-tsx">width</span></span><span class="z-meta z-object z-member z-tsx"><span class="z-meta z-object-literal z-key z-tsx"><span class="z-punctuation z-separator z-key-value z-tsx">:</span></span> <span class="z-support z-variable z-dom z-tsx">window</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-variable z-property z-dom z-tsx">innerWidth</span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-objectliteral z-tsx"> <span class="z-meta z-object z-member z-tsx"><span class="z-meta z-object-literal z-key z-tsx">height</span></span><span class="z-meta z-object z-member z-tsx"><span class="z-meta z-object-literal z-key z-tsx"><span class="z-punctuation z-separator z-key-value z-tsx">:</span></span> <span class="z-support z-variable z-dom z-tsx">window</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-variable z-property z-dom z-tsx">innerHeight</span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-objectliteral z-tsx"><span class="z-meta z-object z-member z-tsx"> </span><span class="z-punctuation z-definition z-block z-tsx">}</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span></span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-keyword z-control z-default z-tsx">default</span> <span class="z-meta z-function z-expression z-tsx"><span class="z-storage z-type z-function z-tsx">function</span> <span class="z-meta z-definition z-function z-tsx"><span class="z-entity z-name z-function z-tsx">WindowSize</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-var z-expr z-tsx"><span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-array-binding-pattern-variable z-tsx"><span class="z-punctuation z-definition z-binding-pattern z-array z-tsx">[</span><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx">size</span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx">setSize</span></span><span class="z-punctuation z-definition z-binding-pattern z-array z-tsx">]</span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">useState</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">getWindowSize</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-meta z-brace z-round z-tsx">)</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">useEffect</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-meta z-arrow z-tsx"><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-var z-expr z-tsx"><span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">handleResize</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">setSize</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">getWindowSize</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-punctuation z-definition z-block z-tsx">}</span></span></span></span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-support z-variable z-dom z-tsx">window</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-function z-dom z-tsx">addEventListener</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>resize<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-variable z-other z-readwrite z-tsx">handleResize</span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> </span><span class="z-meta z-function-call z-tsx"><span class="z-support z-variable z-dom z-tsx">window</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-function z-dom z-tsx">removeEventListener</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>resize<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-variable z-other z-readwrite z-tsx">handleResize</span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-punctuation z-definition z-block z-tsx">}</span></span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span><span class="z-meta z-array z-literal z-tsx"> <span class="z-meta z-brace z-square z-tsx">[</span><span class="z-meta z-brace z-square z-tsx">]</span></span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span> <span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">p</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> Width: <span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-variable z-other z-object z-tsx">size</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-variable z-property z-dom z-tsx">width</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span>, Height: <span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-variable z-other z-object z-tsx">size</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-variable z-property z-dom z-tsx">height</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">p</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span></span></span> </span></code></pre> <h2 id="3-thamngaanemuue-dependencies-miikaarepliiynaeplng">3. ทำงานเมื่อ dependencies มีการเปลี่ยนแปลง<a class="zola-anchor" href="#3-thamngaanemuue-dependencies-miikaarepliiynaeplng" aria-label="Anchor link for: 3-thamngaanemuue-dependencies-miikaarepliiynaeplng" style="visibility: hidden;"></a> </h2> <p>เราสามารถใส่ dependencies ที่อยากตรวจสอบได้ เช่น เมื่อ toggle มีการเปลี่ยนแปลงค่า จากที่ User เป็นคนคลิก ให้เรียก side effect เป็นต้น ดังตัวอย่างข้างล่างนี้</p> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">React</span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">useState</span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">useEffect</span> <span class="z-punctuation z-definition z-block z-tsx">}</span></span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>react<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-keyword z-control z-default z-tsx">default</span> <span class="z-meta z-function z-expression z-tsx"><span class="z-storage z-type z-function z-tsx">function</span> <span class="z-meta z-definition z-function z-tsx"><span class="z-entity z-name z-function z-tsx">DetectChange</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-var z-expr z-tsx"><span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-array-binding-pattern-variable z-tsx"><span class="z-punctuation z-definition z-binding-pattern z-array z-tsx">[</span><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx">toggle</span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx">setToggle</span></span><span class="z-punctuation z-definition z-binding-pattern z-array z-tsx">]</span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">useState</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-constant z-language z-boolean z-false z-tsx">false</span><span class="z-meta z-brace z-round z-tsx">)</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-var z-expr z-tsx"><span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-array-binding-pattern-variable z-tsx"><span class="z-punctuation z-definition z-binding-pattern z-array z-tsx">[</span><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx">message</span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx">setMessage</span></span><span class="z-punctuation z-definition z-binding-pattern z-array z-tsx">]</span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">useState</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span><span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span><span class="z-meta z-brace z-round z-tsx">)</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">useEffect</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-meta z-arrow z-tsx"><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-var z-expr z-tsx"><span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx">toggleMessage</span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span> <span class="z-variable z-other z-readwrite z-tsx">toggle</span> <span class="z-keyword z-operator z-ternary z-tsx">?</span> <span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>True<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span> <span class="z-keyword z-operator z-ternary z-tsx">:</span> <span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>False<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">setMessage</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-variable z-other z-readwrite z-tsx">toggleMessage</span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-punctuation z-definition z-block z-tsx">}</span></span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span><span class="z-meta z-array z-literal z-tsx"> <span class="z-meta z-brace z-square z-tsx">[</span><span class="z-variable z-other z-readwrite z-tsx">toggle</span><span class="z-meta z-brace z-square z-tsx">]</span></span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span> <span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">p</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">button</span><span class="z-meta z-tag z-attributes z-tsx"> <span class="z-entity z-other z-attribute-name z-tsx">onClick</span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> </span><span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">setToggle</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-keyword z-operator z-logical z-tsx">!</span><span class="z-variable z-other z-readwrite z-tsx">toggle</span><span class="z-meta z-brace z-round z-tsx">)</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span></span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span><span class="z-meta z-jsx z-children z-tsx">Toggle</span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">button</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">h1</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"><span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-variable z-other z-readwrite z-tsx">message</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span></span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">h1</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">p</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-meta z-function z-expression z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span></span></span> </span></code></pre> <p>Note: ตัวอย่างนี้ไม่ใช่วิธีการที่ดีในการควบคุม state เขียนอธิบายการทำงานเท่านั้น</p> <hr /> <p><em>Cross published at <a rel="nofollow noreferrer" href="https://www.dotnetthailand.com/frontend-web/react-typescript/design-pattern">.NET Thailand</a></em></p> <p><em>Acknowledgement: Thank you .net thailand team to review this article: <a rel="nofollow noreferrer" href="https://github.com/dotnetthailand/dotnetthailand.github.io/pull/84/files">dotnetthailand.github.io#84</a></em></p> 2021-08-05T00:00:00+00:00 2021-08-05T00:00:00+00:00 https://thadaw.com/posts/migrate-react-class-component-to-functional-component/ <p>ใครที่ใช้ React แล้วเขียนด้วย Class Componentลองย้ายมาเขียน Functional Component (Hook) ดูน้า ไม่ยากเลย ทำให้โค๊ดอ่านง่ายมากขึ้นด้วย และเขียนง่ายขึ้น</p> <p>วันนี้เอาตัวอย่างที่ใช้บ่อยๆ ใน React TypeScript เทียบกันให้เห็น จะๆ เลย</p> <h2 id="local-state">Local State<a class="zola-anchor" href="#local-state" aria-label="Anchor link for: local-state" style="visibility: hidden;"></a> </h2> <p>เราสามารถแปลงจาก <a rel="nofollow noreferrer" href="https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/class_components/">Class Component</a> ด้านล่างนี้</p> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">React</span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>react<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-storage z-type z-interface z-tsx">interface</span> <span class="z-entity z-name z-type z-interface z-tsx">MyProps</span> <span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-meta z-field z-declaration z-tsx"> <span class="z-meta z-definition z-property z-tsx"><span class="z-variable z-object z-property z-tsx">message</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-support z-type z-primitive z-tsx">string</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-storage z-type z-interface z-tsx">interface</span> <span class="z-entity z-name z-type z-interface z-tsx">MyState</span> <span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-meta z-field z-declaration z-tsx"> <span class="z-meta z-definition z-property z-tsx"><span class="z-variable z-object z-property z-tsx">count</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-support z-type z-primitive z-tsx">number</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-storage z-type z-class z-tsx">class</span> <span class="z-entity z-name z-type z-class z-tsx">App</span> <span class="z-storage z-modifier z-tsx">extends</span> <span class="z-entity z-name z-type z-module z-tsx">React</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-entity z-other z-inherited-class z-tsx">Component</span><span class="z-meta z-type z-parameters z-tsx"><span class="z-punctuation z-definition z-typeparameters z-begin z-tsx">&lt;</span><span class="z-entity z-name z-type z-tsx">MyProps</span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-entity z-name z-type z-tsx">MyState</span><span class="z-punctuation z-definition z-typeparameters z-end z-tsx">&gt;</span></span> <span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-field z-declaration z-tsx"> <span class="z-meta z-definition z-property z-tsx"><span class="z-variable z-object z-property z-tsx">state</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-entity z-name z-type z-tsx">MyState</span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span> <span class="z-meta z-objectliteral z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-field z-declaration z-tsx"><span class="z-meta z-objectliteral z-tsx"><span class="z-punctuation z-whitespace z-comment z-leading z-tsx"> </span><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> optional second annotation for better type inference</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-field z-declaration z-tsx"><span class="z-meta z-objectliteral z-tsx"> <span class="z-meta z-object z-member z-tsx"><span class="z-meta z-object-literal z-key z-tsx">count</span></span><span class="z-meta z-object z-member z-tsx"><span class="z-meta z-object-literal z-key z-tsx"><span class="z-punctuation z-separator z-key-value z-tsx">:</span></span> <span class="z-constant z-numeric z-decimal z-tsx">0</span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-field z-declaration z-tsx"><span class="z-meta z-objectliteral z-tsx"> <span class="z-punctuation z-definition z-block z-tsx">}</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"> <span class="z-meta z-definition z-method z-tsx"><span class="z-entity z-name z-function z-tsx">render</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span> <span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-variable z-language z-this z-tsx">this</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-variable z-other z-object z-property z-tsx">props</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-variable z-other z-property z-tsx">message</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span> <span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-variable z-language z-this z-tsx">this</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-variable z-other z-object z-property z-tsx">state</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-variable z-other z-property z-tsx">count</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-punctuation z-definition z-block z-tsx">}</span></span></span> </span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span> </span></code></pre> <p>ให้เป็น <a rel="nofollow noreferrer" href="https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components">Functional Component</a> แบบนี้ได้</p> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">React</span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">useState</span> <span class="z-punctuation z-definition z-block z-tsx">}</span></span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>react<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-storage z-type z-interface z-tsx">interface</span> <span class="z-entity z-name z-type z-interface z-tsx">PropTypes</span> <span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-meta z-field z-declaration z-tsx"> <span class="z-meta z-definition z-property z-tsx"><span class="z-variable z-object z-property z-tsx">message</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-support z-type z-primitive z-tsx">string</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-storage z-type z-function z-tsx">function</span> <span class="z-meta z-definition z-function z-tsx"><span class="z-entity z-name z-function z-tsx">App</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-meta z-parameter z-object-binding-pattern z-tsx"><span class="z-punctuation z-definition z-binding-pattern z-object z-tsx">{</span> <span class="z-variable z-parameter z-tsx">message</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-tsx">}</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-entity z-name z-type z-tsx">PropTypes</span></span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span><span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-var z-expr z-tsx"><span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-array-binding-pattern-variable z-tsx"><span class="z-punctuation z-definition z-binding-pattern z-array z-tsx">[</span><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx">count</span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx">setCount</span></span><span class="z-punctuation z-definition z-binding-pattern z-array z-tsx">]</span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">useState</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-constant z-numeric z-decimal z-tsx">0</span><span class="z-meta z-brace z-round z-tsx">)</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span> <span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-variable z-other z-readwrite z-tsx">message</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span> <span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-variable z-other z-readwrite z-tsx">count</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-keyword z-control z-default z-tsx">default</span> <span class="z-variable z-other z-readwrite z-tsx">App</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></code></pre> <p>ทำไมถึงไม่แนะนำ <code>React.FC</code> หรือ <code>React.FunctionComponent</code>/<code>React.VoidFunctionComponent</code> อ่านรายละเอียดใน <a rel="nofollow noreferrer" href="https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components">Functional Component</a></p> <h2 id="handle-click-event">Handle Click Event<a class="zola-anchor" href="#handle-click-event" aria-label="Anchor link for: handle-click-event" style="visibility: hidden;"></a> </h2> <p>เราสามารถแปลงจาก <a rel="nofollow noreferrer" href="https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/class_components">Class Component</a> ด้านล่างนี้</p> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">React</span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>react<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-storage z-type z-interface z-tsx">interface</span> <span class="z-entity z-name z-type z-interface z-tsx">PropTypes</span> <span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-meta z-field z-declaration z-tsx"> <span class="z-meta z-definition z-property z-tsx"><span class="z-variable z-object z-property z-tsx">message</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-support z-type z-primitive z-tsx">string</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span> </span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-storage z-type z-interface z-tsx">interface</span> <span class="z-entity z-name z-type z-interface z-tsx">StateTypes</span> <span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-meta z-field z-declaration z-tsx"> <span class="z-meta z-definition z-property z-tsx"><span class="z-variable z-object z-property z-tsx">counter</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-support z-type z-primitive z-tsx">number</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span> </span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-storage z-type z-class z-tsx">class</span> <span class="z-entity z-name z-type z-class z-tsx">App</span> <span class="z-storage z-modifier z-tsx">extends</span> <span class="z-entity z-name z-type z-module z-tsx">React</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-entity z-other z-inherited-class z-tsx">Component</span><span class="z-meta z-type z-parameters z-tsx"><span class="z-punctuation z-definition z-typeparameters z-begin z-tsx">&lt;</span><span class="z-entity z-name z-type z-tsx">PropTypes</span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-entity z-name z-type z-tsx">StateTypes</span><span class="z-punctuation z-definition z-typeparameters z-end z-tsx">&gt;</span></span> <span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-field z-declaration z-tsx"> <span class="z-meta z-definition z-property z-tsx"><span class="z-variable z-object z-property z-tsx">state</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-entity z-name z-type z-tsx">StateTypes</span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span> <span class="z-meta z-objectliteral z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-field z-declaration z-tsx"><span class="z-meta z-objectliteral z-tsx"> <span class="z-meta z-object z-member z-tsx"><span class="z-meta z-object-literal z-key z-tsx">counter</span></span><span class="z-meta z-object z-member z-tsx"><span class="z-meta z-object-literal z-key z-tsx"><span class="z-punctuation z-separator z-key-value z-tsx">:</span></span> <span class="z-constant z-numeric z-decimal z-tsx">0</span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-field z-declaration z-tsx"><span class="z-meta z-objectliteral z-tsx"><span class="z-meta z-object z-member z-tsx"> </span><span class="z-punctuation z-definition z-block z-tsx">}</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"> </span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"> <span class="z-meta z-definition z-method z-tsx"><span class="z-entity z-name z-function z-tsx">handleClick</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-variable z-parameter z-tsx">amount</span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-support z-type z-primitive z-tsx">number</span></span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-variable z-language z-this z-tsx">this</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-entity z-name z-function z-tsx">setState</span></span><span class="z-meta z-brace z-round z-tsx">(</span> <span class="z-meta z-arrow z-tsx"><span class="z-variable z-parameter z-tsx">state</span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> </span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-meta z-objectliteral z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-objectliteral z-tsx"> <span class="z-meta z-object z-member z-tsx"><span class="z-meta z-object-literal z-key z-tsx">counter</span></span><span class="z-meta z-object z-member z-tsx"><span class="z-meta z-object-literal z-key z-tsx"><span class="z-punctuation z-separator z-key-value z-tsx">:</span></span> <span class="z-variable z-other z-object z-tsx">state</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-variable z-other z-property z-tsx">counter</span> <span class="z-keyword z-operator z-arithmetic z-tsx">+</span> <span class="z-variable z-other z-readwrite z-tsx">amount</span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-objectliteral z-tsx"><span class="z-meta z-object z-member z-tsx"> </span><span class="z-punctuation z-definition z-block z-tsx">}</span></span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-punctuation z-definition z-block z-tsx">}</span></span></span> </span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"> </span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"> <span class="z-meta z-definition z-method z-tsx"><span class="z-entity z-name z-function z-tsx">render</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span> <span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">h1</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"><span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-variable z-language z-this z-tsx">this</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-variable z-other z-object z-property z-tsx">props</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-variable z-other z-property z-tsx">message</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span></span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">h1</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">button</span><span class="z-meta z-tag z-attributes z-tsx"> <span class="z-entity z-other z-attribute-name z-tsx">onClick</span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> </span><span class="z-meta z-function-call z-tsx"><span class="z-variable z-language z-this z-tsx">this</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-entity z-name z-function z-tsx">handleClick</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-constant z-numeric z-decimal z-tsx">1</span><span class="z-meta z-brace z-round z-tsx">)</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span></span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span><span class="z-meta z-jsx z-children z-tsx"> Increase </span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">button</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">p</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"><span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-variable z-language z-this z-tsx">this</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-variable z-other z-object z-property z-tsx">state</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-variable z-other z-property z-tsx">counter</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span></span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">p</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-meta z-method z-declaration z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-punctuation z-definition z-block z-tsx">}</span></span></span> </span></span><span class="z-source z-tsx"><span class="z-meta z-class z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-keyword z-control z-default z-tsx">default</span> <span class="z-variable z-other z-readwrite z-tsx">App</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></code></pre> <blockquote> <p>Note: Using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity comparison. Read more at <a rel="nofollow noreferrer" href="https://reactjs.org/docs/faq-functions.html#arrow-function-in-render">React Official Doc</a>.</p> </blockquote> <p>ให้เป็น Functional Component แบบนี้ได้</p> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-meta z-import z-tsx"><span class="z-keyword z-control z-import z-tsx">import</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">React</span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> <span class="z-variable z-other z-readwrite z-alias z-tsx">useState</span> <span class="z-punctuation z-definition z-block z-tsx">}</span></span> <span class="z-keyword z-control z-from z-tsx">from</span> <span class="z-string z-quoted z-single z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&#39;</span>react<span class="z-punctuation z-definition z-string z-end z-tsx">&#39;</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-storage z-type z-interface z-tsx">interface</span> <span class="z-entity z-name z-type z-interface z-tsx">PropTypes</span> <span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-meta z-field z-declaration z-tsx"> <span class="z-meta z-definition z-property z-tsx"><span class="z-variable z-object z-property z-tsx">message</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-support z-type z-primitive z-tsx">string</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span><span class="z-source z-tsx"><span class="z-meta z-interface z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span> </span><span class="z-source z-tsx"> </span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-storage z-type z-function z-tsx">function</span> <span class="z-meta z-definition z-function z-tsx"><span class="z-entity z-name z-function z-tsx">App</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-meta z-parameter z-object-binding-pattern z-tsx"><span class="z-punctuation z-definition z-binding-pattern z-object z-tsx">{</span> <span class="z-variable z-parameter z-tsx">message</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-tsx">}</span></span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-entity z-name z-type z-tsx">PropTypes</span></span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-var z-expr z-tsx"><span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-array-binding-pattern-variable z-tsx"><span class="z-punctuation z-definition z-binding-pattern z-array z-tsx">[</span><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx">counter</span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span> <span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx">setCounter</span></span><span class="z-punctuation z-definition z-binding-pattern z-array z-tsx">]</span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">useState</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-constant z-numeric z-decimal z-tsx">0</span><span class="z-meta z-brace z-round z-tsx">)</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-var z-expr z-tsx"><span class="z-storage z-type z-tsx">const</span> <span class="z-meta z-var-single-variable z-expr z-tsx"><span class="z-meta z-definition z-variable z-tsx"><span class="z-variable z-other z-constant z-tsx"><span class="z-entity z-name z-function z-tsx">handleClick</span></span></span> </span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-variable z-parameter z-tsx">amount</span><span class="z-meta z-type z-annotation z-tsx"><span class="z-keyword z-operator z-type z-annotation z-tsx">:</span> <span class="z-support z-type z-primitive z-tsx">number</span></span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">setCounter</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-variable z-other z-readwrite z-tsx">counter</span> <span class="z-keyword z-operator z-arithmetic z-tsx">+</span> <span class="z-variable z-other z-readwrite z-tsx">amount</span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-var z-expr z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-punctuation z-definition z-block z-tsx">}</span></span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span> <span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">h1</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"><span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-variable z-other z-readwrite z-tsx">message</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span></span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">h1</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">button</span><span class="z-meta z-tag z-attributes z-tsx"> <span class="z-entity z-other z-attribute-name z-tsx">onClick</span><span class="z-keyword z-operator z-assignment z-tsx">=</span><span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> </span><span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">handleClick</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-constant z-numeric z-decimal z-tsx">1</span><span class="z-meta z-brace z-round z-tsx">)</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span></span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span><span class="z-meta z-jsx z-children z-tsx"> Increase </span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">button</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> <span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;</span><span class="z-entity z-name z-tag z-tsx">p</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"><span class="z-punctuation z-section z-embedded z-begin z-tsx">{</span><span class="z-meta z-embedded z-expression z-tsx"><span class="z-variable z-other z-readwrite z-tsx">counter</span></span><span class="z-punctuation z-section z-embedded z-end z-tsx">}</span></span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">p</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-tag z-without-attributes z-tsx"><span class="z-meta z-jsx z-children z-tsx"> </span><span class="z-punctuation z-definition z-tag z-begin z-tsx">&lt;/</span><span class="z-entity z-name z-tag z-tsx">div</span><span class="z-punctuation z-definition z-tag z-end z-tsx">&gt;</span></span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span><span class="z-source z-tsx"><span class="z-meta z-export z-default z-tsx"><span class="z-keyword z-control z-export z-tsx">export</span> <span class="z-keyword z-control z-default z-tsx">default</span> <span class="z-variable z-other z-readwrite z-tsx">App</span></span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></code></pre> <h2 id="componentdidmount-in-react-hook">componentDidMount() in React Hook<a class="zola-anchor" href="#componentdidmount-in-react-hook" aria-label="Anchor link for: componentdidmount-in-react-hook" style="visibility: hidden;"></a> </h2> <p>หนึ่งใน React Lifecyle ที่ใช้บ่อยๆ มากๆ คือ <a rel="nofollow noreferrer" href="https://reactjs.org/docs/react-component.html#componentdidmount">componentDidMount()</a> ซึ่งจะทำครั้งแรก ครั้งเดียวเมื่อ Component โหลดเสร็จ</p> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-storage z-type z-function z-tsx">function</span> <span class="z-meta z-definition z-function z-tsx"><span class="z-entity z-name z-function z-tsx">FirstExecuteComponent</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-whitespace z-comment z-leading z-tsx"> </span><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> add event listeners (Flux Store, WebSocket, document, etc.)</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">useEffect</span></span><span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> </span><span class="z-meta z-function-call z-tsx"><span class="z-support z-class z-console z-tsx">console</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-function z-console z-tsx">log</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>Component loaded<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-separator z-comma z-tsx">,</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-array z-literal z-tsx"> <span class="z-meta z-brace z-square z-tsx">[</span><span class="z-meta z-brace z-square z-tsx">]</span></span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span> <span class="z-constant z-language z-null z-tsx">null</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span></span> </span></code></pre> <p>ข้อสังเกตุ <code>useEffect</code> ต้องการรับ 2 parameters ถ้าอยากให้เหมือน <code>componentDidMount()</code> ให้ใส่ Array เปล่าๆ ใน parameters ตัวที่สอง <code>[]</code></p> <h2 id="componentwillunmount-in-react-hook">componentWillUnmount() in React Hook<a class="zola-anchor" href="#componentwillunmount-in-react-hook" aria-label="Anchor link for: componentwillunmount-in-react-hook" style="visibility: hidden;"></a> </h2> <p>อีกหนึ่งใน React Lifecyle ที่มีใช้บ้างคือคือ <a rel="nofollow noreferrer" href="https://reactjs.org/docs/react-component.html#componentwillunmount">componentWillUnmount()</a> ซึ่งจะทำงานครั้งสุดท้ายครั้งเดียวก่อนที่ Component ถูกเอาออก (Component is unmounted and destroyed)</p> <pre data-lang="tsx" class="language-tsx z-code"><code class="language-tsx" data-lang="tsx"><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-storage z-type z-function z-tsx">function</span> <span class="z-meta z-definition z-function z-tsx"><span class="z-entity z-name z-function z-tsx">FirstAndLastExecuteComponent</span></span><span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-whitespace z-comment z-leading z-tsx"> </span><span class="z-comment z-line z-double-slash z-tsx"><span class="z-punctuation z-definition z-comment z-tsx">//</span></span><span class="z-comment z-line z-double-slash z-tsx"> remove event listeners (Flux Store, WebSocket, document, etc.)</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-entity z-name z-function z-tsx">useEffect</span></span><span class="z-meta z-brace z-round z-tsx">(</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> <span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">{</span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-function-call z-tsx"><span class="z-support z-class z-console z-tsx">console</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-function z-console z-tsx">log</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>Component loaded<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span><span class="z-meta z-arrow z-tsx"> <span class="z-meta z-parameters z-tsx"><span class="z-punctuation z-definition z-parameters z-begin z-tsx">(</span><span class="z-punctuation z-definition z-parameters z-end z-tsx">)</span></span> </span><span class="z-meta z-arrow z-tsx"><span class="z-storage z-type z-function z-arrow z-tsx">=&gt;</span> </span><span class="z-meta z-function-call z-tsx"><span class="z-support z-class z-console z-tsx">console</span><span class="z-punctuation z-accessor z-tsx">.</span><span class="z-support z-function z-console z-tsx">log</span></span><span class="z-meta z-brace z-round z-tsx">(</span><span class="z-string z-quoted z-double z-tsx"><span class="z-punctuation z-definition z-string z-begin z-tsx">&quot;</span>Component unloaded<span class="z-punctuation z-definition z-string z-end z-tsx">&quot;</span></span><span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-arrow z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-punctuation z-definition z-block z-tsx">}</span></span></span><span class="z-punctuation z-separator z-comma z-tsx">,</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-meta z-array z-literal z-tsx"> <span class="z-meta z-brace z-square z-tsx">[</span><span class="z-meta z-brace z-square z-tsx">]</span></span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-meta z-brace z-round z-tsx">)</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"> <span class="z-keyword z-control z-flow z-tsx">return</span> <span class="z-constant z-language z-null z-tsx">null</span><span class="z-punctuation z-terminator z-statement z-tsx">;</span> </span></span></span><span class="z-source z-tsx"><span class="z-meta z-function z-tsx"><span class="z-meta z-block z-tsx"><span class="z-punctuation z-definition z-block z-tsx">}</span></span></span> </span></code></pre> <p>เราสามารถใช้ประโยชน์จาก function <code>useEffect</code> ได้ ตรงที่ return ของ parameters ตัวแรกของ <code>useEffect</code> โดยเราสามารถ remove event listeners หรือล้างข้อมูลอะไรบางอย่าง ก็ได้ครับ</p> <hr /> <p><em>Cross published at <a rel="nofollow noreferrer" href="https://www.dotnetthailand.com/frontend-web/react-typescript/migrate-class-component-to-functional-component">.NET Thailand</a></em></p> <p><em>Acknowledgement: Thank you .net thailand team to review this article: <a rel="nofollow noreferrer" href="https://github.com/dotnetthailand/dotnetthailand.github.io/pull/83/files">dotnetthailand.github.io#83</a></em></p> 2021-06-29T00:00:00+00:00 2021-06-29T00:00:00+00:00 https://thadaw.com/posts/server-side-rendering-in-spa-and-seo/ <p>ได้มีโอกาสคุยกับพี่ชาย ก็ยังรู้สึกว่าหลายๆ คนยังไม่รู้จักคำว่า SSR หรือ Server-side Rendering บวกกับการมาของ <a rel="nofollow noreferrer" href="https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html">React 18</a> ที่นำเสนอ <a rel="nofollow noreferrer" href="https://www.youtube.com/watch?v=TQQPAU21ZUw">Server Component</a> เลยรู้สึกตื่นเต้น วันนี้เลยอยากมาแชร์ให้ฟังกันครับ</p> <p>ต้องบอกว่า SSR มาพร้อมกับการเขียน JavaScript ยุคสมัยใหม่ เช่น <a rel="nofollow noreferrer" href="https://reactjs.org/">React</a>, <a rel="nofollow noreferrer" href="https://vuejs.org/">Vue</a>, <a rel="nofollow noreferrer" href="https://angular.io/">Angular</a> ที่เราไม่แก้ไข DOM ตรงๆ แต่ใช้กลไกบางอย่างที่ทำให้แก้ไข DOM เท่าที่จำเป็นเท่านั้น เช่น <a rel="nofollow noreferrer" href="https://reactjs.org/docs/faq-internals.html">Virtual DOM</a> ทำให้ประสิทธิภาพดีขึ้นกว่าการเขียนแบบเดิมๆ เช่น Vanilla JavaScript หรือใช้ jQuery นั้นเอง เดี๋ยวเราจะคุยประเด็นนี้ในบทความต่อนะครับ</p> <blockquote> <p>Note: Vanilla เป็น Adjective ที่มาขยายการเขียนด้วย JavaScript เพื่อมาเน้นว่านี้คือการเขียน JavaScript ล้วนๆ นะ ไม่มีอะไรอื่นมาผสม</p> </blockquote> <h2 id="ssr-aimaicheruue-ngaihm">SSR ไม่ใช่เรื่องใหม่<a class="zola-anchor" href="#ssr-aimaicheruue-ngaihm" aria-label="Anchor link for: ssr-aimaicheruue-ngaihm" style="visibility: hidden;"></a> </h2> <p>ถ้าย้อนกลับไปเมื่อ 10 กว่าปีที่แล้ว สมัยที่เราเขียน PHP เพื่อทำ Web Application ซึ่ง PHP เองก็ภาษาฝั่ง Server หมายความว่า PHP source code จะถูก interpret ที่ server แล้วส่ง response กลับมาเป็น HTML มายัง Client ลองมาดูรูปประกอบเพื่อให้เห็นภาพมากขึ้น</p> <p><img src="https://thadaw.com/posts/server-side-rendering-in-spa-and-seo/01-regular-web-application.png" alt="regular-web-application" /></p> <p>จากในรูปในขั้นตอนที่ 3 server ก็จะ interpret ให้เป็น HTML แล้วส่งกลับให้ User ให้เห็น Result ของเว็บไซต์</p> <p>ซึ่งภาษาฝั่ง Server จะเป็น PHP, Java, Node.js, C#, Go หรืออะไรก็แล้วแต่ ทำหน้าที่รับ request จาก user แล้วแปลงผลเท่านั้น</p> <p>คำถามต่อไป คือแล้ว JavaScript ถูกทำงานที่ไหน แน่นอนว่าต้องเป็นที่ Browser อยู่แล้ว ซึ่งโดย Server จะส่ง HTML + CSS + JavaScript เมื่อ Browser โหลด HTML และ CSS เสร็จก็เรียกให้ JavaScript ทำงาน</p> <blockquote> <p>Note: เพื่อป้องกันการสับสน ถึงแม้ว่า NodeJS จะเขียนด้วยภาษา JavaScript ที่ทำงานอยู่บน <a rel="nofollow noreferrer" href="https://nodejs.org/">JavaScript runtime built on Chrome's V8 JavaScript engine</a> ซึ่งทำหน้าที่ execute จาก JavaScript เป็น HTML Response (ที่รวม CSS และ JavaScript (ฝั่ง Client) เข้าด้วยกัน) จากนั้น JavaScript ที่เป็น Client Side จะถูกเรียกก็ต้องเมื่อโหลดบน Browser เท่านั้น</p> </blockquote> <h2 id="ssr-epnklaikpktikh-ng-web-application">SSR เป็นกลไกปกติของ Web Application<a class="zola-anchor" href="#ssr-epnklaikpktikh-ng-web-application" aria-label="Anchor link for: ssr-epnklaikpktikh-ng-web-application" style="visibility: hidden;"></a> </h2> <p>ถ้าเราสังเกตุกลไกการทำงานของ Web Application นั้น มันคือการ render HTML ที่ฝั่ง server ซึ่งก็ตรงตัวกับคำว่า Server-side Rendering ที่หมายถึงการ Render ที่ฝั่ง Server นั้นเอง</p> <h2 id="mii-web-application-yuuaelw-aelwthamaimt-ngmii-ssr-iik">มี Web Application อยู่แล้ว แล้วทำไมต้องมี SSR อีก ?<a class="zola-anchor" href="#mii-web-application-yuuaelw-aelwthamaimt-ngmii-ssr-iik" aria-label="Anchor link for: mii-web-application-yuuaelw-aelwthamaimt-ngmii-ssr-iik" style="visibility: hidden;"></a> </h2> <p>แบบนี้ครับ จากต้นบทความผมได้บอกไปแล้วว่า SSR มาพร้อมกับการเขียน JavaScript ยุคสมัยใหม่ เช่น React, Vue, Angular เป็นต้น</p> <p>SSR เกิดมาขึ้นมาจากการเขียน SPA หรือ Single Page Application ครับ ต้องบอกว่า React, Vue, Angular ทำให้การเขียน Single Page Application เป็นที่นิยมมากในปัจจุบัน ซึ่ง SPA สาเหตุที่เรียกว่า SPA ก็คือมันมีหน้าเดียวครับ การ Routing เกิดขึ้นที่ Client ไม่ใช่ Server</p> <blockquote> <p>Routing คือ ตัวกลางในการจัดการว่าเมื่อมีการเข้าถึง URL หรือ Path นั้น ของเว็บให้ไปเรียก Controller หรือตัวที่เกี่ยวข้องมาจัดการครับ เช่น https://mydomain.com ต้องไปเรียก Controller ที่เป็น Index หรือ https://mydomain.com/users ต้องไปเรียก Controller ที่จัดการ path <code>/users</code> ว่าต้องทำยังไงต่อไป</p> </blockquote> <p>กลับมาที่ Web Application ทั่วไป Routing จะอยู่ที่ server ครับ เมื่อมีการเข้าถึง Path หรือ URL อื่นๆ ตัว Routing ก็จะต้องไปเรียก controller นั้นๆ มาจัดการส่งหน้า HTML ให้ client บางที่เค้าถึงเรียกว่า Multi-Page Application</p> <p>กลับมาที่ SPA ที่เป็นการ Routing แบบที่เกิดขึ้นที่ Client ดังนั้นเมื่อ Routing เกิดขึ้นที่ client ตัวที่ควบคุมกลไกต่างๆ จึงเป็นหน้าที่ของ JavaScript ที่โหลดมาแค่หน้าเดียวแต่สามารถใช้ URL ที่แตกต่างกันเข้าถึงได้ โดยที่ไม่ต้องพึงพา server เลย</p> <h3 id="bthbaathkh-ng-spa-rwmthuengkh-diiaelakh-esiiy">บทบาทของ SPA รวมถึงข้อดีและข้อเสีย<a class="zola-anchor" href="#bthbaathkh-ng-spa-rwmthuengkh-diiaelakh-esiiy" aria-label="Anchor link for: bthbaathkh-ng-spa-rwmthuengkh-diiaelakh-esiiy" style="visibility: hidden;"></a> </h3> <p>ในยุคที่ React, Vue, Angular มีความนิยมสูงขึ้นมาก มันจึงทำให้การทำ SPA เป็นเรื่องที่ง่ายขึ้นกว่าแต่ก่อนมากๆ รวมถึงการผลักดัน <a rel="nofollow noreferrer" href="https://web.dev/progressive-web-apps/">PWA Application โดย Google</a> ซึ่งบทบาทของ SPA หลักๆ คือการมาแทนที่ Mobile Application อย่างพวก Android หรือ iOS ได้ (ไม่ได้ทุกกรณี ขึ้นอยู่กับ Requirement)</p> <blockquote> <p>เราอาจจะเรียก SPA ว่าเป็น CSR (Client-side Rendering) ก็ได้ ถ้า SPA นั้น Render บน client ทั้งหมด จากนี้ขอเรียกว่า CSR แทน SPA เพื่อให้ชัดเจนขึ้นว่า SPA ใช้ Approach CSR.</p> </blockquote> <p>ข้อดีของ SPA ที่เป็น CSR ก็มีหลายอย่างเช่นกัน User Experience ดีขึ้น ความไหลลื่นในการใช้งาน เพราะลดช่องว่างของการรอระหว่างเปลี่ยนหน้า ซึ่งเกิดจากการรอ response จาก server หรือ การเก็บ Cache ข้อมูลเพื่อให้โหลดข้อมูลได้เร็วขึ้น หรือแม้แต่การใช้ประโยชน์จาก <a rel="nofollow noreferrer" href="https://developers.google.com/web/fundamentals/primers/service-workers">Service Worker</a> ในการทำ background process เช่น <a rel="nofollow noreferrer" href="https://developers.google.com/web/fundamentals/push-notifications">push notifications</a> และ <a rel="nofollow noreferrer" href="https://developers.google.com/web/updates/2015/12/background-sync">background sync</a> เป็นต้น หรือการที่เราสามารถ ติดตั้ง SPA ลงเป็นแอพ​ในมือถือได้เลย (โดยใช้ PWA)</p> <blockquote> <p>Note: <a rel="nofollow noreferrer" href="https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7">PWA บน iOS 12</a> , <a rel="nofollow noreferrer" href="https://firt.dev/ios-14/">PWA บน iOS 14</a> ยังมีข้อจำกัดในหลายๆ เรื่อง</p> </blockquote> <p>อีกหนึ่งข้อดีของ SSR คือ การที่ Library บาง Library อาจจะช่วยลด development cost ได้โดยที่สามารถ Passing value ผ่านเข้า prop โดยตรง โดยที่ไม่ต้อง implement API endpoint ขึ้นมาใหม่ ยกตัวอย่าง <a rel="nofollow noreferrer" href="https://reactjs.net/">ReactJS.net</a> ที่สามารถส่ง value จาก backend server ไปยังไง view ได้เลย สังเกตุจากใน code ข้างล่าง</p> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-comment z-block z-html"><span class="z-punctuation z-definition z-comment z-begin z-html">&lt;!--</span> This will render the component server-side <span class="z-punctuation z-definition z-comment z-end z-html">--&gt;</span></span> </span><span class="z-text z-html z-basic">@Html.React(&quot;CommentsBox&quot;, new { </span><span class="z-text z-html z-basic"> initialComments = Model.Comments </span><span class="z-text z-html z-basic">}) </span></code></pre> <p>ถ้าสังเกตุจาก code React components จะต้องถูกส่งค่าจาก components อื่นใน JavaScript แต่ในนี้ เราส่งค่า <code>Model.Comments</code> ผ่าน props ที่ชื่อว่า <code>initialComments</code> ได้โดยตรงเลย</p> <p>ส่วนข้อเสียของ SPA ก็อาจจะเป็น Development Cost ที่สูงขึ้น ถ้าเทียบกับ Web Application (อย่างไร ก็ตามขึ้นอยู่กับความชำนาญของทีมด้วย) เพราะไม่ใช่แค่ Web ที่แสดงผลของจาก backend server แต่ยังต้อง manage state จัดการ authentication หรือ authorization หรืออื่นๆ อีกมากมาย (มากหรือน้อย ขึ้นอยู่กับ requirement)</p> <p>อีกหนึ่งข้อเสียของ SPA ที่จะไม่พูดไม่ได้เลย และเป็นที่มาของบทความนี้คือ ระยะเวลาในการโหลดครั้งแรกสูง (High Initial Load) เมื่อเทียบกับ SSR</p> <p>เพื่อให้เห็นภาพมากขึ้นจากรูป SSR และ CSR</p> <p><img src="https://thadaw.com/posts/server-side-rendering-in-spa-and-seo/02-csr-vs-ssr.png" alt="CSR vs SSR redrawn from https://blog.logrocket.com/next-js-vs-create-react-app/" /></p> <blockquote> <p>Note: รูปนี้อาจจะไม่ใช่ การ implement SSR ในรูปแบบทั่วไป แต่วาดออกมาเพื่อยกตัวอย่างให้เห็นภาพ เพราะจริงๆ SSR เอง อธิบายแค่การ Render พร้อม data จาก server แล้วเท่านั้นเอง โดยรูปดังกล่าวเป็นการวาดโดยอ้างจากหลักการทำ SSR เบื้องต้นใน <a rel="nofollow noreferrer" href="https://nextjs.org/">Next.js</a> ซึ่งมีการอธิบายเปรียบเทียบอย่างดีแล้วใน<a rel="nofollow noreferrer" href="https://blog.logrocket.com/next-js-vs-create-react-app/">บทความของ logrocket ที่เปรียบ Next.js กับ Create React App</a></p> </blockquote> <p>ถ้าเราดูจากรูป CSR ทางซ้ายมือ ในขั้นที่ 2 ที่เว็บโหลดขึ้นมา เรายังไม่ได้ Data มาเลย อาจจะมีแค่ UI หรือจะมี Spinner รอโหลดข้อมูลมา ตัว client จะต้องส่งไปขอข้อมูลมาจากเว็บ อีกรอบถึงจะแสดงว่าเว็บที่สมบูรณ์ได้</p> <p>ในขณะที่ SSR ทางขวามือ ในขั้นที่ 3 เราก็สามารถได้ หน้าเว็บที่สมบูรณ์ได้เลย เพราะในขั้นตอนที่ 2 ก่อนที่ server จะส่งออกมา ก็ทำจากเรียก API จากตัว server เลย ทำให้ประหยัดเวลากว่า</p> <h2 id="aelwekhruue-ngmuue-ainpacchcchubanmiiaebbaihnkanbaang">แล้วเครื่องมือในปัจจุบันมีแบบไหนกันบ้าง<a class="zola-anchor" href="#aelwekhruue-ngmuue-ainpacchcchubanmiiaebbaihnkanbaang" aria-label="Anchor link for: aelwekhruue-ngmuue-ainpacchcchubanmiiaebbaihnkanbaang" style="visibility: hidden;"></a> </h2> <ul> <li>ตัวแรกเลยคือ <a rel="nofollow noreferrer" href="https://reactjs.org/docs/create-a-new-react-app.html">Create React App</a> โดยเราสามารถเขียน SPA แบบ CSR ได้โดย default เลย แต่ถ้าจะทำ SSR ใน official docs เค้าแนะนำให้ไปใช้ <a rel="nofollow noreferrer" href="https://nextjs.org/">Next.js</a> แทน ซึ่งทำได้ดีๆ มากๆ <ul> <li>แต่ข้อเสียคือ เราอาจจะต้องใช้ backend server ที่เป็น JavaScript</li> </ul> </li> <li>ส่วนถ้าเป็นการทำ SSR ภาษาอื่นๆ ก็สามารถทำได้ครับ แต่อาจจะต้อง customize เองเช่น <a rel="nofollow noreferrer" href="https://reactjs.net/">ReactJS.net</a> ที่ทำงานร่วมกับ ASP.NET Core หรือภาษา Python, Java ก็มีเหมือนกัน</li> </ul> <blockquote> <p>Note: ขอไม่พูดถึง <a rel="nofollow noreferrer" href="https://www.gatsbyjs.com/">Gatsby</a> เพราะวัตถุประสงค์การใช้งานต่างกัน ตัวนี้เหมาะสมสำหรับทำ <a rel="nofollow noreferrer" href="https://www.netlify.com/blog/2020/04/14/what-is-a-static-site-generator-and-3-ways-to-find-the-best-one/">Static Site Generator</a> มากกว่า</p> </blockquote> <h2 id="hlakainkaareluue-k">หลักในการเลือก<a class="zola-anchor" href="#hlakainkaareluue-k" aria-label="Anchor link for: hlakainkaareluue-k" style="visibility: hidden;"></a> </h2> <ul> <li>เลือก SSR <ul> <li>ถ้าอยากให้ Faster initial loading.</li> <li>Improve SEO เพราะว่าการทำ Multi-Page จะทำให้ search engine ทำงานได้ดีกว่า และง่ายกว่า</li> </ul> </li> <li>เลือก CSR <ul> <li>ไม่ได้กังวลเรื่อง SEO มาก</li> </ul> </li> </ul> <p>แต่อย่างไรก็ตาม การทำ SEO บน SPA ก็เป็นเรื่องที่ท้าทาย ซึ่ง<a rel="nofollow noreferrer" href="https://www.searchenginewatch.com/2018/04/09/an-seos-survival-guide-to-single-page-applications-spas/">บทความของ Search Engine Watch</a> เขียนไว้ดีมาก และพูดเนื้อหาที่เป็นประโยชน์ในการเขียน SPA เลือกใช้กลไก SSR หรือ CSR อย่างเหมาะสม เพราะการทำ SSR บางครั้งก็ใช้ development cost ที่สูงกว่าปกติ</p> <blockquote> <p>Note: ในบทความนี้ขอไม่พูดถึง Complex Architecture อย่าง Micro Frontend นะครับ เพราะถือว่าขึ้นอยู่กับการ Manage ไป อาจจะมีการ Mix กันหลายๆ Approach</p> </blockquote> <h2 id="aehlngkh-muuldii-samhrab-spa">แหล่งข้อมูลดีๆ สำหรับ SPA<a class="zola-anchor" href="#aehlngkh-muuldii-samhrab-spa" aria-label="Anchor link for: aehlngkh-muuldii-samhrab-spa" style="visibility: hidden;"></a> </h2> <p>จาก<a rel="nofollow noreferrer" href="https://www.searchenginewatch.com/2018/04/09/an-seos-survival-guide-to-single-page-applications-spas/">บทความของ Search Engine Watch</a> ได้หยิบยกตัวอย่างข้อมูลดีๆ สำหรับทำ SEO บน SPA ผมเลยขอหยิบมาเขียนซ้ำอีกรอบ:</p> <ul> <li><a rel="nofollow noreferrer" href="https://www.elephate.com/blog/ultimate-guide-javascript-seo/">The Ultimate Guide to JavaScript SEO</a> by Tomasz Rudzki</li> <li>General overview of Single Page Applications and how Google treats them: <a rel="nofollow noreferrer" href="https://www.youtube.com/watch?v=JlP5rBynK3E">Watch this video</a> by Google ‎Senior Webmaster Trends Analyst <a rel="nofollow noreferrer" href="https://www.linkedin.com/in/johnmu/">John Mueller</a></li> <li><a rel="nofollow noreferrer" href="https://www.briggsby.com/auditing-javascript-for-seo/">Auditing JavaScript for SEO</a>, and <a rel="nofollow noreferrer" href="https://www.briggsby.com/dealing-with-javascript-for-seo/">Core Principles of SEO for JavaScript</a> by Justin Briggs</li> <li><a rel="nofollow noreferrer" href="https://builtvisible.com/javascript-framework-seo/">The Basics of JavaScript Framework SEO in AngularJS</a> by Richard Baxter</li> <li><a rel="nofollow noreferrer" href="https://www.distilled.net/resources/split-testing-javascript-for-seo/">Early Results from Split Testing JavaScript for SEO</a> by Will Critchlow</li> <li><a rel="nofollow noreferrer" href="http://www.stateofdigital.com/javascript-seo-the-definitive-resource-list/">JavaScript &amp; SEO: The Definitive Resource List</a></li> <li><a rel="nofollow noreferrer" href="https://blog.twentysixdigital.com/seo/seo-considerations-for-single-page-applications/">SEO Considerations for Single Page Applications</a></li> <li><a rel="nofollow noreferrer" href="https://blog.angular-university.io/why-a-single-page-application-what-are-the-benefits-what-is-a-spa/">Angular Single Page Applications (SPA): What are the Benefits?</a> by Angular University</li> <li>This Microsoft article: <a rel="nofollow noreferrer" href="https://docs.microsoft.com/en-us/dotnet/standard/modern-web-apps-azure-architecture/choose-between-traditional-web-and-single-page-apps">Choose Between Traditional Web Apps and Single Page Apps (SPAs)</a></li> <li>A few different SPA types <a rel="nofollow noreferrer" href="https://blog.codecentric.de/en/2017/12/angular-single-page-applications/">by Johann Wagner</a></li> <li>Very good overview: <a rel="nofollow noreferrer" href="https://www.scalablepath.com/blog/single-page-applications/">Single Page Applications: When &amp; Why You Should Use Them</a></li> </ul> <h2 id="final-thought">Final Thought<a class="zola-anchor" href="#final-thought" aria-label="Anchor link for: final-thought" style="visibility: hidden;"></a> </h2> <p>สุดท้ายนี้ การทำ SSR ก็ไม่ใช่วิธีการเดียวสำหรับการเพิ่มประสิทธิภาพ แต่เราสามารถใช้ทริคอื่นๆ แทนได้ เพื่อให้ประสิทธิภาพดีขึ้น อาจจะไม่ดีที่สุด แต่ development cost ไม่สูงเกินไป เช่นการทำ caching เป็นต้น</p> <p>อย่างไรก็ตามบทความนี้เป็นเพียงหนึ่งวิธีการที่สามารถเพิ่มประสิทธิภาพของ SPA การปรับปรุงควรคำนึงถึงในหลายๆ ปัจจัย เช่น ต้นทุน ทีม หรือฝั่ง business เป็นต้น</p> <p>Enjoy coding...</p> <p>ความตั้งใจเดิมอยากเขียนไปให้ถึง Server Component ใน React 18 แต่เอาไว้ยกยอดไป Blog หน้า ถ้ามีใครมีประเด็นอะไรอยากเสริมหรือแนะนำ ผมยินดีเลยครับ สำหรับวันนี้ลาไปก่อน สวัสดีครับ</p> <h2 id="acknowledgement">Acknowledgement<a class="zola-anchor" href="#acknowledgement" aria-label="Anchor link for: acknowledgement" style="visibility: hidden;"></a> </h2> <p>สุดท้ายนี้ (จริงๆแล้วน้า) ขอขอบคุณ<a rel="nofollow noreferrer" href="https://www.dotnetthailand.com/">ทีมงาน Admin .NET Thailand</a> มากๆ ที่ช่วยรีวิวและแนะนำบทความนี้จนสามารถเผยแพร่ออกไปได้</p> 2021-06-26T00:00:00+00:00 2021-06-26T00:00:00+00:00 https://thadaw.com/posts/tdd-formula-in-notion-thousand-comma/ <p>สวัสดีครับ วันนี้ผมมาแชร์เทคนิคการเขียน สูตรแบบ ยังไงก็ไม่พลาดแน่ๆ กันครับ เทคนิคที่ใช้ TDD (Test-Driven Development) คือ โดยผมประยุกต์ใช้ใน Notion โดย</p> <p>ในตัวอย่างนี้จะใช้สูตรการใส่ comma เลขหลักพันนะครับ มาเริ่มกันเลย!</p> <ol> <li> <p>การสร้าง Table มา</p> </li> <li> <p>กำหนด Column</p> <ul> <li>Number = คือค่าตั้งต้น</li> <li>Output = สูตรของเรา</li> <li>Expected = สิ่งที่เราอยากให้เป็น คำตอบที่ถูกต้อง</li> <li>Tester = สูตรง่ายๆ สำหรับเช็คว่า Output กับ Expected เท่ากันมั้ย</li> </ul> </li> <li> <p>เราจะเริ่มจากให้ Pass บางเคสก่อน (เอาจริงๆ ต้องเริ่มจาก Fail ทุกเคส แต่นี้ขอข้ามขั้นตอนนั้นไป)</p> <p><img src="https://thadaw.com/posts/tdd-formula-in-notion-thousand-comma/01-fail-test.png" alt="" /></p> </li> <li> <p>จากนั้น เราจะค่อยๆ ปรับแก้สูตรไปเรื่อยๆ จนผ่านครบทุกเคสครับ</p> </li> </ol> <h2 id="thousand-comma-formula">Thousand Comma Formula<a class="zola-anchor" href="#thousand-comma-formula" aria-label="Anchor link for: thousand-comma-formula" style="visibility: hidden;"></a> </h2> <div class="word-wrap"> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-keyword z-control z-conditional z-ts">if</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">empty</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">prop</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Number<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span><span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">concat</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">if</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">round</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">prop</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Number<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-relational z-ts">&gt;</span> <span class="z-constant z-numeric z-decimal z-ts">1000000</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">concat</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">format</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">floor</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">round</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">prop</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Number<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-arithmetic z-ts">/</span> <span class="z-constant z-numeric z-decimal z-ts">1000000</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>,<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span><span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">if</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">mod</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">round</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">prop</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Number<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000000</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-relational z-ts">&gt;</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">concat</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">format</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">floor</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">mod</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">round</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">prop</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Number<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000000</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-arithmetic z-ts">/</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>,<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">if</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">mod</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">mod</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">round</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">prop</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Number<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000000</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-relational z-ts">&lt;</span> <span class="z-constant z-numeric z-decimal z-ts">10</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>00<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">if</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">mod</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">mod</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">round</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">prop</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Number<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000000</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-relational z-ts">&lt;</span> <span class="z-constant z-numeric z-decimal z-ts">100</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>0<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span><span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">format</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">mod</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">mod</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">round</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">prop</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Number<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000000</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">format</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">mod</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">round</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">prop</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Number<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-constant z-numeric z-decimal z-ts">1000000</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span> </span></code></pre> </div> <h2 id="tester-formula">Tester Formula<a class="zola-anchor" href="#tester-formula" aria-label="Anchor link for: tester-formula" style="visibility: hidden;"></a> </h2> <div class="word-wrap"> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-keyword z-control z-conditional z-ts">if</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">prop</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Output<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-comparison z-ts">==</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">prop</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Expected<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>✅ PASS<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>❌ FAILED<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></code></pre> </div> <h2 id="finally-all-test-pass">Finally, All Test Pass<a class="zola-anchor" href="#finally-all-test-pass" aria-label="Anchor link for: finally-all-test-pass" style="visibility: hidden;"></a> </h2> <p><img src="https://thadaw.com/posts/tdd-formula-in-notion-thousand-comma/02-pass-test.png" alt="" /></p> <h2 id="download-tdd-template-with-thousand-comma">Download TDD Template with Thousand Comma<a class="zola-anchor" href="#download-tdd-template-with-thousand-comma" aria-label="Anchor link for: download-tdd-template-with-thousand-comma" style="visibility: hidden;"></a> </h2> <p>https://www.notion.so/TDD-Formula-Notion-using-Comma-Thousand-as-a-case-study-80199bc04990423c8e250e7d20fd8f6b</p> 2021-05-02T00:00:00+00:00 2021-05-02T00:00:00+00:00 https://thadaw.com/posts/notion-template-my-things/ <p>สวัสดีครับวันนี้มาแชร์ Template: My Things 📥 ( Fully inspired by <a rel="nofollow noreferrer" href="https://culturedcode.com/things/">Things 3</a> Application)</p> <p>ผมใช้ Notion มาแล้ว 2 ปี ปรับ process การทำงานมาหลายแบบมาก ดู August Bradley แล้วก็ทำตามแล้วไม่ใช่ตัวเอง เลยปรับหลายๆ หลักการทั้ง GTD, แอพ Things 3 ปรับ workflow ต่างๆ ให้ไม่ยุ่งยาก ใช้งานได้ ไม่มีปัญหาบน มือถือด้วย</p> <p><img src="https://thadaw.com/posts/notion-template-my-things/home-page.jpg" alt="home page" /></p> <p>Key Concept คือ เน้นใช้ง่าย ไม่ทำให้กดดันตัวเอง ไม่ต้อง Strict เกินไปแบบ Time Block แต่ต้องเกิดประโยชน์ที่สุด</p> <p>เป็น Template สำหรับ Todo การจัดการรายการที่ต้องทำ + สิ่งที่อยากทำ (จากนี้ขอเรียกว่า todo ) ช่วยให้ focus กับรายการสิ่งที่อยากทำและต้องทำมากขึ้น และยืดหยุ่น โดยมีจุดเด่น คือ</p> <ol> <li>😀 Separation of Concern: ไม่แสดง todo ทั้งหมดในหน้าเดียว แต่จะแยกตามวันเวลา หมวดหมู่ (Area) เพื่อลดความล้า และเหนื่อยในการรีวิว todo จำนวนมาก หรืออาจจะทำให้ท้อได้</li> <li>📥 Inbox System: เมื่อเราคิดอะไรได้ เราสามารถโยน todo นั้นไปจัดหมวดหมู่ว่าอยู่ประเภทไหน Dealine วันไหนได้อีกที</li> <li>⭐️Today page: สำหรับการเลือก todo ที่วางแผนจะทำวันนี้ โดยสามารถระบุเวลาที่คาดว่าจะทำได้ มี 5 ช่วงเวลา wake up, morning, afternoon, evening, bedtime <img src="https://thadaw.com/posts/notion-template-my-things/today-page.jpg" alt="today page" /></li> <li>หน้า ⭐️ Today Page จะมี Template สำหรับจะทำ todos ให้เผื่อนึกไม่ออกว่าควรจะทำอะไรเช่น Bedtime มีอ่านหนังสือ ทาครีมบำรุง เป็นต้น</li> <li>🗓Upcoming page: สำหรับแสดง todo ที่มี Due Date หรือ Deadline ไว้แล้ว โดยเรียงจากเร็วที่สุดก่อน <img src="https://thadaw.com/posts/notion-template-my-things/upcoming-page.jpg" alt="upcoming" /></li> <li>🟩 Anytime page: สำหรับ todo ที่ยังไม่ลงเวลา deadline</li> <li>🗃Somday: สำหรับ todo ที่จะไม่ทำในเร็วๆ นี้</li> <li>📗Logbook: สำหรับ todo ที่ทำเสร็จแล้ว โดยเรียงจากวันที่อัพเดทล่าสุด (เมื่อเราทำ todo เสร็จ จะมาอยู่หน้านี้เอง ) สำหรับ review ว่าเราทำอะไรไปแล้วบ้าง</li> <li>🗑 Trash : ก็ตามชื่อเลย</li> <li>ใช้ประโยชน์จาก แทบ Navigation ด้านซ้ายในการเปลี่ยนหน้าไปมา เพราะรู้สึกว่า มาใส่ทุกอย่างในหน้าเดียว แล้วกดมันให้ใช้งานยาก</li> <li>ส่วน Calendar กับ Timeline ก็ตามชื่อเลยครับ</li> <li>การใช้ Field Hide จะใช้กับ Linked Database ที่ต้องเอานำ todo ไปใส่ เพื่อย้ายตำแหน่งของ todo ไม่มีผลอะไร ของข้อมูล หลักๆ ทำให้ดู Clean ขึ้น ใช้เมนู Data Management ของหน้า 📥 Inbox เพื่อซ่อน todo</li> </ol> <h2 id="withiiaich">วิธีใช้<a class="zola-anchor" href="#withiiaich" aria-label="Anchor link for: withiiaich" style="visibility: hidden;"></a> </h2> <ol> <li>การใช้งานดูทั่วจะไปจะใช้หน้า Today เป็นหลัก เพื่อดูว่าควรทำอะไรเวลาไหน</li> <li>การสร้าง todo ใหม่ <ul> <li>สามารถสร้าง todo ปกติ หรือ แทรกใน database ก็ได้</li> <li>สามารถทำได้ทุกหน้า แต่แนะนำให้สร้างที่ inbox หรือ today จะสะดวกกว่า</li> </ul> </li> <li>การย้าย todo หรือ เปลี่ยน หมวดหมู่(Area) <ul> <li>สามารถลากจาก หน้าใดๆ ไป หน้าอื่นๆ ได้เลยครับ แต่ต้องลากใส่ database block จะนะครับ เพราะแต่ละ database block จะเป็น link ไปยัง database ตัวจริงแล้ว filter ออกมา ดังนั้น เมื่อลากเข้าไปแล้ว มันก็จะตั้งค่า field อัตโนมัติ</li> </ul> </li> </ol> <h2 id="database">Database<a class="zola-anchor" href="#database" aria-label="Anchor link for: database" style="visibility: hidden;"></a> </h2> <p>ใช้ Database 1 อัน เพื่อให้ง่ายต่อการจัดการ และใช้งาน ลดความซ้ำซ้อน การออกแบบทั้งหมดเป็นการ Filter ทั้งหมด โดยมี Field ดังนี้</p> <ul> <li>Done: สำหรับ Mark ว่าทำ todo เสร็จ</li> <li>Due Date: ก็วันที่จะทำ</li> <li>Area: เป็นหมวดหมู่ของ todo ถ้าไม่มี Area จะอยู่ใน Inbox</li> <li>Archive: ให้เลือก Someday หรือ อาจจะใส่อย่างอื่นก็ได้</li> <li>Time: เป็นตัวเลือกว่าจะทำงานในวันนี้ ถ้าเลือกอย่างใดอย่างหนึ่งจะอยู่ในหน้า Today แต่ถ้าไม่เลือกจะอยู่ใน Anytime หรือ Upcoming (ถ้า Upcoming จะมี Due Date)</li> <li>โดยเลือกได้ 5 ช่วงเวลาว่าจะทำ Task ช่วงเวลาไหน wake up, morning, afternoon, evening, bedtime</li> <li>Tags: เป็นข้อมูลเพิ่มเติม อยากใส่อะไรก็ได้</li> <li>Urgent: มี 5 Min คือ งานที่ทำเสร็จภายใน 5 นาที ถ้าว่าง ควรทำทันที และ With in today คือ todo ที่ยืดหยุ่นทำตอนไหนก็ได้ แต่ควรจะเสร็จภายในวันนั้น</li> <li>Priority: มี important ก็คืองานสำคัญครับ แต่อาจจะไม่เร่งด่วน</li> <li>Hide: เอาไว้ซ่อนครับ เพื่อความสวยงาม</li> <li>Last Update: เอาไว้แสดงในหน้า Logbook ครับ</li> </ul> <h2 id="esrimeruue-ng-things-3">เสริมเรื่อง Things 3<a class="zola-anchor" href="#esrimeruue-ng-things-3" aria-label="Anchor link for: esrimeruue-ng-things-3" style="visibility: hidden;"></a> </h2> <p>ถ้าใครอยู่ในวงการนี้ คงน่าจะรู้จักแอพ <a rel="nofollow noreferrer" href="https://culturedcode.com/things/">things 3</a> นะครับ เป็นแอพที่ขายขาดรอบเดียว ไม่มีจ่ายรายเดือนเหมือน Notion ถือว่าดังมากๆ ในเรื่องของ feature ที่เป็นเอกลักษณ์มากๆ และสามารถประยุกได้หลากหลาย</p> <p>ถ้าใครนึกแนวทางการใช้งานไม่ออก แนะนำให้ดูคลิปสอน Things 3 นะครับ เท่าที่ดูยังไม่มีคนไทยมารีวิว จะเห็นภาพมาก</p> <p>สุดท้ายนี้ ลองนำไปประยุกต์ใช้งานให้เข้ากับตัวเองดูนะครับ ชอบไม่ชอบยังไงก็บอกได้ครับ หรือใครมีคำถามอะไรก็ยินดีเลยครับ ขอบคุณที่อ่านจนจบ จริงๆ ที่ Template ที่ทำไว้เยอะ แต่ยังไม่ได้เอามาแบ่งปันกัน วันนี้ถือว่าได้มาแชร์กัน สวัสดีครับ</p> <p>Download Template http://bit.ly/mildthada-notion-my-things</p> <hr /> <p><em>Cross published at <a rel="nofollow noreferrer" href="https://www.facebook.com/groups/notionthai/posts/369652924407139">Notion Thailand FB Group</a></em></p> 2019-10-14T00:00:00+00:00 2019-10-14T00:00:00+00:00 https://thadaw.com/posts/running-in-line-vanilla-javascript-from-webpack-th/ <p>สวัสดีครับ วันนี้ผมจะมาแบ่งปันเรื่องการตั้งค่าการใช้งาน Webpack เบื้องต้น และน่าจะเป็นคำถามและข้อสงสัยสำหรับคนที่หัดใช้ครับ</p> <blockquote> <p>หมายเหตุ: ณ วันที่เขียน Blog อ้างอิงจาก Webpack 4</p> </blockquote> <p>อย่างที่เราทราบกันดีว่า <a rel="nofollow noreferrer" href="https://webpack.js.org/">Webpack</a> ถูกใช้กันอย่างมากใน Library พัฒนาเว็บไซต์ที่ใช้ Javascript เป็นหลัก อย่างเช่นเครื่องมือดังๆ อย่าง React, Angular หรือ Vue ก็ตาม หรือหลายๆ เว็บก็ใช้งานเยอะมาก ซึ่งเมื่อตั้งค่าของ Webpack แล้ว เราก็แทบไม่ต้องไปยุ่งกับมันอีก แต่ตอนตั้งค่าครั้งแรกนี่สิ อาจจะเหนื่อยหน่อยสำหรับบางคน</p> <p>อ่ะ เข้าเรื่องกัน</p> <h2 id="webpack-khuue">Webpack คือ<a class="zola-anchor" href="#webpack-khuue" aria-label="Anchor link for: webpack-khuue" style="visibility: hidden;"></a> </h2> <p>Webpack พูดง่ายๆ ก็คือการที่รวมโค๊ดเราที่เป็นหลายๆ ไฟล์ ซึ่งจัดเรียงการให้สามารถ Maintainance ได้ง่าย มารวมกันใน 1 Bundle หรือ หลาย Bundle ก็ได้ (ซึ่ง Bundle ก็คือไฟล์ JS ไฟล์ 1 ไฟล์นั้นเอง) เพื่อให้ง่ายต่อการนำไปใช้ และจัดการ</p> <p><img src="https://thadaw.com/posts/running-in-line-vanilla-javascript-from-webpack-th/2019-10-14-running-in-line-vanilla-javascript-from-webpack-2.png" alt="Webpack Diagram from https://webpack.js.org/" /></p> <p>หลายๆ คนอาจจะสงสัยว่า ในเมื่อ React ก็มี <a rel="nofollow noreferrer" href="https://github.com/facebook/create-react-app">create-react-app</a> หรือเครื่องมืออื่นที่สามารถสร้างเว็บได้เลย โดยไม่ต้องตั้งค่า Webpack อะไรเลย แล้วเมื่อไหร่เราควรจะใช้ Webpack</p> <h2 id="emuue-aihreraakhwrcchaaich-webpack">เมื่อไหร่เราควรจะใช้ Webpack<a class="zola-anchor" href="#emuue-aihreraakhwrcchaaich-webpack" aria-label="Anchor link for: emuue-aihreraakhwrcchaaich-webpack" style="visibility: hidden;"></a> </h2> <p>คำตอบคือ แล้วแต่เราเลย ถ้าคิดว่าไม่ต้องใช้ก็ไม่ต้องใช้ 555+ ตาม Style เวลาคนชอบพูดถึง <a rel="nofollow noreferrer" href="https://redux.js.org/">Redux</a> ชอบมาก คือ <strong>คุณไม่จำต้องใช้ Redux หากไม่รู้ว่าทำไมถึงต้องใช้</strong> ผมก็คงตอบเหมือนกันกับ Webpack</p> <p>แต่ในกรณีนี้ผมตั้งค่า Webpack เนื่องจาก</p> <ol> <li>จะมีการใช้ Javascript ES2015 (ES6) และสูงขึ้นไป ในที่นี้จัดการโดย <a rel="nofollow noreferrer" href="https://babeljs.io/">Babel</a></li> <li>จะมีการใช้ React แบบบางส่วน บางโมดูลเท่านั้น</li> </ol> <p>ที่นี้ แล้วถ้าเราจะเขียน JS โดยสั่งควบคุม DOM หรือ select DOM ผ่าน JS ที่อยู่ใน Bundle มันก็ทำปกติ ขอเล่าการใช้ประโยชน์ของ Webpack ใน React App กันนะครับ ถ้าเข้าใจตรงนี้ ก็จะเห็นภาพมากขึ้น</p> <ol> <li>React จะมีไฟล์ <code>index.html</code> ซึ่งเป็น Template หลักในการรันแอพ React</li> <li>ซึ่งในไฟล์ <code>index.html</code> แล้วจะมี Tag <code>&lt;div id="root"&gt;&lt;/div&gt;</code> ซึ่งเป็นตำแหน่งสำหรับให้ React App ทำงาน</li> <li>จากนั้น React จะเขียน config ของ Webpack ให้ compile โค๊ด React ทั้งหมดลงไฟล์ JS 1 ไฟล์ (หรือ หลายไฟล์ แล้วแต่ออกแบบ) ซึ่ง 1 ไฟล์นี้แหละ เค้าเรียกว่า Bundle ของ Webpack</li> <li>จากนั้น React ก็จะมีการเขียนโค๊ดให้รันเจ้า React ตรง <code>root</code> นั้นแหละ ที่เราเขียนไว้ใน <code>index.html</code> ถ้าจำกันได้เวลาเราใช้ <code>create-react-app</code> จะสั่ง Render React App ที่ id <code>root</code> ในไฟล์แรกที่เราเขียนคือ <code>index.js</code> ตามข้างล่างเลย</li> </ol> <pre data-lang="javascript" class="language-javascript z-code"><code class="language-javascript" data-lang="javascript"><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">render</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-cast z-expr z-ts"><span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">App</span> /<span class="z-meta z-brace z-angle z-ts">&gt;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-variable z-dom z-ts">document</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-dom z-ts">getElementById</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>root<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>นี่คือประโยชน์อย่างนึงของ Webpack เห็นมั้ยครับ จากตัวอย่างข้างบนคือ เราเรียกออกมาข้างนอก Bundle แต่จะเรียก function ใน Bundle ล่ะ ทำยังไง</p> <p>ซึ่งหน้าตาที่เราอยากคือ ประมาณนี้</p> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-script z-begin z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-script z-html">script</span></span><span class="z-meta z-tag z-script z-begin z-html"> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">src</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>dist/index.js<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span><span class="z-meta z-tag z-script z-end z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-script z-html">script</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-script z-begin z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-script z-html">script</span></span><span class="z-meta z-tag z-script z-begin z-html"> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span></span></span><span class="z-meta z-tag z-script z-begin z-html"><span class="z-meta z-attribute-with-value z-html"><span class="z-punctuation z-separator z-key-value z-html">=</span></span></span><span class="z-meta z-tag z-script z-begin z-html"><span class="z-meta z-attribute-with-value z-html"></span></span><span class="z-meta z-tag z-script z-begin z-html"><span class="z-meta z-attribute-with-value z-html"><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>text/javascript<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"> <span class="z-source z-js z-embedded z-html"><span class="z-source z-js"><span class="z-meta z-function-call z-js"><span class="z-variable z-function z-js">hello</span><span class="z-meta z-group z-js"><span class="z-punctuation z-section z-group z-begin z-js">(</span><span class="z-meta z-string z-js"><span class="z-string z-quoted z-double z-js"><span class="z-punctuation z-definition z-string z-begin z-js">&quot;</span>Webpack<span class="z-punctuation z-definition z-string z-end z-js">&quot;</span></span></span><span class="z-punctuation z-section z-group z-end z-js">)</span></span></span><span class="z-punctuation z-terminator z-statement z-js">;</span> </span></span></span><span class="z-text z-html z-basic"><span class="z-source z-js z-embedded z-html"><span class="z-source z-js"></span></span><span class="z-meta z-tag z-script z-end z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-script z-html">script</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p>คือ function <code>hello</code> ซึ่งในอยู่ใน Bundle ของ Webpack ที่ชื่อ <code>dist/index.js</code> ที่นี่มาเข้าเรื่องของเรากันคือ</p> <h2 id="withiikaarran-javascript-khaangn-k-bundle-kh-ng-webpack">วิธีการรัน JavaScript ข้างนอก Bundle ของ Webpack<a class="zola-anchor" href="#withiikaarran-javascript-khaangn-k-bundle-kh-ng-webpack" aria-label="Anchor link for: withiikaarran-javascript-khaangn-k-bundle-kh-ng-webpack" style="visibility: hidden;"></a> </h2> <p>Webpack ค่อนข้างเรียนรู้ยากสำหรับคนที่เพิ่งเริ่มต้น ซึ่งเท่าที่ลองศึกษาดู ก็มีคนพูดวิธีให้ไปแก้ไข config ใน <code>webpack.config.js</code> อย่าง<a href="https://thadaw.com/posts/running-in-line-vanilla-javascript-from-webpack-th/(https://stackoverflow.com/questions/34357489/calling-webpacked-code-from-outside-html-script-tag)">โพสนี้</a> อย่างไรก็ตาม เรามาลองวิธีนี้กัน</p> <ol> <li>ตั้งค่า <code>webpack.config.js</code> ตามโค๊ดข้างล่างตามนี้ คือใช้การตั้งค่าทั่วๆ ไป (ไม่ลงรายละเอียดตรงนี้นะครับ)</li> </ol> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">path</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-function z-ts">require</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>path<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-support z-type z-object z-module z-ts">module</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-type z-object z-module z-ts">exports</span> <span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">entry</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>./src/index.js<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">output</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">path</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">path</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-promise z-ts">resolve</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-support z-variable z-object z-node z-ts">__dirname</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>src/dist<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">filename</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>index.js<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">module</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">rules</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">test</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-string z-regexp z-ts"> <span class="z-punctuation z-definition z-string z-begin z-ts">/</span><span class="z-constant z-character z-escape z-backslash z-regexp">\.</span>m<span class="z-keyword z-operator z-quantifier z-regexp">?</span>js<span class="z-keyword z-control z-anchor z-regexp">$</span><span class="z-punctuation z-definition z-string z-end z-ts">/</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">exclude</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-string z-regexp z-ts"> <span class="z-punctuation z-definition z-string z-begin z-ts">/</span><span class="z-meta z-group z-regexp"><span class="z-punctuation z-definition z-group z-regexp">(</span>node_modules<span class="z-keyword z-operator z-or z-regexp">|</span>bower_components<span class="z-punctuation z-definition z-group z-regexp">)</span></span><span class="z-punctuation z-definition z-string z-end z-ts">/</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">use</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">loader</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>babel-loader<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">options</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">presets</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>@babel/preset-env<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-square z-ts">]</span></span> </span></span></span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">]</span></span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"></span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <ol start="2"> <li>แล้วในไฟล์ <code>src/index.js</code> เราก็เขียน JS กันและมีตัวอย่างการเรียกใช้ <code>JQuery</code> ซึ่งหลักการก็คือเอา function ไปใส่ไว้ใน <code>window</code> ซึ่งเวลานำ Bundle นี้ไปใช้งานก็จะสามารถเข้าถึง function นี้ได้</li> </ol> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-support z-variable z-dom z-ts">window</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">$</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-support z-variable z-dom z-ts">window</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">jQuery</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function-call z-ts"><span class="z-support z-function z-ts">require</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>jquery<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">let</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-entity z-name z-function z-ts">hello</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">name</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Hello <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">name</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span><span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">$</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>#hello-text<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">html</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>Hello <span class="z-meta z-template z-expression z-ts"><span class="z-punctuation z-definition z-template-expression z-begin z-ts">${</span></span><span class="z-meta z-template z-expression z-ts"><span class="z-meta z-embedded z-line z-ts"><span class="z-variable z-other z-readwrite z-ts">name</span></span><span class="z-punctuation z-definition z-template-expression z-end z-ts">}</span></span>, see also in &#39;Console&#39;<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function z-expression z-ts"><span class="z-storage z-type z-function z-ts">function</span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">window</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-support z-variable z-dom z-ts">window</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">EntryPoint</span> <span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">hello</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-support z-variable z-dom z-ts">window</span><span class="z-meta z-brace z-round z-ts">)</span> </span></code></pre> <p>โดยผมสั่งให้พิมพ์ parameter และสั่งแก้ DOM ชื่อ <code>hello-text</code></p> <ol start="3"> <li>ต่อไปก็คือเขียนไฟล์ HTML โดยไฟล์ bundle คือ <code>dist/index.js</code> เราก็สามารถเรียกผ่านตัวแปร <code>EntryPoint</code> ได้เลย หรือตัวแปรอื่นๆ ก็ได้ โดยหน้าตาก็ประมาณนี้</li> </ol> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-block z-any z-html">h1</span> <span class="z-meta z-attribute-with-value z-id z-html"><span class="z-entity z-other z-attribute-name z-id z-html">id</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-toc-list z-id z-html">hello-text</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-block z-any z-html">h1</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-script z-begin z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-script z-html">script</span></span><span class="z-meta z-tag z-script z-begin z-html"> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">src</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>dist/index.js<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span><span class="z-meta z-tag z-script z-end z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-script z-html">script</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-script z-begin z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-script z-html">script</span></span><span class="z-meta z-tag z-script z-begin z-html"> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span></span></span><span class="z-meta z-tag z-script z-begin z-html"><span class="z-meta z-attribute-with-value z-html"><span class="z-punctuation z-separator z-key-value z-html">=</span></span></span><span class="z-meta z-tag z-script z-begin z-html"><span class="z-meta z-attribute-with-value z-html"></span></span><span class="z-meta z-tag z-script z-begin z-html"><span class="z-meta z-attribute-with-value z-html"><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>text/javascript<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"> <span class="z-source z-js z-embedded z-html"><span class="z-source z-js"><span class="z-meta z-function-call z-method z-js"><span class="z-support z-class z-js">EntryPoint</span><span class="z-punctuation z-accessor z-js">.</span><span class="z-variable z-function z-js">hello</span><span class="z-meta z-group z-js"><span class="z-punctuation z-section z-group z-begin z-js">(</span><span class="z-meta z-string z-js"><span class="z-string z-quoted z-double z-js"><span class="z-punctuation z-definition z-string z-begin z-js">&quot;</span>Webpack<span class="z-punctuation z-definition z-string z-end z-js">&quot;</span></span></span><span class="z-punctuation z-section z-group z-end z-js">)</span></span></span><span class="z-punctuation z-terminator z-statement z-js">;</span> </span></span></span><span class="z-text z-html z-basic"><span class="z-source z-js z-embedded z-html"><span class="z-source z-js"></span></span><span class="z-meta z-tag z-script z-end z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-script z-html">script</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> <p>นี้คือตัวอย่างการทำงาน</p> <p><img src="https://thadaw.com/posts/running-in-line-vanilla-javascript-from-webpack-th/2019-10-14-running-in-line-vanilla-javascript-from-webpack.png" alt="webpack" /></p> <p>เพื่อเข้าใจมากขึ้นสามารถเข้าไปดู source ได้ที่ <a rel="nofollow noreferrer" href="https://github.com/mildronize/webpack-with-vanilla-js">https://github.com/mildronize/webpack-with-vanilla-js</a> ได้เลยครับ</p> 2019-04-11T00:00:00+00:00 2019-04-11T00:00:00+00:00 https://thadaw.com/posts/react-design-patterns/ <p>Hi everyone, here is not getting started guide for writing React. You should have some basic of React such as <a rel="nofollow noreferrer" href="https://reactjs.org/docs/hello-world.html">basic concept of React</a> and practical <a rel="nofollow noreferrer" href="https://reactjs.org/tutorial/tutorial.html">React tutorial</a>.</p> <h2 id="overview">Overview<a class="zola-anchor" href="#overview" aria-label="Anchor link for: overview" style="visibility: hidden;"></a> </h2> <p>I'm following <a rel="nofollow noreferrer" href="https://github.com/airbnb/javascript/tree/master/react">Airbnb style guide</a> and using react in pattern books for references https://github.com/krasimir/react-in-patterns, <a rel="nofollow noreferrer" href="https://github.com/vasanthk/react-bits">https://github.com/vasanthk/react-bits</a></p> <h3 id="designing-react-web-application">Designing React Web Application<a class="zola-anchor" href="#designing-react-web-application" aria-label="Anchor link for: designing-react-web-application" style="visibility: hidden;"></a> </h3> <p>Nowadays, we have many approaches to design the composition of react component.</p> <p>Here is one of approaches to design</p> <p><strong>Preparation</strong></p> <ol> <li>Use Airbnb style guide for consistency code style</li> <li>Use popular React boilerplate (<code>create-react-app</code>) for reducing complexity to manage build tools such as webpack, babel, etc.</li> </ol> <p><strong>Basic Design</strong></p> <p>In React documentation describes <a rel="nofollow noreferrer" href="https://reactjs.org/docs/thinking-in-react.html">Thinking in React</a> for explaining how to design react component and how they compose each others. However, when I 've getting started with React, I realize the component design thinking is most important thing for designing react application. In a React application, it will be at least one component, or can be divided into child component which should work with the parent one.</p> <ol> <li>Start with a few React component for reducing the complexity in state management.</li> <li>Break the code down to component when necessary, if it feel easier.</li> <li>The component can break into 2 parts: <strong>Container Component</strong> and <strong>Presentational Component</strong>, when necessary. <ol> <li>Container Component</li> <li>Presentational Component</li> </ol> </li> </ol> <p><strong>Advanced Design: Reusable Components</strong></p> <ol> <li>Break the code down to component if you want to reuse the components.</li> <li>Use High-order Component when necessary.</li> </ol> <h3 id="composing-components">Composing components<a class="zola-anchor" href="#composing-components" aria-label="Anchor link for: composing-components" style="visibility: hidden;"></a> </h3> <ol> <li>Passing a child as a prop</li> <li>Passing state through the props</li> <li>Using top component for storing state</li> <li>Using simple state management library for small application <ol> <li>Honorable mention libraries: <a rel="nofollow noreferrer" href="https://github.com/gunn/pure-store">pure-store</a>, <a rel="nofollow noreferrer" href="https://github.com/jamiebuilds/unstated">unstated</a> and <a rel="nofollow noreferrer" href="https://github.com/developit/unistore">unistore</a>other approaches are shown at <a rel="nofollow noreferrer" href="https://github.com/GantMan/ReactStateMuseum">React State Museum</a> which good place for reviewing react state management library.</li> <li>I'm interesting in <a rel="nofollow noreferrer" href="https://github.com/mobxjs/mobx">mobx</a> approaches for small application</li> </ol> </li> <li>Using <a rel="nofollow noreferrer" href="https://github.com/reduxjs/redux">Redux</a> , <a rel="nofollow noreferrer" href="https://github.com/mobxjs/mobx">mobx</a> for big application</li> </ol> <p>Alternative, you can use MVC approach if you familiar, however, in my opinion using MVC on react.</p> <hr /> <h2 id="design-patterns-and-techniques">Design Patterns and Techniques<a class="zola-anchor" href="#design-patterns-and-techniques" aria-label="Anchor link for: design-patterns-and-techniques" style="visibility: hidden;"></a> </h2> <h3 id="component-organization-templates-patterns">Component Organization Templates &amp; Patterns<a class="zola-anchor" href="#component-organization-templates-patterns" aria-label="Anchor link for: component-organization-templates-patterns" style="visibility: hidden;"></a> </h3> <h4 id="full-feature-stateful-component">Full Feature (Stateful Component)<a class="zola-anchor" href="#full-feature-stateful-component" aria-label="Anchor link for: full-feature-stateful-component" style="visibility: hidden;"></a> </h4> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">Person</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-module z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-other z-inherited-class z-ts">Component</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-storage z-type z-ts">constructor</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">props</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-language z-super z-ts">super</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">props</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">state</span> <span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">smiling</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-language z-boolean z-false z-ts">false</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">handleClick</span> <span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">setState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">smiling</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-keyword z-operator z-logical z-ts">!</span><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">state</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">smiling</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">componentWillMount</span></span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> add event listeners (Flux Store, WebSocket, document, etc.)</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">componentDidMount</span></span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> React.getDOMNode()</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">componentWillUnmount</span></span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> remove event listeners (Flux Store, WebSocket, document, etc.)</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-meta z-method z-declaration z-ts"><span class="z-storage z-type z-property z-ts">get</span> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">smilingMessage</span></span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">state</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">smiling</span><span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>is smiling<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span><span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">render</span></span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-other z-readwrite z-ts">div</span> <span class="z-variable z-other z-readwrite z-ts">onClick</span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span>this.<span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">handleClick</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span><span class="z-variable z-parameter z-ts">this</span>.<span class="z-variable z-parameter z-ts">props</span>.<span class="z-variable z-parameter z-ts">name</span><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span><span class="z-variable z-parameter z-ts">this</span>.<span class="z-variable z-parameter z-ts">smilingMessage</span><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">div</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-variable z-other z-object z-ts">Person</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">defaultProps</span> <span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Guest<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-variable z-other z-object z-ts">Person</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">propTypes</span> <span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">name</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-object z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">PropTypes</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">string</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span></code></pre> <p>Ref: https://github.com/chantastic/react-patterns#component-organization</p> <h4 id="stateless-component">Stateless Component<a class="zola-anchor" href="#stateless-component" aria-label="Anchor link for: stateless-component" style="visibility: hidden;"></a> </h4> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">StatelessComponent</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">div</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">This</span> <span class="z-variable z-other z-readwrite z-ts">is</span> <span class="z-variable z-other z-readwrite z-ts">Stateless</span> <span class="z-variable z-other z-readwrite z-ts">Component</span><span class="z-punctuation z-accessor z-ts">.</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">div</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h4 id="stateless-component-with-props">Stateless Component with props<a class="zola-anchor" href="#stateless-component-with-props" aria-label="Anchor link for: stateless-component-with-props" style="visibility: hidden;"></a> </h4> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">StatelessComponent</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">data</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">div</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span><span class="z-variable z-parameter z-ts">data</span><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">div</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p><strong>Container Component</strong></p> <p>We can split our component into 2 types: Container component, Presentational component</p> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> CommentList.js</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">CommentList</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-module z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-other z-inherited-class z-ts">Component</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">render</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">ul</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span><span class="z-variable z-parameter z-ts">this</span>.<span class="z-variable z-parameter z-ts">props</span>.<span class="z-variable z-parameter z-ts">comments</span>.<span class="z-variable z-parameter z-ts">map</span>((<span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span><span class="z-variable z-parameter z-ts">body</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-parameter z-ts">author</span><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span>) <span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-meta z-objectliteral z-ts"> return &lt;li&gt;{<span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">body</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span>—<span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">author</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">li</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span>; </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">ul</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> )<span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts">} </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> CommentListContainer.js</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">CommentListContainer</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-module z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-other z-inherited-class z-ts">Component</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">getInitialState</span></span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">comments</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span><span class="z-meta z-brace z-square z-ts">]</span></span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">componentDidMount</span></span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">$</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">ajax</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">url</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>/my-comments.json<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">dataType</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>json<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-entity z-name z-function z-ts">success</span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function z-expression z-ts"><span class="z-storage z-type z-function z-ts">function</span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">comments</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">setState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">comments</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-readwrite z-ts">comments</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">bind</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-language z-this z-ts">this</span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">render</span></span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">CommentList</span> <span class="z-entity z-name z-type z-ts">comments</span>=<span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-entity z-name z-type z-module z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-type z-module z-ts">state</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-meta z-field z-declaration z-ts"><span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">comments</span></span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span> /<span class="z-meta z-brace z-angle z-ts">&gt;</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <p>Read more for <a rel="nofollow noreferrer" href="https://krasimir.gitbooks.io/react-in-patterns/content/chapter-06/">Presentational and container components</a>, using ref https://github.com/chantastic/react-patterns#container-components</p> <hr /> <h3 id="jsx-rendering">JSX Rendering<a class="zola-anchor" href="#jsx-rendering" aria-label="Anchor link for: jsx-rendering" style="visibility: hidden;"></a> </h3> <p><code>if</code></p> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-variable z-other z-readwrite z-ts">isActive</span> <span class="z-keyword z-operator z-logical z-ts">&amp;&amp;</span><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">p</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span><span class="z-variable z-other z-readwrite z-ts">Message</span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">p</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <p><code>if-else</code></p> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">isTrue</span> <span class="z-keyword z-operator z-ternary z-ts">?</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">span</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span><span class="z-variable z-other z-readwrite z-ts">Rendered</span> <span class="z-variable z-other z-readwrite z-ts">when</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>TRUE<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">span</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span> <span class="z-keyword z-operator z-ternary z-ts">:</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">span</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span><span class="z-variable z-other z-readwrite z-ts">Rendered</span> <span class="z-variable z-other z-readwrite z-ts">when</span> <span class="z-string z-template z-ts"><span class="z-punctuation z-definition z-string z-template z-begin z-ts">`</span>FALSE<span class="z-punctuation z-definition z-string z-template z-end z-ts">`</span></span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">span</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <p>Loop items for JSX</p> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">todos</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-brace z-square z-ts">[</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">id</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">1</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">text</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Test<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">id</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">1</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">text</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>Write a paper<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-brace z-square z-ts">]</span></span></span> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">sampleComponent</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">ul</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span><span class="z-variable z-parameter z-ts">todos</span>.<span class="z-variable z-parameter z-ts">map</span>(<span class="z-variable z-parameter z-ts">todo</span> <span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-other z-readwrite z-ts">li</span> <span class="z-variable z-other z-readwrite z-ts">key</span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span>todo.<span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">id</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-keyword z-operator z-relational z-ts">&gt;</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span>todo.<span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">text</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">li</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-meta z-brace z-round z-ts">)</span>)<span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">ul</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h3 id="two-way-binding">Two way binding<a class="zola-anchor" href="#two-way-binding" aria-label="Anchor link for: two-way-binding" style="visibility: hidden;"></a> </h3> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">App</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-module z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-other z-inherited-class z-ts">Component</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">state</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-field z-declaration z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">textbox</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span><span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-field z-declaration z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">render</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">div</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-parameter z-ts">input</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">type</span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>text<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">value</span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span>this.state.<span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">textbox</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">onChange</span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span>(e) =&gt; this.setState({ <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">textbox</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-object z-ts">e</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">target</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-variable z-property z-dom z-ts">value</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> <span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">state</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">textbox</span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">div</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> )<span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts">} </span></code></pre> <hr /> <h2 id="composing-components-1">Composing components<a class="zola-anchor" href="#composing-components-1" aria-label="Anchor link for: composing-components-1" style="visibility: hidden;"></a> </h2> <h3 id="file-structure">File Structure<a class="zola-anchor" href="#file-structure" aria-label="Anchor link for: file-structure" style="visibility: hidden;"></a> </h3> <p>Todo Components</p> <pre class="z-code"><code><span class="z-text z-plain">├── components </span><span class="z-text z-plain">│   ├── todo </span><span class="z-text z-plain">│      ├── index.jsx </span><span class="z-text z-plain">│      ├── AddTodo.jsx </span><span class="z-text z-plain">│      └── TodoList </span><span class="z-text z-plain">│     ├── index.jsx </span><span class="z-text z-plain">│      └── Todo.jsx </span><span class="z-text z-plain">├── app.js </span><span class="z-text z-plain">└── index.js </span></code></pre> <h3 id="passing-a-child-as-a-prop">Passing a child as a prop<a class="zola-anchor" href="#passing-a-child-as-a-prop" aria-label="Anchor link for: passing-a-child-as-a-prop" style="visibility: hidden;"></a> </h3> <p>Every React component has <code>children</code> props.</p> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts"><span class="z-entity z-name z-function z-ts">Title</span></span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function z-expression z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">h1</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span><span class="z-variable z-other z-readwrite z-ts">Hello</span> <span class="z-variable z-other z-readwrite z-ts">there</span><span class="z-keyword z-operator z-logical z-ts">!</span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">h1</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span></span> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts"><span class="z-entity z-name z-function z-ts">Header</span></span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-function z-expression z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">title</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-parameter z-ts">children</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">header</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">title</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-parameter z-object-binding-pattern z-ts"> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">children</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">header</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span></span> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">App</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-other z-readwrite z-ts">Header</span> <span class="z-variable z-other z-readwrite z-ts">title</span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> &lt;Title /&gt; <span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">Resting</span> <span class="z-variable z-parameter z-ts">content</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">Header</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>ref: https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/#passing-a-child-as-a-prop</p> <h3 id="passing-state-through-the-props">Passing state through the props<a class="zola-anchor" href="#passing-state-through-the-props" aria-label="Anchor link for: passing-state-through-the-props" style="visibility: hidden;"></a> </h3> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Counter.jsx</span> </span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">Counter</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-module z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-other z-inherited-class z-ts">Component</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-field z-declaration z-ts"> <span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">state</span></span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-field z-declaration z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">count</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-field z-declaration z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">handleAdd</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">setState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">count</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">state</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">count</span> <span class="z-keyword z-operator z-arithmetic z-ts">+</span> <span class="z-constant z-numeric z-decimal z-ts">1</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">render</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-parameter z-ts">CounterView</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">value</span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span>this.state.<span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">count</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">onAdd</span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span>() =&gt; this.handleAdd()<span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">CounterView</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> CounterView.jsx</span> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">CounterView</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">value</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-parameter z-ts">onAdd</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-other z-object z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">Fragment</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">div</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span><span class="z-variable z-parameter z-ts">Count</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"><span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">value</span></span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span>/<span class="z-entity z-name z-type z-ts">div</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-other z-readwrite z-ts">button</span> <span class="z-variable z-other z-readwrite z-ts">onClick</span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">onAdd</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-keyword z-operator z-relational z-ts">&gt;</span><span class="z-variable z-other z-readwrite z-ts">Add</span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">button</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-object z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">Fragment</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <h3 id="using-top-component-for-storing-state">Using top component for storing state<a class="zola-anchor" href="#using-top-component-for-storing-state" aria-label="Anchor link for: using-top-component-for-storing-state" style="visibility: hidden;"></a> </h3> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> store.js</span> </span><span class="z-source z-ts"><span class="z-meta z-export z-default z-ts"><span class="z-keyword z-control z-export z-ts">export</span> <span class="z-keyword z-control z-default z-ts">default</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-export z-default z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">root</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-export z-default z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">getRoot</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-export z-default z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">root</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-export z-default z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-export z-default z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">setRoot</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">value</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-export z-default z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">root</span> <span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-variable z-other z-readwrite z-ts">value</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-export z-default z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-export z-default z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> Counter.jsx</span> </span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">Counter</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-module z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-other z-inherited-class z-ts">Component</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-storage z-type z-ts">constructor</span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">props</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-language z-super z-ts">super</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">props</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">state</span> <span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">count</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-constant z-numeric z-decimal z-ts">0</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">store</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">setRoot</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-language z-this z-ts">this</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">handleAdd</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">setState</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">count</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-language z-this z-ts">this</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">state</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">count</span> <span class="z-keyword z-operator z-arithmetic z-ts">+</span> <span class="z-constant z-numeric z-decimal z-ts">1</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">render</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-parameter z-ts">CounterView</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">value</span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span>this.state.<span class="z-meta z-object z-member z-ts"><span class="z-variable z-other z-readwrite z-ts">count</span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-keyword z-operator z-relational z-ts">&gt;</span><span class="z-cast z-expr z-ts"><span class="z-meta z-brace z-angle z-ts">&lt;</span>/<span class="z-entity z-name z-type z-ts">CounterView</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> CounterView.jsx</span> </span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-definition z-function z-ts"><span class="z-entity z-name z-function z-ts">CounterView</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-meta z-parameter z-object-binding-pattern z-ts"><span class="z-punctuation z-definition z-binding-pattern z-object z-ts">{</span> <span class="z-variable z-parameter z-ts">value</span> <span class="z-punctuation z-definition z-binding-pattern z-object z-ts">}</span></span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-other z-object z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">Fragment</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">div</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span><span class="z-variable z-parameter z-ts">Count</span><span class="z-meta z-type z-annotation z-ts"><span class="z-keyword z-operator z-type z-annotation z-ts">:</span> <span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-field z-declaration z-ts"><span class="z-meta z-definition z-property z-ts"><span class="z-variable z-object z-property z-ts">value</span></span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-type z-parameters z-ts"><span class="z-punctuation z-definition z-typeparameters z-begin z-ts">&lt;</span>/<span class="z-entity z-name z-type z-ts">div</span><span class="z-punctuation z-definition z-typeparameters z-end z-ts">&gt;</span></span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-variable z-other z-readwrite z-ts">button</span> <span class="z-variable z-other z-readwrite z-ts">onClick</span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span>() =&gt; store.getRoot().handleAdd()<span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-keyword z-operator z-relational z-ts">&gt;</span><span class="z-variable z-other z-readwrite z-ts">Add</span><span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-readwrite z-ts">button</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-operator z-relational z-ts">&lt;</span><span class="z-keyword z-operator z-arithmetic z-ts">/</span><span class="z-variable z-other z-object z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-property z-ts">Fragment</span><span class="z-keyword z-operator z-relational z-ts">&gt;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>Thanks for <a rel="nofollow noreferrer" href="https://anastue.com/">Anas</a></p> <hr /> <h3 id="share-state-between-components">Share state between components<a class="zola-anchor" href="#share-state-between-components" aria-label="Anchor link for: share-state-between-components" style="visibility: hidden;"></a> </h3> <p>Design choice:</p> <ol> <li>Small Application: <a rel="nofollow noreferrer" href="https://github.com/gunn/pure-store">pure-store</a>, <a rel="nofollow noreferrer" href="https://github.com/jamiebuilds/unstated">unstated</a> and <a rel="nofollow noreferrer" href="https://github.com/developit/unistore">unistore</a></li> <li>Small - Medium Application: <a rel="nofollow noreferrer" href="https://github.com/mobxjs/mobx">mobx</a> (Also using <a rel="nofollow noreferrer" href="https://github.com/jamiebuilds/unstated">unstated</a> and <a rel="nofollow noreferrer" href="https://github.com/developit/unistore">unistore</a> )</li> <li>Using <a rel="nofollow noreferrer" href="https://github.com/reduxjs/redux">Redux</a> , <a rel="nofollow noreferrer" href="https://github.com/mobxjs/mobx">mobx</a> for big application</li> </ol> <p>Read more how to implement in each state management library in <a rel="nofollow noreferrer" href="https://github.com/GantMan/ReactStateMuseum">React State Museum</a></p> <h3 id="how-to-choose-the-composing-component-pattern">How to choose the composing component pattern?<a class="zola-anchor" href="#how-to-choose-the-composing-component-pattern" aria-label="Anchor link for: how-to-choose-the-composing-component-pattern" style="visibility: hidden;"></a> </h3> <hr /> <h2 id="style-guide-naming">Style Guide &amp; Naming<a class="zola-anchor" href="#style-guide-naming" aria-label="Anchor link for: style-guide-naming" style="visibility: hidden;"></a> </h2> <h3 id="style-guide">Style Guide<a class="zola-anchor" href="#style-guide" aria-label="Anchor link for: style-guide" style="visibility: hidden;"></a> </h3> <p>Read more in <a rel="nofollow noreferrer" href="https://github.com/airbnb/javascript/tree/master/react">Airbnb's Style guide</a></p> <h3 id="naming-events">Naming Events<a class="zola-anchor" href="#naming-events" aria-label="Anchor link for: naming-events" style="visibility: hidden;"></a> </h3> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-storage z-type z-class z-ts">class</span> <span class="z-entity z-name z-type z-class z-ts">Owner</span> <span class="z-storage z-modifier z-ts">extends</span> <span class="z-entity z-name z-type z-module z-ts">React</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-other z-inherited-class z-ts">Component</span> <span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">handleClick</span></span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> handle click event</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"> <span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">render</span></span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span><span class="z-cast z-expr z-ts"> <span class="z-meta z-brace z-angle z-ts">&lt;</span><span class="z-entity z-name z-type z-ts">div</span> <span class="z-entity z-name z-type z-ts">onClick</span>=<span class="z-meta z-object z-type z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> =&gt; this.<span class="z-meta z-definition z-method z-ts"><span class="z-entity z-name z-function z-ts">handleClick</span></span><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span><span class="z-cast z-expr z-ts"><span class="z-meta z-brace z-angle z-ts">&lt;</span>/<span class="z-entity z-name z-type z-ts">div</span><span class="z-meta z-brace z-angle z-ts">&gt;</span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-meta z-method z-declaration z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span><span class="z-source z-ts"><span class="z-meta z-class z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span> </span></code></pre> <p>Original: <a rel="nofollow noreferrer" href="https://github.com/chantastic/react-patterns#naming-events">https://github.com/chantastic/react-patterns#naming-events</a></p> <hr /> <h2 id="other-resources">Other Resources<a class="zola-anchor" href="#other-resources" aria-label="Anchor link for: other-resources" style="visibility: hidden;"></a> </h2> <p>Other topics can read in below resources:</p> <ul> <li><a rel="nofollow noreferrer" href="https://facebook.github.io/react/contributing/design-principles.html">React Design principles</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/airbnb/javascript/tree/master/react">Airbnb React/JSX Style Guide</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/krasimir/react-in-patterns">React in pattern by krasimir</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/planningcenter/react-patterns">React patterns at Planning Center Online</a></li> <li><a rel="nofollow noreferrer" href="http://reactpatterns.com/">React patterns by Michael Chan</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/vasanthk/react-bits">React patterns, techniques, tips and tricks</a></li> </ul> <p>State</p> <ul> <li><a rel="nofollow noreferrer" href="https://github.com/GantMan/ReactStateMuseum">React State Museum</a></li> </ul> <p>P.S. PR, Suggestions are welcome</p> 2019-03-24T00:00:00+00:00 2019-03-24T00:00:00+00:00 https://thadaw.com/posts/amazing-ui-design-articles/ <h2 id="refactor-ui">Refactor UI<a class="zola-anchor" href="#refactor-ui" aria-label="Anchor link for: refactor-ui" style="visibility: hidden;"></a> </h2> <p><a rel="nofollow noreferrer" href="https://refactoringui.com/">Adam Wathan &amp; Steve Schoger</a>, full stack developer, who are facing the design problem. They shows how amazing way to refactor UI without design skill in thier "<a rel="nofollow noreferrer" href="https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886">7 Practical Tips for Cheating at Design</a>" article.</p> <p><img src="https://cdn-images-1.medium.com/max/2600/1*KYZikUrx9F02cJU9kpn_gQ.png" alt="" /></p> <p>Another good arcticle from <a rel="nofollow noreferrer" href="https://refactoringui.com/">Adam Wathan &amp; Steve Schoger</a> for redesigning application UI in Laravel forum website via their article, <a rel="nofollow noreferrer" href="https://medium.com/refactoring-ui/redesigning-laravel-io-c47ac495dff0">Redesigning Laravel.io</a>.</p> <p><img src="https://cdn-images-1.medium.com/max/2400/1*AZkkwzahAr0VpKdJ4OzRNQ.png" alt="" /></p> <h2 id="design">Design<a class="zola-anchor" href="#design" aria-label="Anchor link for: design" style="visibility: hidden;"></a> </h2> <p>Fundamental Design for web via <a rel="nofollow noreferrer" href="https://medium.freecodecamp.org/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda">Before you can master design, you must first master the fundamentals</a></p> <p>This article talks about 4 fundamentals</p> <ol> <li> <p>Go back to the basics with type</p> </li> <li> <p>Use space to create balance</p> </li> <li> <p>Use size to establish visual hierarchy</p> </li> <li> <p>Use color to convey meaning</p> </li> </ol> <h2 id="ui-ux-animation">UI/UX Animation<a class="zola-anchor" href="#ui-ux-animation" aria-label="Anchor link for: ui-ux-animation" style="visibility: hidden;"></a> </h2> <p>Other interesting stuff about design</p> <p><img src="https://cdn-images-1.medium.com/max/2600/1*boQYFGPLtlDof3RRs124bQ.gif" alt="" /></p> <p>https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc</p> 2019-03-17T00:00:00+00:00 2019-03-17T00:00:00+00:00 https://thadaw.com/posts/what-i-get-from-master-degree/ <p>สวัสดีคับ ผมชื่อมายด์คับ ห่างหายจากการเขียนบล็อกมานานแสนนานมาก เนื่องจากต้องไปรับราชการทหารอยู่ 6 เดือนระหว่างตอนที่เรียนโทอยู่ครับ วันนี้ก็มีเรื่องเล่ามาแชร์ ให้ฟังคับว่า เป็นอย่างไรบ้างระหว่างการเรียน และได้อะไรมาบ้าง (อาจจะไม่ครบถ้วน ถ้านึกออกจะมาใส่เพิ่มนะครับ) ถือว่าเป็นการแบ่งปันนะคับ</p> <h2 id="singthiiaidcchaakkaareriiynoth">สิ่งที่ได้จากการเรียนโท<a class="zola-anchor" href="#singthiiaidcchaakkaareriiynoth" aria-label="Anchor link for: singthiiaidcchaakkaareriiynoth" style="visibility: hidden;"></a> </h2> <ul> <li><strong>องค์ความรู้ต่างๆ</strong> : แน่นอนครับการเรียนที่สูงขึ้นก็ต้องได้ความรู้ในด้านที่เราสนใจลึกลงไป</li> <li><strong>ความสามารถในการเรียนรู้สิ่งใหม่ๆ ด้วยตนเอง</strong>: หลายๆ สิ่งที่เราศึกษาเป็นสิ่งที่ยังไม่มีคนทำทีครับ ดังนั้นเราต้องต่อยอดองค์ความรู้เดิมให้ได้ ถ้ามีไม่พอก็ต้องศึกษาเพิ่ม ถ้ามีผู้รู้ก็ยิ่งดีเลย ถ้าไม่มีใครให้ถามก็ต้องพึ่งตัวเองครับ</li> <li><strong>ทักษะวิจัย</strong>: ตรงนี้ค่อนข้างยาว ยกไปพูดหัวข้อถัดไปละกันคับ</li> <li><strong>การพัฒนาตัวเอง</strong>: ในหลายๆ ด้าน ไม่ว่าการบริหารจัดการเวลา การจัดการตัวเอง การวางแผน ความรับผิดชอบ</li> <li><strong>ทักษะการสื่อสาร</strong>: ให้คนอื่นเข้าใจ การพูดการนำเสนอ การทำสไลด์</li> </ul> <h2 id="thaksawicchay">ทักษะวิจัย<a class="zola-anchor" href="#thaksawicchay" aria-label="Anchor link for: thaksawicchay" style="visibility: hidden;"></a> </h2> <p>ผมเรียนแบบแผน ก2 ก็คือ มีเรียน lecture ด้วยประมาณ 4-5 วิชา แล้วก็มีวิทยานิพนธ์ด้วย</p> <p>ทักษะวิจัย เป็นอะไรที่ไม่เคยเข้าใจเลยไม่ว่าจะผ่านการทำโครงงานหรือโปรเจ็คต่างๆมา พอสมควร จนกระทั่งเรียนโทนี่แหละ และเป็นอะไรที่อธิบายได้ยากครับว่ามันเป็นยังไง อารมณ์เหมือนว่าเราต้องเข้าใจถึงโจทย์หรือปัญหา ภาษาทางวิจัยเค้าเรียกว่า problem statement ว่าอะไรคือประเด็นปัญหา แล้วประเด็นปัญหาที่ว่านั่นเป็นปัญหาทางวิศวกรรมคอมพิวเตอร์หรือไม่ ( เกี่ยวข้องกับสาขาที่เรียน ) แล้วเราจะแก้ปัญหาอย่างไร เสนอแนวทางการแก้ปัญหาอย่างไร แล้ววัดผลอะไรบ้าง มีปัจจัยอะไรบ้างที่จะวิเคราะห์ สรุปผลการทดลอง แล้วอะไรคือ contribution สิ่งที่จะเป็นประโยชน์หรือองค์ความรู้ที่เกิดขึ้นมาใหม่ ซึ่งล้อกับวัตถุประสงค์ที่เราตั้งไว้</p> <p>โดยความคิดเห็นของผมเอง คิดว่ามันเป็นทักษะที่มีประโยชน์ในหลายๆ ด้านเลยครับ สิ่งจริงๆ สิ่งที่ได้จริงจากการเรียนคือไม่ใช่แค่ความรู้ ความชำนาญในเรื่องที่เกี่ยวข้องเท่านั้น แต่ยังสามารถคิดริเริ่มสิ่งใหม่ๆ โดยไม่กลัว และยังสร้างองค์ความรู้ใหม่ และอธิปรายสิ่งที่ที่เกิดขึ้นได้ เพราะว่าบางเหตุการณ์มันก็ไม่ได้เป็นไปตามคาดคับ</p> <h2 id="occhthykh-ngphm">โจทย์ของผม<a class="zola-anchor" href="#occhthykh-ngphm" aria-label="Anchor link for: occhthykh-ngphm" style="visibility: hidden;"></a> </h2> <p>นอกจากปริญญาบัตรและทักษะวิจัย สิ่งที่ผมคาดหวังว่าจะได้จากเรียนคือทักษะที่เกี่ยวข้องกับวิชาชีพ</p> <ol> <li>ปริญญาบัตร</li> <li>เทคโนโลยีที่ใช้ต้องทันสมัย</li> <li>และสุดท้ายเรื่องที่ทำต้องทันสมัยด้วย</li> </ol> <h2 id="singthiiphmtham">สิ่งที่ผมทำ<a class="zola-anchor" href="#singthiiphmtham" aria-label="Anchor link for: singthiiphmtham" style="visibility: hidden;"></a> </h2> <p>ก่อนอื่นเลยต้องอธิบายภาพรวมก่อน คือ ผมปรับปรุงประสิทธิภาพฐานข้อมูล opentsdb ให้สามารถ query เร็วกว่าเดิมโดยใช้ cache ของ memcached และตรงกับเงื่อนไขของผมพอดี</p> <h2 id="rwmsingthiiaidcchaakkaareriiyn">รวมสิ่งที่ได้จากการเรียน<a class="zola-anchor" href="#rwmsingthiiaidcchaakkaareriiyn" aria-label="Anchor link for: rwmsingthiiaidcchaakkaareriiyn" style="visibility: hidden;"></a> </h2> <p>จะเขียนสิ่งที่ได้จากการเรียนโท ออกเป็นบล็อกย่อยๆ ตามหัวข้อข้างล่าง</p> <h3 id="related-article">Related Article<a class="zola-anchor" href="#related-article" aria-label="Anchor link for: related-article" style="visibility: hidden;"></a> </h3> <ol> <li>การวาดกราฟจากข้อมูลจำนวนมากด้วย Numpy (Plot graph with numpy )</li> <li>automate test ด้วย python ซึ่งไปรัน docker อีกทีนึง</li> <li>เขียนโปรแกรม linux บน Windows (MacOS ก็ได้ คอนเซ็ปเดียวกัน) แบบ Seamless คือทำ two-way sync โดยใช้ docker, unison, intellji + script นิดหน่อย</li> <li>OpenTSDB <ol> <li>Intro &amp; Architecture</li> <li>OpenTSDB Internal</li> <li>Asynchronous programming using deferred object ( async Hbase )</li> </ol> </li> <li>memcached &amp; internal</li> </ol> <h3 id="supported-stuffs-and-tools">Supported Stuffs and tools<a class="zola-anchor" href="#supported-stuffs-and-tools" aria-label="Anchor link for: supported-stuffs-and-tools" style="visibility: hidden;"></a> </h3> <ol> <li>Dotfiles : vim , zsh, tmux</li> <li>docker &amp; docker compose</li> <li>Tdd. &amp; unit test with python &amp; java</li> <li>Project pywatch4test</li> <li>Ci by Jenkins &amp; Travis ci using mildronize.com as a case study</li> <li>Vim cheat sheet thai</li> <li>PSU Latex template</li> </ol> 2019-01-29T00:00:00+00:00 2019-01-29T00:00:00+00:00 https://thadaw.com/posts/7-months-finish-master-thesis/ <p>อยากแชร์ เรื่องหลังจาการตัดสินใจ ทำไมถึงใช้เวลาทำวิจัยป.โท แค่ 7 เดือน (ทั้งๆ ที่จริงๆ แล้วอาจจะต้องใช้เวลาเป็นปี)</p> <p>ก่อนอื่นนะครับ ผมไม่เก่งอะไร เพียงแต่มีวิธีคิด วินัยและพันธสัญญาต่อตัวเอง และอยากมาแชร์มุมมองว่า การที่เราจะประสบความสำเร็จในเรื่องใดๆ สักเรื่องนั้น มันจะประกอบไปด้วยอะไรบ้าง นั่นคือ ความเชื่อ, เป้าหมาย, และการรักษาการตัดสินใจตลอดเวลา (วินัย)</p> <h2 id="khwaamechuue">ความเชื่อ<a class="zola-anchor" href="#khwaamechuue" aria-label="Anchor link for: khwaamechuue" style="visibility: hidden;"></a> </h2> <p>ก่อนอื่นขอเล่าก่อน มันอาจจะดูเว่อนะครับ 7 เดือนเสร็จได้ แต่จริงๆ มันคือแบบนั้นจริงๆ คือ หลังจบปลดประจำการทหาร ทางมหาวิทยาลัยติดต่อมาว่า "ถ้าต้องการสมัครเป็นอาจารย์มหาวิทยาลัย ต้องจบวุฒิป.โทให้ทัน มีเวลาให้ 7 เดือน</p> <blockquote> <p>ซึ่งมีเงื่อนพ่วงท้ายว่าจะต้องมี 2 งานวิจัยด้วย, และมีคะแนนสอบภาษาอังกฤษด้วย "ผมก็ตอบว่าได้ครับ จบทันครับ"</p> </blockquote> <p>ทั้งๆ ที่วันนั้นความคืบหน้าของวิทยานิพนธ์แค่ 25% คือ</p> <ul> <li>ปัญหาที่จะแก้ชัด</li> <li>ยังไม่รู้ว่าต้องแก้ด้วยวิธีไหน (เคยหาวิธีแก้ปัญหามาแล้วร่วม 4-5 เดือน แต่ไม่เจอ)</li> <li>ยังไม่รู้ว่าทำแล้วจะแก้ปัญหาได้มั้ย</li> <li>ยังไม่ได้ทำการทดลอง, ไม่มีผลการทดลองใดๆ</li> <li>ยังไม่ได้เขียนโปรแกรม</li> <li>รายงานก็ยังไม่ได้เขียน, งานวิจัยยังไม่มีสักอัน สรุปคือ ไม่พร้อมสักอย่างครับ แต่วันนั้นผม ตอบไปอย่างเร็วมากครับ ด้วยความเชื่อว่า "เราทำได้" จริงๆ ผมไม่ได้คิดมากเลย แต่ผมคิดง่ายๆ ครับ ถ้าทำไม่ได้แล้วจะเสียอะไรมั้ย?</li> <li>เสียเวลา</li> <li>จ่ายค่าเทอมมากขึ้น</li> <li>อาจจะไม่ได้งานที่อยากทำ ความเชื่อก็เปรียบเหมือนพลังงานในตัวเรา ความหวัง ความมั่นใจในการลงมือทำอะไรสักอย่าง พอเรามั่นใจเราก็จะลงมือทำครับ หากวันใดปราศจากความเชื่อแล้วไซร้ ก็คงไม่ต่างกับรถที่ไร้น้ำมัน</li> </ul> <h2 id="epaahmaay">เป้าหมาย<a class="zola-anchor" href="#epaahmaay" aria-label="Anchor link for: epaahmaay" style="visibility: hidden;"></a> </h2> <p>เป้าหมายที่ดีควรจะมีภาพที่ชัดเจนและมีระยะเวลากำหนด ซึ่งผมเองก็มีภาพที่ชัด แต่มีเวลาเป็นตัวกำหนดครับ (ก็มีเวลาแค่ 7 เดือน ทั้งๆ ที่ปกติอาจจะต้องใช้เวลาเป็นปี) แล้วเราจะคิดครับว่าทำยังไงให้ทันเวลา</p> <p>นึกง่ายๆ ว่า เราอาจารย์สั่งการบ้าน ตอนสั่งใหม่ๆ ไม่ทำ คิดไม่ออก แต่พอใกล้เวลาส่ง พลังงานมาจากไหนไม่รู้ ต้องเสร็จให้ทัน ฮ่าๆๆ</p> <p>เพราะว่าถ้าภาพไม่ชัดเราก็ไม่รู้ว่าเราจะอยากได้มันทำไม</p> <p>เพราะว่าถ้าเดดไลน์ ไม่ชัด เราก็จะทำเรื่อยๆ เสร็จเมื่อไหร่เมื่อนั้น</p> <h2 id="kaarraksaakaartadsinaicchtl-dewlaa-winay-cchnkwaacchathuengepaahmaay">การรักษาการตัดสินใจตลอดเวลา (วินัย) จนกว่าจะถึงเป้าหมาย<a class="zola-anchor" href="#kaarraksaakaartadsinaicchtl-dewlaa-winay-cchnkwaacchathuengepaahmaay" aria-label="Anchor link for: kaarraksaakaartadsinaicchtl-dewlaa-winay-cchnkwaacchathuengepaahmaay" style="visibility: hidden;"></a> </h2> <p>เมื่อมีความเชื่อมีมากพอ เราจะไม่ลืมเป้าหมาย ชนิดที่กัดไม่ปล่อย ยังไงก็ขอไม่แพ้ในเวทีนี้ละนะ</p> <p>หัวข้อนี้สำคัญไม่แพ้กัน เพราะว่าเราจะต้องรักษาการตัดสินใจให้ได้ตลอดเวลา ไม่ว่าอะไรจะเกิดขึ้นเรายังคงทำมันต่อหรือไม่ ซึ่งมันจะมันจะเกิดเป็นนิสัย</p> <p>ซึ่งมันจะต้องมีการวางแผนและลงมือทำ พอรู้ว่าเวลามีน้อยมากๆ เลยต้องคิดให้เยอะครับ ว่าจะทำอะไรตรงไหนบ้าง ทำให้ทำงานรอบคอบมาก แทบไม่สูญเสียโฟกัสเลย ครับ</p> <blockquote> <p>คิดมากกว่าทำ จะใช้เวลาทำน้อยกว่าที่คิด Failing to plan is planing to fail</p> </blockquote> <p>"คนที่สำเร็จ ไม่ได้สำเร็จแล้ว ได้นิสัยแบบคนประสบความสำเร็จ แต่ทำแต่เรื่องให้ตรงกับเงื่อนไขความสำเร็จจนเป็นนิสัย ถึงจะสำเร็จ"</p> <p>ชีวิตจะเป็นอย่างไรเริ่มที่ตัวเรา สร้างนิสัยแบบคนสำเร็จหรือยัง เข้าใจเงื่อนไขความสำเร็จ แล้วจะสำเร็จจนเป็นนิสัย</p> <h2 id="sudthaaythaamwaa-thamngaanerwkhnaadniingaanlwkmay">สุดท้ายถามว่า ทำงานเร็วขนาดนี้งานลวกมั้ย?<a class="zola-anchor" href="#sudthaaythaamwaa-thamngaanerwkhnaadniingaanlwkmay" aria-label="Anchor link for: sudthaaythaamwaa-thamngaanerwkhnaadniingaanlwkmay" style="visibility: hidden;"></a> </h2> <p>ด้านล่างเป็นความคิดเห็นของอาจารย์กรรมการสอบวิทยานิพนธ์ (ที่เชิญมาจากข้างนอก) ผศ.ดร.เทพฤทธิ์ ซึ่งถนัดเรื่อง cache ครับ</p> <blockquote> <p>"สุดท้ายนี้ ผมขออนุญาตชื่นชมท่านอาจารย์ที่ปรึกษาและ นศ อีกครั้งว่าเป็นผลงานวิทยานิพนธ์ที่มีคุณภาพประทับใจอีกหนึ่งฉบับเท่าที่ผมเคยสัมผัสมาครับ"</p> <p>"...เพื่อเป็นวิทยาทานให้นักวิจัยรุ่นน้องๆ และผมจะขอเก็บงานดีๆ นี้ไว้อ้างอิงด้วยเช่นกันครับ"</p> </blockquote> <p>จงมีพันธสัญญาต่อตัวเอง ต่อความเชื่อ ต่อเป้าหมาย แล้วพบกันที่ความสำเร็จครับ ป.ล. งานเกือบทั้งหมดเสร็จในระยะ 7 เดือน แต่มีประเด็นเรื่องเวลาการนำเสนองานวิจัย ที่ทำให้เร็วไม่ได้จึงต้องรอเวลาเพื่อจบครับ</p> <p>บทความเนื้อเขียนเพื่อทบทวนความทรงจำของตัวผมเอง</p> <p>Cross Publish at Facebook <a rel="nofollow noreferrer" href="https://www.facebook.com/photo/?fbid=10218769998469109&amp;set=a.1519952206806">https://www.facebook.com/photo/?fbid=10218769998469109&amp;set=a.1519952206806</a></p> 2018-09-17T00:00:00+00:00 2018-09-17T00:00:00+00:00 https://thadaw.com/posts/99-score-google-insight-web-optimization/ <blockquote> <p>Blog นี้เขียนตอนสมัยยังใช้ Jekyll อยู่ ซึ่งสามารถไปดูได้ที่ https://jekyll.mildronize.com/</p> </blockquote> <p>ได้ 99 คะแนนจาก Google Insights &amp; เรียนรู้การทำ web optimization ผ่านการพัฒนาเว็บบล็อกให้ทันสมัย จากการพัฒนา <a rel="nofollow noreferrer" href="https://mildronize.com/notes/my-blog-dev/">blog version แรก</a> ซึ่ง clone theme Hyde ของ <a rel="nofollow noreferrer" href="https://jekyllrb.com/">Jekyll</a> มาแล้วปรับแก้มาเรื่อยๆ</p> <p><img src="https://www.dropbox.com/s/sqk4d1no2xi4os0/2018-09-17-99-score-google-insight-web-optimization-1.jpg?raw=1" alt="old web design" /> <img src="https://www.dropbox.com/s/gt0p9ta4da7t6gs/2018-09-17-99-score-google-insight-web-optimization-2.jpg?raw=1" alt="new web deisgn" /></p> <p>ตอนแรกไปลองใช้ <a rel="nofollow noreferrer" href="https://gatsbyjs.org/">GatsbyJS</a> อยู่สักพัก ซึ่งใช้ React ทั้งระบบเลย แต่สุดท้ายก็ย้ายจาก Gatsby กลับมาใช้ Jekyll เหมือนเดิม เท่าที่ลองใช้งานดู Gatsby เร็วกว่าในหลายๆ ด้านเลย ทั้งด้าน dev และ รันขึ้น production เป็น pwa ด้วย</p> <p>แต่ดูเหมือนต้องปรับจูนเยอะกว่าจะได้ blog แบบที่เราต้องการ เลยไม่เอาดีกว่า ยอมใช้ Jekyll ที่ compile ช้ากว่า แต่ เราถนัดกว่า ( เทคโนโลยี แบบดั้งเดิมดี ไม่ต้องเปลี่ยนเยอะ)</p> <blockquote> <p>ตรงนี้จากประสบการณ์ตัวเอง เนื่องจากว่าเว็บบล็อกไม่ได้เขียนโค้ด หรือพัฒนาอยู่บ่อยๆ ส่วนใหญ่เน้นไปที่เขียนบทความใหม่ๆ มากกว่า ดังนั้น เมื่อเวลาผ่านไปนานๆ และเทคโนโลยีฝั่งเว็บไปเร็วมาก จนบางครั้งอาจจะทำให้เทคโนโลยีเว็บเดิมที่เคยใช้อยู่ทำงานไม่ได้ ใน browser สมัยใหม่ หรือการปรับเปลี่ยนให้ทันยุคทันสมัยต้องมานั่งแก้เว็บใหม่อีก</p> <p><strong>ดังนั้น</strong> ผมเลยตัดสินใจใช้เทคโนโลยีเก่าหน่อย ที่ยังคงเป็น long term support แต่ก็ยังคงสามารถทำให้ดูทันสมัยได้ และไม่ได้ทำงานช้าด้วยซึ่งก็เหมาะสมกับเว็บบล็อกดี</p> </blockquote> <p>สุดท้ายก็ตัดสินใจจูน frontend ของบล็อกเดิม ที่เป็น Jekyll ใหม่ให้เป็น Responsive มากขึ้น ทั้งแง่ของ typography ด้วย</p> <hr /> <h2 id="phlkaarthds-bcchaak-google-insights">ผลการทดสอบจาก google insights<a class="zola-anchor" href="#phlkaarthds-bcchaak-google-insights" aria-label="Anchor link for: phlkaarthds-bcchaak-google-insights" style="visibility: hidden;"></a> </h2> <p>จากการทดสอบ google insights ก็ได้ 99 คะแนนบน mobile และ 97 คะแนนบน desktop</p> <ul> <li><img src="https://www.dropbox.com/s/2irrnt11wei4aq7/2018-09-17-99-score-google-insight-web-optimization-3.jpg?raw=1" alt="99 score on Mobile" /></li> <li><img src="https://www.dropbox.com/s/k6ib5pfgunc6dr0/2018-09-17-99-score-google-insight-web-optimization-4.jpg?raw=1" alt="97 score on Desktop" /></li> </ul> <h2 id="prabprungewbethkhonolyiiekaaaihthansmay">ปรับปรุงเว็บเทคโนโลยีเก่าให้ทันสมัย<a class="zola-anchor" href="#prabprungewbethkhonolyiiekaaaihthansmay" aria-label="Anchor link for: prabprungewbethkhonolyiiekaaaihthansmay" style="visibility: hidden;"></a> </h2> <p>หลักๆ ที่ปรับจูน Web สมัยเก่าให้ดูดี ทันสมัย และเร็วด้วย</p> <ul> <li> <p>เปลี่ยน core เป็น Bulma framework ทั้งหมด ทำให้ชีวิตการทำ responsive ง่ายขึ้น</p> </li> <li> <p>เปลี่ยนจากการโหลด CSS แบบ Synchronous (Blocking) ให้โหลดแบบ Async ใช้ไลบรารี่ <a rel="nofollow noreferrer" href="https://github.com/filamentgroup/loadCSS">LoadCSS</a> (ซึ่งแนะนำโดย Google Insights) ในการโหลด CSS เข้ามา เมื่อโหลดเสร็จ</p> </li> </ul> <h3 id="phlthiiaidkhuue">ผลที่ได้คือ<a class="zola-anchor" href="#phlthiiaidkhuue" aria-label="Anchor link for: phlthiiaidkhuue" style="visibility: hidden;"></a> </h3> <p>หน้าเว็บโหลดเร็วขึ้น แต่ข้อเสียคือ มันจะเห็นหน้าตาเว็บแบบไม่มี css ใดๆ เลย ซึ่งไม่สวยเลย 55 พอ CSS โหลดเข้ามาหน้าตาเว็บก็เป็นแบบที่เห็น แบบนี้เลยคับ</p> <p><img src="https://www.dropbox.com/s/vks0ebprrdansm7/2018-09-17-99-score-google-insight-web-optimization-5.gif?raw=1" alt="load-css-async" /></p> <ul> <li>การใช้ <strong>sass</strong> ช่วยทำให้ชีวิตง่ายขึ้นเยอะในการจัดการค่าต่างๆ ในการตกแต่งหน้าเว็บ ให้มันเป็นอันหนึ่งอันเดียวกัน (consistency)</li> </ul> <h2 id="aich-jekyll-sass-plugin-ainkaar-bundle-sass-aela-css">ใช้ Jekyll sass plugin ในการ bundle sass และ css<a class="zola-anchor" href="#aich-jekyll-sass-plugin-ainkaar-bundle-sass-aela-css" aria-label="Anchor link for: aich-jekyll-sass-plugin-ainkaar-bundle-sass-aela-css" style="visibility: hidden;"></a> </h2> <p>(อนาคตจะไปใช้ webpack ด้วย) แยกเป็น 2 ไฟล์คือ</p> <ul> <li><code>preload_styles.css</code> ไฟล์นี้ ถ้าโหลดผ่าน <code>LoadCSS</code> จะเหมือนรูปข้างบน จะใส่แบบปกติ ก็เดี๋ยวโดน Google หักคะแนน หาว่าโหลด stylesheet แบบ Blocking เดี๋ยวทำให้เว็บช้า <strong>สรุปคือ</strong> จัดการฝั่งโค้ด CSS เข้าไปใน HTML ซะเลย</li> <li><code>postload_styles.css</code> ไฟล์นี้โหลดผ่าน <code>LoadCSS </code>ไฟล์นี้จะเป็น พวก asset ขนาดใหญ่ พวกโหลด font, กับ Icon ต่างๆ (<a rel="nofollow noreferrer" href="https://fontawesome.com/">Font Awesome</a>) ซึ่งไม่จำเป็นต้องมาก่อนครั้งแรกที่เว็บโหลดก็ได้</li> </ul> <h2 id="epliiynethkhonolyiihnaa-search">เปลี่ยนเทคโนโลยีหน้า Search<a class="zola-anchor" href="#epliiynethkhonolyiihnaa-search" aria-label="Anchor link for: epliiynethkhonolyiihnaa-search" style="visibility: hidden;"></a> </h2> <p>จาก AngularJS ซึ่ง<a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/831f4fb466d0f9cd513a45c299b946ca2f398aed">เขียนตั้งแต่ปี 2558</a> ให้เป็น React โดยเป็นการใช้ React แบบ library จริงๆ คือเฉพาะส่วนของ content เท่านั้นที่เป็น React ที่เหลือยังคงเป็น HTML ธรรมดา (Header, Footer) ซึ่ง bundle ใส่ในไฟล์ <code>search.js</code> ปรับหน้า search ให้เป็น responsive บน mobile แยกต่างหากด้วย</p> <p><img src="https://www.dropbox.com/s/3d4vqbnd424wbsh/2018-09-17-99-score-google-insight-web-optimization-6.jpg?raw=1" alt="search" /></p> <h2 id="thamewb-bundle-dwy-webpack4">ทำเว็บ Bundle ด้วย Webpack4<a class="zola-anchor" href="#thamewb-bundle-dwy-webpack4" aria-label="Anchor link for: thamewb-bundle-dwy-webpack4" style="visibility: hidden;"></a> </h2> <p>เนื่องจากเป็น Static page ธรรมดา ไม่มีการทำ SPA แต่อย่างใด ดังนั้นเลยใช้การแพ็กเป็น bundle ( คือรวมทุกๆ ไฟล์ เข้ามาเป็นไฟล์เดียว หรือแบ่งเป็นหลายๆ ส่วนแล้วแต่โมดูลก่อนก็ได้ ) ซึ่ง <a rel="nofollow noreferrer" href="https://webpack.js.org/">webpack</a> ก็มาตอบโจทย์ตรงนี้ได้ เพื่อให้ลดจำนวน request ส่งไปยัง server ตอนนี้เว็บแบ่งออกเป็น 3 ไฟล์ (entry)</p> <ul> <li><code>index.js</code> โหลดเฉพาะหน้าแรกเท่านั้น เป็นการเรียกใช้ <a rel="nofollow noreferrer" href="https://momentjs.com/">Moment.js</a> ( <a rel="nofollow noreferrer" href="https://github.com/jmblog/how-to-optimize-momentjs-with-webpack">Optimize file size ของ Moment ด้วยไม่งั้นไฟล์อ้วนมาก</a>) ในการแปลงเวลาของแต่บล็อก ให้แสดงผลว่า บล็อกเขียนมาแล้วกี่วัน</li> <li><code>toc.js</code> โหลดเฉพาะหน้าที่มี Table of Content จ้า มี JQuery กับ <a rel="nofollow noreferrer" href="https://github.com/ghiculescu/jekyll-table-of-contents">Jekyll ToC</a></li> <li><code>search.js</code>โหลดเฉพาะหน้า Search เท่านั้น ซึ่งใช้ React ในหัวข้อก่อนหน้านี้</li> </ul> <h2 id="lazy-load-image"><a rel="nofollow noreferrer" href="https://github.com/verlok/lazyload">Lazy load image</a><a class="zola-anchor" href="#lazy-load-image" aria-label="Anchor link for: lazy-load-image" style="visibility: hidden;"></a> </h2> <p>คือไม่ได้โหลด รูปทุกรูปในครั้งแรกที่เว็บโหลดแต่ จะค่อยๆ โหลดเมื่อ user scroll ผ่านเท่านั้น เพื่อลดปริมาณข้อมูลที่โหลดทั้งหมด</p> <p>สุดท้ายทำ</p> <h2 id="ohldruupphaaphaebb-ebl-k-naelwemuue-ruupohldesrcchthuengcchaaesdngruupcchringaebb-medium-com">โหลดรูปภาพแบบ เบลอก่อนแล้วเมื่อรูปโหลดเสร็จถึงจะแสดงรูปจริงแบบ <a rel="nofollow noreferrer" href="http://medium.com/">medium.com</a><a class="zola-anchor" href="#ohldruupphaaphaebb-ebl-k-naelwemuue-ruupohldesrcchthuengcchaaesdngruupcchringaebb-medium-com" aria-label="Anchor link for: ohldruupphaaphaebb-ebl-k-naelwemuue-ruupohldesrcchthuengcchaaesdngruupcchringaebb-medium-com" style="visibility: hidden;"></a> </h2> <p>(ตรงนี้จะแชร์ในอีกบล็อกครับ) ซึ่งตรงนี้ใช้บริการแคชรูปของ <a rel="nofollow noreferrer" href="https://cloudimage.io/">Cloudimage.io</a> ซึ่งทำ cache, thumbnail ได้ง่ายมากๆ แถมให้ใช้ฟรี ตั้ง 15 GB ตรงนี้เขียน Plugin ของ Jekyll เข้ามาช่วยในการแปลง img tag ให้เป็นแบบ เบลอก่อนโหลดเสร็จด้วย</p> <p><img src="https://www.dropbox.com/s/4t30cmbtezs3qbw/2018-09-17-99-score-google-insight-web-optimization-7.gif?raw=1" alt="image-load-blur" /></p> <hr /> <h2 id="srup-singaideriiynruucchaak-google-insights">สรุป สิ่งได้เรียนรู้จาก Google Insights<a class="zola-anchor" href="#srup-singaideriiynruucchaak-google-insights" aria-label="Anchor link for: srup-singaideriiynruucchaak-google-insights" style="visibility: hidden;"></a> </h2> <ol> <li>ให้คำแนะนำละเอียดมาก แนะนำว่าเว็บเรามีปัญหาตรงไหนแล้ว ควรจะแก้ยังไง</li> <li>เหมาะสำหรับทดสอบเว็บแบบ responsive มีคะแนนแยกในส่วนของ mobile และ desktop</li> <li>server response time ควรจะเร็ว ถ้าช้าจะหักคะแนนตรงนี้ไปเยอะ</li> <li>Blocking rendering หรือ Synchronous rendering ตรงถ้า เอาส่วนตรงนี้ออกไปได้เว็บจะโหลดเร็วขึ้น และได้คะแนนเพิ่มด้วย</li> <li>Minify HTML, JS , CSS ตรงนี้ถ้า ถ้าบีบไฟล์ source ได้เว็บจะโหลดเร็วขึ้นด้วย และไม่ถูกหักคะแนน</li> <li>image compression ไม่จำเป็นเท่าไหร่นัก ถ้าดูจาก weight คะแนนของ insights แล้ว ถือว่าน้อยมาก แต่ถ้าทำด้วยจะดีมาก</li> <li>redirect page ไปมา ทำให้คะแนนตกจ้า เว็บก็โหลดช้า</li> <li>*** แถมการลดจำนวน request ไปยัง resource ต่างๆ ช่วยให้เว็บโหลดเร็วขึ้นด้วย ตรงนี้เราสามารถใช้ <a rel="nofollow noreferrer" href="https://webpack.js.org/">webpack</a> ช่วย bundle ได้ เพื่อรวมหลายๆ ไฟล์ is รวมเป็นไฟล์เดียว</li> </ol> <h2 id="singthiicchathamt-aip">สิ่งที่จะทำต่อไป<a class="zola-anchor" href="#singthiicchathamt-aip" aria-label="Anchor link for: singthiicchathamt-aip" style="visibility: hidden;"></a> </h2> <ul> <li>ตอนนี้ยังใช้บน IE แล้วยังมีปัญหา เรื่องของ Image Loading</li> </ul> <p>Source code: https://github.com/mildronize/mildronize.github.io</p> <p>แล้วพบกันใหม่ สวัสดีครับ</p> <hr /> <p><em>Cross published at <a rel="nofollow noreferrer" href="https://medium.com/@mildronize/%E0%B9%84%E0%B8%94%E0%B9%89-99-%E0%B8%84%E0%B8%B0%E0%B9%81%E0%B8%99%E0%B8%99%E0%B8%88%E0%B8%B2%E0%B8%81-google-insights-%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%B3-web-optimization-9b835aeac9b">Medium.com</a></em></p> 2018-09-08T00:00:00+00:00 2018-09-08T00:00:00+00:00 https://thadaw.com/posts/getting-started-tdd-30-seconds-python/ <p>Quick start to setup python script for Test Driven Development in 30 seconds</p> <p><strong>Time start!</strong></p> <ol> <li> <p>Install Python virtual environment for human ( yay! ) <a rel="nofollow noreferrer" href="https://pipenv.readthedocs.io"><code>pipenv</code></a></p> <pre class="z-code"><code><span class="z-text z-plain">sudo pip install pipenv </span></code></pre> </li> <li> <p>create a directory and enter to it</p> <pre class="z-code"><code><span class="z-text z-plain">mkdir my-tdd </span><span class="z-text z-plain">cd my-tdd </span></code></pre> </li> <li> <p>Activate Python virtual environment, then the tool will automatically create it (if it’s not exist!)</p> <pre class="z-code"><code><span class="z-text z-plain">pipenv shell </span></code></pre> </li> <li> <p>Install <a rel="nofollow noreferrer" href="https://docs.pytest.org/">pytest</a> as a dev dependency</p> <pre class="z-code"><code><span class="z-text z-plain">pipenv install pytest --dev </span></code></pre> </li> <li> <p>create file and test file in any place of the directory</p> <pre data-lang="python" class="language-python z-code"><code class="language-python" data-lang="python"><span class="z-source z-python"><span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span> in lib.py </span></span><span class="z-source z-python"><span class="z-meta z-function z-python"><span class="z-storage z-type z-function z-python"><span class="z-keyword z-declaration z-function z-python">def</span></span> <span class="z-entity z-name z-function z-python"><span class="z-meta z-generic-name z-python">hello</span></span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-begin z-python">(</span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-end z-python">)</span></span><span class="z-meta z-function z-python"><span class="z-punctuation z-section z-function z-begin z-python">:</span></span> </span><span class="z-source z-python"> <span class="z-keyword z-control z-flow z-return z-python">return</span> <span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&quot;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python">hello<span class="z-punctuation z-definition z-string z-end z-python">&quot;</span></span></span> </span><span class="z-source z-python"> </span><span class="z-source z-python"><span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span> in lib_test.py or test_lib.py </span></span><span class="z-source z-python"><span class="z-meta z-statement z-import z-python"><span class="z-keyword z-control z-import z-python">import</span> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">lib</span></span></span> </span><span class="z-source z-python"><span class="z-meta z-function z-python"><span class="z-storage z-type z-function z-python"><span class="z-keyword z-declaration z-function z-python">def</span></span> <span class="z-entity z-name z-function z-python"><span class="z-meta z-generic-name z-python">test_hello</span></span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-begin z-python">(</span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-end z-python">)</span></span><span class="z-meta z-function z-python"><span class="z-punctuation z-section z-function z-begin z-python">:</span></span> </span><span class="z-source z-python"> <span class="z-keyword z-control z-flow z-assert z-python">assert</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">lib</span></span><span class="z-meta z-qualified-name z-python"><span class="z-punctuation z-accessor z-dot z-python">.</span></span><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">hello</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> <span class="z-keyword z-operator z-comparison z-python">==</span> <span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&quot;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python">hello<span class="z-punctuation z-definition z-string z-end z-python">&quot;</span></span></span> </span></code></pre> </li> <li> <p>let’s test</p> <pre class="z-code"><code><span class="z-text z-plain">pytest </span></code></pre> </li> </ol> <p>Getting result!</p> <p><img src="https://www.dropbox.com/s/bgwfkw2d70jp4xk/Getting%20Started%20TDD%20in%2030%20Seconds%20with%20Python-02.png?raw=1" alt="img" /></p> <p>The structure will be like this</p> <pre class="z-code"><code><span class="z-text z-plain">lib.py </span><span class="z-text z-plain">lib_test.py </span><span class="z-text z-plain">Pipfile </span><span class="z-text z-plain">Pipfile.lock </span></code></pre> <h3 id="extra"><strong>Extra!</strong><a class="zola-anchor" href="#extra" aria-label="Anchor link for: extra" style="visibility: hidden;"></a> </h3> <p>You can use automatically test your code when the code's changed using <a rel="nofollow noreferrer" href="https://github.com/joeyespo/pytest-watch">pytest-watch</a></p> <pre class="z-code"><code><span class="z-text z-plain">pipenv install pytest-watch </span></code></pre> <p>Let’s fun with TDD</p> <pre class="z-code"><code><span class="z-text z-plain">ptw </span></code></pre> <p><strong>Time stoppppppppppp!</strong></p> <p>As I said before, this blog will end within 30 seconds</p> <p>Thanks guy, any question, pls comment</p> <p>Good bye, see you</p> <p>P.S. fastest blogging ever 🙏</p> <hr /> <p><em>Cross published at <a rel="nofollow noreferrer" href="https://medium.com/@mildronize/getting-started-tdd-in-30-seconds-with-python-8113d6c94753">Medium.com</a></em></p> 2018-09-02T00:00:00+00:00 2018-09-02T00:00:00+00:00 https://thadaw.com/posts/promise-async-await-rxjs-js-es6/ <blockquote> <p><strong>อ่านฉันหน่อย</strong>: บทความนี้ใช้ javascript ES6 นะครับ ใครยังไม่ชินไปตามอ่านได้ใน Cheat sheet นี้เลย มีภาษาไทยด้วย</p> <p>https://github.com/mbeaudru/modern-js-cheatsheet/blob/master/translations/th-TH.md</p> </blockquote> <blockquote> <p><strong>หมายเหตุ ต่อไป:</strong> ผมเขียน Python, C เป็นหลักนะครับ Java เป็นรอง แต่เขียน Async บน Java ด้วย ดังนั้น อาจจะไม่ถูกใจขา JS</p> </blockquote> <p>สวัสดีครับ บล็อกนี้มาสั้นๆ ไม่เกริ่นทีมา ว่าทำไมถึงใช้ และหลักการต่างๆ ข้ามไว้ก่อน เพราะเราขี้เกียจเขียน (ไว้ค่อยกลับมาเขียน 555)</p> <p><strong>สรุปสั้นๆ</strong></p> <ul> <li>ใช้ <strong>Promise</strong> เพื่อแก้ปัญหา Callback Hell</li> <li>ใช้ <strong>Async, Await</strong> เพื่อไม่ต้องใช้ <code>.then()</code> แล้วยังไงล่ะ ไปดู</li> <li>เนื่องจาก Promise <code>resolve</code> ได้แค่ครั้งเดียว ถ้าอยาก <code>resolve</code> หลายครั้ง เช่นข้อมูลแบบ stream ใช้ <strong>RxJS</strong> เพื่อแก้ปัญหา</li> </ul> <p>สรุปจบ ไปดูโค๊ด</p> <p>เราจะเขียน Promise กันง่ายๆ คือ ให้ฟังชั่นที่ทำงานนานๆ ตัวนึงชื่อ <code>upperAfter</code> โดยทำหน้าที่แปลงเป็นตัวพิมพ์ใหญ่ หลังจาก 2 วินาที ไปดูตัวอย่างกัน</p> <p><img src="https://www.dropbox.com/s/7se4umjvmx1jbgx/promise.gif?raw=1" alt="promise" /></p> <h2 id="1-promise">1. Promise<a class="zola-anchor" href="#1-promise" aria-label="Anchor link for: 1-promise" style="visibility: hidden;"></a> </h2> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts"><span class="z-entity z-name z-function z-ts">upperAfter</span></span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">text</span><span class="z-punctuation z-separator z-parameter z-ts">,</span> <span class="z-variable z-parameter z-ts">ms</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-brace z-round z-ts">(</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"> <span class="z-new z-expr z-ts"><span class="z-keyword z-operator z-new z-ts">new</span> <span class="z-entity z-name z-type z-ts">Promise</span><span class="z-meta z-brace z-round z-ts">(</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-new z-expr z-ts"> <span class="z-meta z-arrow z-ts"><span class="z-variable z-parameter z-ts">resolve</span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-meta z-function-call z-ts"><span class="z-support z-function z-ts">setTimeout</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-arrow z-ts"><span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> </span><span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">resolve</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">text</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">toUpperCase</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-variable z-other z-readwrite z-ts">ms</span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-new z-expr z-ts"> <span class="z-meta z-brace z-round z-ts">)</span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-brace z-round z-ts">)</span></span></span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span><span class="z-source z-ts"> </span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts"><span class="z-entity z-name z-function z-ts">main</span></span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span><span class="z-meta z-arrow z-ts"> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>start upperAfter(&#39;test&#39;,2000)<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">upperAfter</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>test<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-constant z-numeric z-decimal z-ts">2000</span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-promise z-ts">then</span></span><span class="z-meta z-brace z-round z-ts">(</span> <span class="z-meta z-arrow z-ts"><span class="z-variable z-parameter z-ts">data</span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">data</span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Finish upperAfter(&#39;test&#39;,2000)<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span></span> </span></code></pre> <p>เมื่อเรารัน <code>main()</code> แล้ว มันจะทำงานดังนี้</p> <ol> <li>เรียก <code>upperAfter('test',2000)</code> จะ return เป็น Promise ออกมา</li> <li>object ของ promise จะสามารถต่อด้วย <code>.then()</code> หรือ <code>.catch()</code> ก็ได้ <ul> <li>ถ้าทำสำเร็จก็ใช้ <code>.then()</code> (คือค่า ที่ถูก <em>resolve</em> ออกมา ในที่นี้คือ <code>text.toUpperCase()</code>)</li> <li>ถ้าทำไม่สำเร็จก็ใช้ <code>.catch() </code> (คือค่า ที่ถูก <em>reject</em> ออกมา )</li> </ul> </li> <li>เมื่อเรียก <code>.then()</code> ค่าของข้อความจะมาใส่มาใน <code>data</code> เราก็สามารถเอา <code>data</code> ไปต้มยำทำแกงอะไรก็ได้ เย้ จบ!</li> </ol> <p><strong>ข้อสังเกตุ</strong> คือเราใช้ <code>.then()</code> เพื่อทำให้ Blocking i/O หรือ Synchronous นั้นเอง คล้ายกับการเรียก callback นั้นแล แต่ <code>.then()</code> เราสามารถต่อกันได้ ทำให้โค้ดสวยมากขึ้น และ debug ง่ายขึ้นนะ</p> <h2 id="2-async-await">2. Async, Await<a class="zola-anchor" href="#2-async-await" aria-label="Anchor link for: 2-async-await" style="visibility: hidden;"></a> </h2> <p>เอาโค้ดข้างบนมาแก้ <code>main</code> ใหม่</p> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts"><span class="z-entity z-name z-function z-ts">main</span></span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-meta z-arrow z-ts"><span class="z-storage z-modifier z-async z-ts">async</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> </span><span class="z-meta z-arrow z-ts"><span class="z-storage z-type z-function z-arrow z-ts">=&gt;</span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>start upperAfter(&#39;test&#39;,2000)<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-var z-expr z-ts"><span class="z-storage z-type z-ts">const</span> <span class="z-meta z-var-single-variable z-expr z-ts"><span class="z-meta z-definition z-variable z-ts"><span class="z-variable z-other z-constant z-ts">data</span></span> </span><span class="z-keyword z-operator z-assignment z-ts">=</span> <span class="z-keyword z-control z-flow z-ts">await</span> <span class="z-meta z-function-call z-ts"><span class="z-entity z-name z-function z-ts">upperAfter</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>test<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span><span class="z-constant z-numeric z-decimal z-ts">2000</span><span class="z-meta z-brace z-round z-ts">)</span></span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-variable z-other z-readwrite z-ts">data</span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-support z-class z-console z-ts">console</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-console z-ts">log</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-double z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&quot;</span>Finish upperAfter(&#39;test&#39;,2000)<span class="z-punctuation z-definition z-string z-end z-ts">&quot;</span></span><span class="z-meta z-brace z-round z-ts">)</span> </span></span></span></span><span class="z-source z-ts"><span class="z-meta z-var z-expr z-ts"><span class="z-meta z-arrow z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span></span> </span></code></pre> <p>เป็นไงล่ะ ทำงานได้เหมือนเดิม แต่ชีวิตง่ายขึ้นมั้ย ทีนี้เราก็ทำตัวเหมือนเขียน Blocking I/O หรือ Synchronous แบบ C, Python ได้แล้ว เจ๋งป่ะล่ะ</p> <p><strong>ข้อสังเกตุ</strong> ฟังก์ชัน <code>main()</code> ต้องเป็น <code>async</code> เพื่อบอกว่าฟังก์ชันนี้มี การทำ blocking I/O หรือ Synchronous อยู่นะ เราใส่ <code>await</code> หน้า promise นั้นเอง มันจะ auto <code>.then()</code> ให้เลย สะดวกสุดๆ</p> <p>ในบรรทัดนี้ <code>const data = await upperAfter('test',2000)</code> อารมณ์เหมือนเราได้ค่า <code>data</code> มาเลย แล้วก็เอาไปทำอะไรต่อก็ได้ ไม่ต้องอยู่ใน <code>.then()</code> แล้ว</p> <h2 id="k-npidbl-k">ก่อนปิดบล็อก<a class="zola-anchor" href="#k-npidbl-k" aria-label="Anchor link for: k-npidbl-k" style="visibility: hidden;"></a> </h2> <p>อ่าวจบแล้ว? RxJS ล่ะ เอาแค่นี้ก่อน พอรู้ข้อจำกัดของการใช้ Promise แล้ว คราวหน้า เราสามารถไปใช้ RxJS ได้</p> <h3 id="kh-ngaethm-aelw-promise-maachwyaekpayhaa-callback-hell-yangaing">ของแถม แล้ว <strong>Promise</strong> มาช่วยแก้ปัญหา Callback Hell ยังไง<a class="zola-anchor" href="#kh-ngaethm-aelw-promise-maachwyaekpayhaa-callback-hell-yangaing" aria-label="Anchor link for: kh-ngaethm-aelw-promise-maachwyaekpayhaa-callback-hell-yangaing" style="visibility: hidden;"></a> </h3> <p>อันนี้เอาตัวอย่างมาจาก โปรเจ็ค <code>promise-it-wont-hurt</code> ของ https://nodeschool.io/</p> <p>อันนี้เค้าเรียกกันว่า Callback Hell ถ้ามีมากกว่าหลายชั้นก็นี้ก็ hell จริงๆ ละคับ</p> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">Parse</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">User</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">logIn</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>user<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>pass<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-entity z-name z-function z-ts">success</span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function z-expression z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">user</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">query</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">find</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-entity z-name z-function z-ts">success</span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function z-expression z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">results</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-variable z-other z-readwrite z-ts">results</span><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-constant z-numeric z-decimal z-ts">0</span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">save</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">key</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-readwrite z-ts">value</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-entity z-name z-function z-ts">success</span></span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-meta z-function z-expression z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">result</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span></span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> the object was saved</span> </span></span></span></span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span></span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span></span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-punctuation z-definition z-block z-ts">}</span></span></span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-objectliteral z-ts"><span class="z-meta z-object z-member z-ts"></span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>แล้วถ้าใช้ Promise ช่วยล่ะ</p> <pre data-lang="js" class="language-js z-code"><code class="language-js" data-lang="js"><span class="z-source z-ts"><span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">Parse</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-variable z-other z-object z-property z-ts">User</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">logIn</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>user<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-punctuation z-separator z-comma z-ts">,</span> <span class="z-string z-quoted z-single z-ts"><span class="z-punctuation z-definition z-string z-begin z-ts">&#39;</span>pass<span class="z-punctuation z-definition z-string z-end z-ts">&#39;</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-promise z-ts">then</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function z-expression z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">user</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-meta z-function-call z-ts"><span class="z-variable z-other z-object z-ts">query</span><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-ts">find</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-promise z-ts">then</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function z-expression z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">results</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"> <span class="z-keyword z-control z-flow z-ts">return</span> <span class="z-variable z-other z-readwrite z-ts">results</span><span class="z-meta z-array z-literal z-ts"><span class="z-meta z-brace z-square z-ts">[</span><span class="z-constant z-numeric z-decimal z-ts">0</span><span class="z-meta z-brace z-square z-ts">]</span></span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-entity z-name z-function z-ts">save</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-objectliteral z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> <span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts">key</span></span><span class="z-meta z-object z-member z-ts"><span class="z-meta z-object-literal z-key z-ts"><span class="z-punctuation z-separator z-key-value z-ts">:</span></span> <span class="z-variable z-other z-readwrite z-ts">value</span> </span><span class="z-punctuation z-definition z-block z-ts">}</span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-promise z-ts">then</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function z-expression z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">result</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> the object was saved</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-meta z-function-call z-ts"><span class="z-punctuation z-accessor z-ts">.</span><span class="z-support z-function z-promise z-ts">catch</span></span><span class="z-meta z-brace z-round z-ts">(</span><span class="z-meta z-function z-expression z-ts"><span class="z-storage z-type z-function z-ts">function</span> <span class="z-meta z-parameters z-ts"><span class="z-punctuation z-definition z-parameters z-begin z-ts">(</span><span class="z-variable z-parameter z-ts">err</span><span class="z-punctuation z-definition z-parameters z-end z-ts">)</span></span> <span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">{</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-whitespace z-comment z-leading z-ts"> </span><span class="z-comment z-line z-double-slash z-ts"><span class="z-punctuation z-definition z-comment z-ts">//</span></span><span class="z-comment z-line z-double-slash z-ts"> an error happened somewhere in the process</span> </span></span></span><span class="z-source z-ts"><span class="z-meta z-function z-expression z-ts"><span class="z-meta z-block z-ts"><span class="z-punctuation z-definition z-block z-ts">}</span></span></span><span class="z-meta z-brace z-round z-ts">)</span><span class="z-punctuation z-terminator z-statement z-ts">;</span> </span></code></pre> <p>เป็นไงบ้าง ดูง่ายขึ้นเยอะมั้ย ครับ</p> <p>พอล่ะไม่อธิบายเยอะ เจ็บขอ แล้วพบกันใหม่ครับ</p> <h3 id="aanephimetim">อ่านเพิ่มเติม<a class="zola-anchor" href="#aanephimetim" aria-label="Anchor link for: aanephimetim" style="visibility: hidden;"></a> </h3> <ul> <li><a rel="nofollow noreferrer" href="https://github.com/mbeaudru/modern-js-cheatsheet">Modern JS Cheat sheet</a> one-stop cheat sheet for JS developer</li> <li>https://nodeschool.io/ เว็บนี้ก็ดีงาม สอน JS แบบ interactive เลย</li> <li>ES6 Cheat sheet: https://github.com/DrkSephy/es6-cheatsheet อันนี้ก็ดีนะ ไปดูได้</li> </ul> <hr /> <p><em>Cross published at <a rel="nofollow noreferrer" href="https://medium.com/@mildronize/promise-async-await-%E0%B8%82%E0%B8%AD%E0%B8%87-js-es6-%E0%B8%89%E0%B8%9A%E0%B8%B1%E0%B8%9A%E0%B8%9C%E0%B8%AD%E0%B8%A1%E0%B9%80%E0%B8%9E%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%A7-%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B8%9E%E0%B8%B9%E0%B8%94%E0%B9%80%E0%B8%A2%E0%B8%AD%E0%B8%B0-%E0%B9%80%E0%B8%88%E0%B9%87%E0%B8%9A%E0%B8%84%E0%B8%AD-%E0%B9%81%E0%B8%96%E0%B8%A1-rxjs-12b9e7b32392">Medium.com</a></em></p> 2018-08-28T00:00:00+00:00 2018-08-28T00:00:00+00:00 https://thadaw.com/posts/setup-github-via-ssh-using-putty-on-windows-th/ <p>ขั้นตอนการตั้งค่าการใช้งาน Github แบบไม่ต้องกรอกรหัสผ่านทุกครั้ง บน windows</p> <p>จริงๆ แล้ว ก็ใช้ git มานานแต่บางครั้งก็ขีเกียจตั้งค่า โดยเฉพาะบน Windows มันมีหลายวิธีมาก แต่ผมถนัดวิธีนี้ทุกสุดและยุ่งยากน้อยสุดแล้ว (เขียนไม่ค่อยละเอียดเท่าไหร่ เหมาะสำหรับคนที่คุ้นชินกับ Putty อยู่แล้ว)</p> <ol> <li> <p><a rel="nofollow noreferrer" href="https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html">ดาวโหลด</a> และติดตั้ง Putty ไว้ในเครื่องก่อนเลย แนะนำให้ลงแบบ <code>MSI (‘Windows Installer’)</code>เพราะมันจะมีโปรแกรมเพื่อนบ้านมาให้ด้วย ในโพสนี้จะใช้ <code>puTTYgen</code> และ <code>plink</code> หรือใครจะลงแยกก็ได้</p> </li> <li> <p>ตั้งค่า system environment variable ให้เรียบร้อย ถ้าลงผ่าน installer น่าจะตั้งค่าไว้แล้ว</p> </li> <li> <p>สร้าง Private Key และ Public Key จาก <code>puTTYgen</code> โดยเลือกเป็น RSA 2048 (ใครจะเลือกตัวอื่นก็ได้นะ เผื่อตัวที่ดีกว่านี้ในอนาคต) กด generate แล้วก็เอา mouse เป็นวนๆ ที่ว่างๆ จนแถบโหลดเต็ม แล้วก็ตั้งค่ารหัสผ่าน (key passphrase) จะใส่ตรงที่มีการใช้ key นี้ทุกครั้ง (จะไม่ตั้งก็ได้นะ จะได้ตามชื่อบล็อกพอดี) <img src="https://www.dropbox.com/s/7d1cqu99b93pv1w/1.png?raw=1" alt="1" /></p> </li> <li> <p>จากนั้นก็อปปี้ public key จาก <code>puTTYgen</code> ตัวเดิมไปใส่ใน[หน้า SSH ของการตั้งค่า github ของเรา https://github.com/settings/keys <img src="https://www.dropbox.com/s/pxikmsgglo273yf/2.PNG?raw=1" alt="2" /></p> </li> <li> <p>ตั้งค่า environment variable <code>GIT_SSH</code> ให้เป็น path ไปยัง <code>plink</code> เช่น</p> <pre class="z-code"><code><span class="z-text z-plain">SET GIT_SSH=C:\path\to\PuTTY\plink.exe </span></code></pre> </li> <li> <p>เพิ่ม SSH key ลงไปในโปรแกรม <code>Pageant</code></p> <pre class="z-code"><code><span class="z-text z-plain">C:\path\to\PuTTY\pageant.exe c:\pathtoprivate-ssh-key.ppk` </span></code></pre> </li> <li> <p>ตรวจสอบการเชื่อมต่อ เป็นอันเสร็จ</p> <pre class="z-code"><code><span class="z-text z-plain">plink -v git@github.com </span></code></pre> </li> </ol> <p>ถ้าได้ผลลัพธ์ประมาณนี้ถือว่าผ่านแล้วครับ</p> <pre class="z-code"><code><span class="z-text z-plain">Hi mildronize! You&#39;ve successfully authenticated, but GitHub does not provide shell access. </span><span class="z-text z-plain">Server sent command exit status 1 </span><span class="z-text z-plain">Disconnected: All channels closed </span></code></pre> <h3 id="kh-bkhunaehlngthiimaadii-khrab">ขอบคุณแหล่งที่มาดีๆ ครับ<a class="zola-anchor" href="#kh-bkhunaehlngthiimaadii-khrab" aria-label="Anchor link for: kh-bkhunaehlngthiimaadii-khrab" style="visibility: hidden;"></a> </h3> <ul> <li><a rel="nofollow noreferrer" href="https://www.richardkotze.com/top-tips/git-on-windows-in-command-line">Git and Putty on Windows in command line</a></li> <li><a rel="nofollow noreferrer" href="https://vladmihalcea.com/tutorials/git/windows-git-ssh-authentication-to-github/">Windows git SSH authentication to GitHub</a></li> </ul> <h2 id="kh-ngaethm">ของแถม<a class="zola-anchor" href="#kh-ngaethm" aria-label="Anchor link for: kh-ngaethm" style="visibility: hidden;"></a> </h2> <p>หลายๆ คนอาจจะเข้าไปที่ git directory บนเครื่องเราแล้ว ก็ยังต้องใส่ username และ password เหมือนเดิมอยู่อีก อย่าลืมเปลี่ยน remote URL จาก HTTPS เป็น SSH นะครับ เช่น</p> <p>ถ้าดูที่ github URL เราจะเห็นหน้าตาประมาณนี้ <code>https://github.com/USERNAME/REPOSITORY</code></p> <p>เช่นถ้าเรา username: <code>mildronize</code> และ github repo คือ <code>mildronize.github.io</code></p> <p>ดังนั้น URL จะมีหน้าตาประมาณนี้ <code>https://github.com/mildronize/mildronize.github.io</code></p> <p>เราอาจจะ clone ด้วย HTTPS มา สังเกตุคือที่ URL จะขึ้นต้นด้วย HTTPS เช่น</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> clone https://github.com/mildronize/mildronize.github.io</span> </span></code></pre> <p>แต่ถ้าเรา clone ด้วย SSH สังเกตุที่ URL จะขึ้นต้นด้วย <code>git@github.com</code> มาหน้าตาจะประมาณนี้</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">git</span></span><span class="z-meta z-function-call z-arguments z-shell"> clone git@github.com:mildronize/mildronize.github.io.git</span> </span></code></pre> <p>เข้าเรื่องกันเลย ไปดูขั้นตอนการเปลียนจาก remote URL จาก HTTPS เป็น SSH</p> <h3 id="kaarepliiynaipaich-remote-urls-ssh-cchaak-https">การเปลี่ยนไปใช้ remote URLs SSH จาก HTTPS<a class="zola-anchor" href="#kaarepliiynaipaich-remote-urls-ssh-cchaak-https" aria-label="Anchor link for: kaarepliiynaipaich-remote-urls-ssh-cchaak-https" style="visibility: hidden;"></a> </h3> <ol> <li> <p><code>cd</code> ไปที่ git directory ของเราก่อนนะ</p> </li> <li> <p>ให้ใช้ <code>git remote -v</code> เพือดูว่าตอนนี้ directory นี้ชี้ไปที่ไหน</p> <pre class="z-code"><code><span class="z-text z-plain">git remote -v </span><span class="z-text z-plain">origin https://github.com/USERNAME/REPOSITORY.git (fetch) </span><span class="z-text z-plain">origin https://github.com/USERNAME/REPOSITORY.git (push) </span></code></pre> </li> <li> <p>เปลียนจาก remote URL จาก HTTPS เป็น SSH <code>git remote set-url</code> command.</p> <pre class="z-code"><code><span class="z-text z-plain">git remote set-url origin git@github.com:USERNAME/REPOSITORY.git </span></code></pre> </li> <li> <p>Verify that the remote URL has changed.</p> <pre class="z-code"><code><span class="z-text z-plain">git remote -v </span><span class="z-text z-plain"># Verify new remote URL </span><span class="z-text z-plain">origin git@github.com:USERNAME/REPOSITORY.git (fetch) </span><span class="z-text z-plain">origin git@github.com:USERNAME/REPOSITORY.git (push) </span></code></pre> </li> </ol> <h3 id="kh-bkhunkh-muulcchaak">ขอบคุณข้อมูลจาก<a class="zola-anchor" href="#kh-bkhunkh-muulcchaak" aria-label="Anchor link for: kh-bkhunkh-muulcchaak" style="visibility: hidden;"></a> </h3> <ul> <li>https://help.github.com/articles/changing-a-remote-s-url/</li> </ul> <p>เป็นไงบ้างครับ ไม่ยากเลยใช่มั้ยครับ จริงๆ เขียนให้ตัวเองอ่านด้วย ไว้พบกันใหม่ สวัสดีครับ</p> 2018-08-13T00:00:00+00:00 2018-08-13T00:00:00+00:00 https://thadaw.com/posts/introduction-to-open-time-series-database-th/ <p>สวัสดีครับ ผมชื่อมายนะคับ เนื่องจากผมทำวิทยานพินธ์ปริญญาโท เกี่ยวกับการปรับปรุงประสิทธิภาพของฐานข้อมูลอนุกรมเวลา OpenTSDB และบ้านเราก็ยังไม่ค่อยมีคนพูดถึงเรื่องนี้เท่าไหร่นัก ถือว่าเป็นโอกาสดีที่จะนำความรู้มาแบ่งปันกันครับ</p> <blockquote> <p>ถ้าใครยังไม่รู้จักกับฐานข้อมูลอนุกรมเวลา (Time Series Database) หรือยังใหม่สำหรับเรื่องนี้ หรือสามารถตามอ่านได้ในบทความก่อนหน้านี้ครับ <a href="/th/introduction-to-time-series-database-th/">ทำไมเราถึงควรใช้ฐานข้อมูลอนุกรมเวลาสำหรับ "ข้อมูลอนุกรมเวลา" (Time Series Database)</a></p> </blockquote> <p>OpenTSDB ถูกใช้ในบริษัทใหญ่ๆ อย่าง eBay, Yahoo, Pinterest, Box, Bitbucket และบริษัทใหญ่ๆ อีกหลายบริษัท ซึ่งในบทความนี้ผมจะแนะนำเบื้องต้นเกี่ยวกับ OpenTSDB ข้อดี และข้อควรระวัง รวมถึงตัวอย่างการ query หลักการทำงานคร่าวๆ ว่ากันแล้ว</p> <h2 id="tl-dr-yaawaipaim-aan">TL;DR (ยาวไปไม่อ่าน):<a class="zola-anchor" href="#tl-dr-yaawaipaim-aan" aria-label="Anchor link for: tl-dr-yaawaipaim-aan" style="visibility: hidden;"></a> </h2> <p><a rel="nofollow noreferrer" href="http://opentsdb.net">OpenTSDB</a> คือฐานข้อมูลอนุกรมเวลา Open Source บนฐานข้อมูล <a rel="nofollow noreferrer" href="https://hbase.apache.org">HBase</a></p> <p><strong>สรุปความสามารถเด่นๆ ดังนี้</strong></p> <ul> <li>สามารถขยายตัวได้ (Scalablity) และมีความคงทนของข้อมูลสูงอีกด้วย ( Availability) สรุปง่ายๆ คือ อาศัยความสามารถของ HBase และ Hadoop เป็นจุดเด่น</li> <li>เหมาะสำหรับข้อมูลอนุกรมเวลาขนาดใหญ่</li> <li>1 data point จัดเก็บได้เฉพาะ เวลา (timestamp) และตัวเลข (ค่าของข้อมูล)</li> <li>การ Query มี syntax เป็นของตัวเองผ่าน HTTP API</li> <li>สามารถทำ post processing ได้เช่น downsampling, rate, interoperation</li> </ul> <hr /> <p>จริงๆ แล้วทุกวันนี้เราน่าจะได้ยินเกี่ยวกับอนุกรมเวลามากขึ้น และใช้กันบ่อยขึ้น บางคนอาจจะจะรู้จักในนามของกราฟหุ้น หรือเทคโนโลยีที่เป็นที่นิยมอยู่ตอนนี้คือ Internet of Thing โดยมองคอนเซ็ปว่าทุกอย่างสามารถต่ออินเตอร์เน็ตได้</p> <p>ดังนั้นในอนาคตเราก็จะมีข้อมูลเกิดขึ้นอย่างมหาศาล ลองคิดเล่นๆ ว่า หลอดไฟทุกดวงในประเทศต่ออินเตอร์เน็ต และส่งข้อมูลสถานะของมันออกมาทุกๆ วินาที เป็นระยะเวลาสัก 1 ปี แค่นี้ก็จินตนาการไม่ออกแล้วว่าข้อมูลจะมากขึ้น หรือจริงๆ แล้วอนุกรมเวลาครอบคลุมทุกอย่างที่มีความสัมพันธ์กับเวลาเลยทีเดียว</p> <p>เชื่อว่าหลายๆ คนอาจจะยังไม่คุ้นชินกับฐานข้อมูลอนุกรมเวลา หรือ OpenTSDB เพราะในบ้านไม่ค่อนมีคนพูดถึงมากนัก รวมถึงในฝั่งงานวิจัยเองก็ยังคงเป็นเรื่องที่ใหม่มากๆ (เปเปอร์ที่ survey เกี่ยวกับฐานข้อมูลอนุกรมเวลาเพิ่งออกเมื่อปีที่แล้วเลย 2017)</p> <p>แต่ถ้าเราต้องเก็บข้อมูลอนุกรมเวลาขนาดใหญ่ และดึงข้อมูลออกมาวิเคราะห์แล้ว OpenTSDB ตอบโจทย์ได้ดีมาก เพราะสามารถทำงานได้เร็วกว่าพวก database ทั่วๆ ไป พวก MySQL, MongoDB, HBase</p> <h2 id="opentsdb-open-time-series-database">OpenTSDB (Open Time series database)<a class="zola-anchor" href="#opentsdb-open-time-series-database" aria-label="Anchor link for: opentsdb-open-time-series-database" style="visibility: hidden;"></a> </h2> <p><img src="https://www.dropbox.com/s/2zprjjijpfo8y1t/2018-08-13-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20OpenTSDB%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-3.jpg?raw=1" alt="https://www.dropbox.com/s/2zprjjijpfo8y1t/2018-08-13-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20OpenTSDB%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-3.jpg?dl=0" /></p> <p>OpenTSDB ถูกสร้างครั้งแรกโดย StumbleUpon ซึ่งคนที่ดูแลหลักๆ คือ Yahoo โดยเจ้าดังๆ ที่มีใช้ก็มี eBay, Atlassian หรือบางคนอาจจะรู้จักในนาม bitbucket, Box, Pinterest , Tumblr, MapR, Cloudflare และอีกหลายๆบริษัทเลย</p> <p>จุดแข็งของ OpenTSDB ที่ทำให้ผมชอบ และหลงรักคือการออกแบบอยู่บน HBase</p> <p>แล้ว OpenTSDB คืออะไร หน้าเว็บหลักเค้าบอกว่าแบบนี้คับ</p> <blockquote> <p>The Scalable Time Series Database Store and serve massive amounts of time series data without losing granularity.</p> </blockquote> <p>ก็คือฐานข้อมูลที่เหมาะสำหรับการเก็บข้อมูลอนุกรมเวลาขนาดใหญ่บนฐานข้อมูล HBase ซึ่งสืบทอดความสามารถของ HBase ซึ่งอยู่ใน ecosystem ของ Hadoop โดยมีความสามารถหลักๆ ประมาณนี้ครับ</p> <ul> <li> <p>ตัว HBase เองมีความสามารถในการจัดเก็บข้อมูลแบบกระจายตัวที่มีความสามารถในการขยายตัวได้ดีมากในแบบ horizontal ( Scalability )อีกทั้งยังมีความคงทนของข้อมูลสูงอีกด้วย (Availability)</p> </li> <li> <p>โดยเริ่มต้นเอง พัฒนามาเพื่อใช้สำหรับในงาน Monitoring ระบบคอมพิวเตอร์ ต่างๆ ซึ่งมี ตัวที่เป็นสคริปซ์ (เรียกว่า <a rel="nofollow noreferrer" href="http://opentsdb.net/docs/build/html/user_guide/utilities/tcollector.html">Tcollector</a>) ไว้สำหรับส่ง data เข้าสู่ OpenTSDB ด้วย เช่นการ monitor สถานะของ mysql หรือ พวก redis เป็นต้น และข้อมูลที่เก็บเป็นแบบ time series เท่านั้น</p> </li> <li> <p>OpenTSDB ยังมี HTTP API สำหรับการ write และ read ข้อมูลลงฐานข้อมูล รวมถึงหน้าตา dashboard แบบง่ายๆ ให้ใช้งานด้วย (visualization tool)</p> </li> <li> <p>ข้อดีอย่างหนึ่งของ OpenTSDB คือการเก็บ data points ทั้งหมด ซึ่งไม่เหมือนบางฐานข้อมูล เช่น <a rel="nofollow noreferrer" href="https://oss.oetiker.ch/rrdtool/">RDDtool</a> ซึ่งตัวนึงที่ใช้มากในระบบ monitoring ซึ่งมันจะลดจำนวนจุดที่มีบันทึกนานมาแล้ว โดยการเอามารวมกัน เพื่อการลดพื้นที่การจัดเก็บ</p> </li> </ul> <p>ดังนั้น OpenTSDB จึงเหมาะสำหรับจัดเก็บข้อมูลเซนเซอร์หรือข้อมูล IoT หรือแม้แต่ time series ทั่วๆ ไปได้ ซึ่งทุกๆ จุดมีประโยชน์ต่อการนำไปวิเคราะห์ข้อมูล</p> <h3 id="taw-yaangkaar-query">ตัวอย่างการ query<a class="zola-anchor" href="#taw-yaangkaar-query" aria-label="Anchor link for: taw-yaangkaar-query" style="visibility: hidden;"></a> </h3> <p>เพื่อให้เห็นภาพมากขึ้น ขอยกตัวอย่างการ query ข้อมูลจากฐานข้อมูล OpenTSDB นะครับ</p> <p><img src="https://www.dropbox.com/s/9f7oa9mnbfntb20/2018-08-13-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20OpenTSDB%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-4.jpg?raw=1" alt="https://www.dropbox.com/s/9f7oa9mnbfntb20/2018-08-13-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20OpenTSDB%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-4.jpg?dl=0" /></p> <p>OpenTSDB มี Web GUI เป็นของตัวเอง และสามารถใช้ HTTP API ได้ จากรูปข้างบน เราสามารถกำหนดเวลา ตั้งต้น และสิ้นสุด และชื่อของอนุกรมเวลาได้ (ทางซ้ายมือ)</p> <p>ซึ่งผลลัพธ์ก็ได้ JSON ดังรูปทางขวามือคับ ซึ่ง data point จะอยู่ในรูปแบบของ key และ value ระหว่าง timestamp และค่าของมันคับ</p> <p>หลายๆ คนอาจจะสงสัยแล้วว่า OpenTSDB ทำงานยังไง แล้วทีนี้เราก็มาดู architecture ภาพรวมคร่าวๆ กันนะครับ</p> <h3 id="opentsdb-thamngaan-yaangair">Opentsdb ทำงานอย่างไร<a class="zola-anchor" href="#opentsdb-thamngaan-yaangair" aria-label="Anchor link for: opentsdb-thamngaan-yaangair" style="visibility: hidden;"></a> </h3> <p><img src="https://www.dropbox.com/s/9u78y13ja2da3s4/2018-08-13-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20OpenTSDB%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-5.png?raw=1" alt="https://www.dropbox.com/s/9u78y13ja2da3s4/2018-08-13-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20OpenTSDB%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-5.png?dl=0" /></p> <p>รูปจาก<a rel="nofollow noreferrer" href="http://opentsdb.net/overview.html">หน้าเว็บหลักของ OpenTSDB</a> แสดงสถาปัตยกรรมของ OpenTSDB</p> <p>OpenTSDB จะสร้าง worker ที่แตก thread ออกมา ซึ่งเรียกว่า TSD (Time Series Daemon) สำหรับจัดการ job ของ OpenTSDB ซึ่งจะต้องมี worker (หรือ TSD) อย่างน้อย 1 ตัว แต่ละตัวทำงานไม่เกี่ยวข้องกัน ถ้าดูจากรูปข้างบน คือ จะไม่มีเส้น ระหว่าง TSD แต่จะต่อตรงกับ HBase ทีเดียวเลย</p> <p>หลักๆ คือ TSD ทำหน้าที่เป็นตัวกลางระหว่างการเขียนและการอ่านของ OpenTSDB กับ HBase</p> <p>ผมขอแนะนำ time series database ที่ชื่อ OpenTSDB ไว้แต่เพียงแค่นี้ครับ หลังจากนี้จะเป็นสรุปข้อดี ข้อเด่น และข้อควรระวังในการนำ OpenTSDB ไปใช้ จากประสบการณ์การใช้งานของผมเอง</p> <h2 id="kh-diikh-ng-opentsdb">ข้อดีของ OpenTSDB<a class="zola-anchor" href="#kh-diikh-ng-opentsdb" aria-label="Anchor link for: kh-diikh-ng-opentsdb" style="visibility: hidden;"></a> </h2> <ul> <li>ทำงานเร็วกว่าฐานข้อมูลเอนกประสงค์ทั่วๆ ไปมาก</li> <li>รองรับการขยายตัวได้ดีเมื่อเทียบกับ <a rel="nofollow noreferrer" href="https://prometheus.io/docs/introduction/comparison/#prometheus-vs.-opentsdb">prometheus</a>, <a rel="nofollow noreferrer" href="http://iopscience.iop.org/article/10.1088/1742-6596/664/4/042036/pdf">InfluxDB, Elasticsearch</a></li> <li>มีการ compaction เพื่อลดขนาดของพื้นที่ที่ใช้จัดเก็บข้อมูล</li> <li>สามารถปรับจูนประสิทธิภาพได้เยอะ</li> <li>เป็น Open Source และมี Commnuity ที่โอเคพอควร</li> </ul> <h2 id="kh-khwrrawangkh-ng-opentsdb">ข้อควรระวังของ OpenTSDB<a class="zola-anchor" href="#kh-khwrrawangkh-ng-opentsdb" aria-label="Anchor link for: kh-khwrrawangkh-ng-opentsdb" style="visibility: hidden;"></a> </h2> <ul> <li>เนื่องจากเป็นฐานข้อมูลที่ทำงานบน HBase ดังนั้นการติดตั้งและตั้งค่าอาจจะยุ่งยาก</li> <li>สามารถเก็บเวลาได้แค่ 2 หน่วยคือ วินาที และ มิลลิวินาที</li> <li>ค่าที่บันทึกได้มีแค่ตัวเลข ทศนิยมหรือจำนวนเต็ม ไม่สามารถเก็บข้อความได้</li> <li>เนื่องจากยังไม่มีมาตรฐานการออกแบบฐานข้อมูลอนุกรมเวลา ดังนั้น API การใช้งานจึงเฉพาะเจาะจงสำหรับ OpenTSDB เท่านั้น</li> <li>บางระบบอาจจะยังไม่ตอบโจทย์เพราะว่า OpenTSDB อาจจะ general เกินไป</li> <li>ยังไม่มีแคชในส่วนของการ Query ข้อมูล ซึ่งใน roadmap ของ OpenTSDB 3.0 บอกว่าจะใส่เข้ามา</li> </ul> <blockquote> <p>ส่วนผมเองได้ออกแบบและพัฒนากลไกแคชสำหรับ OpenTSDB โดยใช้ Memcached ซึ่งจะปีพิมพ์ในงานประชุมวิชาการ ISCIT 2018 ด้วยครับ บล็อกหน้าจะอธิบายในส่วนถัดๆไป คับ</p> </blockquote> <p><strong>ในบทความต่อไปถัดไปจะพูดถึง</strong></p> <ul> <li>Internal OpenTSDB</li> <li>Asynchorous programming using deferred object ( async Hbase )</li> <li>Memcached &amp; internal</li> </ul> <p>ไว้พบกันใหม่โอกาสหน้าครับ สวัสดีครับ</p> <h2 id="hmaayehtu">หมายเหตุ<a class="zola-anchor" href="#hmaayehtu" aria-label="Anchor link for: hmaayehtu" style="visibility: hidden;"></a> </h2> <p>ใช้ OpenTSDB 2.3.0 เป็นตัวอ้างอิงนะครับ</p> 2018-08-08T00:00:00+00:00 2018-08-08T00:00:00+00:00 https://thadaw.com/posts/introduction-to-time-series-database-th/ <p>ปัจจุบันนี้ internet of thing หรือ IoT ก็ได้เข้ามามีบทบาทในอุตสาหกรรมและเทคโนโลยี ซึ่งใน สถาปัตยกรรมของ IoT เอง ก็มีหลายชั้น ตั้งแต่เซ็นเซอร์เก็บข้อมูล ชั้นเก็บข้อมูล รวมไปถึงการแสดงข้อมูลให้ผู้ใช้ ตามรูป IoT Wolrd Forum ได้ทำรูปอ้างอิงลำดับชั้นของ IoT <img src="https://www.dropbox.com/s/nz351ddv6aw6v51/2018-08-13-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20OpenTSDB%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-0.jpeg?raw=1" alt="IoT layer by IoT Wolrd Forum" /></p> <p>ตรงนี้ขอไม่ลงรายละเอียดของ IoT มากนัก จากรูปข้างบน เราจะเห็นได้ว่าตั้งแต่ layer ที่ 1 ถึง layer ที่ 7 หรือก็คือตั้งแต่เซนเซอร์หรืออุปกรณ์ที่รวบรวมหรือทำงานหรือควบคุม ต่างๆ ไปจนถึงชั้นของ application และการจัดการ โดยในบทความนี้จะกล่าวถึง<strong>ฐานข้อมูล OpenTSDB ซึ่งจะอยู่ใน Layer ที่ 4-5</strong></p> <p>IoT เองก็เก็บข้อมูลในลักษณะอนุกรมเวลาเป็นส่วนใหญ่ รวมถึงสัญญาไฟฟ้า (signal) สัญญาณดิจิตอลเองก็เป็นอนุกรมเวลา แต่เมื่อข้อมูลใหญ่มากขึ้นการจัดเก็บข้อมูลอนุกรมเวลาในรูปแบบเดิมๆ อาจจะทำให้ระบบทำงานช้ากว่าที่ควรจะเป็น เช่น general purpose database อย่าง MySQL, PostgreSQL</p> <p><strong>แล้วอนุกรมเวลาคืออะไร ลองไปดูกันครับ</strong></p> <p>จริงๆ ถ้าคนเรียนสายคณิตศาสตร์คงคุ้นเคยกับคำๆ นี้ดีอยู่แล้ว แต่ผมขออธิบายง่ายๆ อย่างนี้นะคับ</p> <p>สมมติว่า ถ้าเราวัดอุณหภูมิของ อ.หาดใหญ่ ทุกๆ ชั่วโมงตั้งแต่ 9 โมงเช้าถึง 6 โมงเย็น แล้วเราก็จดอุณหภูมิไว้ เราก็สามารถนำข้อมูลมาพล็อตเป็นกราฟ ในรูปข้างล่างทางขวามือได้ นี่คือ อนุกรมเวลาแบบง่ายๆ คับ คือมี เวลากับค่าที่เราบันทึก</p> <p><img src="https://www.dropbox.com/s/036qgbbs3dy6sao/2018-08-13-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20OpenTSDB%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-1.jpeg?raw=1" alt="https://www.dropbox.com/s/036qgbbs3dy6sao/2018-08-13-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20OpenTSDB%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-1.jpeg?dl=0" /></p> <p><a rel="nofollow noreferrer" href="https://www.amazon.com/Analysis-Time-Introduction-Chapman-Statistical/dp/1584883170">อนุกรมเวลา</a> ก็คือ ชุดข้อมูลที่เรียงลำดับตามเวลา โดยอนุกรมเวลาประกอบไปด้วยจุดข้อมูล (data point) ซึ่งในแต่ละจุดข้อมูลมีเวลาที่บันทึก และค่าที่วัดได้ ณ เวลานั้นๆ ข้อมูลอนุกรมเวลาส่วนใหญ่แล้วใช้ในการจัดเก็บข้อมูลจากสภาพแวดล้อมต่างๆ ขึ้นอยู่กับการใช้งาน โดยในหลายๆงานก็ได้นำข้อมูลอนุกรมเวลาไปใช้ เช่น การพยากรณ์สภาพอากาศ, ระบบคอมพิวเตอร์, การจราจร, กระบวนทางเคมี หรือแม้กระทั่ง การพยากรณ์แนวโน้มของราคาหุ้น</p> <p>ตัวอย่างของข้อมูลอนุกรมเวลาในกรณีของการเก็บข้อมูลสภาพอากาศ เช่น</p> <ul> <li>ลำดับของอุณหภูมิที่ถูกบันทึกเป็นรายชั่วโมง</li> <li>การบันทึกความชื้นทุกชั่วโมง</li> <li>การบันทึกความเร็วทุกๆ หนึ่งนาที</li> </ul> <p>ระยะห่างระหว่างเวลาที่บันทึกของข้อมูลแต่ละจุดจะเป็นเท่าใดก็ได้</p> <hr /> <h2 id="thaankh-muul-nukrmewlaa">ฐานข้อมูลอนุกรมเวลา<a class="zola-anchor" href="#thaankh-muul-nukrmewlaa" aria-label="Anchor link for: thaankh-muul-nukrmewlaa" style="visibility: hidden;"></a> </h2> <p>ช่วงนี้ฐานข้อมูลอนุกรมเวลาเริ่มดังกันขึ้นเยอะแล้ว จาก<a rel="nofollow noreferrer" href="https://prometheus.io/blog/2016/05/09/prometheus-to-join-the-cloud-native-computing-foundation/">ข่าวที่ฐานข้อมูลอนุกรมเวลา Prometheus เข้าร่วมกับ Cloud Native Computing Foundation</a> หลังจากที่ศึกษามาสักพักเปเปอร์ survey ด้าน time series ก็ออกมาแล้วครับ <a rel="nofollow noreferrer" href="https://ieeexplore.ieee.org/document/8012550/">Time Series Management Systems: A Survey</a> จึงเป็นโอกาสที่ดีจะเขียนบทความถึงฐานข้อมูลอนุกรมเวลาครับ</p> <p><strong>ทำไมถึงได้มีฐานข้อมูลอนุกรมเวลาเกิดขึ้นแล้วเหมาะสำหรับระบบแบบไหน?</strong></p> <p>คุณ Søren ใน<a rel="nofollow noreferrer" href="https://ieeexplore.ieee.org/document/8012550/">เปเปอร์</a> survey บอกว่า TSMS (Time Series Management System) หรือ TSDB (Time Series Database) ก็ได้ ถ้าเป็น TSMS จะครอบคลุมความหมายมากกว่า เพราะบางระบบไม่ใช่แค่ฐานข้อมูล โดยฐานข้อมูลอนุกรมเวลาเกิดขึ้นจากความต้องการที่เฉพาะเจาะจงมากขึ้น ดังนี้</p> <ol> <li><strong>Database Management System (DBMS) กับ (Relational Database Management System (RDBMS) ทั่วๆ ไปยังไม่ตอบโจทย์เท่าไหร่นัก</strong>เมื่อ เรามีเครือข่ายของเซนเซอร์ขนาดใหญ่ ที่ป้อนข้อมูลอนุกรมเวลาจำนวนมาก ทั้งในแง่ของประมาณ (Volume) และความเร็วในเพิ่มขึ้นของจำนวนข้อมูล (Velocity)</li> <li><strong>ในแง่ของการนำข้อมูลไปวิเคราะห์</strong> ในระบบแบบเดิมยังต้อง export ข้อมูลออกไปยังโปรแกรมวิเคราะห์เช่น R, SPSS ซึ่งทำให้การขั้นตอนการทำงานยุ่งยาก</li> <li><strong>ในแง่ของการจัดเก็บและเรียกดู ประสิทธิภาพของระบบยังคงต้องดี</strong> เมื่อข้อมูลมีขนาดใหญ่ ซึ่ง TSMS ก็เข้ามาช่วยตอบโจทย์ตรงนี้</li> </ol> <p>หลายๆ คนอาจจะสงสัยว่าแล้วที่บอกว่าข้อมูลอนุกรมขนาดใหญ่นี้ มันใหญ่ขนาดไหนถึงต้องไปใช้ฐานข้อมูลอนุกรมเวลา ตรงนี้ผมขอยกตัวอย่างงานวิจัยของ Facebook ครับ โดยเค้าต้องการ จะทำ server สำหรับ monitor ข้อมูลของทุก cluster ของ Facebook ครับ</p> <p>ซึ่งโจทย์คือต้องสามารถตรวจสอบความผิดปกติได้อย่างรวดเร็ว ดังนั้นเค้าจึงออกแบบฐานข้อมูลอนุกรมเวลาที่อยู่บนแรมครับที่ชื่อว่า <a rel="nofollow noreferrer" href="https://www.vldb.org/pvldb/vol8/p1816-teller.pdf">Gorilla</a> เพื่อให้ต้องการ monitor แบบ real time ลองมามาดูโจทย์ของ Facebook กันครับ</p> <ul> <li>มีข้อมูล 2 พันล้านอนุกรมเวลา</li> <li>มีข้อมูลอนุกรมเวลา 700 ล้านจุดเข้ามาในระบบ ต่อนาที</li> <li>เก็บข้อมูลย้อนหลังได้ 26 ชั่วโมง</li> <li>รับโหลดสูงสุดได้ 40,000 query ต่อวินาที</li> <li>สามารถอ่านข้อมูลได้อย่างรวดเร็ว</li> <li>รองรับการโตของข้อมูล 2 เท่า ต่อปี</li> </ul> <p>เป็นไงกันบ้างครับ ข้อมูลเยอะมากใช่มั้ย นี่คือตัวอย่างงานแบบ monitoring ถ้าเราไม่ต้องการ real time แบบนี้ ก็ไม่ต้องเก็บข้อมูลบนแรมก็ได้คับ โดยปกติจะเก็บของข้อมูลบน Harddisk ขึ้นอยู่กับ requirements คับ</p> <p><strong>มาถึงตรงนี้ แล้วฐานข้อมูลอนกรุมเวลาคืออะไร?</strong></p> <p><a rel="nofollow noreferrer" href="https://ieeexplore.ieee.org/document/6427510/">ฐานข้อมูลแบบอนุกรมเวลา</a> คือฐานข้อมูลที่ถูกพัฒนาและปรับปรุงมาเพื่อเก็บข้อมูลในงานทางด้านอนุกรมเวลาโดยเฉพาะ ฐานข้อมูลแบบอนุกรมเวลาส่วนใหญ่แล้วจะถูกปรับแต่งให้เหมาะกับข้อมูลที่มีปริมาณมาก และสามารถที่จะจัดเก็บจุดข้อมูลของอนุกรมเวลาและคำอธิบายเพิ่มเติมของข้อมูลนั้นๆ เท่านั้น</p> <p>ดังนั้นฐานข้อมูลแบบอนุกรมเวลาสามารถจัดการข้อมูลแบบอนุกรมเวลาได้เหมาะสมกว่าฐานข้อมูลอเนกประสงค์ทั่วๆ ไป เช่น ฐานข้อมูลแบบมีความสัมพันธ์ (Relational database) หรือฐานข้อมูลแบบไม่มีความสัมพันธ์ (Non-relational database)</p> <p>อีกทั้งฐานข้อมูลแบบนี้ยังสามารถค้นหาข้อมูลแบบอนุกรมเวลา เลื่อนช่วงของเวลาที่ต้องการสอบถาม รวมหลายๆ อนุกรมเวลาเข้ามาเป็นหนึ่งอนุกรมเวลา หรือคำนวณเพื่อหาค่าของจุดที่หายไปของอนุกรมเวลา (interpolation)</p> <p>ปัจจุบันยังไม่มีมาตรฐานการออกแบบและการเชื่อมต่อที่ชัดเจนที่จะอธิบายว่าฐานข้อมูลแบบอนุกรมเวลานั้นควรเป็นแบบไหน และมีการเชื่อมต่ออย่างไร หลายๆ องค์กรได้มีความพยายามที่จะสร้างฐานข้อมูลแบบอนุกรมเวลาสำหรับใช้ในองค์กร ซึ่งแต่ละผู้พัฒนาได้ออกแบบความสามารถและ API ของตนแตกต่างกันไป</p> <p><strong>ฐานข้อมูลอนุกรมเวลาส่วนใหญ่แล้วมักจะมี 4 องค์ประกอบ คือ</strong></p> <ol> <li>ส่วนของการเก็บข้อมูลอนุกรมเวลา</li> <li>ส่วนของการเก็บเกี่ยวข้อมูล</li> <li>ส่วนของการแสดงผล</li> <li>ส่วนของการประมวลผลข้อมูล</li> </ol> <p>ซึ่งบางฐานข้อมูลอนุกรมเวลามีองค์ประกอบไม่ครบ แต่ฐานข้อมูลเหล่านั้นมักอนุญาตให้เชื่อมต่อกับภายนอก ยกตัวอย่างเช่น OpenTSDB มีส่วนของแสดงผลที่เหมาะสำหรับการใช้งานที่ไม่ซับซ้อน แต่ OpenTSDB ก็สามารถเชื่อมต่อกับโปรแกรมประยุกต์เพื่อการแสดงผลอนุกรมเวลา เช่น <a rel="nofollow noreferrer" href="https://grafana.com/">Grafana</a> ได้ <img src="https://www.dropbox.com/s/bc4remlp4qcl27f/2018-08-13-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20OpenTSDB%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-2.png?raw=1" alt="https://www.dropbox.com/s/bc4remlp4qcl27f/2018-08-13-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%20OpenTSDB%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-2.png?dl=0" /></p> <p><a rel="nofollow noreferrer" href="https://grafana.com/">Grafana</a> คือ หน้าต่างอเนกประสงค์สำหรับแสดงผลข้อมูลอนุกรมเวลา และมีส่วนขยายสำหรับการเชื่อมต่อกับ OpenTSDB อีกด้วย</p> <h3 id="taw-yaangkaar-query-kh-muulcchaakthaankh-muul-nukrmewlaa">ตัวอย่างการ Query ข้อมูลจากฐานข้อมูลอนุกรมเวลา<a class="zola-anchor" href="#taw-yaangkaar-query-kh-muulcchaakthaankh-muul-nukrmewlaa" aria-label="Anchor link for: taw-yaangkaar-query-kh-muulcchaakthaankh-muul-nukrmewlaa" style="visibility: hidden;"></a> </h3> <p>ประเภทงานส่วนใหญ่ของการใช้ฐานข้อมูลแบบอนุกรมเวลาคือการสอบถามข้อมูลอนุกรมเวลา ฐานข้อมูลแบบอนุกรมเวลาส่วนใหญ่จะมีการออกแบบที่ทำให้สะดวกต่อการใช้ค้นหาตามช่วงของเวลา สมมติว่า เราต้องการสอบถามข้อมูลอุณหภูมิที่จัดเก็บไว้ในฐานข้อมูลอยู่ก่อนแล้วจากปีค.ศ. 2013 ถึง 2016 จากข้อมูลตัวอย่าง มีข้อมูลจำนวน 1 ล้านจุดต่อข้อมูลระยะเวลา 1 ปี คำสั่งในการสอบถามมีลักษณะได้หลากหลายรูปแบบ โดยรูปแบบข้างล่างนี้เป็นตัวอย่างอย่างง่ายในการสอบถามข้อมูล</p> <pre class="z-code"><code><span class="z-text z-plain">QUERY temperature FROM 2013 TO 2016 </span></code></pre> <p>ผลลัพธ์การสอบถามจะเป็นในรูปแบบของอาร์เรย์ของจุดข้อมูล โดยผลลัพธ์จะมี 3 ล้านจุดข้อมูล และผลลัพธ์ที่ได้ยังสามารถนำไปแสดงผลเป็นกราฟอนุกรมเวลา</p> <p>ฐานข้อมูลแบบอนุกรมเวลาแบบ Open Source ที่ได้รับความนิยม เช่น OpenTSDB, <a rel="nofollow noreferrer" href="https://kairosdb.github.io/">KairosDB</a>, <a rel="nofollow noreferrer" href="https://www.influxdata.com/">InfluxDB</a>, <a rel="nofollow noreferrer" href="https://prometheus.io/">Prometheus</a> และ <a rel="nofollow noreferrer" href="https://www.elastic.co/products/elasticsearch">Elasticsearch</a> จริงๆ ก็มีอีกหลายตัวที่ไม่ได้ยกตัวอย่างมาครับ</p> <hr /> <h2 id="saamaarthsueksaaephimetimaidnakhrab">สามารถศึกษาเพิ่มเติมได้นะครับ<a class="zola-anchor" href="#saamaarthsueksaaephimetimaidnakhrab" aria-label="Anchor link for: saamaarthsueksaaephimetimaidnakhrab" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://ieeexplore.ieee.org/document/8012550/">Time Series Management Systems: A Survey</a></li> <li><a rel="nofollow noreferrer" href="https://www.influxdata.com/time-series-database/">Time Series Database (TSDB) Explained</a></li> <li>https://blog.timescale.com/what-the-heck-is-time-series-data-and-why-do-i-need-a-time-series-database-dcf3b1b18563</li> <li>https://blog.timescale.com/time-series-data-why-and-how-to-use-a-relational-database-instead-of-nosql-d0cd6975e87c</li> <li>https://github.com/xephonhq/awesome-time-series-database</li> </ul> <p>ไว้พบกันใหม่โอกาสหน้าครับ สวัสดีครับ</p> <hr /> <p><em>Cross published at <a rel="nofollow noreferrer" href="https://medium.com/@mildronize/%E0%B8%97%E0%B8%B3%E0%B9%84%E0%B8%A1%E0%B9%80%E0%B8%A3%E0%B8%B2%E0%B8%96%E0%B8%B6%E0%B8%87%E0%B8%84%E0%B8%A7%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%E0%B8%AA%E0%B8%B3%E0%B8%AB%E0%B8%A3%E0%B8%B1%E0%B8%9A-%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AD%E0%B8%99%E0%B8%B8%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2-time-series-database-d524d25060ec">Medium.com</a></em></p> 2018-07-20T00:00:00+00:00 2018-07-20T00:00:00+00:00 https://thadaw.com/posts/create-blog-with-markdown-and-bear-note-on-ios-th/ <blockquote> <p>ย้าย blog กลับมาใช้ Jekyll เหมือนเดิมแล้วคับ</p> </blockquote> <p>เนื่องจากผมเอง<a rel="nofollow noreferrer" href="http://mildronize.github.io">เขียน blog</a> กับ <a rel="nofollow noreferrer" href="https://www.staticgen.com">Static page generator</a> ซึ่งใช้ภาษา Markdownในการเขียนเนื้อหา ซึ่งใช้ <a rel="nofollow noreferrer" href="https://jekyllrb.com">Jekyll</a> ในในการแปลงเป็นหน้าเว็บให้ เลยหาเครื่องมือหาเหมาะๆ ที่ไม่ต้องอยู่หน้าคอม แล้วมานั่งเขียนบล็อก อยากแบบเขียนช่วงว่างๆ ตาม มุมพักผ่อนต่างๆ ที่ไม่ต้องพกโน๊ตบุ๊คไปด้วยคับ ( ไว้มีโอกาสจะเขียน เรื่อง Static page generator อีกบล็อกครับ)</p> <p>เลยลองหาแอพที่เอาไว้ใช้เขียน blog ดูว่าตัวไหนดีและฟรีบ้าง ก็มาเจอ <a rel="nofollow noreferrer" href="http://www.bear-writer.com">Bear</a> นี่แหละครับ จริงๆ bear เป็น แอพไว้จดโน๊ตอารมณ์เดียวกับ Evernote นั่นแหละครับ <img src="https://www.dropbox.com/s/ctdl5fr7c7cplbb/2018-07-20-%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9A%E0%B8%A5%E0%B9%87%E0%B8%AD%E0%B8%81%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2%20Markdown%20%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%88%E0%B8%94%E0%B9%82%E0%B8%99%E0%B9%8A%E0%B8%95%20Bear%20%E0%B8%9A%E0%B8%99%20iOS-0.jpg?raw=1" alt="https://www.dropbox.com/s/ctdl5fr7c7cplbb/2018-07-20-%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9A%E0%B8%A5%E0%B9%87%E0%B8%AD%E0%B8%81%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2%20Markdown%20%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%88%E0%B8%94%E0%B9%82%E0%B8%99%E0%B9%8A%E0%B8%95%20Bear%20%E0%B8%9A%E0%B8%99%20iOS-0.jpg?dl=0" /></p> <h3 id="kh-diikh-ng-bear-thiithamaihphmch-bmaak-khuue">ข้อดีของ Bear ที่ทำให้ผมชอบมากๆ คือ<a class="zola-anchor" href="#kh-diikh-ng-bear-thiithamaihphmch-bmaak-khuue" aria-label="Anchor link for: kh-diikh-ng-bear-thiithamaihphmch-bmaak-khuue" style="visibility: hidden;"></a> </h3> <ul> <li>Bear คือแอพจดโน๊ตที่รวมกับ Markdown ได้อย่างแนบเนียน ไม่เหมือนกับอารมณ์เขียน Markdown ทั่วๆ ไป</li> <li>สามารถใช้ร่วมกับ Markdown ได้ดีเลยครับ</li> <li>มี syntax blockquote แบบไว้แนบโค๊ดได้เลย ไม่ต้องไปฝากไว้ที่ gist ของ github</li> <li>สามารถเห็นรูปภาพในการเขียนโน๊ตได้เลยครับ ทำให้มองเห็นภาพได้เลยขณะพิมพ์ ไม่จำเป็นต้องกด preview ดูผลลัพธ์ครับ พูดง่ายๆ เป็น WYSIWYG ครับ</li> <li>เป็นแอพที่สามารถใช้งานร่วมกับแอพอื่นๆ หรือ platform อื่นๆ ได้ดีครับ คือสามารถ export ออกเป็นไฟล์ Markdown พร้อมกับมีโฟลเดอร์รูปภาพซึ่งสามารถไปใช้กับ Markdown editor ทั่วๆ ไปได้เลยครับ ( รูปแบบนี้ Bear เรียกว่า Text Bundle )</li> <li><strong>สุดท้ายที่ชอบมากๆ</strong> คือ สามารถใส่แท็กแบบ inline ได้เลยแบบ ไม่ต้องไปกดปุ่มใดๆ เพิ่มเติมเลย และสามารถสร้างลิงค์ไปโน๊ตอันอื่นๆ ได้ด้วย ซึ่ง</li> </ul> <p>ส่วนข้อเสียก็มีแค่ให้ใช้ในตระกูลของ Apple เพียงอย่างเดียวครับ แต่สามารถ export เป็น Markdown ปกติได้ แบบนี้ให้อภัยได้</p> <h2 id="ruupphaaphcchaekb-yaangair">รูปภาพจะเก็บอย่างไร ?<a class="zola-anchor" href="#ruupphaaphcchaekb-yaangair" aria-label="Anchor link for: ruupphaaphcchaekb-yaangair" style="visibility: hidden;"></a> </h2> <p>ใน <a rel="nofollow noreferrer" href="http://mildronize.github.io">blog ที่ใช้ Jekyll</a> นั้นอัพโหลดรูปภาพเป็น ไฟล์ที่อยู่ static ของ git repo ครับ ซึ่งมันไม่สะดวกเอามากๆ และเกิดความลำบากในการย้ายบล็อกในอนาคต แล้ว git repo เองก็มีข้อจำกัดในเรื่องของ<a rel="nofollow noreferrer" href="https://help.github.com/articles/what-is-my-disk-quota/">พื้นที่ที่สามารถใช้งานได้ประมาณ 1 GB</a> ครับ</p> <p>ต่อไปก็มองหาที่เก็บรูปภาพแบบถาวรที่สามารถเอาลิงค์ตรงมาใส่ใน html ได้ ซึ่งตอนแรกตั้งใจว่าจะเก็บใน imgur แต่ไม่แน่ใจว่าจะเก็บถาวรมั้ย จาก<a rel="nofollow noreferrer" href="https://www.quora.com/Imgur-How-long-are-the-images-stored-before-being-purged">ที่เค้าคุยกันในกระทู้บอกว่า imgur จะเก็บถาวร</a> และอีกอย่างคงจัดการได้ยาก</p> <p><strong>ทางออกคือ Dropbox</strong> เป็น cloud storage ชื่อดังเจ้าเดียวเท่าที่ผมรู้จัก ( Box, Google Drive, OneDrive และ iCloud ทำไม่ได้ครับ) ที่สามารถเข้าถึง direct link ของรูปภาพได้ โดยแค่เปลี่ยนคำลงท้าย url จาก <code>dl=0</code> เป็น <code>raw=1</code></p> <h3 id="kaarbrihaarcchadkaarontain-bear-samhrabekhiiynbl-k">การบริหารจัดการโน๊ตใน Bear สำหรับเขียนบล็อก<a class="zola-anchor" href="#kaarbrihaarcchadkaarontain-bear-samhrabekhiiynbl-k" aria-label="Anchor link for: kaarbrihaarcchadkaarontain-bear-samhrabekhiiynbl-k" style="visibility: hidden;"></a> </h3> <p>ผมใช้ tag ทั้งสิ้น 3 แบบครับ</p> <ol> <li><code>blog/draft</code> สำหรับเขียนร่างบล็อก</li> <li><code>blog/publish</code> สำหรับ blog ที่เผยแพร่แล้ว</li> <li><code>blog/template</code> สำหรับ template markdown ที่จะใช้ในการเขียน blog บน GatsbyJS ครับ</li> </ol> <p>ส่วน template ที่ใช้ในการเขียนบล็อก <img src="https://www.dropbox.com/s/7dvcxre78kq2toi/2018-07-20-%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9A%E0%B8%A5%E0%B9%87%E0%B8%AD%E0%B8%81%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2%20Markdown%20%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%88%E0%B8%94%E0%B9%82%E0%B8%99%E0%B9%8A%E0%B8%95%20Bear%20%E0%B8%9A%E0%B8%99%20iOS-1.jpeg?raw=1" alt="https://www.dropbox.com/s/7dvcxre78kq2toi/2018-07-20-%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9A%E0%B8%A5%E0%B9%87%E0%B8%AD%E0%B8%81%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2%20Markdown%20%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%88%E0%B8%94%E0%B9%82%E0%B8%99%E0%B9%8A%E0%B8%95%20Bear%20%E0%B8%9A%E0%B8%99%20iOS-1.jpeg?dl=0" /> และเมื่อ export เป็น Text Bundle ที่เป็นภาษา Markdown ดังนี้ครับ</p> <pre data-lang="markdown" class="language-markdown z-code"><code class="language-markdown" data-lang="markdown"><span class="z-text z-html z-markdown"><span class="z-meta z-block-level z-markdown"><span class="z-markup z-heading z-1 z-markdown"><span class="z-punctuation z-definition z-heading z-begin z-markdown">#</span> </span><span class="z-markup z-heading z-1 z-markdown"><span class="z-entity z-name z-section z-markdown">Template ชื่อบล็อก</span><span class="z-meta z-whitespace z-newline z-markdown"> </span></span></span></span><span class="z-text z-html z-markdown"><span class="z-meta z-block-level z-markdown"><span class="z-meta z-separator z-thematic-break z-markdown"><span class="z-punctuation z-definition z-thematic-break z-markdown">---</span> </span></span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">title: &quot;เขียนบล็อกด้วยภาษา Markdown ด้วยแอพจดโน๊ต Bear บน iOS&quot; </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">date: &quot;7/20/2018&quot; </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">tags: </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown"> * Bear </span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown"><span class="z-markup z-heading z-2 z-setext z-markdown"><span class="z-punctuation z-definition z-heading z-setext z-markdown">---</span></span></span> </span><span class="z-text z-html z-markdown"><span class="z-meta z-block-level z-markdown"><span class="z-markup z-heading z-1 z-markdown"><span class="z-punctuation z-definition z-heading z-begin z-markdown">#</span></span><span class="z-markup z-heading z-1 z-markdown"><span class="z-entity z-name z-section z-markdown">blog/draft</span><span class="z-meta z-whitespace z-newline z-markdown"> </span></span></span></span><span class="z-text z-html z-markdown"> </span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown"><span class="z-markup z-bold z-markdown"><span class="z-punctuation z-definition z-bold z-begin z-markdown">**</span>Remove this tag<span class="z-punctuation z-definition z-bold z-end z-markdown">**</span></span> #blog/template </span></span></code></pre> <h2 id="t-aippramwlphlaifl-aela-aphohldruupkhuen-dropbox-dwyae-ph-shortcuts">ต่อไปประมวลผลไฟล์ และอัพโหลดรูปขึ้น dropbox ด้วยแอพ Shortcuts<a class="zola-anchor" href="#t-aippramwlphlaifl-aela-aphohldruupkhuen-dropbox-dwyae-ph-shortcuts" aria-label="Anchor link for: t-aippramwlphlaifl-aela-aphohldruupkhuen-dropbox-dwyae-ph-shortcuts" style="visibility: hidden;"></a> </h2> <p><img src="https://www.dropbox.com/s/7dranoizgn7ph78/2018-07-20-%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9A%E0%B8%A5%E0%B9%87%E0%B8%AD%E0%B8%81%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2%20Markdown%20%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%88%E0%B8%94%E0%B9%82%E0%B8%99%E0%B9%8A%E0%B8%95%20Bear%20%E0%B8%9A%E0%B8%99%20iOS-2.jpg?raw=1" alt="https://www.dropbox.com/s/7dranoizgn7ph78/2018-07-20-%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9A%E0%B8%A5%E0%B9%87%E0%B8%AD%E0%B8%81%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2%20Markdown%20%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%88%E0%B8%94%E0%B9%82%E0%B8%99%E0%B9%8A%E0%B8%95%20Bear%20%E0%B8%9A%E0%B8%99%20iOS-2.jpg?dl=0" /></p> <p>ตั้งแต่รู้จักกับแอพ Shortcuts นี้รู้สึกชีวิตจะสะดวกสบายหลายอย่าง มันช่วยมันง่ายที่เราต้องทำซ้ำๆ บ่อยให้เรา ก็เหมือนกับการเขียนโปรแกรมนั่นแหละคับ แต่มันจะเป็นการลากบล็อก ( อารมณ์เหมือน module ที่มี input และ output ) มาเรียงต่อกันเป็นชุดคำสั่งครับ ทำให้เราสามารถทำ automation ง่ายๆ ได้ครับ</p> <h3 id="ain-shortcuts-publish-bear-note-to-markdown-tham-aairbaang">ใน Shortcuts: Publish bear note to markdown ทำอะไรบ้าง<a class="zola-anchor" href="#ain-shortcuts-publish-bear-note-to-markdown-tham-aairbaang" aria-label="Anchor link for: ain-shortcuts-publish-bear-note-to-markdown-tham-aairbaang" style="visibility: hidden;"></a> </h3> <ol> <li>ขอสิทธิ์การเขียนไฟล์ลงบน Dropbox ในทีนี้ผมตั้งค่าให้เก็บไฟล์รูปที่ <code>/Public/blog</code></li> <li>ใส่ชื่อของโน๊ตลงไปใน <code>[POST_TITLE]</code></li> <li>ใส่วันที่ปัจจุบันลงไปใน <code>[TITLE]</code></li> <li>อัพโหลดรูปขึ้น dropbox ทุกรูป แล้วแก้ url ให้เป็น direct link</li> <li>จากนั้นแก้รูปแบบให้ตรงกับ yaml frontmatter เป็นอันเสร็จ</li> </ol> <h2 id="khant-nkaarnamaipaich">ขั้นตอนการนำไปใช้<a class="zola-anchor" href="#khant-nkaarnamaipaich" aria-label="Anchor link for: khant-nkaarnamaipaich" style="visibility: hidden;"></a> </h2> <ol> <li>เตรียมแอพที่เกี่ยวข้อง Bear, Shortcuts, Git2Go และ account dropbox</li> <li>ดาวน์โหลด Shortcuts <a rel="nofollow noreferrer" href="https://workflow.is/workflows/de83eed7d725415dac37d35b46ce946e">publish bear note to markdown</a> ไปใช้</li> <li>เขียน Blog ด้วย bear โดยใช้ template ข้างบน หรือกำหนด template เองก็ได้</li> <li>ลบข้อความ <code>**Remove this tag** </code></li> <li>กดไปที่ Export as ในเมนู แล้วเลือก Text Bundle</li> <li>เลือก Run as Workflow</li> <li>เลือก <code>Publish bear note to markdown </code></li> <li>เลือกแอพที่จะเผยแพร่ ในที่นี้ผมใช้ Git2Go ในการเผยแพร่คับ</li> </ol> <p>Download <a rel="nofollow noreferrer" href="https://workflow.is/workflows/de83eed7d725415dac37d35b46ce946e">publish bear note to markdown</a> Read more at <a rel="nofollow noreferrer" href="https://gist.github.com/mildronize/1da2120b1d2f0a25a7ecc429c06d3dce">my gist</a> P.S. For English version, I will write later.</p> <hr /> <p><em>Cross published at <a rel="nofollow noreferrer" href="https://medium.com/@mildronize/%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9A%E0%B8%A5%E0%B9%87%E0%B8%AD%E0%B8%81%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2-markdown-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%88%E0%B8%94%E0%B9%82%E0%B8%99%E0%B9%8A%E0%B8%95-bear-%E0%B8%9A%E0%B8%99-ios-d85908c2cea5">Medium.com</a></em></p> 2018-04-09T00:00:00+00:00 2018-04-09T00:00:00+00:00 https://thadaw.com/posts/my-first-conference-paper/ <p>ขอบันทึกการเดินทาง งานวิจัย หน่อย กว่าจะออกเป็น เปเปอร์ของตัวเองอันแรก</p> <p><img src="https://thadaw.com/posts/my-first-conference-paper/my-paper.jpg" alt="my paper" /></p> <p>ตั้งแต่เริ่มเรียนป.โท ละ ตอนนี้ก็ปี จะครบปีที่ 3 แล้ว</p> <p>ใช้เวลา 1 เทอมสำหรับการอ่านงานวิจัยคนอื่น แล้วก็เปลี่ยนเรื่องที่จะทำจากหน้ามือเป็นหลังมือ จากจะทำเรื่อง game sever มาเป็น cache บน database</p> <p>ใช้เวลา 1 เทอม กว่าๆ สำหรับชีวิตในค่ายทหาร ที่ตัดสินใจสมัครทหารไป รู้สึกว่าตัวเองคิดไม่ผิด เสมอมา เพราะทุกอย่างที่เกิดขึ้นล้วนดีเสมอ</p> <p>ตั้งแต่ออกจากค่ายทหารมา ก็ได้รับโจทย์ที่ท้าทาย อย่างนึงคือ จบให้ทันภายใน เดือน ก.ค. หรือ เวลา 6 เดือน กับความก้าวหน้าของงานอันน้อยนิด ถ้าจะแผนเดิมคือ จะใช้ เวลา 1 ปี กว่าจะจบ</p> <p>ปรับเป้าหมายใหม่ มีพันธสัญญากับตัวเอง ต้องทำงานดีขึ้นในทุกๆ วัน ตัวเองต้องมีการพํฒนา ใช้เวลาให้คุ้ม ใช้เวลากับการทำงาน แบบ work smart มากกว่าแบบ work hard ซึ่งโดยส่วนตัว เป็นคนประเภท work hard คือลุย ทำอย่างหนัก วันนึงอยู่หน้าจอคอม 14-16 ชม. ด้วยความ perfectionist ของตัวเอง เลยต้องปรับแก้ตัวเองใหม่</p> <p>ซึ่งตั้งแต่ออกจากค่ายทหาร ต้องเขียนโปรแกรมไปต่อยอดงานคนอื่น หรือในรูป คือ OpenTSDB ซึ่งเป็นโปรเจ็คใหญ่มาก เขียนด้วย java 50 Classes + 30k line of code + Unit test อีกนับไม่ถ้วน เคยรัน unit test ทั้งระบบ ใช้เวลา ชมกว่า ดังนั้นถ้าแก้โปรแกรมที่รัน unitest ทั้งหมด คงรอกันตายเลย</p> <p>ปัญหาใหญ่ๆ คือ การหาจุดที่จะลงไปแก้ปัญหาในงานคนอื่นนี่แหละ เพราะก่อนหน้านี้เวลา เทอมกว่าๆ 5-6 เดือนในการหาว่า ตรงไหนจะลงไปแก้ แต่ก็หาไม่เจอ ด้วยความที่ ทักษะ การเขียนโปรแกรมด้วย java หายไป 3-4 ปี กับไม่เคยเจอโปรเจ็คใหญ่ขนาดนี้ เลยทำให้หลงทางบ่อยมาก</p> <p>สิ่งที่รู้สึก amazing กับตัวเอง คือ หลังจากออกจากค่ายทหารมา ใช้เวลาแค่ 2 สัปดาห์ในการหาว่าจุดไหน เราจะลงไปแก้ปัญหาให้เขา ทั้งๆ ที่ก่อนหน้า หาอยู่ 5-6 เดือน เพราะความมีพันธสัญญาตัวเองจริงๆ เราตั้งใจมากขึ้น work smart คิด วางแผน เดินช้าๆ แต่ถูกทาง ก่อนหน้านี้คือเดินเร็ว แต่ผิดทาง</p> <p>ใช้เวลา 5 สัปดาห์ เขียนโปรแกรม พร้อม unitest และก็แก้บัคอยู้ 3-4 สัปดาห์ กว่า ผลการทำงานครั้งแรกจะออกมา</p> <p>หลังจากนั้นวางแผนจะส่งงานประชุมวิชาการ เพราะต้องส่ง ไม่งั้นจะจบไม่ทัน เลยเตรียมตัวจะส่ง เขียนโปรแกรมสำหรับรันผลการทดลอง อีกนาน 2-3 สัปดาห์ เพื่อให้คอมทำงานให้เราทั้งหมด แต่พบปัญหารายทางตลอด เกิดจากความไม่รอบคอบ และเร่งรีบเกินไป ต่อเป้าหมาย (เนื่องจากรันผลหลังกรณีมาก จำนวนของ start ระบบ เทส และทำลาย น่าจะวนๆ อยู่ที่ 1000 รอบ ถ้าทำเองก็คงเดี้ยงซะก่อน 555+)</p> <p>จากการทำงานอย่างหนักหน่วงในช่วง 3-4 วันนี้ (ไม่ได้เพิ่งมาเร่งทีหลังนะ แต่ผลการทดลองยังเอาไปเขียนงานไม่ได้ ต้องแก้โปรแกรมกันหลายรอบ) จนถึง ตี 3 ของวันที่ 9 เมษา ส่งงานเรียบร้อย เป็นงานประชุมวิชาการระดับนานาชาติ ซึ่ง deadline คือ 9 โมงเช้า</p> <p>ถึงแม้ว่ายังเป็นแค่ candidate paper แต่เราก็ลุยสุดๆ ทำเต็มที่แล้วผลลัพธ์ที่ได้ออกมาจะเป็นยังไงก็ไม่สนใจแล้ว</p> <p>ขอขอบคุณ อาจารย์ที่ปรึกษา อาจารย์ Pichaya Tandayya มากๆ ที่ลุยกันถึงช่วงโค้งสุดท้าย</p> <p>Cross Publish at Facebook <a rel="nofollow noreferrer" href="https://www.facebook.com/photo?fbid=10216470924033685&amp;set=a.1962315945623">https://www.facebook.com/photo?fbid=10216470924033685&amp;set=a.1962315945623</a> (Sorry this link is not public)</p> 2017-01-29T00:00:00+00:00 2017-01-29T00:00:00+00:00 https://thadaw.com/posts/my-xiaomi-mi2s-journey/ <p>ผมซื้อเจ้า <a rel="nofollow noreferrer" href="http://www.gsmarena.com/xiaomi_mi_2s-5397.php">Xiaomi Mi2s</a> เมื่อวันที่ 11 กรกฎาคม 2556 ถ้านับเวลาจากวันนั้นถึงวันนี้ก็รวมๆ แล้ว 3 ปีครึ่งที่อยู่บนมือผม มือถือเครื่องนี้เป็นมือถือเครื่องที่ 3 ในชีวิตผมล่ะ เครื่องแรกก็ <a rel="nofollow noreferrer" href="http://www.gsmarena.com/sony_ericsson_w200-1824.php">Sony Ericsson W200i</a> ในสมัยนั้นยังไม่มี smart phone อะไรเลย กว่าราคามือถือที่สามารถฟังเพลงได้ ถ่ายรูปได้ ราคาจะลงมาในระดับที่เด็กนักเรียนคนนึงสามารถเก็บเงินซื้อได้ ตอนนั้นซื้อราคา 4 พันกว่าๆ</p> <p>เครื่องที่สองคือ <a rel="nofollow noreferrer" href="http://www.gsmarena.com/motorola_defy-3514.php">Motorola Defy</a> เป็น smart phone เครื่องแรกๆ ที่สามารถกันน้ำได้ ตอนนั้นเพิ่งเข้าไทยใหม่ๆ ผมเลยซื้อมาเลย เครื่องนี้นับว่าผ่านร้อน ผ่านหนาวมาเยอะเหมือนกัน เปลี่ยนแบตเตอร์รี่ไป 1 รอบ เปลี่ยนหน้าจอสัมผัสไปแล้วน่าจะสัก 4-5 รอบได้ สั่งมาเปลี่ยนเอง จนแทบหาอะไหล่แทบไม่ได้ ผนวกกับ ROM แทบจะอัพเกรดไปต่อไปไม่ไหวแล้ว ตอนที่ซื้อมาเป็น Android 2.1 อัพเกรดโดยใช้ Custom ROM (สมัยนั้นก็มี <a rel="nofollow noreferrer" href="http://en.miui.com/">MIUI</a> 3, <a rel="nofollow noreferrer" href="https://en.wikipedia.org/wiki/CyanogenMod">CyanogenMod</a> 7) มาเรื่อยๆจนถึง Android 4.0 ก็มาจบที่ CyanogenMod 7 ในที่สุดก็ได้วางเครื่องนั้นไปแล้วไปซื้อเจ้า Xiaomi Mi2s</p> <p>เครื่องต่อไปก็ Xiaomi Mi2s เนี่ยแหละ เครื่องประวัติก็ไม่ธรรมดา</p> <ul> <li>เปลี่ยนแบตเตอร์รี่ไป 2 รอบแล้ว</li> <li>เปลี่ยนหน้าจอสัมผัสไปแล้ว 2 รอบ</li> <li>ส่งซ่อมเฉพาะรูสำหรับชาร์จไฟ (Micro usb) เพราะว่าของเดิมมันหลวมจนเสียบสายชาร์จไม่ได้</li> </ul> <p>ปัญหาคือ รอบแรกที่เปลี่ยนหน้าจอสัมผัสกับร้านรับซ่อมมือถือร้านหนึ่งใน กทม. แต่พอเอามาใช้งานกลับปรากฏว่า Proximity Sensor พัง (เซนเซอร์ที่มีหน้าที่ตรวจจับการแนบหู เวลาโทรถ้าแนบหูแล้ว หน้าจอจะดับ) ใช้งานไม่ได้</p> <p>ปัญหาเวลาใช้งานโทรศัพทคือ เวลาโทรจอดับตลอดเวลา คือเซนเซอร์เข้าใจว่า มือถือแนบหูตลอดเวลา เลยทำให้วางสายหรือสัมผัสหน้าจออะไรไม่ได้จนกระทั่งอีกฝั่งต้องวางสายก่อน ซึ่งก็ลำบากเลยทีเดียว</p> <p>ตอนแรกแก้ปัญหาโดยใข้ Feature ปิดเซนเซอร์ Proximity Sensor ของแอพ Phone ของรอม MIUI ปัญหาคือ ถ้าเราโทรผ่านแอพ Line หรือ Messenger ก็ยังคงมีปัญหาเดิมอยู่ ผนวกกับมือถือเก่าละ รอมที่ใช้อยู่ เป็น MIUI 8 มันทำงานช้าลง เลยตัดสินใจเปลี่ยนเป็นรอม CyanogenMod 12.1 (Android 5.1) เลยต้องใช้ตัวช่วยอย่าง <a rel="nofollow noreferrer" href="http://repo.xposed.info/module/com.mrchandler.disableprox">Sensor Disabler</a> ซึ่งจำเป็นต้องติดตั้ง <a rel="nofollow noreferrer" href="http://repo.xposed.info/module/de.robv.android.xposed.installer">Xposed Framework</a> เพื่อที่จะปิดการทำงานของ Proximity Sensor และเครื่องนั้นจะต้อง root ด้วย</p> <h2 id="srupepnkhant-ndangnii">สรุปเป็นขั้นตอนดังนี้<a class="zola-anchor" href="#srupepnkhant-ndangnii" aria-label="Anchor link for: srupepnkhant-ndangnii" style="visibility: hidden;"></a> </h2> <p><strong>ติดตั้ง Custom ROM</strong></p> <ol> <li>ติดตั้ง Custom Recovery ในที่นี้ผมใช้ <a rel="nofollow noreferrer" href="https://twrp.me/">TWRP</a> <a rel="nofollow noreferrer" href="http://en.miui.com/thread-190608-1-1.html">ลิงค์สำหรับ Mi2s</a></li> <li>ติดตั้ง CyanogenMod 12.1 ผ่าน TWRP Recovery ซึ่งผมใช้<a rel="nofollow noreferrer" href="http://en.miui.com/thread-140138-1-1.html">ไฟล์นี้</a></li> <li>ติดตั้ง Google App โดยดาวโหลดจาก <a rel="nofollow noreferrer" href="http://opengapps.org/">OpenGapps.org</a></li> <li>ถ้ามีปัญหาไม่สามารถเปิดกล้องได้ ลองติดตั้ง<a rel="nofollow noreferrer" href="https://forum.xda-developers.com/galaxy-s3/themes-apps/17-fixed-camera-app-lib-cm-aosp-roms-t2505973">ตัวแก้</a> โดยติดตั้งผ่าน TWRP Recovery เช่นกัน</li> </ol> <p><strong>Root เครื่อง</strong></p> <ol> <li>ติดตั้ง Supersu ผ่าน TWRP Recovery โดยดาวโหลดจาก <a rel="nofollow noreferrer" href="https://download.chainfire.eu/696/supersu/">Chainfire.eu</a></li> </ol> <p><strong>ติดตั้ง Xposed Framework</strong></p> <ol> <li>ติดตั้ง Xposed Framework โดยวิธีติดตั้งดูจากเว็บ <a rel="nofollow noreferrer" href="https://forum.xda-developers.com/showthread.php?t=3034811">Xposed Offical XDA forum</a> ซึ่งสำหรับ Lollipop/Marshmallow เท่านั้น</li> </ol> <p><strong>ปิดการทำงานของ Proximity Sensor</strong></p> <ol> <li>ติดตั้ง <a rel="nofollow noreferrer" href="http://repo.xposed.info/module/com.mrchandler.disableprox">Sensor Disabler</a> ผ่านทางแอพ Xposed installer ที่ลงจากขั้นตอนที่แล้ว จากนั้น มี enable module นี้แล้วให้ Restart เครื่องหนึ่งครั้งถึงจะใช้งานได้</li> <li>เข้าแอพ Sensor Disabler จากนั้นไปเลือก Proximity Sensor จากเมนูเลือกค่าเป็น 5 นั่นคือบังคับค่าให้เซนเซอร์ตรวจว่า ไม่ได้แนบหูอยู่ตลอดเวลานั้นเอง</li> </ol> <p>ก็เสร็จสิ้นไว้เพียงเท่านี้ รายละเอียดขั้นตอนการทำงานมันเยอะ ถ้าอยากสอบถามขั้นตอนไหน ทิ้งข้อความในคอนเม้นต์ด้านล่างได้เลยครับ</p> 2016-11-21T00:00:00+00:00 2016-11-21T00:00:00+00:00 https://thadaw.com/posts/a-very-short-ubuntu-debian-packages-installation/ <h2 id="docker">Docker<a class="zola-anchor" href="#docker" aria-label="Anchor link for: docker" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://docs.docker.com/engine/installation/linux/ubuntulinux/">Install on Ubuntu</a></li> <li><a rel="nofollow noreferrer" href="https://docs.docker.com/engine/installation/linux/debian/">Install on Debian</a></li> </ul> <h2 id="google-chrome">Google Chrome<a class="zola-anchor" href="#google-chrome" aria-label="Anchor link for: google-chrome" style="visibility: hidden;"></a> </h2> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> wget<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>q</span><span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>O</span> - https://dl.google.com/linux/linux_signing_key.pub</span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> apt-key add -</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> echo <span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>deb http://dl.google.com/linux/chrome/deb/ stable main<span class="z-punctuation z-definition z-string z-end z-shell">&#39;</span></span></span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> tee /etc/apt/sources.list.d/google-chrome.list</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo apt update</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo apt install google-chrome-stable</span> </span></code></pre> <p>Reference: <a rel="nofollow noreferrer" href="https://www.google.com/linuxrepositories/">https://www.google.com/linuxrepositories/</a></p> <h2 id="visual-studio-code">Visual Studio Code<a class="zola-anchor" href="#visual-studio-code" aria-label="Anchor link for: visual-studio-code" style="visibility: hidden;"></a> </h2> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo wget<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>O</span> - https://tagplus5.github.io/vscode-ppa/ubuntu/gpg.key</span> <span class="z-keyword z-operator z-logical z-pipe z-shell">|</span> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">sudo</span></span><span class="z-meta z-function-call z-arguments z-shell"> apt-key add -</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo wget<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>O</span> /etc/apt/sources.list.d/vscode.list https://tagplus5.github.io/vscode-ppa/ubuntu/vscode.list</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo apt update</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo apt install code</span> </span></code></pre> <p>Reference: <a rel="nofollow noreferrer" href="https://github.com/tagplus5/vscode-ppa">https://github.com/tagplus5/vscode-ppa</a></p> <h2 id="zotero-standalone">Zotero Standalone<a class="zola-anchor" href="#zotero-standalone" aria-label="Anchor link for: zotero-standalone" style="visibility: hidden;"></a> </h2> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo apt install software-properties-common</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo add-apt-repository ppa:smathot/cogscinl</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo apt-get update</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo apt-get install zotero-standalone</span> </span></code></pre> 2016-11-08T00:00:00+00:00 2016-11-08T00:00:00+00:00 https://thadaw.com/posts/latex-titlesec-does-not-create-section-numbers-on-v2-10-1/ <p>I found this bug on yesterday.</p> <h2 id="the-problem">The problem<a class="zola-anchor" href="#the-problem" aria-label="Anchor link for: the-problem" style="visibility: hidden;"></a> </h2> <p>When importing <code>titlesec</code> in latex document, the latex compiler (I use <code>xelatex</code>) doesn't generate all section numbers.</p> <p>This bug have been reported on <a rel="nofollow noreferrer" href="https://bugs.launchpad.net/ubuntu/+source/texlive-extra/+bug/1574052">https://bugs.launchpad.net/ubuntu/+source/texlive-extra/+bug/1574052</a>.</p> <h2 id="the-solution">The solution<a class="zola-anchor" href="#the-solution" aria-label="Anchor link for: the-solution" style="visibility: hidden;"></a> </h2> <p>The solutions are discussed in <a rel="nofollow noreferrer" href="http://tex.stackexchange.com/questions/299969/titlesec-loss-of-section-numbering-with-the-new-update-2016-03-15">http://tex.stackexchange.com/questions/299969/titlesec-loss-of-section-numbering-with-the-new-update-2016-03-15</a>. You only upgrade the package version from <code>2.10.1</code> to <code>2.10.2</code> manually. The instruction is following below:</p> <ol> <li>Download the package for version <code>2.10.2</code> from <a rel="nofollow noreferrer" href="https://www.ctan.org/pkg/titlesec?lang=en">CTAN</a> or you can <a rel="nofollow noreferrer" href="http://mirrors.ctan.org/macros/latex/contrib/titlesec.zip">download directly</a>.</li> <li>Unzip the downloaded file</li> <li>Copy them into <code>/usr/share/texlive/texmf-dist/tex/latex/titlesec</code></li> </ol> <p>What about you? If this solution can help you, please share. Thank you</p> 2016-07-03T00:00:00+00:00 2016-07-03T00:00:00+00:00 https://thadaw.com/posts/awesome-is-a-word-of-keywords-that-all-programmers-should-know-th/ <p>สวัสดีครับ วันนี้ผมจะมานำเสนอคำๆ หนึ่งที่โปรแกรมเมอร์ทุกคนควรที่จะรู้จักไว้ ซึ่ง อยากจะบอกว่ามันมีประโยชน์มากๆ ในการเขียนโปรแกรม ผมว่าหลายๆ คนที่กำลังอ่านบทความนี้อาจจะเคยรู้จักหรือ เคยได้ยินมาบ้าง แต่สำหรับคนที่ไม่เคยได้ยินมาก่อน ลองมาทำความรู้จักกับมันดูนะครับ มันมีประโยชน์ต่อชีวิตมากๆ เลย</p> <p><img src="https://upic.me/i/6r/laptop-1035345_640.jpg" alt="Laptop" /> <em>Taken by <a rel="nofollow noreferrer" href="https://pixabay.com/en/users/parthshah000-628805/">parthshah000</a>, CC0 Public Domain License</em></p> <p>ถ้าเราลองเปิดพจนานุกรมดู เราจะพบว่า คำๆนี้ฝรั่งใช้ในความหมายของคำแสลง ที่แปลเป็นไทยได้ประมาณว่า</p> <blockquote> <p><strong>เห้ยย เจ๋งว่ะ</strong></p> <p><strong>สุดยอดดด</strong></p> <p><strong>โคตรเจ๋ง</strong></p> <p><strong>สุโค่ยยยยยย</strong></p> </blockquote> <p>อะไรประมาณนี้</p> <h3 id="aelwthaaainkhwaamhmaaykh-ngopraekrmem-rla-mankhuue-aair">แล้วถ้าในความหมายของโปรแกรมเมอร์ล่ะ มันคืออะไร?<a class="zola-anchor" href="#aelwthaaainkhwaamhmaaykh-ngopraekrmem-rla-mankhuue-aair" aria-label="Anchor link for: aelwthaaainkhwaamhmaaykh-ngopraekrmem-rla-mankhuue-aair" style="visibility: hidden;"></a> </h3> <p><em>...ถ้าคุณเป็นนักศึกษา Awesome ก็เปรียบเสมือนกับ<strong>คลังของโพยข้อสอบ</strong> ทุกวิชา ทุกคณะของมหาวิทยาลัย ทั้งประเทศ</em></p> <p><em>...ถ้าคุณทำงานแล้ว Awesome ก็เปรียบเสมือน<strong>สารบัญของห้องสมุดที่รวบรวมทุกอย่าง</strong> ที่มีประโยชน์เข้าไว้ด้วยกัน และมีการจัดหมวดหมู่ คล้ายๆ กับหนังสือในห้องสมุด</em></p> <p>แล้วมันคืออะไรล่ะ</p> <p>คำว่า Awesome ถ้าเราดูตามความหมายจาก <a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome">แหล่งรวบรวมข้อมูล Awesome ที่ใหญ่ที่สุด</a> ซึ่งถูกจัดเก็บไว้บน GitHub นั้นมี<a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome/blob/master/awesome.md">คำแถลงการณ์ของ Awesome</a> บอกไว้ว่า</p> <h3 id="awesome-kkhuue">Awesome ก็คือ<a class="zola-anchor" href="#awesome-kkhuue" aria-label="Anchor link for: awesome-kkhuue" style="visibility: hidden;"></a> </h3> <p><strong>สารบัญของรายการต่างๆที่ โคตรเจ๋ง (awesome) ซึ่งรวบรวมเป็นหมู่หมวดไว้</strong> และสิ่งที่ใส่เข้ามาใน <a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome">Awesome</a> จะต้อง awesome จริงๆ ถึงจะทำเกิด <a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome">Awesome</a> ได้</p> <p>ถ้าอ่านแล้วยังนึกภาพไม่ออก ลองเข้าไปดูที่ <a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome">Awesome</a> หรือลองเลือกรายการข้างล่างที่คุณสนใจดู แล้วคุณจะพบกับความ awesome อย่างที่เค้าว่าจริงๆ</p> <blockquote> <h2 id="table-of-contents">Table of Contents<a class="zola-anchor" href="#table-of-contents" aria-label="Anchor link for: table-of-contents" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#platforms">Platforms</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#programming-languages">Programming Languages</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#front-end-development">Front-End Development</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#back-end-development">Back-End Development</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#computer-science">Computer Science</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#big-data">Big Data</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#theory">Theory</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#books">Books</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#editors">Editors</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#gaming">Gaming</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#development-environment">Development Environment</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#entertainment">Entertainment</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#databases">Databases</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#media">Media</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#learn">Learn</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#security">Security</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#content-management-system">Content Management System</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome#miscellaneous">Miscellaneous</a></li> </ul> </blockquote> <p>นอกจากที่จะมี <a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome">Awesome</a> ที่รวบรวมทุกอย่างไว้แล้ว ผู้คนใน GitHub ต่างสร้างร่วมไม้ร่วมมือกันสร้าง Awesome ในเรื่องที่ตนสนใจ ยกตัวอย่างเช่น ผมสนใจเกี่ยวกับ <a rel="nofollow noreferrer" href="https://www.docker.com/">Docker</a> ก็มี Awesome ที่ชื่อว่า <a rel="nofollow noreferrer" href="https://github.com/veggiemonk/awesome-docker">awesome-docker</a> ที่รวบรวมสิ่งต่างๆ เกี่ยวกับ Docker ที่เหมาะสมสำหรับทั้งมือใหม่ และคนที่ต้องการต่อยอดการใช้งาน Docker</p> <h2 id="cchar-aair-yuula-ekhaa-google-aelwphimph-awesome-eruue-ngthiikhunsnaicch-ely">จะรออะไรอยู่ล่ะ! เข้า google แล้วพิมพ์ awesome + เรื่องที่คุณสนใจ เลย<a class="zola-anchor" href="#cchar-aair-yuula-ekhaa-google-aelwphimph-awesome-eruue-ngthiikhunsnaicch-ely" aria-label="Anchor link for: cchar-aair-yuula-ekhaa-google-aelwphimph-awesome-eruue-ngthiikhunsnaicch-ely" style="visibility: hidden;"></a> </h2> <blockquote> <p>ป.ล. แล้วถ้าหาไม่เจอล่ะ ชุมชน GitHub กำลังรอให้คุณสร้างอยู่ครับ</p> </blockquote> <h3 id="hruue-thaanuekaim-k-kaipthii-awesome-k-nely">หรือถ้านึกไม่ออก ก็ไปที่ <a rel="nofollow noreferrer" href="https://github.com/sindresorhus/awesome">Awesome</a> ก่อนเลย<a class="zola-anchor" href="#hruue-thaanuekaim-k-kaipthii-awesome-k-nely" aria-label="Anchor link for: hruue-thaanuekaim-k-kaipthii-awesome-k-nely" style="visibility: hidden;"></a> </h3> 2016-06-27T00:00:00+00:00 2016-06-27T00:00:00+00:00 https://thadaw.com/posts/starting-vitualbox-vm-with-headless-mode-th/ <blockquote> <p>สำหรับความสามารถนี้รองรับเฉพาะ <strong>VirtualBox รุ่น 5.0</strong> เป็นต้นไปนะครับ สามารถดูรายละเอียดเพิ่มเติมได้ที่<a rel="nofollow noreferrer" href="https://blogs.oracle.com/virtualization/entry/oracle_vm_virtualbox_5_07">บล็อกของ oracle</a> เลยครับ</p> </blockquote> <p>สวัสดีครับ วันนี้ผมจะนำเสนอวิธีการเริ่มการทำงาน virtual machine (VM) โดยไม่มี GUI ขึ้นมากินทรัพยากรของคอมเตอร์เครื่องเรา (Host Machine) โดยวิธีการเหมาะสำหรับการใช้งานแบบ remote เท่านั้น หรือก็คือ คุณจะต้องใช้ ssh เพื่อเชื่อมเข้าไปใช้งาน VM</p> <blockquote> <p>สำหรับคนที่ใช้ windows โปรแกรมที่แนะนำสำหรับการใช้ ssh คือ <a rel="nofollow noreferrer" href="http://www.putty.org/">Putty</a> ครับ</p> </blockquote> <h2 id="withiikaaraichngaandwy-gui">วิธีการใช้งานด้วย GUI<a class="zola-anchor" href="#withiikaaraichngaandwy-gui" aria-label="Anchor link for: withiikaaraichngaandwy-gui" style="visibility: hidden;"></a> </h2> <p><img src="https://thadaw.com/posts/starting-vitualbox-vm-with-headless-mode-th/2016-06-27-starting-vitualbox-vm-with-headless-mode.jpg" alt="GUI mode for starting virtualbox vm in headless mode" /></p> <h2 id="withiikaaraichphaan-command-line-cli">วิธีการใช้ผ่าน Command Line (CLI)<a class="zola-anchor" href="#withiikaaraichphaan-command-line-cli" aria-label="Anchor link for: withiikaaraichphaan-command-line-cli" style="visibility: hidden;"></a> </h2> <blockquote> <p>สำหรับคนที่ใช้ Windows ให้ใช้ path เต็มๆ ของ Virtualbox แทน หรือตั้งค่า variable environment ก็ได้ เช่น <code>"C:\Program Files\Oracle\VirtualBox\VBoxManage"</code></p> </blockquote> <ul> <li> <p>แสดงรายชื่อของ Virtual machine ที่มีอยู่ในเครื่อง</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> VBoxManage list vms</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Sandbox<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-meta z-group z-expansion z-brace z-shell"><span class="z-punctuation z-section z-expansion z-brace z-begin z-shell">{</span>754f8cac-1fff-4863-952e-ba81ebf9efc7<span class="z-punctuation z-section z-expansion z-brace z-end z-shell">}</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>md9-dev<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-meta z-group z-expansion z-brace z-shell"><span class="z-punctuation z-section z-expansion z-brace z-begin z-shell">{</span>dd6cfb08-0914-4b6f-b78a-7aa301fc8813<span class="z-punctuation z-section z-expansion z-brace z-end z-shell">}</span></span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell"><span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>default<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-meta z-group z-expansion z-brace z-shell"><span class="z-punctuation z-section z-expansion z-brace z-begin z-shell">{</span>fb0f8838-0f24-44d3-bd6f-8855ff2e4262<span class="z-punctuation z-section z-expansion z-brace z-end z-shell">}</span></span></span> </span></code></pre> </li> <li> <p>เริ่มต้นการทำงาน Virtual machine แบบทำงานเบื้องหลัง (headless mode)</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> VBoxManage startvm default<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>type</span> headless</span> </span></code></pre> </li> <li> <p>ปิดการทำงาน Virtual machine</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> VBoxManage controlvm default poweroff</span> </span></code></pre> </li> </ul> <h2 id="aanephimetim">อ่านเพิ่มเติม<a class="zola-anchor" href="#aanephimetim" aria-label="Anchor link for: aanephimetim" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="http://schier.co/blog/2013/03/13/start-virtualbox-vm-in-headless-mode.html">"Start VirtualBox VM in Headless Mode" by Gregory Schier</a></li> <li><a rel="nofollow noreferrer" href="https://www.virtualbox.org/manual/ch07.html#vboxheadless">Vbox headless - Official VirtualBox Doc</a></li> <li><a rel="nofollow noreferrer" href="https://www.virtualbox.org/manual/ch08.html#vboxmanage-startvm">vboxmanage startvm - Official VirtualBox Doc</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/windows-toolbox/blob/a1962e0e26d33f19d8c6f582c42b0c423d9bc644/vbox.bat">ตัวอย่างการนำคำสั่งการเริ่มต้น vm ของ virtualbox ไปใช้งาน</a></li> </ul> 2016-06-04T00:00:00+00:00 2016-06-04T00:00:00+00:00 https://thadaw.com/posts/script-for-creating-a-wifi-hotspot-without-install-wifi-hotspot-tools-th/ <p>โปรแกรมทางเลือกสำหรับการสร้าง WiFi Hotspot ใช้งานเองโดยไม่ต้องพึงโปรแกรมอื่นๆ จากคอมพิวเตอร์ของคุณ เช่น <a rel="nofollow noreferrer" href="http://www.connectify.me/">Connectify</a> หรือ <a rel="nofollow noreferrer" href="http://www.mhotspot.com/">mHotspot</a> เป็นต้น</p> <p>โดยทำการทดสอบบน Windows 7,8, 10 แล้วใช้งานได้</p> <h2 id="tangkhaaebuue-ngtnk-naichngaan">ตั้งค่าเบื้องต้นก่อนใช้งาน<a class="zola-anchor" href="#tangkhaaebuue-ngtnk-naichngaan" aria-label="Anchor link for: tangkhaaebuue-ngtnk-naichngaan" style="visibility: hidden;"></a> </h2> <ol> <li>คัดลอกโค๊ดข้างล่าง หรือ ดาวโหลดที่ <a rel="nofollow noreferrer" href="https://gist.github.com/mildronize/8d159d35497c56368914">Gist Github ของผม</a> ไปใส่ในไฟล์ ชื่อ <code>hotspot.bat</code></li> <li>ตรวจสอบดูว่า มี Network Adapter ที่มีชนิดเป็น <em>Microsoft Virtual WiFi Miniport Adapter</em> ใน <em>Network and Sharing Center &gt; Change Adapter Setting</em></li> </ol> <ul> <li>ถ้าไม่มีให้รัน <code>hotspot.bat</code> หนึ่งครั้ง มันจะสร้าง Adapter ตัวนั้นออกมา และปิดโปรแกรมไปก่อน แล้วก็เปลี่ยนชื่อเป็น <code>Hotspot</code></li> <li>ถ้ามีก็ให้เปลี่ยนชื่อเป็น <code>Hotspot</code> เช่นกัน</li> </ul> <blockquote> <p>ไม่เปลี่ยนชื่อเป็น Hotspot แต่ต้องไปแก้ในโค๊ด ตรงบรรทัดที่ <code>set wirelessName=Hotspot</code> ให้แก้เป็นชื่อของ adapter ที่มีชนิดเป็น <em>Microsoft Virtual WiFi Miniport Adapter</em></p> </blockquote> <ol> <li>สั่งแชร์อินเตอร์เน็ตจากสายแลน (Ethernet) ไปยัง Hotspot โดย</li> <li>คลิกขวา Ethernet Adapter ใน <em>Network and Sharing Center &gt; Change Adapter Setting</em></li> <li>เลือก Properties และไปกดที่แท็บ Sharing</li> <li>ติ๊กถูกที่ <strong>Allow other network users to connect through this computer’s Internet connection</strong></li> <li>จากนั้นเลือกชื่อของ Hotspot ที่เราตั้งไว้จากข้อ 2 ในที่นี่คือ <code>Hotspot</code></li> <li>เริ่มทำงานโดยรัน <code>hotspot.bat</code> หรือ <code>hotspot</code> หรือผ่าน command line</li> <li>ตั้งค่าชื่อ Hotspot ( <em>What is Adhoc name ?</em> )</li> <li>ใส่รหัสผ่าน ( <em>Password ?</em> )</li> </ol> <h2 id="cli">CLI<a class="zola-anchor" href="#cli" aria-label="Anchor link for: cli" style="visibility: hidden;"></a> </h2> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">hospot <span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> ตั้งค่า ชื่อ Wifi และรหัสผ่าน ใหม่</span><span class="z-comment z-line z-number-sign z-shell"> </span></span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">hospot</span></span><span class="z-meta z-function-call z-arguments z-shell"> start <span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> เปิด Hotspot</span><span class="z-comment z-line z-number-sign z-shell"> </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">hospot</span></span><span class="z-meta z-function-call z-arguments z-shell"> stop <span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> ปิด Hotspot</span><span class="z-comment z-line z-number-sign z-shell"> </span></span></span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">hospot</span></span><span class="z-meta z-function-call z-arguments z-shell"> restart <span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> ปิดแล้วเปิดใหม่อีกครั้ง</span><span class="z-comment z-line z-number-sign z-shell"> </span></span></span></code></pre> <h2 id="okhdkaaropraekrmepid-hotspot-bn-windows">โค๊ดการโปรแกรมเปิด Hotspot บน Windows<a class="zola-anchor" href="#okhdkaaropraekrmepid-hotspot-bn-windows" aria-label="Anchor link for: okhdkaaropraekrmepid-hotspot-bn-windows" style="visibility: hidden;"></a> </h2> <p><a rel="nofollow noreferrer" href="https://gist.github.com/mildronize/8d159d35497c56368914">https://gist.github.com/mildronize/8d159d35497c56368914</a></p> <pre data-lang="bat" class="language-bat z-code"><code class="language-bat" data-lang="bat"><span class="z-source z-dosbatch"><span class="z-keyword z-operator z-at z-dosbatch">@</span><span class="z-keyword z-command z-dosbatch">ECHO</span> OFF </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">echo</span> Hotspot </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">echo</span> . </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">set</span> <span class="z-variable z-other z-readwrite z-dosbatch">wirelessName</span><span class="z-keyword z-operator z-assignment z-dosbatch">=</span><span class="z-string z-unquoted z-dosbatch">Hotspot</span> </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"><span class="z-keyword z-control z-conditional z-dosbatch">IF</span> <span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span><span class="z-variable z-parameter z-dosbatch"><span class="z-punctuation z-definition z-variable z-dosbatch">%</span>1</span><span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span><span class="z-keyword z-operator z-comparison z-dosbatch">==</span><span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span>start<span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span> <span class="z-keyword z-control z-statement z-dosbatch">goto</span> <span class="z-meta z-function-call z-dosbatch"><span class="z-variable z-function z-dosbatch">START</span></span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-control z-conditional z-dosbatch">IF</span> <span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span><span class="z-variable z-parameter z-dosbatch"><span class="z-punctuation z-definition z-variable z-dosbatch">%</span>1</span><span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span><span class="z-keyword z-operator z-comparison z-dosbatch">==</span><span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span>stop<span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span> <span class="z-keyword z-control z-statement z-dosbatch">goto</span> <span class="z-meta z-function-call z-dosbatch"><span class="z-variable z-function z-dosbatch">STOP</span></span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-control z-conditional z-dosbatch">IF</span> <span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span><span class="z-variable z-parameter z-dosbatch"><span class="z-punctuation z-definition z-variable z-dosbatch">%</span>1</span><span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span><span class="z-keyword z-operator z-comparison z-dosbatch">==</span><span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span>restart<span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span> <span class="z-keyword z-control z-statement z-dosbatch">goto</span> <span class="z-meta z-function-call z-dosbatch"><span class="z-variable z-function z-dosbatch">RESTART</span></span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-control z-conditional z-dosbatch">IF</span> <span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span><span class="z-variable z-parameter z-dosbatch"><span class="z-punctuation z-definition z-variable z-dosbatch">%</span>1</span><span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span><span class="z-keyword z-operator z-comparison z-dosbatch">==</span><span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span>stat<span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span> <span class="z-keyword z-control z-statement z-dosbatch">goto</span> <span class="z-meta z-function-call z-dosbatch"><span class="z-variable z-function z-dosbatch">STAT</span></span> </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">set</span> /p <span class="z-meta z-prompt z-set z-dosbatch"><span class="z-variable z-other z-readwrite z-dosbatch">name</span><span class="z-keyword z-operator z-assignment z-dosbatch">=</span><span class="z-string z-unquoted z-dosbatch">What is Adhoc name ? (Press S to stop</span></span>): </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"><span class="z-keyword z-control z-conditional z-dosbatch">IF</span> <span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span><span class="z-variable z-other z-readwrite z-dosbatch"><span class="z-punctuation z-definition z-variable z-begin z-dosbatch">%</span>name<span class="z-punctuation z-definition z-variable z-end z-dosbatch">%</span></span><span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span><span class="z-keyword z-operator z-comparison z-dosbatch">==</span><span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span>S<span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span> <span class="z-keyword z-control z-statement z-dosbatch">goto</span> <span class="z-meta z-function-call z-dosbatch"><span class="z-variable z-function z-dosbatch">STOP</span></span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-control z-conditional z-dosbatch">IF</span> <span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span><span class="z-variable z-other z-readwrite z-dosbatch"><span class="z-punctuation z-definition z-variable z-begin z-dosbatch">%</span>name<span class="z-punctuation z-definition z-variable z-end z-dosbatch">%</span></span><span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span><span class="z-keyword z-operator z-comparison z-dosbatch">==</span><span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span><span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span> <span class="z-keyword z-control z-statement z-dosbatch">goto</span> <span class="z-meta z-function-call z-dosbatch"><span class="z-variable z-function z-dosbatch">START</span></span> </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"><span class="z-punctuation z-separator z-dosbatch">:</span><span class="z-entity z-name z-label z-dosbatch">SET</span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">echo</span> Start adhoc! </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">set</span> /p <span class="z-meta z-prompt z-set z-dosbatch"><span class="z-variable z-other z-readwrite z-dosbatch">pass</span><span class="z-keyword z-operator z-assignment z-dosbatch">=</span><span class="z-string z-unquoted z-dosbatch">Password ? :</span></span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">netsh</span> wlan <span class="z-keyword z-command z-dosbatch">set</span> <span class="z-variable z-other z-readwrite z-dosbatch">hostednetwork mode</span><span class="z-keyword z-operator z-assignment z-dosbatch">=</span><span class="z-string z-unquoted z-dosbatch">allow ssid=</span><span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span><span class="z-variable z-other z-readwrite z-dosbatch"><span class="z-punctuation z-definition z-variable z-begin z-dosbatch">%</span>name<span class="z-punctuation z-definition z-variable z-end z-dosbatch">%</span></span><span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span><span class="z-string z-unquoted z-dosbatch"> key=<span class="z-variable z-other z-readwrite z-dosbatch"><span class="z-punctuation z-definition z-variable z-begin z-dosbatch">%</span>pass<span class="z-punctuation z-definition z-variable z-end z-dosbatch">%</span></span></span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">netsh</span> wlan <span class="z-keyword z-command z-dosbatch">start</span> hostednetwork </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">netsh</span> interface ip <span class="z-keyword z-command z-dosbatch">set</span> <span class="z-variable z-other z-readwrite z-dosbatch">address name</span><span class="z-keyword z-operator z-assignment z-dosbatch">=</span><span class="z-string z-quoted z-double z-dosbatch"><span class="z-punctuation z-definition z-string z-begin z-dosbatch">&quot;</span><span class="z-variable z-other z-readwrite z-dosbatch"><span class="z-punctuation z-definition z-variable z-begin z-dosbatch">%</span>wirelessName<span class="z-punctuation z-definition z-variable z-end z-dosbatch">%</span></span><span class="z-punctuation z-definition z-string z-end z-dosbatch">&quot;</span></span><span class="z-string z-unquoted z-dosbatch"> source=dhcp</span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-control z-statement z-dosbatch">goto</span> <span class="z-meta z-function-call z-dosbatch"><span class="z-variable z-function z-dosbatch">EXIT</span></span> </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"><span class="z-punctuation z-separator z-dosbatch">:</span><span class="z-entity z-name z-label z-dosbatch">START</span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">echo</span> Starting hotspot! </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">netsh</span> wlan <span class="z-keyword z-command z-dosbatch">start</span> hostednetwork </span><span class="z-source z-dosbatch"><span class="z-keyword z-control z-statement z-dosbatch">goto</span> <span class="z-meta z-function-call z-dosbatch"><span class="z-variable z-function z-dosbatch">EXIT</span></span> </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"><span class="z-punctuation z-separator z-dosbatch">:</span><span class="z-entity z-name z-label z-dosbatch">STOP</span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">echo</span> Stopping hotspot! </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">netsh</span> wlan stop hostednetwork </span><span class="z-source z-dosbatch"><span class="z-keyword z-control z-statement z-dosbatch">goto</span> <span class="z-meta z-function-call z-dosbatch"><span class="z-variable z-function z-dosbatch">EXIT</span></span> </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"><span class="z-punctuation z-separator z-dosbatch">:</span><span class="z-entity z-name z-label z-dosbatch">RESTART</span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">echo</span> Restarting hotspot! </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">netsh</span> wlan stop hostednetwork </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">netsh</span> wlan <span class="z-keyword z-command z-dosbatch">start</span> hostednetwork </span><span class="z-source z-dosbatch"><span class="z-keyword z-control z-statement z-dosbatch">goto</span> <span class="z-meta z-function-call z-dosbatch"><span class="z-variable z-function z-dosbatch">EXIT</span></span> </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"><span class="z-punctuation z-separator z-dosbatch">:</span><span class="z-entity z-name z-label z-dosbatch">STAT</span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">netsh</span> wlan show hostednetwork </span><span class="z-source z-dosbatch"><span class="z-keyword z-control z-statement z-dosbatch">goto</span> <span class="z-meta z-function-call z-dosbatch"><span class="z-variable z-function z-dosbatch">EXIT</span></span> </span><span class="z-source z-dosbatch"> </span><span class="z-source z-dosbatch"><span class="z-punctuation z-separator z-dosbatch">:</span><span class="z-entity z-name z-label z-dosbatch">EXIT</span> </span><span class="z-source z-dosbatch"><span class="z-keyword z-command z-dosbatch">pause</span> </span></code></pre> 2016-03-18T00:00:00+00:00 2016-03-18T00:00:00+00:00 https://thadaw.com/posts/how-to-install-hearthstone-heroes-of-warcraft-on-debian-th/ <p>ผมได้โอกาสลองเล่น Hearthstone: Heroes of Warcraft ดู ปรากฏว่าสนุกมากๆ เลยครับ ทำออกมาดีเลยที่เดียว แถมมีทุก platform เลย ยกเว้น Linux แอบน้อยใจนิดๆ เลยได้ลองหาวิธีติดตั้งดู ซึ่งก็ไม่ได้ยากอย่างที่คิด ถ้าใครเป็นมือใหม่ลองทำตามขั้นตอนนี้เลยนะครับ</p> <blockquote> <p>Note: ผมทดสอบบน Debian sid สถาปัตยกรรมแบบ amd64 นะครับ ดังนั้นปัญหาอาจจะไม่เหมือนซะทีเดียว แต่ก็พอนำมาอ้างอิงได้ครับ</p> </blockquote> <h2 id="khant-n">ขั้นตอน<a class="zola-anchor" href="#khant-n" aria-label="Anchor link for: khant-n" style="visibility: hidden;"></a> </h2> <ol> <li> <p>ทำเพิ่มสถาปัตยกรรมของคลังเก็บโค๊ด (repository) สำหรับการติดตั้งแพคเก็ต 32 bit หรือ i386 แล้วสั่งอัพเดทรายการของคลังเก็บโค๊ด (repository) เนื่องจากการติดตั้ง Hearthstone จำเป็นใช้โค๊ดบางอย่างแบบ i386 ดังนี้</p> <blockquote> <p>อ่านก่อน: ถ้าใครที่ใช้ Debian 32 bit (i386) อยู่แล้วให้ข้ามขั้นตอนนี้ไปได้เลยครับ ขั้นตอนนี้สำหรับ Debian 64 bit(amd64) นะครับ</p> </blockquote> <pre class="z-code"><code><span class="z-text z-plain"># dpkg --add-architecture i386 </span><span class="z-text z-plain"># aptitude update </span></code></pre> </li> <li> <p>อันดับแรก ติดตั้ง <code>wine</code> ซึ่งเป็นโปรแกรมบน Linux สำหรับทำให้โปรแกรมบน Windows สามารถทำงานบน Linux ได้ครับ</p> <pre class="z-code"><code><span class="z-text z-plain"># aptitude install wine </span></code></pre> </li> <li> <p>ทำการสำรองข้อมูลของ <code>wine</code> ก่อน ถ้ามี</p> <pre class="z-code"><code><span class="z-text z-plain">$ mv ~/.wine ~/.wine-old </span></code></pre> </li> <li> <p>สร้างสภาพแวดล้อมแบบ 32 bit หรือ i386 โดย</p> <pre class="z-code"><code><span class="z-text z-plain">$ env WINEARCH=win32 WINEPREFIX=$HOME/.wine wineboot -u </span></code></pre> </li> <li> <p>กำหนดไลบรารี่ที่จำเป็นเพิ่มเติม โดยมี <code>dbghelp</code> และ <code>msvcp100</code> โดยการ</p> <ol> <li>สั่งให้คำสั่ง <code>winecfg</code> เพื่อทำการตั้งค่า</li> <li>ในแท็บของไลบรารี่ (Libraries) นั้นให้กด สร้าง <code>dbghelp</code> แล้วทำการแก้ไขเป็น <code>disabled</code></li> <li>ในแท็บของไลบรารี่ (Libraries) นั้นให้กด สร้าง <code>msvcp100</code> แล้วทำการแก้ไขเป็น <code>native, then builtin</code></li> <li><strong>สุดท้ายต้องมั่นใจว่า</strong> ตั้งค่าสภาพแวดล้อมเป็น <code>Windows XP</code> แล้ว ไม่อย่างนั้น จะเจออาการจอขาวเวลาเข้าเกม</li> </ol> </li> <li> <p>ดาวโหลดจากหน้าเว็บได้<a rel="nofollow noreferrer" href="http://eu.battle.net/hearthstone/en/">ที่นี่</a></p> </li> <li> <p>จากนั้นให้กดติดตั้งเกม hearthstone</p> </li> <li> <p>สุดท้ายขอให้สนุกกับการเล่นเกม Hearthstone นะครับ</p> </li> </ol> <h2 id="aehlngkh-muulephimetim-aela-aang-ing">แหล่งข้อมูลเพิ่มเติม และอ้างอิง<a class="zola-anchor" href="#aehlngkh-muulephimetim-aela-aang-ing" aria-label="Anchor link for: aehlngkh-muulephimetim-aela-aang-ing" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://www.youtube.com/watch?v=WZyEu2OrgzU">ขั้นตอนการติดตั้งแบบวิดิโอผ่าน Youtube เป็นภาษาอังกฤษ</a></li> <li><a rel="nofollow noreferrer" href="https://appdb.winehq.org/objectManager.php?sClass=version&amp;iId=30038">ผลการทดสอบของผู้เล่นคนอื่นๆ โดยติดตั้ง Hearthstone ผ่าน wine รวมถึงวิธีการแก้ปัญหา เวลาเจอบัคต่างๆ</a></li> </ul> 2016-03-05T00:00:00+00:00 2016-03-05T00:00:00+00:00 https://thadaw.com/posts/quickly-use-thai-for-xelatex-th/ <p>เนื่องจากผมได้สืบค้นการพิมพ์ไทย ปรากฎว่าหลายๆ แหล่งข้อมูลยังใช้งานยากอยู่ จึงนำมาประยุกต์ เพื่อให้สามารถพิมพ์ได้โดยเร็ว โดยที่ไม่ต้องกระทบส่วนอื่นๆ ของไฟล์ <code>.tex</code> ครับ</p> <blockquote> <p>อ่านก่อน: วิธีการนี้เหมาะสำหรับต้องการพิมพ์ภาษาไทยเป็นภาษารอง จากภาษาอังกฤษ</p> </blockquote> <h2 id="taw-yaangaifl-tex">ตัวอย่างไฟล์ .tex<a class="zola-anchor" href="#taw-yaangaifl-tex" aria-label="Anchor link for: taw-yaangaifl-tex" style="visibility: hidden;"></a> </h2> <pre data-lang="latex" class="language-latex z-code"><code class="language-latex" data-lang="latex"><span class="z-text z-tex z-latex"><span class="z-meta z-preamble z-documentclass z-latex"><span class="z-keyword z-control z-preamble z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>documentclass</span><span class="z-meta z-group z-bracket z-latex"><span class="z-punctuation z-definition z-group z-bracket z-begin z-latex">[</span>a4paper<span class="z-punctuation z-definition z-group z-bracket z-end z-latex">]</span></span><span class="z-meta z-preamble z-documentclass z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span></span></span><span class="z-meta z-preamble z-documentclass z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-support z-class z-latex">a</span><span class="z-support z-class z-latex">r</span><span class="z-support z-class z-latex">t</span><span class="z-support z-class z-latex">i</span><span class="z-support z-class z-latex">c</span><span class="z-support z-class z-latex">l</span><span class="z-support z-class z-latex">e</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span></span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-keyword z-control z-preamble z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>usepackage</span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span></span></span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-support z-class z-latex">fontspec</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span></span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-keyword z-control z-preamble z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>usepackage</span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span></span></span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-support z-class z-latex">xunicode</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span></span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-keyword z-control z-preamble z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>usepackage</span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span></span></span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-support z-class z-latex">xltxtra</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span></span> </span><span class="z-text z-tex z-latex"><span class="z-support z-function z-general z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>XeTeXlinebreaklocale</span> “th_TH” <span class="z-comment z-line z-percentage z-tex">% สำหรับตัดคำภาษาไทย </span></span><span class="z-text z-tex z-latex"> </span><span class="z-text z-tex z-latex"><span class="z-support z-function z-general z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>newenvironment</span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span>thai<span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span> </span></span><span class="z-text z-tex z-latex"><span class="z-meta z-group z-brace z-latex"> <span class="z-meta z-function z-newcommand z-latex"><span class="z-support z-function z-newcommand z-latex"><span class="z-storage z-modifier z-newcommand z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>renewcommand</span></span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-support z-function z-latex"><span class="z-entity z-name z-newcommand z-latex">\baselinestretch</span></span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span>1.2<span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span> </span></span><span class="z-text z-tex z-latex"><span class="z-meta z-group z-brace z-latex"> <span class="z-support z-function z-general z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>fontspec</span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span>TH Sarabun New<span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span>[Scale=1.23] </span></span><span class="z-text z-tex z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-support z-function z-general z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>par</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span> </span><span class="z-text z-tex z-latex"> </span><span class="z-text z-tex z-latex"><span class="z-support z-function z-begin z-latex"><span class="z-keyword z-control z-flow z-begin z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>begin</span></span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-variable z-parameter z-function z-latex">document</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span> </span><span class="z-text z-tex z-latex"><span class="z-support z-function z-general z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>noindent</span> </span><span class="z-text z-tex z-latex"> </span><span class="z-text z-tex z-latex"><span class="z-support z-function z-begin z-latex"><span class="z-keyword z-control z-flow z-begin z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>begin</span></span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-variable z-parameter z-function z-latex">thai</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span> </span><span class="z-text z-tex z-latex"> ป้ากะปู่ กู้อีจู้ มันคืออะไรที่วรรคยุคเยอะแยะเต็มไปหมดเลย ป้ากะปู่ กู้อีจู้ มันคืออะไรที่วรรคยุคเยอะแยะเต็มไปหมดเลย ป้ากะปู่ กู้อีจู้ มันคืออะไรที่วรรคยุคเยอะแยะเต็มไปหมดเลย ป้ากะปู่ กู้อีจู้ มันคืออะไรที่วรรคยุคเยอะแยะเต็มไปหมดเลย<span class="z-constant z-character z-newline z-latex">\\</span> </span><span class="z-text z-tex z-latex"><span class="z-support z-function z-end z-latex"><span class="z-keyword z-control z-flow z-end z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>end</span></span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-variable z-parameter z-function z-latex">thai</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span> </span><span class="z-text z-tex z-latex"> </span><span class="z-text z-tex z-latex"><span class="z-support z-function z-general z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>noindent</span> The quick brown fox jumps over the lazy dog<span class="z-constant z-character z-newline z-latex">\\</span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-function z-textbf z-latex"><span class="z-support z-function z-textbf z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>textbf</span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span><span class="z-meta z-function z-textbf z-latex"><span class="z-markup z-bold z-textbf z-latex">The quick brown fox jumps over the lazy dog</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-constant z-character z-newline z-latex">\\</span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-function z-textit z-latex"><span class="z-support z-function z-textit z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>textit</span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span><span class="z-meta z-function z-textit z-latex"><span class="z-markup z-italic z-textit z-latex">The quick brown fox jumps over the lazy dog</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-constant z-character z-newline z-latex">\\</span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-function z-textsl z-latex"><span class="z-support z-function z-textsl z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>textsl</span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span><span class="z-meta z-function z-textsl z-latex"><span class="z-markup z-italic z-textsl z-latex">The quick brown fox jumps over the lazy dog</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-constant z-character z-newline z-latex">\\</span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-function z-textbf z-latex"><span class="z-support z-function z-textbf z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>textbf</span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span><span class="z-meta z-function z-textbf z-latex"><span class="z-markup z-bold z-textbf z-latex"><span class="z-meta z-function z-textit z-latex"><span class="z-support z-function z-textit z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>textit</span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span><span class="z-meta z-function z-textit z-latex"><span class="z-markup z-italic z-textit z-latex">The quick brown fox jumps over the lazy dog</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span></span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-constant z-character z-newline z-latex">\\</span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-function z-texttt z-latex"><span class="z-support z-function z-texttt z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>texttt</span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span><span class="z-meta z-function z-texttt z-latex"><span class="z-markup z-raw z-texttt z-latex">The quick brown fox jumps over the lazy dog</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-constant z-character z-newline z-latex">\\</span> </span><span class="z-text z-tex z-latex"> </span><span class="z-text z-tex z-latex"><span class="z-support z-function z-end z-latex"><span class="z-keyword z-control z-flow z-end z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>end</span></span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-variable z-parameter z-function z-latex">document</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span> </span></code></pre> <blockquote> <p>คำเตือน: ในตัวอย่างไฟล์ .tex ข้างบนถูกทดสอบบน XeLatex จาก MikTek บน Windows ถ้าทำงานบนระบบอื่นๆ อาจจะมีปัญหาได้</p> </blockquote> <p>เมื่อแปลงโดยใช้ <code>XeLaTeX</code> จะได้ผลลัพธ์แบบนี้</p> <p><img src="https://thadaw.com/posts/quickly-use-thai-for-xelatex-th/2016-03-05-quickly-use-thai-for-xelatex-th.png" alt="result of xelatex in PDF" /></p> <h2 id="withiitangkhaaaihsaamaarthphimphphaasaaaithyaid">วิธีตั้งค่าให้สามารถพิมพ์ภาษาไทยได้<a class="zola-anchor" href="#withiitangkhaaaihsaamaarthphimphphaasaaaithyaid" aria-label="Anchor link for: withiitangkhaaaihsaamaarthphimphphaasaaaithyaid" style="visibility: hidden;"></a> </h2> <p>เราจะใช้ฟอนต์ <code>TH Sarabun New</code> สำหรับเป็นตัวอย่าง และต้องติดตั้งฟอนต์ไว้ในเครื่องแล้ว</p> <ol> <li> <p>แทรก packages ที่จำเป็น รวมถึงการตั้งค่าการตัดคำภาษาไทย</p> <pre data-lang="latex" class="language-latex z-code"><code class="language-latex" data-lang="latex"><span class="z-text z-tex z-latex"><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-keyword z-control z-preamble z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>usepackage</span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span></span></span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-support z-class z-latex">fontspec</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span></span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-keyword z-control z-preamble z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>usepackage</span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span></span></span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-support z-class z-latex">xunicode</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span></span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-keyword z-control z-preamble z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>usepackage</span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span></span></span></span><span class="z-meta z-preamble z-usepackage z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-support z-class z-latex">xltxtra</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span></span> </span><span class="z-text z-tex z-latex"><span class="z-support z-function z-general z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>XeTeXlinebreaklocale</span> “th_TH” <span class="z-comment z-line z-percentage z-tex">% สำหรับตัดคำภาษาไทย </span></span></code></pre> </li> <li> <p>กำหนดสภาพแวดล้อมใหม่(<code>\newenvironment</code>) สำหรับพิมพ์ภาษาไทยดังนี้</p> <pre data-lang="latex" class="language-latex z-code"><code class="language-latex" data-lang="latex"><span class="z-text z-tex z-latex"><span class="z-support z-function z-general z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>newenvironment</span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span>thai<span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span> </span></span><span class="z-text z-tex z-latex"><span class="z-meta z-group z-brace z-latex"> <span class="z-meta z-function z-newcommand z-latex"><span class="z-support z-function z-newcommand z-latex"><span class="z-storage z-modifier z-newcommand z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>renewcommand</span></span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-support z-function z-latex"><span class="z-entity z-name z-newcommand z-latex">\baselinestretch</span></span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span>1.2<span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span> <span class="z-comment z-line z-percentage z-tex">% กำหนดขนาดบรรทัด เป็น 1.2 </span></span></span><span class="z-text z-tex z-latex"><span class="z-meta z-group z-brace z-latex"> <span class="z-support z-function z-general z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>fontspec</span><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span>TH Sarabun New<span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span>[Scale=1.23] <span class="z-comment z-line z-percentage z-tex">% ขยายตัวอกษร เป็น 1.23 เท่า </span></span></span><span class="z-text z-tex z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span> </span><span class="z-text z-tex z-latex"><span class="z-meta z-group z-brace z-latex"><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-support z-function z-general z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>par</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span></span> </span></code></pre> </li> </ol> <h2 id="kaaraichngaan">การใช้งาน<a class="zola-anchor" href="#kaaraichngaan" aria-label="Anchor link for: kaaraichngaan" style="visibility: hidden;"></a> </h2> <pre data-lang="latex" class="language-latex z-code"><code class="language-latex" data-lang="latex"><span class="z-text z-tex z-latex"><span class="z-support z-function z-begin z-latex"><span class="z-keyword z-control z-flow z-begin z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>begin</span></span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-variable z-parameter z-function z-latex">thai</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span> </span><span class="z-text z-tex z-latex">ใส่ข้อความภาษาไทยในนี้ </span><span class="z-text z-tex z-latex"><span class="z-support z-function z-end z-latex"><span class="z-keyword z-control z-flow z-end z-latex"><span class="z-punctuation z-definition z-backslash z-latex">\</span>end</span></span><span class="z-punctuation z-definition z-group z-brace z-begin z-latex">{</span><span class="z-variable z-parameter z-function z-latex">thai</span><span class="z-punctuation z-definition z-group z-brace z-end z-latex">}</span> </span></code></pre> <h2 id="useful-resources">Useful Resources<a class="zola-anchor" href="#useful-resources" aria-label="Anchor link for: useful-resources" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://thailatex.wordpress.com/miktex-27-xetex-with-thai/">การใช้งานภาษาไทยโดยใช้ XeLaTeX</a></li> <li><a rel="nofollow noreferrer" href="http://www.ie.eng.chula.ac.th/~pramual/books/XeTeX/">คู่มือการใช้งาน XeLaTeX ฉบับภาษาไทย โดย ดร.ประมวล สุธีจารุวัฒน </a></li> <li><a rel="nofollow noreferrer" href="https://www.sharelatex.com/learn/Environments">Tutorial for declaring a new enviroment by sharelatex</a></li> </ul> 2016-02-27T00:00:00+00:00 2016-02-27T00:00:00+00:00 https://thadaw.com/posts/why-does-not-see-folder-files-of-mounted-volume-on-docker-from-windows-host-th/ <h2 id="ekrinnam-saknid">เกริ่นนำ สักนิด...<a class="zola-anchor" href="#ekrinnam-saknid" aria-label="Anchor link for: ekrinnam-saknid" style="visibility: hidden;"></a> </h2> <p>ก่อนอ่านบทความนี้น่าจะมีความรู้พื้นฐานเรื่อง <code>Docker</code> และ <code>Docker Machine</code> มาก่อน</p> <p>สืบเนื่องจาก Docker ที่รันอยู่บน Windows นั้นทำงานอยู่ใน Linux VM ไม่ได้ทำงานบน Windows ตรงๆ</p> <p>จึงการ mount folder (หรือ ในฝั่งของ Docker เค้าเรียกว่า Volume) นั้น Mount ได้อย่างมีข้อจำกัด</p> <blockquote> <p>Note: สามารถอ่านแนวคิดของ Docker เพิ่มเติมได้ที่เว็บของ Docker เองในหัวข้อ <a rel="nofollow noreferrer" href="https://docs.docker.com/engine/installation/windows/#learn-the-key-concepts-before-installing">"Learn the key concepts before installing"</a></p> </blockquote> <h2 id="t-b">ตอบ<a class="zola-anchor" href="#t-b" aria-label="Anchor link for: t-b" style="visibility: hidden;"></a> </h2> <p>เกิดจาก VM ที่รัน docker อยู่นั้น ทำการ shared folder ไว้แค่ path ของ <code>C:\Users</code> เท่านั้น</p> <p>ทำให้ ไม่สามารถ mount path อื่นๆ ได้ เช่น <code>docker run -v "other/path:"docker/container/path"</code></p> <p>โดยค่าเริ่มต้น VM ที่รัน Docker อยู่นั้น ทำกาารการ share folder ไว้ดังนี้ กำหนดให้</p> <pre class="z-code"><code><span class="z-text z-plain">Folder Path: C:\Users </span><span class="z-text z-plain">Folder Name: c/Users </span></code></pre> <p>ดังรูป <img src="https://thadaw.com/posts/why-does-not-see-folder-files-of-mounted-volume-on-docker-from-windows-host-th/2016-02-27-why-does-not-see-folder-files-of-mounted-volume-on-docker-from-windows-host.png" alt="this figure show default of mounting path of docker vm on windows" /></p> <p><strong>สรุปคำสั่ง Docker โดยทำการ mount volume</strong></p> <pre class="z-code"><code><span class="z-text z-plain">docker run --rm -it -v &quot;//[Folder Name]/your/folder:/docker/container/path&quot; IMAGE_NAME </span></code></pre> <h2 id="aelweraasaamaarth-mount-aipyang-path-uuen-aidmay">แล้วเราสามารถ Mount ไปยัง path อื่นๆ ได้มั้ย<a class="zola-anchor" href="#aelweraasaamaarth-mount-aipyang-path-uuen-aidmay" aria-label="Anchor link for: aelweraasaamaarth-mount-aipyang-path-uuen-aidmay" style="visibility: hidden;"></a> </h2> <p>คิดว่า น่าจะได้ครับ ยังไม่เคยลอง ลองอ่านบทความเพิ่มเติมดู</p> <ul> <li><a rel="nofollow noreferrer" href="http://stackoverflow.com/questions/30864466/whats-the-best-way-to-share-files-from-windows-to-boot2docker-vm">http://stackoverflow.com/questions/30864466/whats-the-best-way-to-share-files-from-windows-to-boot2docker-vm</a></li> <li><a rel="nofollow noreferrer" href="http://www.incrediblemolk.com/sharing-a-windows-folder-with-the-boot2docker-vm">http://www.incrediblemolk.com/sharing-a-windows-folder-with-the-boot2docker-vm</a></li> </ul> <h2 id="aanephimetim">อ่านเพิ่มเติม<a class="zola-anchor" href="#aanephimetim" aria-label="Anchor link for: aanephimetim" style="visibility: hidden;"></a> </h2> <ul> <li>Issue on Github: <a rel="nofollow noreferrer" href="https://github.com/docker/docker/issues/18419">"unable to see folder files in volume mounted from windows host"</a></li> </ul> 2016-02-06T00:00:00+00:00 2016-02-06T00:00:00+00:00 https://thadaw.com/posts/guideline-for-upgrading-jekyll-from-2-x-to-3-x/ <blockquote> <p>Note: <strong>This guideline is not suitable for default engine of GitHub (Jekyll)</strong>. Because it doesn't allow to install any plugin. On the other hand, we can't use Jekyll 2 plugin. It must uses in Jekyll 3 way.</p> </blockquote> <p>If you are a Jekyll user. You may be heard some news about announcement Jekyll 3. Then, <a rel="nofollow noreferrer" href="https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-0">GitHub announced to use the Jekyll 3</a>. So, there are many changes for Jekyll 3. It describes in the <a rel="nofollow noreferrer" href="http://jekyllrb.com/docs/upgrading/2-to-3/">Jekyll Official page</a>.</p> <h2 id="notices">Notices<a class="zola-anchor" href="#notices" aria-label="Anchor link for: notices" style="visibility: hidden;"></a> </h2> <ul> <li>This article doesn't directly use to upgrade your Jekyll site, but it has some useful guidelines for upgrading by yourself.</li> <li>This article is following my site upgrading. You can see all changes in my commits (<a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/c6adf73f931e265fb0eb715c0edccf93782bbeab">1</a>, <a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/820fd27ae001f2280889480c650e086ef5f31f2a">2</a>, <a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/61e2bb7446d241de040d3e0d2cdfaef7cfdb9a8d">3</a>, <a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/34556c1fd5c4e9f12a86f762dd4d1654ebbcdf63">4</a>).</li> </ul> <h2 id="here-is-some-instructions">Here is some instructions<a class="zola-anchor" href="#here-is-some-instructions" aria-label="Anchor link for: here-is-some-instructions" style="visibility: hidden;"></a> </h2> <ul> <li> <p>If you uses relative permalinks. It looks like <code>-relative_permalinks: true</code> in <code>config.yml</code>. <em>Delete it!</em>. Because it was removed from Jekyll 3.</p> </li> <li> <p>Some default plugins of Jekyll 2 (dependencies) are removed out on Jekyll 3. If you want use them. You just add import some Jekyll 2 plugins manually. I used my Jekyll site as a case study.</p> <p>Add <code>gems</code> and following a list of plugin name what you want in yaml format.</p> <pre class="z-code"><code><span class="z-text z-plain">gems: [jekyll-paginate, jekyll-gist, redcarpet] </span></code></pre> <p>You can find more removed plugin lists of jekyll 2.x below:</p> <blockquote> <ul> <li>jekyll-paginate – Jekyll's pagination solution from days past</li> <li>jekyll-coffeescript – processing of CoffeeScript</li> <li>jekyll-gist – the <code>gist</code> Liquid tag</li> <li>pygments.rb – the Pygments highlighter</li> <li>redcarpet – the Markdown processor</li> <li>toml – an alternative to YAML for configuration files</li> <li>classifier-reborn – for <code>site.related_posts</code></li> </ul> </blockquote> <blockquote> <p>From <a rel="nofollow noreferrer" href="http://jekyllrb.com/docs/upgrading/2-to-3/#dropped-dependencies">Jekyll site</a></p> </blockquote> </li> <li> <p>Jekyll 3 has been changed syntax highlighter to <a rel="nofollow noreferrer" href="http://kramdown.gettalong.org/">kramdown</a>. I'm using <code>redcarpet</code> in my site because of I don't want to change any markdown files to support <code>kramdown</code>.</p> </li> <li> <p>In Jekyll 3, It doesn't automatically add a trailing slash (<code>/</code>) of permalink (URL).</p> <ul> <li> <p>If you have custom permalink pages or posts, you should fix all of custom permalink posts and pages. By adding a slash (<code>/</code>) at the end of your custom permalinks. (You can see <a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/820fd27ae001f2280889480c650e086ef5f31f2a">my changes</a>) For example:</p> <p><code>permalink: notes/vim</code> change to <code>permalink: notes/vim/</code></p> </li> <li> <p>And, you should fix a custom permalink in <code>_config.yml</code> too. You can see in <a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/61e2bb7446d241de040d3e0d2cdfaef7cfdb9a8d">my changes</a>.</p> <p><code>permalink: /:categories/:title</code> change to <code>permalink: /:categories/:title/</code></p> </li> </ul> </li> </ul> <h2 id="lastly">Lastly<a class="zola-anchor" href="#lastly" aria-label="Anchor link for: lastly" style="visibility: hidden;"></a> </h2> <p>Here is a part of <code>_config.yml</code> which is changed in Jekyll 3.</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">markdown</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">redcarpet</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">gems</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-meta z-flow-sequence z-yaml"><span class="z-punctuation z-definition z-sequence z-begin z-yaml">[</span><span class="z-string z-unquoted z-plain z-in z-yaml">jekyll-paginate</span><span class="z-punctuation z-separator z-sequence z-yaml">,</span> <span class="z-string z-unquoted z-plain z-in z-yaml">jekyll-gist</span><span class="z-punctuation z-separator z-sequence z-yaml">,</span> <span class="z-string z-unquoted z-plain z-in z-yaml">redcarpet</span><span class="z-punctuation z-definition z-sequence z-end z-yaml">]</span></span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">permalink</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">/:categories/:title/</span> </span></code></pre> <p>Thanks for reading. If you have some questions or suggestions, please comment below.</p> <p>Bye.</p> <h2 id="read-more">Read more<a class="zola-anchor" href="#read-more" aria-label="Anchor link for: read-more" style="visibility: hidden;"></a> </h2> <ul> <li>"<a rel="nofollow noreferrer" href="http://jekyllrb.com/docs/upgrading/2-to-3/">Upgrading from 2.x to 3.x</a>" by Official jekyll site</li> </ul> 2016-01-31T00:00:00+00:00 2016-01-31T00:00:00+00:00 https://thadaw.com/posts/how-to-setup-vpn-for-psu-th/ <p>เคยไหม ที่อยากจะเข้าถึงข้อมูลบางอย่างเช่น บทความทางวิชาการ เป็นต้น ที่จะต้องเข้าจากอินเตอร์เน็ตในมหาวิทยาลัยเท่านั้น</p> <p>หรือ ต้องทำงานส่งอาจารย์ และต้องส่งในมหาวิทยาลัยเท่านั้น</p> <p>หรือ อยากเข้าถึงคอมพิวเตอร์ส่วนตัวของเราในมหาวิทยาลัย (อยู่ในเครือข่ายของมหาวทิยาลัย) ผ่าน <code>ssh</code></p> <p>แล้วจะทำอย่างไร <strong>คำตอบ</strong> คือ ใช้ <code>VPN</code> สิ</p> <h2 id="aelw-vpn-khuue-aair">แล้ว VPN คืออะไร?<a class="zola-anchor" href="#aelw-vpn-khuue-aair" aria-label="Anchor link for: aelw-vpn-khuue-aair" style="visibility: hidden;"></a> </h2> <p>VPN ย่อมาจาก Virtual Private Network ซึ่งถ้าแปลเป็นไทยก็คือ เครือข่ายส่วนตัวแบบเสมือน เสมือนก็คือ ไม่ใช่ของจริง แต่มันจะสร้างช่องทางพิเศษไว้สำหรับเราเพียงคนเดียว ที่สามารถเข้าใช้งานช่องทางนี้ได้ เพื่อผ่านไปยังจุดหมายปลาย หรือก็คือ เครือข่ายของมหาวิทยาลัย นั่นเอง เปรียบเสมือนว่า เรากำลังเข้าไปนั่งใช้งานในเครือข่ายของมหาวิทยาลัย</p> <blockquote> <p>ภาษาบ้านๆ คือ การเข้าไปนั่งใช้งาน internet ในมหาวิทยาลัย โดยไม่ไม่ต้อง ไปสถานที่นั้นจริงๆ นั่นเอง</p> </blockquote> <h2 id="kaartangkhaa-vpn-samhrab-psu">การตั้งค่า VPN สำหรับ PSU<a class="zola-anchor" href="#kaartangkhaa-vpn-samhrab-psu" aria-label="Anchor link for: kaartangkhaa-vpn-samhrab-psu" style="visibility: hidden;"></a> </h2> <p>การตั้งค่าสามารถทำได้ ทุกระบบปฏิบัติการ ไม่ว่าจะเป็น Mac, Windows, Android หรือ iOS</p> <h3 id="withiikaartangkhaa-thiilakhant-n">วิธีการตั้งค่า ทีละขั้นตอน<a class="zola-anchor" href="#withiikaartangkhaa-thiilakhant-n" aria-label="Anchor link for: withiikaartangkhaa-thiilakhant-n" style="visibility: hidden;"></a> </h3> <ul> <li>สำหรับ <a rel="nofollow noreferrer" href="http://know.9choo.in.th/2013/10/psu-vpn-windows-881.html">Windows 8, 8.1, 10 </a> คุณ Choowong Sitaphong ได้เขียนบทความอธิบายไว้อย่างละเอียดแล้ว (<a rel="nofollow noreferrer" href="http://know.9choo.in.th/2013/10/psu-vpn-windows-881.html">วิธีการตั้งค่า PSU VPN Windows 8,8.1 แบบไม่ง้อโปรแกรม</a>)</li> <li>สำหรับ <a rel="nofollow noreferrer" href="http://dmhost2.psu.ac.th/~netserv/images/phocadownload/VPN/Manual/L2TP_AndroidV.4.pdf">Android</a> คุณพรพิทักษ์ สันติภาพถาวร ได้เขียนขั้นตอนไว้อย่างละเอียดแล้ว</li> <li>สำหรับ <a rel="nofollow noreferrer" href="http://netserv.pn.psu.ac.th/upload/files/doc_wifi/VPN_11_Client-Installation_IOS.pdf">iOS (iPhone, iPad)</a> คุณพรพิทักษ์ สันติภาพถาวร ได้เขียนขั้นตอนไว้อย่างละเอียดแล้ว</li> <li>สำหรับ <a rel="nofollow noreferrer" href="http://netserv.pn.psu.ac.th/upload/files/doc_lan/VPN_10_Client-Installation_MAC10.5.pdf">Mac OS 10.5 Leopard</a> คุณพรพิทักษ์ สันติภาพถาวร ได้เขียนขั้นตอนไว้อย่างละเอียดแล้ว</li> </ul> <h2 id="parameter-taang-thiiaichainkaartangkhaaainkaaraichngaan">Parameter ต่างๆ ที่ใช้ในการตั้งค่าในการใช้งาน<a class="zola-anchor" href="#parameter-taang-thiiaichainkaartangkhaaainkaaraichngaan" aria-label="Anchor link for: parameter-taang-thiiaichainkaartangkhaaainkaaraichngaan" style="visibility: hidden;"></a> </h2> <pre class="z-code"><code><span class="z-text z-plain">Name : PSU </span><span class="z-text z-plain">Type : L2TP/IPSec PSK </span><span class="z-text z-plain">Server address : vpn.psu.ac.th </span><span class="z-text z-plain">IPSEC pre-shared key : vpn key </span></code></pre> 2016-01-30T00:00:00+00:00 2016-01-30T00:00:00+00:00 https://thadaw.com/posts/git-trick-how-to-merge-some-files-from-other-branch-th/ <p>มีหลายๆ เทคนิคที่สามารถทำได้ วิธีนี้เป็นวิธีที่ง่ายที่สุด ซึ่งผมได้นำมาจากบทความของ <a rel="nofollow noreferrer" href="http://jasonrudolph.com/blog/2009/02/25/git-tip-how-to-merge-specific-files-from-another-branch/">jasonrudolph.com</a></p> <p>นั่นคือ ใช้ประโยชน์จาก <code>git checkout</code> นั่นเอง</p> <p>สมมติว่า ผมมี 2 branches คือ <code>master</code> และ <code>mildronize-dotfiles</code> ตามผลลัพธ์ด้านล่าง ผมต้องการที่จะ merge ไฟล์ <code>README.md</code> จาก <code>mildronize-dotfiles</code> ไปยัง <code>master</code> และทำการ commit ให้เรียบร้อย</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> git branch</span> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">master</span></span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">*</span></span><span class="z-meta z-function-call z-arguments z-shell"> mildronize-dotfiles</span> </span></code></pre> <p>จากนั้นทำการย้าย branch ไปยัง <code>master</code></p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> git checkout master</span> </span></code></pre> <p>จากนั้นใช้ <code>git checkout</code> เพื่อขอไฟล์ <code>README.md</code> จาก branch ของ <code>mildronize-dotfiles</code> มายัง branch ปัจจุบัน (นั่นคือ <code>master</code>)</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> git checkout mildronize-dotfiles README.md</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> git status</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">On</span></span><span class="z-meta z-function-call z-arguments z-shell"> branch master</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Your</span></span><span class="z-meta z-function-call z-arguments z-shell"> branch is up-to-date with <span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>origin/master<span class="z-punctuation z-definition z-string z-end z-shell">&#39;</span></span>.</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">Changes</span></span><span class="z-meta z-function-call z-arguments z-shell"> to be committed:</span> </span><span class="z-source z-shell z-bash"> <span class="z-punctuation z-definition z-compound z-begin z-shell">(</span><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">use</span></span><span class="z-meta z-function-call z-arguments z-shell"> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>git reset HEAD &lt;file&gt;...<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span> to unstage</span><span class="z-punctuation z-definition z-compound z-end z-shell">)</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"> <span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">modified:</span></span><span class="z-meta z-function-call z-arguments z-shell"> README.md</span> </span><span class="z-source z-shell z-bash"> </span></code></pre> <p>สังเกตุได้ว่า เมื่อใช้ <code>git status</code> ตรวรจสอบดูจะพบว่า ไฟล์ <code>README.md</code> ได้ถูกแก้ไขแล้ว จากนั้นก็ commit ให้เรียบร้อย เป็นอันเสร็จสิ้นครับ</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> git commit<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>m</span> <span class="z-string z-quoted z-double z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&quot;</span>Merge readme into master branch<span class="z-punctuation z-definition z-string z-end z-shell">&quot;</span></span></span> </span></code></pre> <p>จากนี้จะทำการ <code>push</code> หรืออะไรต่อก็แล้วแต่เลยครับ</p> 2015-09-09T00:00:00+00:00 2015-09-09T00:00:00+00:00 https://thadaw.com/posts/how-to-use-vim-with-clipboard-on-debian/ <h2 id="instructions">Instructions<a class="zola-anchor" href="#instructions" aria-label="Anchor link for: instructions" style="visibility: hidden;"></a> </h2> <ol> <li> <p>Install extra package that can complete more features on Vim with GUI. There many packages are available on the repository. That is <code>vim-athena</code>, <code>vim-gnome</code>, <code>vim-gtk</code> and <code>vim-nox</code>. In this case, I have used <a rel="nofollow noreferrer" href="http://www.xfce.org/">Xfce</a> which applies GTK GUI. I will install <code>vim-gtk</code> for enable clipboard feature and others. For <a rel="nofollow noreferrer" href="https://www.gnome.org/">Gnome</a> user, you should installing <code>vim-gnome</code>. <a rel="nofollow noreferrer" href="https://packages.debian.org/search?keywords=vim">Read more</a></p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo aptitude install vim-gtk</span> </span></code></pre> </li> <li> <p>Now, you will found <code>+</code> registers in <code>:reg</code> in Vim. Trick is use Vim registers</p> </li> </ol> <ul> <li><code>"+yy</code> for yank to <code>+</code> register which is binding to clipboard</li> <li><code>"+p</code> (Normal mode) for paste from <code>+</code> register which is binding to clipboard</li> <li><code>Ctrl r</code> <code>+</code> (Insert mode) for paste from <code>+</code> register which is binding to clipboard</li> </ul> <h2 id="how-to-use-registers-in-vim">How to use registers in Vim<a class="zola-anchor" href="#how-to-use-registers-in-vim" aria-label="Anchor link for: how-to-use-registers-in-vim" style="visibility: hidden;"></a> </h2> <ul> <li> <p><strong>Show a list of registers</strong>: press <code>:reg</code> in normal mode</p> </li> <li> <p><strong>Access Vim registers</strong>: Press <code>"</code> and following <em>name of register</em>. Ex.</p> <ul> <li><code>"0</code> for accessing <code>0</code> register</li> <li><code>"+</code> for accessing <code>+</code> register</li> </ul> </li> <li> <p><strong>Vim registers use</strong>: Press <code>"</code> <code>[name]</code> and vim command. Ex.</p> <ul> <li><code>"0yy</code> means to yank to <code>0</code> register</li> <li><code>"5yy</code> means to yank to <code>5</code> register</li> <li><code>"5p</code> means to paste from <code>5</code> register</li> </ul> </li> </ul> <p>For more detail about Vim register, I will write a post later.</p> <h2 id="links">Links<a class="zola-anchor" href="#links" aria-label="Anchor link for: links" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="http://stackoverflow.com/a/11489440">How to make vim paste from (and copy to) system's clipboard? from stackoverflow</a></li> </ul> 2015-09-08T00:00:00+00:00 2015-09-08T00:00:00+00:00 https://thadaw.com/posts/mildy-my-debian-customization/ <p>Are you boring in Desktop of Debian. Here are some configurations for making your Debian to good look Debian.</p> <blockquote> <p>Note: This post is only configuration that I'm used to customize my desktop. It isn't suitable for beginner. I may write a post for beginner in the future. If you have any question about this, please contact me following in <code>About</code> menu.</p> </blockquote> <h2 id="easy-instruction-for-customizing-linux-desktop">Easy instruction for customizing linux desktop<a class="zola-anchor" href="#easy-instruction-for-customizing-linux-desktop" aria-label="Anchor link for: easy-instruction-for-customizing-linux-desktop" style="visibility: hidden;"></a> </h2> <ol> <li>Choose a desktop environment</li> <li>Choose a theme</li> <li>Install some packages for best experience</li> <li>Config something</li> </ol> <p>This is my Linux desktop</p> <p><img src="https://thadaw.com/posts/mildy-my-debian-customization/2015-09-08-mildy-my-debian-customization.jpg" alt="mildy-my-debian-customizing-screenshot" /></p> <h2 id="my-customizatioan">My customizatioan<a class="zola-anchor" href="#my-customizatioan" aria-label="Anchor link for: my-customizatioan" style="visibility: hidden;"></a> </h2> <ul> <li> <p>Desktop environment: <a rel="nofollow noreferrer" href="http://www.xfce.org/">Xfce</a></p> </li> <li> <p>Theme ( Recommended GTK 2.0):</p> <ul> <li>In <code>Appearance</code>: <ul> <li>Style: <a rel="nofollow noreferrer" href="http://gnome-look.org/content/show.php/?content=144237">Adwaita</a></li> <li>Icons: <a rel="nofollow noreferrer" href="http://gnome-look.org/content/show.php/?content=128143">Faenza</a></li> </ul> </li> <li>In <code>Window Manager</code>: <ul> <li>Style: <a rel="nofollow noreferrer" href="http://xfce-look.org/content/show.php/axiom+xfwm?content=90145">axiom</a></li> </ul> </li> </ul> </li> <li> <p>Extra package:</p> <ul> <li> <p>Dock: <a rel="nofollow noreferrer" href="https://launchpad.net/plank">Plank</a> (which is used in <a rel="nofollow noreferrer" href="https://elementary.io/">Elementary OS</a> )</p> <blockquote> <p>In Debian, Plank is now available on testing and sid only, <a rel="nofollow noreferrer" href="https://packages.debian.org/plank">see more</a></p> </blockquote> </li> </ul> </li> <li> <p>Items in <code>Panel</code> on Xfce:</p> <ul> <li> <p>Separator: style=Transparent, expand=true</p> </li> <li> <p>Separator: style=Transparent, expand=true</p> </li> <li> <p>Clock: Format=Custom Format (<code>%I:%M %p | %a %d %b %Y</code>)</p> </li> <li> <p>Separator: style=Transparent, expand=true</p> </li> <li> <p>Workspace Switcher</p> </li> <li> <p>Keyboard Layouts</p> </li> <li> <p>Notification Area: Show frame=false</p> </li> <li> <p>Audio Mixer</p> </li> <li> <p>Action Buttons</p> </li> <li> <p>Separator: style=Separator</p> </li> <li> <p>Applications Menu</p> </li> <li> <p>Show Desktop</p> <blockquote> <p>4 items first in the items of Xfce panel is a technique to adjust center position of clock</p> </blockquote> </li> </ul> </li> </ul> <h2 id="terminal">Terminal<a class="zola-anchor" href="#terminal" aria-label="Anchor link for: terminal" style="visibility: hidden;"></a> </h2> <ul> <li>use <a rel="nofollow noreferrer" href="http://ethanschoonover.com/solarized">Solarized</a> color scheme</li> <li>Combine many programs in terminal: <ul> <li><a rel="nofollow noreferrer" href="http://www.zsh.org/">Zsh</a> and <a rel="nofollow noreferrer" href="https://github.com/robbyrussell/oh-my-zsh">Oh my Zsh</a></li> <li><a rel="nofollow noreferrer" href="https://tmux.github.io/">Tmux</a></li> <li><a rel="nofollow noreferrer" href="http://www.vim.org/">Vim</a> and <a rel="nofollow noreferrer" href="https://github.com/carlhuda/janus">Janus</a></li> </ul> </li> <li>All configuration of this section is stored at <a rel="nofollow noreferrer" href="https://github.com/mildronize/dotfiles">https://github.com/mildronize/dotfiles</a></li> <li>More details of this section can see in <a rel="nofollow noreferrer" href="http://dev.mildronize.com/th/notes/vim-janus-tmux/">my post</a> (Thai version)</li> </ul> 2015-07-02T00:00:00+00:00 2015-07-02T00:00:00+00:00 https://thadaw.com/posts/how-to-compile-and-install-gnome-builder-on-debian/ <blockquote> <p>Note: This post is early access for using Gnome Builder. It may be including some bug or any error, please calm when you found some bug. So I think this is becoming the best editor for gnome user, Cheer!</p> </blockquote> <p>I have heard about <code>gnome builder</code> announcement on <a rel="nofollow noreferrer" href="https://www.indiegogo.com/projects/builder-an-ide-of-our-gnome#/story">Indiegogo</a> in some blog (I can't remember that). It is very interesting for me. Because it is made for Gnome user, and me too. It do not tell it anymore, let's watch belowing video to introduce <code>Gnome Builder</code>. Read more about the feature of Gnome Builder via <a rel="nofollow noreferrer" href="https://wiki.gnome.org/Apps/Builder/Features">https://wiki.gnome.org/Apps/Builder/Features</a></p> <iframe width="560" height="315" src="https://www.youtube.com/embed/jXEjYu0SJ3A" frameborder="0" allowfullscreen></iframe> <p>Okay, I can't wait to try it. Let's go to compile &amp; install it!</p> <h2 id="installation">Installation<a class="zola-anchor" href="#installation" aria-label="Anchor link for: installation" style="visibility: hidden;"></a> </h2> <ol> <li> <p>Install some prerequisite packages for Gnome Builder.</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo aptitude install intltool gtk-doc-tools libgtksourceview-3.0-dev libdevhelp-dev libgit2-glib-1.0-dev libgjs-dev python-gobject-dev llvm-dev libclang-dev python3-dev</span> </span></code></pre> </li> <li> <p>Go to <a rel="nofollow noreferrer" href="https://git.gnome.org/browse/gnome-builder/">Gnome git repository home</a>, and select the lastest version of Gnome Builder or any version what you want. In my case, I choose <a rel="nofollow noreferrer" href="https://git.gnome.org/browse/gnome-builder/snapshot/GNOME_BUILDER_3_16_3.tar.xz">GNOME_BUILDER_3_16_3</a> to download it.</p> </li> <li> <p>Extract the compression file (GNOME_BUILDER_3_16_3.tar.xz), using this command below (It can use only .tar.xz only)</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> tar<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> -</span>Jxvf</span> GNOME_BUILDER_3_16_3.tar.xz</span> </span></code></pre> </li> <li> <p>go to the directory which you extracted</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> cd GNOME_BUILDER_3_16_3</span> </span></code></pre> </li> <li> <p>Execute <code>autogen.sh</code> and run <code>make</code></p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> ./autogen.sh</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> make</span> </span></code></pre> </li> </ol> <p>All done!, Let's enjoy the editor on our Gnome</p> <p>Next post, I will post how I know the prerequisite packages for compiling C source.</p> <p>Bye.</p> <p>Special Thank Thanathip Limna for his suggestion</p> <h2 id="resources">Resources<a class="zola-anchor" href="#resources" aria-label="Anchor link for: resources" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://wiki.gnome.org/Apps/Builder">Gnome Builder Home page</a></li> <li><a rel="nofollow noreferrer" href="https://www.indiegogo.com/projects/builder-an-ide-of-our-gnome#/story">Indiegogo Funding</a></li> </ul> 2015-07-01T00:00:00+00:00 2015-07-01T00:00:00+00:00 https://thadaw.com/posts/gnome-nautilus-sort-directories-before-files/ <p>พอดีผมใช้ Windows มาก่อนแล้วถนัดให้ แสดง folder ก่อนแสดงไฟล์ เลยไปหาวิธีการมาจาก <a rel="nofollow noreferrer" href="http://gexperts.com/wp/gnome-3-12-filesnautilus-sort-folders-before-files-issues/">เว็บนี้</a> วันนี้เลยเอามาแปล และมาอธิบายให้ฟัง</p> <blockquote> <p><strong>หมายเหตุ</strong>: ใน Windows เค้าเรียกว่า Folder ส่วนใน linux เค้าจะเรียกว่า directory ครับ</p> </blockquote> <p>ผมใช้ GNOME รุ่น 3.16 แต่ในเว็บนั้นบอกรุ่น 3.12 แต่ผมลองแล้วใช้งานได้เลยนำมาแบ่งปันกัน</p> <h2 id="khant-nthii-1">ขั้นตอนที่ 1<a class="zola-anchor" href="#khant-nthii-1" aria-label="Anchor link for: khant-nthii-1" style="visibility: hidden;"></a> </h2> <ol> <li>ให้ไปที่โปรแกรม <code>dconf-editor</code> ถ้าหาไม่เจอให้กดปุ่ม start หรือ นำเม้าส์ไปไว้ที่มุมบนขวานะครับ แล้วพิมพ์ชื่อโแกรมลงไป แล้วกด Enter คับ</li> <li>จะขึ้นหน้าต่างใหม่ขึ้นมา มันจะมีสองฝั่ง โดยเริ่มจากฝั่งซ้ายก่อน คลิกไปที่ <code>org</code> ครับ</li> <li>จากนั้นไปที่ <code>gnome</code></li> <li>แล้วก็ <code>nautilus</code></li> <li>แล้วก็ <code>preferences</code></li> <li>เมื่อกด ที่ preferences จากขั้นตอนที่ 5 แล้ว ให้มองไปทางฝั่งขวา แล้วหารายการที่มีชื่อว่า <code>sort-directories-first</code> แล้วกดติ๊กถูกครับ</li> </ol> <p>ถ้าขั้นตอนแรกยังไม่ได้ ให้ทำขั้นตอนที่ 2 อีกครับ</p> <h2 id="khant-nthii-2">ขั้นตอนที่ 2<a class="zola-anchor" href="#khant-nthii-2" aria-label="Anchor link for: khant-nthii-2" style="visibility: hidden;"></a> </h2> <ol> <li>ทำเหมือน ขั้นตอนที่ 1 ข้อที่ 1 เลย</li> <li>ดูฝั่งทางซ้าย ไปที่ <code>org</code> แล้วก็ <code>gtk</code> แล้วก็ <code>Settings</code> แล้วก็ <code>file-chooser</code></li> <li>จากนี่น ดูฝั่งขวา แล้วหารายการที่มีชื่อว่า <code>sort-directories-first</code> แล้วกดติ๊กถูกครับ</li> </ol> <p>ถ้าตั้งค่าตามที่กล่าวมานี้แล้ว สำหรับผมแล้วทำใช้งานได้ครับ ขอบคุณครับ</p> 2015-06-26T00:00:00+00:00 2015-06-26T00:00:00+00:00 https://thadaw.com/posts/becoming-newbie-linux-user/ <p>โพสนี้เป็นการรวมเรื่องราวกันหัดใช้ linux ครั้งแรกของผมโดย จะแบ่งเป็นข้อๆ และก็จะค่อยๆ ทยอยเขียน ทีละบทความ</p> <h2 id="khwaamphyaayaamkh-ngphmthiicchahadaich-linux-maamaakkwaa-10-khrang">ความพยายามของผมที่จะหัดใช้ linux มามากกว่า 10 ครั้ง<a class="zola-anchor" href="#khwaamphyaayaamkh-ngphmthiicchahadaich-linux-maamaakkwaa-10-khrang" aria-label="Anchor link for: khwaamphyaayaamkh-ngphmthiicchahadaich-linux-maamaakkwaa-10-khrang" style="visibility: hidden;"></a> </h2> <p><strong>ครั้งแรกกับ Linux</strong></p> <p>ผมติด Windows มากในสมัยเด็กๆ เพราะไม่ว่าจะมองไปทางไหนๆ ก็มีแต่คนใช้ Windows ที่มีหน้าตาที่ สวยงาม แต่แล้วสมัยตอนอยู่เรียนมัธยมต้น ก็ได้ยินข่าวเกี่ยวกับ Linux บ้างและอยากลองใช้ ผมพยายามติดตั้ง และลองใช้งาน linux เป็นครั้งแรก โดยเลือกลง เป็น <a rel="nofollow noreferrer" href="http://www.ubuntu.com/download/desktop">Ubuntu desktop</a> พยายามลองใช้งานในโหมดของเป็นกราฟฟิคโหมด (GUI Mode) แต่แล้วก็พบว่า ไม่คุ้นชินกับหน้าตาและวิธี การใช้งานเลย รวมถึงโปรแกรมต่างๆ ที่ใช้อยู่ใน windows ปกติก็ไม่มีให้ใช้ เลยสุดท้ายก็ถอดใจไปกลับไปใช้ Windows เหมือนเดิม</p> <p><strong>ครั้งต่อๆ มา กับ Linux</strong></p> <p>ในช่วงเวลาหลายปีที่ผ่านมาตั้งแต่ มัธยมต้นนั้นได้ พยายามลงและลองใช้ linux อยู่หลายครั้ง แต่ก็ยังไม่ เข้าใจถึงลักษณะการทำงาน และ วิธีใช้ รวมถึงวิธีการแก้ปัญหา ต่างๆ พอประสบปัญหาครั้งหนึี่งก็แก้ไม่ถูก สุดท้ายก็แก้ไม่ถูก กับการที่ไม่มีโปแกรมที่คุ้นเคยเลย เลยทำให้ถอดใจไปอย่างมาก</p> <p>แต่หลังจากที่ขึ้นมหาวิทยาลัยมา บวกกับในยุคสมัยที่มีโปรแกรม Cross Platform เกิดขึ้นมาเยอะมากทำให้ สามารถใช้งานได้ ค่อนข้างโอเคเลย บวกกับมีคนช่วยสอน ช่วยแนะนำการใช้งานให้ ต้องขอบคุณพี่ Thanathip Limna ที่ช่วยแนะนำหลายๆ เรื่อง</p> <p>จนสุดท้ายก็เลยนำปัญหาที่ผมพบระหว่างการเริ่มหัดใช้งาน linux มาเขียนเป็นบทความอธิบายๆ การใช้ และ ปัญหารวมถึงวิธีการแก้ปัญหาเป็นส่วนๆ ไป ตามหัวข้อด้านล่าง</p> <h2 id="khuumuue-kaaraichngaan-linux-chbabaich-debian-epnkrniisueksaa">คู่มือการใช้งาน Linux ฉบับใช้ Debian เป็นกรณีศึกษา<a class="zola-anchor" href="#khuumuue-kaaraichngaan-linux-chbabaich-debian-epnkrniisueksaa" aria-label="Anchor link for: khuumuue-kaaraichngaan-linux-chbabaich-debian-epnkrniisueksaa" style="visibility: hidden;"></a> </h2> <ul> <li>ลินุกซ์คืออะไร</li> <li>Linux distrubtion ไหนที่คุณชอบ เลือกมาหนึ่ง แล้วหัดใช้มัน</li> <li>การติดตั้ง Debian</li> <li>การใช้งานลินุกซ์ครั้งแรก</li> <li>ทำความเข้าใจเกี่ยวกับ Debian ซึ่งเป็นหนึ่งใน Linux distrubtion</li> <li>[ทำความเข้าใจเกี่ยวแต่ละรุ่นของ Debian]({{ /posts/2015-06-25-what-is-debian-version-sid-testing-stable/ | url }})</li> <li>[อัพเกรด Debian จาก stable เป็น sid]({{ /posts/2015-06-08-upgrade-debian-to-sid | url }})</li> <li><strong>หัวข้อที่สำคัญ</strong>: เราจะแก้ปัญหาอย่างไรที่พบระหว่างการติดตั้ง packages โดยที่สามารถเรียนรู้จากกรณีศึกษาด้านล่างนี้ <ul> <li>[กรณีศึกษาที่ 1: การติดตั้ง Google Chrome บน Debian]({{ /posts/2015-06-22-how-to-install-google-chrome-on-debian | url }})</li> <li>กรณีศึกษาที่ 2: การติดตั้ง Bracket บน Debian</li> </ul> </li> <li>บำรุงรักษาและพยายามที่จะเรียนรู้สิ่งใหม่ๆ ตลอดเวลา</li> </ul> 2015-06-25T00:00:00+00:00 2015-06-25T00:00:00+00:00 https://thadaw.com/posts/what-is-debian-version-sid-testing-stable/ <p>สวัสดีครับ คุณผู้อ่านทุกท่านที่สนใจใน Debian</p> <p>ก่อนเริ่มกันผมขอเริ่มเกรินก่อนว่า คำถามนี้ (เวอร์ชั่นแต่ละอันของ debian คืออะไร อะไรคือ sid, testing, stable โอ๊ยเยอะไปหมด….) เป็นคำแรกๆ ที่เกิดขึ้นในหัวของผม ตั้งแต่ใช้ Debian แรกๆ ว่าอะไรกันหนักหนา เยอะแยะไปหมด งงไปหมด เริ่มยังไงดี เริ่มไม่ถูก แล้วเราใช้ๆ ไปมันจะพังมั้ย โอ๊ย สารพัดคำถาม ถาโถมเข้ามาจน เลิกใช้ linux ไปหลายรอบ เอาหละ เข้าเรื่อง กันดีกว่า เราจะมาตอบคำถามหล่าวนี้กัน (อาจจะถูกผิดบ้าง ตามภาษาคนเพิ่งหัดใช้)</p> <p>เวอร์ชั่นของ Debian เค้าเรียกว่า Releases ซึ่งเป็นสถานะของการพัฒนา Debian ที่อยู่ในระหว่างการพัฒนา คือ stable , testing, unstable</p> <h2 id="eraamaaduukandiikwaa-waaaetla-ankhuue-aairkanbaang">เรามาดูกันดีกว่า ว่าแต่ละอันคืออะไรกันบ้าง<a class="zola-anchor" href="#eraamaaduukandiikwaa-waaaetla-ankhuue-aairkanbaang" aria-label="Anchor link for: eraamaaduukandiikwaa-waaaetla-ankhuue-aairkanbaang" style="visibility: hidden;"></a> </h2> <ol> <li> <p><a rel="nofollow noreferrer" href="https://www.debian.org/releases/stable/">Stable</a> คือ เวอร์ชั่นที่มีความเสถียร นั่นเอง นั่นหมายความว่า ไม่มีข้อผิดพลาด (ถึงมีก็น้อยมากๆ) หรือบั๊ก เลย ดังนั้นจึงเหมาะมากสำหรับการนำมาทำเป็น server เพราะมันเสถียรนั้นเอง</p> </li> <li> <p><a rel="nofollow noreferrer" href="https://www.debian.org/releases/testing/">testing</a> คือ เวอร์ชั่นทดสอบ(แปลจากชื่อ) มันคือ เวอร์ชั่นหลักที่ใหม่ กว่า Stable (ในที่นี้คือ Wheezy) เรียกว่า Jessie แต่อยู่ในระหว่างการพัฒนาอาจจะมีบั๊กบ้างอะไรบ้าง เล็กๆ น้อยๆ แต่ระบบจะมีความใหม่ของ โปรแกรม(เค้าชอบเรีียกกันว่า package) กว่า stable นั่นเอง ซึ่ง โปรแกรม จะอยู่ใน unstable เป็นระยะเวลานึง ถึงจะถูกย้ายเข้ามาอยู่ ใน testing นั่นหมายความว่า พวกบั๊กต่างๆ ที่ร้ายแรงจะถูกแก้ใน เวอร์ชั่นของ unstable หมดแล้ว</p> </li> <li> <p><a rel="nofollow noreferrer" href="https://www.debian.org/releases/unstable/">unstable</a> หรือก็คือ sid คือ เวอร์ชั่นที่ไม่เสถียร (แปลจากชื่อ) โปรแกรมที่อยู่ในช่วงกำลังพัฒนา และสามารถทำงานได้แล้วจะถูกอัพโหลดเข้ามาอยู่ใน unstable ดังนั้นอาจจะมีบั๊ก (ไม่ต้องตกใจ) ดังนั้นผู้ใช้ unstable ส่วนใหญ่จะเป็นนักพัฒนาหรือ พวกอยากลองของใหม่ๆ และแน่นอน มันมักจะมีบั๊กเสมอ พวกเค้าก็จะต้องช่วยส่งบั๊กพวกนี้ให้กับ ทีมพัฒนาโปรแกรมนั้นๆ ต่อไป จนบั๊กๆ ที่ร้ายแรงต่างๆ ได้ถูกแก้จนหมดแล้วถึงจะถูกนำไปไว้ใน testing อย่างที่อธิบายไว้แล้วข้างต้น</p> </li> </ol> <p>ทั้ง Stable, Testing และ unstable เป็น Repository (ที่สำหรับเก็บโค๊ด) ที่ไม่มีทางตาย เอ๊ะยังไง</p> <p>– <strong>Stable</strong> ตอนนี้ คือ Wheezy (Debian 7) นั้นหมายความว่า เมื่อเวอร์ชั่นถัดไปของ debian (Jessie) เสถียรแล้ว จะถูกนำมาแทน ที่ Wheezy นั้นเอง ดังนั้นค่าของคำว่า stable จะถูกเปลี่ยนไป เรื่อยๆ</p> <p>– <strong>Testing</strong> ตอนนี้ คือ Jessie นั้นหมายความ เมื่อใดที่ Jessie เสถียรแล้ว Testing ก็จะเปลี่ยนเป็นชื่อใหม่ (ยังไม่ตั้งที) เป็นเวอร์ชั่นถัดไปของ Jessie อีกที</p> <p>– <strong>Unstable</strong> เมื่อ testing ในปัจจุบัน กลายเป็น stable , unstable ก็จะเป็นอะไรที่ใหม่กว่า testing</p> <p>ค่าของ Stable, Testing และ unstable จะถูกไปเรื่อยๆ ตามเวอร์ชั่นของ Debian ที่ใหม่ขึ้นเรื่อยๆ</p> <h2 id="aelwew-rchanthanghmdkh-ng-debian-mii-aairbaang">แล้วเวอร์ชั่นทั้งหมดของ Debian มีอะไรบ้าง<a class="zola-anchor" href="#aelwew-rchanthanghmdkh-ng-debian-mii-aairbaang" aria-label="Anchor link for: aelwew-rchanthanghmdkh-ng-debian-mii-aairbaang" style="visibility: hidden;"></a> </h2> <ul> <li>เวอร์ชั่นที่ใหม่ที่สุด เรียกว่า sid (หรือ unstable นั่นเอง )</li> <li>เวอร์ชั่นถัดไปของ debian คือ stretch — ยังไม่เสถียร</li> <li>Debian 8.0 (jessie) — เวอร์ชั่นเสถียร ณ ตอนนี้</li> <li>Debian 7.0 (wheezy) — เสถียรและก็เก่าแล้ว</li> <li>Debian 6.0 (squeeze) — เสถียรและก็เก่าแล้ว</li> <li>Debian GNU/Linux 5.0 (lenny) — เสถียรและก็เก่าแล้ว</li> <li>Debian GNU/Linux 4.0 (etch) — เสถียรและก็เก่าแล้ว</li> <li>Debian GNU/Linux 3.1 (sarge) — เสถียรและก็เก่าแล้ว</li> <li>Debian GNU/Linux 3.0 (woody) — เสถียรและก็เก่าแล้ว</li> <li>Debian GNU/Linux 2.2 (potato) — เสถียรและก็เก่าแล้ว</li> <li>Debian GNU/Linux 2.1 (slink) — เสถียรและก็เก่าแล้ว</li> <li>Debian GNU/Linux 2.0 (hamm) — เสถียรและก็เก่าแล้ว</li> </ul> <p>และก็จบกันไปแล้วนะครับ หวังว่าจะได้รับความรู้ไม่มากก็น้อย</p> <p>จาก <a rel="nofollow noreferrer" href="https://www.debian.org/releases/">https://www.debian.org/releases/</a> และต้องขอบคุณพี่ Thanathip Limna ที่ช่วยแนะให้ในหลายๆ อย่าง</p> 2015-06-22T00:00:00+00:00 2015-06-22T00:00:00+00:00 https://thadaw.com/posts/how-to-install-google-chrome-on-debian-th/ <h2 id="deprecated-post">*Deprecated post!<a class="zola-anchor" href="#deprecated-post" aria-label="Anchor link for: deprecated-post" style="visibility: hidden;"></a> </h2> <p>Please go to <a href="/a-very-short-ubuntu-debian-packages-installation-sheet-0967oym/">my new post</a></p> <hr> <h2 id="singthiicchamepnt-kaartidtang">สิ่งที่จำเป็นต่อการติดตั้ง<a class="zola-anchor" href="#singthiicchamepnt-kaartidtang" aria-label="Anchor link for: singthiicchamepnt-kaartidtang" style="visibility: hidden;"></a> </h2> <ul> <li> <p>ควรจะลง <code>Chromium</code> ก่อน เพราะว่าใน Chromium มี package ที่จำเป็นต่อการลง <code>Google Chrome</code> โดยใช้</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo aptitude install chromium</span> </span></code></pre> <blockquote> <p><strong>หมายเหตุ:</strong> ความจริงจะลงเฉพาะ package ที่ Google Chrome ต้องการก็ได้ แต่จำไม่ได้แล้วว่ามันต้องการอะไรบ้าง เลยลงทั้ง Chromium เลย สะดวกดี</p> </blockquote> </li> </ul> <h2 id="khant-nkaartidtang">ขั้นตอนการติดตั้ง<a class="zola-anchor" href="#khant-nkaartidtang" aria-label="Anchor link for: khant-nkaartidtang" style="visibility: hidden;"></a> </h2> <ol> <li> <p>เริ่มจากจาก เพิ่ม repository ของ Google Chrome โดยที่เป็น <a rel="nofollow noreferrer" href="https://wiki.debian.org/UnofficialRepositories">repository แบบไม่เป็นทางการ</a> แต่ก็สามารถเชื่อถือได้ระดับนึง เพราะว่าเป็น repository ที่แนะนำโดย Debian และเป็นของ Google</p> <blockquote> <p><a rel="nofollow noreferrer" href="https://wiki.debian.org/DebianRepository">repository</a> คือ แหล่งที่เก็บซอฟแวร์สำหรับ การติดตั้งใน linux ซึ่งสามารถค้นหาซอฟแวร์เพื่อที่จะติดตั้งได้</p> </blockquote> <p>สามารถทำได้ โดย เพิ่มประโยคว่า <code>deb http://dl.google.com/linux/chrome/deb/ stable main</code> ลงในบรรทัดสุดท้ายของไฟล์นี้ <code>/etc/apt/source.list</code> สามารถทำได้โดยคำสั่งด้านล่างนี้ หรือวิธีอื่นๆ ตามที่ถนัดเลย</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo echo <span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>deb http://dl.google.com/linux/chrome/deb/ stable main<span class="z-punctuation z-definition z-string z-end z-shell">&#39;</span></span> <span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;&gt;</span> /etc/apt/source.list</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo aptitude update</span> </span></code></pre> <blockquote> <p><strong>หมายเหตุ:</strong> ที่ต้องใช้คำสั่ง <code>sudo aptitude update</code> หลังจากการเพิ่ม URL ของ repository ในไฟล์ <code>/etc/apt/source.list</code> แล้วเพราะว่า คำสั่ง <code>aptitude update</code> เป็น คำสั่งที่โหลดรายการซอฟแวร์ที่ใหม่ล่าสุดลงมาสำรองไว้บนเครื่องเรา เพื่อที่จะสามารถค้นหาและติดตั้งซอฟแวร์ได้ จึงทำให้เมื่อเพิ่ม <a rel="nofollow noreferrer" href="http://dl.google.com/linux/chrome/deb/">repository ของ Google Chrome</a> ลงไปแล้ว รายการซอฟแวร์ที่ใหม่ที่อัพเดทล่าสุดจะมี ซอฟแวร์ Google Chrome ปรากฏเพิ่มมาด้วย เราสามารถใช้คำสั่ง <code>$ sudo aptitude search google-chrome</code> ถ้าดำเนินการเสร็จแล้วจะขึ้นรายการซอฟแวร์มาเลือกให้เราติืดตั้ง</p> </blockquote> </li> <li> <p>แต่ถ้าเกิดข้อผิดพลาดแบบนี้ หรือคล้ายๆ กับแบบนี้</p> <pre class="z-code"><code><span class="z-text z-plain">W: GPG error: http://dl.google.com stable Release: The following signatures couldn&#39;t be verified because the public key is not available: NO_PUBKEY A040830F7FAC5991 </span></code></pre> <p>มันหมายความว่า กุญแจ public key ของคุณนั้น (ในกรณี <code>A040830F7FAC5991</code> คือ public key ของผม) ไม่สามารถที่จะยืนยันได้</p> <h3 id="withiiaek">วิธีแก้<a class="zola-anchor" href="#withiiaek" aria-label="Anchor link for: withiiaek" style="visibility: hidden;"></a> </h3> <p>ให้ใช้คำสั่งต่อไปนี้ในการรับรอง repository จาก Google โดยที่ <code>[Your public KEY]</code> ให้ใส่ public key ของคุณ</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo apt-key adv<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>keyserver</span> keyserver.ubuntu.com<span class="z-variable z-parameter z-option z-shell"><span class="z-punctuation z-definition z-parameter z-shell"> --</span>recv-keys</span> <span class="z-keyword z-control z-regexp z-set z-begin z-shell">[</span>Your public KEY<span class="z-keyword z-control z-regexp z-set z-end z-shell">]</span></span> </span></code></pre> </li> <li> <p>โอเค ได้เวลาลง Google Chrome จริงๆล่ะ</p> <pre class="z-code"><code><span class="z-text z-plain">$ sudo aptitude update </span><span class="z-text z-plain">$ sudo aptitude install google-chrome-stable </span></code></pre> </li> </ol> <blockquote> <p><strong>หมายเหตุ:</strong>: Google Chrome มีทั้งหมด 3 รุ่น คือ <code>google-chrome-beta</code>, <code>google-chrome-stable</code> และ <code>google-chrome-unstable</code> ก็คือ รุ่นทดลองใช้งาน(beta), รุ่นเสถียรแล้ว(stable) และ รุ่นไม่เสถียร(unstable) ตามลำดับ โดย รุ่นทดลองใช้งานกับรุ่นไม่เสถียร อาจจะมีบัค(ข้อผิดพลาด)บ้าง โดยเฉพาะในรุ่นไม่เสถียรจะมีมากสุด แต่ในขณะเดีัยวกันจะได้ความสามารถที่ใหม่กว่า ขึ้นอยู่กับความต้องการเลย เนื่องจากผมต้องใช้งานบ่อยเลยเลือกรุ่นเสถียรแทน (<code>google-chrome-stable</code>)</p> </blockquote> 2015-06-22T00:00:00+00:00 2015-06-22T00:00:00+00:00 https://thadaw.com/posts/how-to-install-google-chrome-on-debian/ <h1 id="deprecated-post">*Deprecated post!<a class="zola-anchor" href="#deprecated-post" aria-label="Anchor link for: deprecated-post" style="visibility: hidden;"></a> </h1> <p>Please go to <a href="/a-very-short-ubuntu-debian-packages-installation-sheet-0967oym/">my new post</a></p> <hr> <h2 id="prerequisite">Prerequisite<a class="zola-anchor" href="#prerequisite" aria-label="Anchor link for: prerequisite" style="visibility: hidden;"></a> </h2> <ul> <li>chromium via <code>$ sudo aptitude install chromium</code></li> </ul> <h2 id="installation">Installation<a class="zola-anchor" href="#installation" aria-label="Anchor link for: installation" style="visibility: hidden;"></a> </h2> <ol> <li> <p>Add Google Chrome repository from <a rel="nofollow noreferrer" href="https://wiki.debian.org/UnofficialRepositories">unofficial debian repository</a> by add <code>deb http://dl.google.com/linux/chrome/deb/ stable main</code> into last line of <code>/etc/apt/source.list</code></p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo echo <span class="z-string z-quoted z-single z-shell"><span class="z-punctuation z-definition z-string z-begin z-shell">&#39;</span>deb http://dl.google.com/linux/chrome/deb/ stable main<span class="z-punctuation z-definition z-string z-end z-shell">&#39;</span></span> <span class="z-keyword z-operator z-assignment z-redirection z-shell">&gt;&gt;</span> /etc/apt/source.list</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo aptitude update</span> </span></code></pre> </li> <li> <p>If you got the error look like this</p> <pre class="z-code"><code><span class="z-text z-plain">W: GPG error: http://dl.google.com stable Release: The following signatures couldn&#39;t be verified because the public key is not available: NO_PUBKEY A040830F7FAC5991 </span></code></pre> <p>It means your public key (In my case, (<code>A040830F7FAC5991</code> is my public key) can't verify. Use the belowing command to sign &amp; trust the new repository from google. using <code> $ sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys [Your public KEY]</code></p> <p><em>example</em></p> <pre class="z-code"><code><span class="z-text z-plain">$ sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys A040830F7FAC5991 </span></code></pre> </li> <li> <p>It's time to Install Google Chrome!</p> <pre class="z-code"><code><span class="z-text z-plain">$ sudo aptitude update </span><span class="z-text z-plain">$ sudo aptitude install google-chrome-stable </span></code></pre> </li> </ol> <blockquote> <p>Note: Google Chrome has 3 version: <code>google-chrome-beta</code>, <code>google-chrome-stable</code> and <code>google-chrome-unstable</code>. My case uses <code>google-chrome-stable</code> for daily use.</p> </blockquote> 2015-06-20T00:00:00+00:00 2015-06-20T00:00:00+00:00 https://thadaw.com/posts/error-github-page-build-failure/ <blockquote> <p><strong>Note:</strong> This is a part of solutions for solving belowing problem message from GitHub Page. It may be other solutions for solving the problem.</p> </blockquote> <h2 id="situation">Situation<a class="zola-anchor" href="#situation" aria-label="Anchor link for: situation" style="visibility: hidden;"></a> </h2> <ol> <li> <p>My jekyll page can run locally.</p> </li> <li> <p>I got an email "[mildronize.github.io] Page build failure"</p> </li> <li> <p>I asked supportor that the facing problem</p> <blockquote> <p>I don't understand why my file contains syntax errors. Because I can run normally this file in local (using jekyll serve) Can you show me more information about this errors or suggest anything.</p> </blockquote> </li> <li> <p>He responded me</p> <blockquote> <p>You should be running your site locally exactly as per these instructions:</p> <p><a rel="nofollow noreferrer" href="https://help.github.com/articles/using-jekyll-with-pages">https://help.github.com/articles/using-jekyll-with-pages</a></p> <p>I cloned your repository and reproduced the issue locally by using a Gemfile and running:</p> <p><code>bundle exec jekyll build</code></p> <p>Which produced the error details:</p> <p><code>Conversion error: Jekyll::Converters::Markdown encountered an error converting '_posts/2015-06-08-upgrade-debian-to-sid.md'.</code> ...</p> </blockquote> <blockquote> <p><code>ClassNotFound('no lexer for alias %r found' % _alias) ClassNotFound: no lexer for alias 'shell' found</code></p> </blockquote> </li> </ol> <h2 id="solution">solution<a class="zola-anchor" href="#solution" aria-label="Anchor link for: solution" style="visibility: hidden;"></a> </h2> <p>You can't use <code>shell</code> as a lexer name. Try <code>bash</code> instead. <a rel="nofollow noreferrer" href="https://github.com/jekyll/jekyll/issues/1183">https://github.com/jekyll/jekyll/issues/1183</a></p> <blockquote> <p>If you have any question or suggestion, don't forget to comment this post. Thank you.</p> </blockquote> 2015-06-08T00:00:00+00:00 2015-06-08T00:00:00+00:00 https://thadaw.com/posts/upgrade-debian-to-sid-th/ <p>โดยปกติแล้ว เวลาลง Debian ใหม่ๆ จะไม่สามารถใช้ คำสั่ง sudo ได้ ไม่เหมือนกับ Ubuntu ที่ตอนติดตั้งจะให้ user แรกที่สร้างตอนติดตั้งสามารถใช้ คำสั่ง sudo ได้เลย</p> <p>ดังนั้น เพื่อให้ user ของเราเองมีสิทธิเทียบเท่าผู้ดูแลระบบ(system administrators ) เราจึงต้องลง package ชื่อว่า sudo และใช้สิทธิผู้ดูแลระบบอนุญาตให้ user ของเรามีสิทธิเทียบเท่าผู้ดูแลระบบ เพราะในบางคำสั่งจำเป็นต้องใช้สิทธิ ผู้ดูแลระบบในการทำงาน เช่น การติดตั้ง โปรแกรม (หรือ package) โดยใช้คำสั่งด้านล่างนี้</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> su</span> </span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> aptitude install sudo</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> usermod -a -G sudo [USERNAME]</span><span class="z-comment z-line z-number-sign z-shell"> </span></span><span class="z-source z-shell z-bash"><span class="z-comment z-line z-number-sign z-shell"><span class="z-punctuation z-definition z-comment z-begin z-shell">#</span></span><span class="z-comment z-line z-number-sign z-shell"> exit</span><span class="z-comment z-line z-number-sign z-shell"> </span></span></code></pre> <blockquote> <p><a rel="nofollow noreferrer" href="https://wiki.debian.org/sudo">sudo</a> คือ คำสั่งที่ให้ ผู้ดูแลระบบ อนุญาตให้่บาง user สามารถใช้คำสั่งที่ได้สิทธิเทียบเท่าผู้ดูแลระบบได้</p> </blockquote> <h2 id="khant-n">ขั้นตอน<a class="zola-anchor" href="#khant-n" aria-label="Anchor link for: khant-n" style="visibility: hidden;"></a> </h2> <ol> <li> <p>ให้คัดลอกข้อความด้านล่างนี้แทนที่ ของเดิมไปเลย โดยไปไว้ที่ <code>/etc/apt/sorces.list</code> กับโปรแกรมแก้ไขข้อความตัวไหนก็ได้ที่คุณชอบ โดยในที่นี้ผมจะใช้ vi โดยใช้ <code>$ sudo vi /etc/apt/sources.list</code> และคัดลอกข้อมูลด้านล่างลงไปแล้วก็บันทึก</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">deb</span></span><span class="z-meta z-function-call z-arguments z-shell"> http://ftp.th.debian.org/debian/ sid main contrib non-free</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">deb-src</span></span><span class="z-meta z-function-call z-arguments z-shell"> http://ftp.th.debian.org/debian/ sid main contrib non-free</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">deb</span></span><span class="z-meta z-function-call z-arguments z-shell"> http://ftp.th.debian.org/debian/ stable main contrib non-free</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">deb</span></span><span class="z-meta z-function-call z-arguments z-shell"> http://ftp.th.debian.org/debian/ testing main contrib non-free</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">deb</span></span><span class="z-meta z-function-call z-arguments z-shell"> http://ftp.th.debian.org/debian/ experimental main contrib non-free</span> </span></code></pre> <blockquote> <p>Read more about Archive areas: <a rel="nofollow noreferrer" href="https://www.debian.org/doc/debian-policy/ch-archive.html#s-main">main</a>, <a rel="nofollow noreferrer" href="https://www.debian.org/doc/debian-policy/ch-archive.html#s-contrib">contrib</a>, <a rel="nofollow noreferrer" href="https://www.debian.org/doc/debian-policy/ch-archive.html#s-non-free">non-free</a></p> </blockquote> <blockquote> <p>Note: Replace <code>http://ftp.th.debian.org/debian/</code> to your nearest repository</p> </blockquote> </li> <li> <p>ทำการอัพเดทรายการ package ทั้งหมดที่อยู่ใน repository ที่เราใส่ไว้ในข้อที่ 1</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo aptitude update</span> </span></code></pre> </li> <li> <p>จากนั้นทำการอัพเกรดระบบ Debain ไปยัง sid (หรือ unstable)</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo aptitude dist-upgrade</span> </span></code></pre> </li> <li> <p>เมื่อเสร็จสิ้น สั่งรีบูตเครื่อง</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo reboot</span> </span></code></pre> </li> </ol> <h2 id="ephimetim-cchalngkaidaimlngkaid">เพิ่มเติม จะลงก็ได้ไม่ลงก็ได้:<a class="zola-anchor" href="#ephimetim-cchalngkaidaimlngkaid" aria-label="Anchor link for: ephimetim-cchalngkaidaimlngkaid" style="visibility: hidden;"></a> </h2> <ul> <li> <p>การลง firmware บางตัวที่มี <a rel="nofollow noreferrer" href="https://www.debian.org/doc/debian-policy/ch-archive.html#s-non-free">non-free</a> อยู่ด้วยเช่น drivers เพื่อให้สามารถใช้ driver บางอันได้</p> <blockquote> <p>สรุปคือลงๆ ไปเถอะ คือบาง driver เช่น <code>driver การ์ดจอ</code> มันไม่ใช่ open source แต่เราสามารถใช้งานได้ฟรี ดังนั้นลงๆ ตัวนี้ไปเถอะ จะได้มี driver ใช้</p> </blockquote> <pre class="z-code"><code><span class="z-text z-plain">$ sudo aptitude install firmware-linux </span></code></pre> </li> <li> <p>ถ้าลง Debian ใหม่้ๆ แล้วจะไม่มีภาษาไทยมาให้ ตัวอักษรจะเป็นภาษาที่อ่านไม่ออก ดังนั้นควรจะลง <code>xfonts-thai</code> ด้วย จะได้อ่านภาษาไทยได้ สรุปคือลงๆ ไปเถอะถ้าเป็นคนไทย</p> <pre class="z-code"><code><span class="z-text z-plain">$ sudo aptitude install xfonts-thai </span></code></pre> </li> </ul> 2015-06-08T00:00:00+00:00 2015-06-08T00:00:00+00:00 https://thadaw.com/posts/upgrade-debian-to-sid/ <p><strong>Optional:</strong> Add <code>sudo</code> into your user</p> <pre class="z-code"><code><span class="z-text z-plain">$ su </span><span class="z-text z-plain"># aptitude install sudo </span><span class="z-text z-plain"># usermod -a -G sudo [USERNAME] </span><span class="z-text z-plain"># exit </span></code></pre> <blockquote> <p>Note: If <code>sudo</code> don't work, try logout and login again.</p> </blockquote> <ol> <li> <p>Replace the belowing text into <code>/etc/apt/sources.list</code> with your favorite editor. In my case I use <code>$ sudo vi /etc/apt/sources.list</code></p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">deb</span></span><span class="z-meta z-function-call z-arguments z-shell"> http://ftp.th.debian.org/debian/ sid main contrib non-free</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">deb-src</span></span><span class="z-meta z-function-call z-arguments z-shell"> http://ftp.th.debian.org/debian/ sid main contrib non-free</span> </span><span class="z-source z-shell z-bash"> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">deb</span></span><span class="z-meta z-function-call z-arguments z-shell"> http://ftp.th.debian.org/debian/ stable main contrib non-free</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">deb</span></span><span class="z-meta z-function-call z-arguments z-shell"> http://ftp.th.debian.org/debian/ testing main contrib non-free</span> </span><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">deb</span></span><span class="z-meta z-function-call z-arguments z-shell"> http://ftp.th.debian.org/debian/ experimental main contrib non-free</span> </span></code></pre> <blockquote> <p>Read more about Archive areas: <a rel="nofollow noreferrer" href="https://www.debian.org/doc/debian-policy/ch-archive.html#s-main">main</a>, <a rel="nofollow noreferrer" href="https://www.debian.org/doc/debian-policy/ch-archive.html#s-contrib">contrib</a>, <a rel="nofollow noreferrer" href="https://www.debian.org/doc/debian-policy/ch-archive.html#s-non-free">non-free</a></p> </blockquote> <blockquote> <p>Note: Replace <code>http://ftp.th.debian.org/debian/</code> to your nearest repository</p> </blockquote> </li> <li> <p>Update a list of repositories</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo aptitude update</span> </span></code></pre> </li> <li> <p>Upgrade your debian version into sid version</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo aptitude dist-upgrade</span> </span></code></pre> </li> <li> <p>After it finished, reboot system</p> <pre data-lang="bash" class="language-bash z-code"><code class="language-bash" data-lang="bash"><span class="z-source z-shell z-bash"><span class="z-meta z-function-call z-shell"><span class="z-variable z-function z-shell">$</span></span><span class="z-meta z-function-call z-arguments z-shell"> sudo reboot</span> </span></code></pre> </li> </ol> <p><strong>Optional:</strong></p> <ul> <li> <p>For installing firmware for various drivers in consist of <a rel="nofollow noreferrer" href="https://www.debian.org/doc/debian-policy/ch-archive.html#s-non-free">non-free</a> packages or drivers using:</p> <pre class="z-code"><code><span class="z-text z-plain">$ sudo aptitude install firmware-linux </span></code></pre> </li> <li> <p>For installing some thai font:</p> <pre class="z-code"><code><span class="z-text z-plain">$ sudo aptitude install xfonts-thai </span></code></pre> </li> </ul> 2015-05-24T00:00:00+00:00 2015-05-24T00:00:00+00:00 https://thadaw.com/posts/thai-encoding-th/ <h2 id="ascii">ASCII<a class="zola-anchor" href="#ascii" aria-label="Anchor link for: ascii" style="visibility: hidden;"></a> </h2> <p>ในระบบการแสดงผลแบบเก่า ตัวอักษรในภาษาอังกฤษนั้นจะจัดเก็บอยู่ในลักษณะของ <a rel="nofollow noreferrer" href="http://en.wikipedia.org/wiki/ASCII">ASCII</a> จะจัดเก็บตัวอักษรต่างๆ อยู่ในช่วง 0-127 (หรือ 7 bit หรือก็คือจะต้องใช้ข้อมูเลขฐานสอง 7 ตัว) ในการแทนการแสดงผลตัวอักษรภาษาอังกฤษหนึ่งตัว โดย 7 bit สามารถแทนข้อมูลต่างๆ ได้ ตั้งแต่ A-Z, a-z, ตัวเลข 0-9 และเครื่องหมาย รวมถึงตัวอักษรพิเศษต่างๆ และตัวอักษรที่มองไม่เห็น (<a rel="nofollow noreferrer" href="http://en.wikipedia.org/wiki/Whitespace_character">Whitespace character</a>) และ เช่น ตัวอักษรเอพิมพ์ใหญ่ (A) นั้นมี ASCII คือ 65 หรือ 1000001 ในเลขฐานสอง เป็นต้น <a rel="nofollow noreferrer" href="http://www.ascii-code.com/">สามารถดูตาราง ASCII ทั้งหมดได้ที่่</a></p> <p>การแสดงผลภาษาอื่นๆ บนการเข้ารหัส(encode) แบบ ASCII นั้นทำได้ แต่จะขึ้นอยู่กับระบบปฏิบัติการ(OS) และใช้ในวงแคบ โดยเป็นการขยายความสามารถของ ASCII โดยเพิ่มอีก 1 bit รวมเป็น 8 bit คืออยู่ในช่วง 128-255 ที่ใช้แทนตัวอักษรเพียงได้แค่หนึ่งภาษา ในภาษาไทยมีการใช้วิธีการเข้ารหัสที่หลากหลาย ที่ต่อยอดจากระบบ ASCII เดิม เช่น ใน Windows จะใช้การเข้ารหัสแบบ <a rel="nofollow noreferrer" href="https://msdn.microsoft.com/en-us/goglobal/cc305142.aspx">Windows 874</a> ซึ่งใช้ได้เฉพาะ Windows เท่านั้น หรือการเข้ารหัสแบบ <a rel="nofollow noreferrer" href="http://www.nectec.or.th/it-standards/std620/std620.htm">TIS-620</a> ที่ใช้ในวงแคบ ถ้าไม่ได้มีการติดตั้งเครื่องมือสำหรับการอ่าน TIS-620 ไว้ เช่น การเข้าเว็บภาษาไทยจากคอมพิวเตอร์ต่างประเทศ ก็จะทำให้ไม่สามารถแสดงผลภาษาไทยได้ถูกต้อง</p> <h2 id="unicode">Unicode<a class="zola-anchor" href="#unicode" aria-label="Anchor link for: unicode" style="visibility: hidden;"></a> </h2> <p>และเพื่อการใช้งานเป็นสากล ไม่ขึ้นอยู่กับระบบปฏิบัติการ(OS) จึงมีการคิดค้น <a rel="nofollow noreferrer" href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a> ซึ่ง Unicode คือการแทนตัวอักษรทุกๆ ตัวอักษร โดยไม่ขึ้นต่อระบบปฏิบัติการ โปรแกรมและ ภาษา โดย Unicode นั้น จะมีการแทน 1 ตัวอักษรของแต่ละภาษาด้วยหลายๆ ไบต์ (Multi-byte encodings) จึงทำให้ใช้พื้นที่ในการจัดเก็บเยอะกว่า แต่สามารถใช้งานได้สะดวก และรองรับทุกๆ ภาษา โดยปกติแล้วการ ส่งข้อมูลหรือการแสดงผ่านเว็บนั้น จะใช้การเข้ารหัสแบบ UTF-8 เพื่อความเป็นสากล ใช้งานได้ทุกภาษา (ซึ่ง UTF-8 จัดเป็น Unicode เลข 8 หมายถึงจำนวนบิตที่ใช้ในการแทนตัวอักษร) ส่วนบน Windows จะใช้ UTF-16 แต่ถ้าบนตระกูล Linux จะใช้ UTF-8</p> <h2 id="srup">สรุป<a class="zola-anchor" href="#srup" aria-label="Anchor link for: srup" style="visibility: hidden;"></a> </h2> <p>เพื่อการใช้งานภาษาไทย และรองรับภาษาทุกๆ ภาษาแล้ว ดังนั้นเราควรที่จะเลือกใช้งานวิธีการเข้ารหัสแบบ Unicode ซึ่งจะเป็น UTF-8 หรือแบบ อื่นๆ ขึ้นอยู่กับการใช้งาน โดยเฉพาะการใช้การเข้ารหัสภาษาไทยบนเว็บนั้น ควรจะเปลี่ยนมาใข้ Unicode แทนแบบ TIS-620 และ Windows-874</p> <h2 id="aanephimetim">อ่านเพิ่มเติม<a class="zola-anchor" href="#aanephimetim" aria-label="Anchor link for: aanephimetim" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="http://stackoverflow.com/a/643810">ความแตกต่างระหว่าง UTF-8 และ Unicode รวมถึงการกล่าวถึงประวัติความเป็นมาของวิธีการเข้ารหัสในแบบต่างๆ </a></li> <li><a rel="nofollow noreferrer" href="http://unicode-table.com/th/">ตาราง Unicode ภาษาไทย</a></li> <li><a rel="nofollow noreferrer" href="http://www.ascii-code.com/">ตาราง ASCII</a></li> <li><a rel="nofollow noreferrer" href="http://www.nectec.or.th/it-standards/std620/std620.htm">มาตรฐานการเข้ารหัส TIS-620</a></li> </ul> 2015-05-23T00:00:00+00:00 2015-05-23T00:00:00+00:00 https://thadaw.com/posts/thai-typing-in-atom-editor-th/ <blockquote> <p>อัพเดท 2015-07-05: <a rel="nofollow noreferrer" href="https://www.blognone.com/node/69792">Atom Editor ออกรุ่น 1.0 แล้ว</a> ผมได้ทดสอบแล้วแต่ก็ยังไม่สามารถใช้งานภาษาไทยได้</p> </blockquote> <blockquote> <p>หมายเหตุ: ถ้าใครยังไม่รู้จัก Atom Editor ลองอ่าน<a rel="nofollow noreferrer" href="https://www.blognone.com/node/56176">บทความรีวิวจาก Blognone ดูนะครับ</a></p> </blockquote> <h2 id="payhaathiiphb">ปัญหาที่พบ<a class="zola-anchor" href="#payhaathiiphb" aria-label="Anchor link for: payhaathiiphb" style="visibility: hidden;"></a> </h2> <p>ปัญหาที่ผมพบในการพิมพ์ภาษาไทยบน <a rel="nofollow noreferrer" href="https://atom.io">Atom Editor</a> คือ cursor ที่แสดงผลขณะกำลังพิมพ์นั้นไม่ตรงกับ สิ่งที่แสดงผลจริงๆ</p> <p><img src="https://thadaw.com/posts/thai-typing-in-atom-editor-th/2015-05-23-thai-typing-in-atom-editor.gif" alt="Problem while typing Thai in Atom editor" /></p> <p>หลังจากผมได้พบกับปัญหานี้ผมได้ ไปค้นหาปัญหานี้ใน google ผลปรากฏว่าได้มีคนที่ประสบปัญหาแบบเดียวกันกับผม ซึ่งตอนนี้ได้มีคนไปตั้งประเด็นนี้ไว้ใน Github ของ Atom Editor แล้ว ใน <a rel="nofollow noreferrer" href="https://github.com/atom/atom/issues/1849">Some unicode characters seem to confuse Atom #1849</a> ตั้งแต่ปี 2557 ซึ่งตอนนี้ (ณ วันที่เขียนบทความนี้) ยังไม่ได้แก้ไขปัญหานี้ได้</p> <h2 id="laksnakh-ngpayhaa">ลักษณะของปัญหา<a class="zola-anchor" href="#laksnakh-ngpayhaa" aria-label="Anchor link for: laksnakh-ngpayhaa" style="visibility: hidden;"></a> </h2> <p>โดยภาษาไทยเป็นการเข้ารหัส เพื่อการแสดงผลแบบ Unicode ซึ่งจะใช้ข้อมูลหลายๆ byte ในการแทนตัวอักษรภาษาไทยหนึ่งตัว และด้วยเหตุนี้ Atom editor ไม่สามารถแยกแยะได้ว่าตัวอักษรภาษาไทยแต่ละตัวนั้น สิ้นสุดที่อักขระ(byte) ตัวไหนจึงทำให้การแสดงผลตำแหน่ง cursor มีการผิดพลาดเกิดขึ้น</p> <p>เพื่อความเข้าใจมากยิ่งขึ้น สามารถอ่านคำอธิบาย [การแทนตัวอักษรภาษาไทยในระบบการเข้ารหัสแบบต่างๆ] เพิ่มเติมได้</p> <h2 id="withiikaaraekaikhpayhaaebuue-ngtn">วิธีการแก้ไขปัญหาเบื้องต้น<a class="zola-anchor" href="#withiikaaraekaikhpayhaaebuue-ngtn" aria-label="Anchor link for: withiikaaraekaikhpayhaaebuue-ngtn" style="visibility: hidden;"></a> </h2> <p>หลังจากผมได้ทดสอบเปลี่ยนฟอนต์ภาษาไทยหลายๆ ฟอนต์ ใน Atom Editor บน Windows 8.1 พบว่า ฟอนต์ Umpush มีปัญหาน้อยที่สุด ซึ่งเท่าที่ผมพบ มีปัญหาแค่ตัวอักษร "สระอำ" แค่ตัวเดียว</p> <p>ถ้าใครมีวิธีการแก้ปัญหาที่ดีกว่านี้ ก็สามารถนำมาแบ่งปันได้นะครับ</p> <p>ซึ่งตอนนี้ใน Atom Editor ผมได้ตั้งค่าฟอนต์ใน ไฟล์ <code>config.cson</code> ซึ่งอยู่ใน root ของ setting ของ Atom ดังนี้</p> <p><code>fontFamily: "Inconsolata, Umpush, Arial, sans-serif"</code></p> <p>หรือสามารถตั้งค่าผ่าน GUI ของ Atom Editor ได้ ที่ File &gt; Settings &gt; Editor Settings (หัวข้อ)</p> <p><img src="https://thadaw.com/posts/thai-typing-in-atom-editor-th/2015-05-23-thai-typing-in-atom-editor-2.jpg" alt="config of Atom to solve such problem" /></p> <h3 id="kham-thibaay">คำอธิบาย<a class="zola-anchor" href="#kham-thibaay" aria-label="Anchor link for: kham-thibaay" style="visibility: hidden;"></a> </h3> <ul> <li>ใช้ฟอนต์ <a rel="nofollow noreferrer" href="http://levien.com/type/myfonts/inconsolata.html">Inconsolata</a> เป็นฟอนต์ ภาษาอังกฤษหลักๆ</li> <li>ใช้ฟอนต์ <a href="ftp://linux.thai.net/pub/thailinux/software/thai-ttf">Umpush</a> สำหรับการแสดงผลภาษาไทย (<a rel="nofollow noreferrer" href="http://linux.thai.net/projects/thaifonts-scalable">หน้าแรก</a>)</li> </ul> <p>หรือเอาง่ายๆ เปลี่ยน Editor ไปเลย เปลี่ยนไปใช้ <a rel="nofollow noreferrer" href="http://brackets.io/">Brackets</a> แทน ไม่มีปัญหาเรื่องการพิมพ์ภาษาไทยแน่ๆ เดี๋ยวในอนาคตผมอาจจะมารีวิวโปรแกรม Brackets กันครับ</p> <h2 id="khamthiiekiiywkh-ng">คำที่เกี่ยวข้อง<a class="zola-anchor" href="#khamthiiekiiywkh-ng" aria-label="Anchor link for: khamthiiekiiywkh-ng" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://github.com/atom/atom/issues/6413">Error when I put my cursor to the text</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/atom/atom/issues/3498">Cursor positioning on certain Unicode characters</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/atom/atom/issues/5975">incorrect cursor placement on lines with accented characters</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/atom/atom/issues/4595">wrong cursor location with multi-byte characters</a></li> </ul> 2015-05-07T00:00:00+00:00 2015-05-07T00:00:00+00:00 https://thadaw.com/posts/responsive-expanding-search-bar/ <p><img src="https://thadaw.com/posts/responsive-expanding-search-bar/2015-05-06-responsive-expanding-search-bar.jpg" alt="responsive-expanding-search-bar" /></p> <!-- demo: /demo/responsive-expanding-search-bar/ --> <p><strong>Expanding Search Bar</strong> is an expanding search bar extension for any HTML page or Jekyll. This extension is a lightweight version of <a rel="nofollow noreferrer" href="http://tympanus.net/Tutorials/ExpandingSearchBar/">Expanding Search Bar Deconstructed</a> for using in Jekyll or HTML. This extension is used in <a rel="nofollow noreferrer" href="http://mildronize.github.io">my blog</a>.</p> <p>Because <a rel="nofollow noreferrer" href="http://mildronize.github.io">my blog</a> have used icon set from <a rel="nofollow noreferrer" href="http://fontawesome.io">Font Awesome</a>. I change icon set from the <a href="https://thadaw.com/posts/responsive-expanding-search-bar/#original-project-documentation">original project</a> into <a rel="nofollow noreferrer" href="http://fontawesome.io">Font Awesome</a> as in <a rel="nofollow noreferrer" href="http://mildronize.github.io">my blog</a>.</p> <h2 id="usage">Usage<a class="zola-anchor" href="#usage" aria-label="Anchor link for: usage" style="visibility: hidden;"></a> </h2> <ol> <li> <p>copy all of project's resource to your project.</p> <pre class="z-code"><code><span class="z-text z-plain">/css </span><span class="z-text z-plain">/fonts </span><span class="z-text z-plain">/js </span></code></pre> </li> <li> <p>Insert css header into your HTML</p> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">link</span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">rel</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>stylesheet<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>text/css<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">href</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>css/font-awesome-4.3.0.min.css<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-punctuation z-definition z-tag z-end z-html">/&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">link</span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">rel</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>stylesheet<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>text/css<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">href</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>css/expanding-search-bar.css<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-punctuation z-definition z-tag z-end z-html">/&gt;</span></span> </span></code></pre> </li> <li> <p>Place below code into top of HTML code or anywhere what you want.</p> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-block z-any z-html">div</span> <span class="z-meta z-attribute-with-value z-id z-html"><span class="z-entity z-other z-attribute-name z-id z-html">id</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-toc-list z-id z-html">sb-search</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">sb-search</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"> <span class="z-meta z-tag z-block z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-block z-form z-html">form</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"> <span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">input</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">sb-search-input</span> <span class="z-meta z-class-name z-html">search-bar</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">placeholder</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>Enter your search term...<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>text<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">value</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">name</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>search<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-id z-html"><span class="z-entity z-other z-attribute-name z-id z-html">id</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-toc-list z-id z-html">search</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"> <span class="z-meta z-tag z-inline z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-form z-html">input</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">sb-search-submit</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">type</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>submit<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">value</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"> <span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">span</span> <span class="z-meta z-attribute-with-value z-class z-html"><span class="z-entity z-other z-attribute-name z-class z-html">class</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span></span><span class="z-string z-quoted z-double z-html"><span class="z-meta z-class-name z-html">fa</span> <span class="z-meta z-class-name z-html">fa-search</span> <span class="z-meta z-class-name z-html">sb-icon-search</span><span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">span</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"> <span class="z-meta z-tag z-block z-form z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-block z-form z-html">form</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-block z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-block z-any z-html">div</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> </li> <li> <p>Add JS at bottom of HTML code</p> <pre data-lang="html" class="language-html z-code"><code class="language-html" data-lang="html"><span class="z-text z-html z-basic"><span class="z-meta z-tag z-script z-begin z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-script z-html">script</span></span><span class="z-meta z-tag z-script z-begin z-html"> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">src</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>js/classie.js<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span><span class="z-meta z-tag z-script z-end z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-script z-html">script</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-script z-begin z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-script z-html">script</span></span><span class="z-meta z-tag z-script z-begin z-html"> <span class="z-meta z-attribute-with-value z-html"><span class="z-entity z-other z-attribute-name z-html">src</span><span class="z-punctuation z-separator z-key-value z-html">=</span><span class="z-string z-quoted z-double z-html"><span class="z-punctuation z-definition z-string z-begin z-html">&quot;</span>js/uisearch.js<span class="z-punctuation z-definition z-string z-end z-html">&quot;</span></span></span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span><span class="z-meta z-tag z-script z-end z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-script z-html">script</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"><span class="z-meta z-tag z-script z-begin z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-script z-html">script</span></span><span class="z-meta z-tag z-script z-begin z-html"><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span><span class="z-text z-html z-basic"> <span class="z-source z-js z-embedded z-html"><span class="z-source z-js"><span class="z-keyword z-operator z-word z-new z-js">new</span><span class="z-meta z-function-call z-constructor z-js"> <span class="z-variable z-type z-js">UISearch</span><span class="z-meta z-group z-js"><span class="z-punctuation z-section z-group z-begin z-js">(</span> <span class="z-meta z-function-call z-method z-js"><span class="z-support z-type z-object z-dom z-js">document</span><span class="z-punctuation z-accessor z-js">.</span><span class="z-variable z-function z-js">getElementById</span><span class="z-meta z-group z-js"><span class="z-punctuation z-section z-group z-begin z-js">(</span> <span class="z-meta z-string z-js"><span class="z-string z-quoted z-single z-js"><span class="z-punctuation z-definition z-string z-begin z-js">&#39;</span>sb-search<span class="z-punctuation z-definition z-string z-end z-js">&#39;</span></span></span> <span class="z-punctuation z-section z-group z-end z-js">)</span></span> </span><span class="z-punctuation z-section z-group z-end z-js">)</span></span></span><span class="z-punctuation z-terminator z-statement z-js">;</span> </span></span></span><span class="z-text z-html z-basic"><span class="z-source z-js z-embedded z-html"><span class="z-source z-js"></span></span><span class="z-meta z-tag z-script z-end z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-script z-html">script</span><span class="z-punctuation z-definition z-tag z-end z-html">&gt;</span></span> </span></code></pre> </li> </ol> <h2 id="source">Source<a class="zola-anchor" href="#source" aria-label="Anchor link for: source" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/ExpandingSearchBar">Github</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/ExpandingSearchBar/archive/master.zip">Download</a></li> </ul> <h2 id="original-project-documentation">Original project documentation<a class="zola-anchor" href="#original-project-documentation" aria-label="Anchor link for: original-project-documentation" style="visibility: hidden;"></a> </h2> <p>A tutorial on how to create a mobile-friendly and responsive expanding search bar.</p> <p><a rel="nofollow noreferrer" href="http://tympanus.net/codrops/?p=15599">article on Codrops</a></p> <p><a rel="nofollow noreferrer" href="http://tympanus.net/Tutorials/ExpandingSearchBar/">demo</a></p> <p><a rel="nofollow noreferrer" href="http://tympanus.net/codrops/licensing/">LICENSING &amp; TERMS OF USE</a></p> 2015-05-06T00:00:00+00:00 2015-05-06T00:00:00+00:00 https://thadaw.com/posts/my-blog-development/ <blockquote> <p>This post is involving the old version site, built with <a rel="nofollow noreferrer" href="http://jekyllrb.com">Jekyll</a>. Demo site: https://jekyll.mildronize.com <a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io">source</a></p> </blockquote> <h2 id="tools-for-v-2">Tools for V.2<a class="zola-anchor" href="#tools-for-v-2" aria-label="Anchor link for: tools-for-v-2" style="visibility: hidden;"></a> </h2> <h3 id="main-tools">Main Tools<a class="zola-anchor" href="#main-tools" aria-label="Anchor link for: main-tools" style="visibility: hidden;"></a> </h3> <ul> <li><a rel="nofollow noreferrer" href="https://pages.github.com">GitHub Page</a></li> <li><a rel="nofollow noreferrer" href="http://jekyllrb.com">Jekyll</a></li> <li><a rel="nofollow noreferrer" href="https://travis-ci.org/">Travis</a></li> <li><a rel="nofollow noreferrer" href="https://www.docker.com/">Docker</a></li> </ul> <h2 id="web-development-tools">Web Development Tools<a class="zola-anchor" href="#web-development-tools" aria-label="Anchor link for: web-development-tools" style="visibility: hidden;"></a> </h2> <ul> <li><a rel="nofollow noreferrer" href="https://bulma.io/">Bulma</a> - CSS Framework</li> <li><a rel="nofollow noreferrer" href="https://github.com/filamentgroup/loadCSS">loadCSS</a> - Load CSS files Asynchronously</li> <li><a rel="nofollow noreferrer" href="https://reactjs.org/">React</a></li> <li><a rel="nofollow noreferrer" href="https://webpack.js.org/">Webpack4</a></li> <li><a rel="nofollow noreferrer" href="https://jquery.com/">JQuery</a> for using with table of contents</li> <li><a rel="nofollow noreferrer" href="https://github.com/verlok/lazyload">lazyload</a> - Lazy load image</li> </ul> <h2 id="features">Features<a class="zola-anchor" href="#features" aria-label="Anchor link for: features" style="visibility: hidden;"></a> </h2> <ul> <li>Search Page with React</li> </ul> <p><img src="https://www.dropbox.com/s/3d4vqbnd424wbsh/2018-09-17-99-score-google-insight-web-optimization-6.jpg?raw=1" alt="search" /></p> <ul> <li>Blurry Load like Medium. Thanks for <a rel="nofollow noreferrer" href="https://jmperezperez.com/medium-image-progressive-loading-placeholder/"> José's post</a></li> </ul> <p><img src="https://www.dropbox.com/s/4t30cmbtezs3qbw/2018-09-17-99-score-google-insight-web-optimization-7.gif?raw=1" alt="image-load-blur" /></p> <blockquote> <p>Latest version is posted on <a href="/posts/2018-09-17-99-score-google-insight-web-optimization/">ได้ 99 คะแนนจาก Google Insights &amp; เรียนรู้การทำ web optimization</a></p> </blockquote> <h2 id="tools-for-v-1">Tools for V.1<a class="zola-anchor" href="#tools-for-v-1" aria-label="Anchor link for: tools-for-v-1" style="visibility: hidden;"></a> </h2> <h3 id="main-tools-1">Main Tools<a class="zola-anchor" href="#main-tools-1" aria-label="Anchor link for: main-tools-1" style="visibility: hidden;"></a> </h3> <ul> <li><a rel="nofollow noreferrer" href="https://pages.github.com">GitHub Page</a></li> <li><a rel="nofollow noreferrer" href="http://jekyllrb.com">Jekyll</a></li> <li><a rel="nofollow noreferrer" href="http://hyde.getpoole.com/">Hyde</a></li> <li><a rel="nofollow noreferrer" href="https://www.docker.com/">Docker</a></li> </ul> <h3 id="web-development-tools-1">Web Development Tools<a class="zola-anchor" href="#web-development-tools-1" aria-label="Anchor link for: web-development-tools-1" style="visibility: hidden;"></a> </h3> <ul> <li><a rel="nofollow noreferrer" href="https://angularjs.org/">angularJS</a> for search page</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/ExpandingSearchBar">My Expanding Search Bar</a>, that is original from <a rel="nofollow noreferrer" href="http://tympanus.net/Tutorials/ExpandingSearchBar/">Expanding Search Bar</a></li> <li><a rel="nofollow noreferrer" href="http://fontawesome.io">Font Awesome</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/ghiculescu/jekyll-table-of-contents">Table of contents for Jekyll</a></li> <li><a rel="nofollow noreferrer" href="https://jquery.com/">JQuery</a> for using with table of contents</li> </ul> <h2 id="structure">Structure<a class="zola-anchor" href="#structure" aria-label="Anchor link for: structure" style="visibility: hidden;"></a> </h2> <p><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/blob/master/README.md">see README.MD in this repository</a></p> <h2 id="timeline">Timeline<a class="zola-anchor" href="#timeline" aria-label="Anchor link for: timeline" style="visibility: hidden;"></a> </h2> <ul> <li>01 Oct 2014 » Register <a rel="nofollow noreferrer" href="https://pages.github.com">GitHub Page</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/a48c4b03033496c16e1eeb6377f7a2fb6fa79586">02 May 2015</a> » Clone <a rel="nofollow noreferrer" href="http://hyde.getpoole.com/">Hyde</a> theme</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/58f941a5a9d0066c5ea939aaab98f1adef291647">03 May 2015</a> » Create a my <a href="/posts/2015-05-03-how-to-setup-this-blog">first post</a> and fill my profile</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/5b51c7691acb01beec8df5f3704f57d3da272922">03 May 2015</a> » Add Note page</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/8f8d30957145551e13cec173019a8aeb19efe5e4">04 May 2015</a> » Add social icons using <a rel="nofollow noreferrer" href="http://fontawesome.io">Font Awesome</a> at sidebar</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/b4d40e52dae31f81b242ff689ad3fc0ae93f0b71">04 May 2015</a> » Add <a rel="nofollow noreferrer" href="http://www.google.com/analytics/">google analytics</a> at header</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/8604dd5504b7cd794da59923a36878b43df48cc3">04 May 2015</a> » Add showcase layout</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/831f4fb466d0f9cd513a45c299b946ca2f398aed">05 May 2015</a> » Add <a href="https://thadaw.com/posts/my-blog-development/%7B%7Bsite.baseurl%7D%7D/search/">Search page</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/45272e4bb72d121d144827c6075a2a0bd48cd764">05 May 2015</a> » Add search bar, and binding url and search bar on <a href="https://thadaw.com/posts/my-blog-development/%7B%7Bsite.baseurl%7D%7D/search/">Search page</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/8f83e6963f2a70b0979ff4be8a85541a19e34594">06 May 2015</a> » Add this note</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/ca7df4be719fd2b9891cbea53fce88722196f419">06 May 2015</a> » <a rel="nofollow noreferrer" href="http://milanaryal.com/2015/adding-hover-anchor-links-to-header-on-github-pages-using-jekyll">Add hover anchor links to header on GitHub Pages using Jekyll</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/7872d3039fd05e9b1b6f1581a13772b65c9c6b27">06 May 2015</a> » Add html header for friendly with search engine such as keywords, description, etc.</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/f8ff0a772521cf5b90cb0cd455bc9d8c85997ffb">07 May 2015</a> » <a rel="nofollow noreferrer" href="https://help.disqus.com/customer/portal/articles/472138-jekyll-installation-instructions">Add Disqus comment</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/a5b53f372baa85f2657699addd3640e086188756">19 May 2015</a> » Add <code>featured notes</code> in <a href="https://thadaw.com/posts/my-blog-development/%7B%7Bsite.baseurl%7D%7D/notes/">Note page</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/0b30a3c10a593ee4aeeba400ec08efe531b09451">19 May 2015</a> » Add <a rel="nofollow noreferrer" href="https://github.com/ghiculescu/jekyll-table-of-contents">Table of Contents for Jekyll</a> in <code>post layout</code></li> <li>24 Jun 2015 » Make this blog to multilanguage :D</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/c37ff03a3f6af823014bb2df4fdefa4809c90273">28 Oct 2015</a> » Move to <a rel="nofollow noreferrer" href="https://travis-ci.org/mildronize/mildronize.github.io">Travis-CI</a> (Build Jekyll site with Travis-CI)</li> <li><a rel="nofollow noreferrer" href="https://github.com/mildronize/mildronize.github.io/commit/ec636fc39654c82e3b5d2a0d295bbf5d659f9748">28 jan 2016</a> » Use <a rel="nofollow noreferrer" href="https://www.docker.com/">Docker</a> instead Jekyll packages on Debian for development and writing a blog.</li> <li>30 jan 2016 » Combine Thai language into my main blog (This web includes with Thai and English posts).</li> </ul> <h2 id="next-plans">Next Plans<a class="zola-anchor" href="#next-plans" aria-label="Anchor link for: next-plans" style="visibility: hidden;"></a> </h2> <ul> <li>Build a tools for auto generate prototype of post (YAML header) <ul> <li>Convert to title string to lowercase of string and dash.</li> <li>Generate simple YAML file.</li> <li>It's called 'Tools' page.</li> </ul> </li> <li>Fix Related post to show only the posts that have related tags</li> <li>Auto complete search</li> <li><a rel="nofollow noreferrer" href="http://vvv.tobiassjosten.net/jekyll/jekyll-tag-cloud/">Cloud tags</a></li> </ul> 2015-05-04T00:00:00+00:00 2015-05-04T00:00:00+00:00 https://thadaw.com/posts/simple-soap-client-and-simple-server-via-flask/ <h2 id="objective">Objective:<a class="zola-anchor" href="#objective" aria-label="Anchor link for: objective" style="visibility: hidden;"></a> </h2> <p>To get current oil price in Thailand via SOAP and response in JSON format. SOAP Server URL for this scirpt: <a rel="nofollow noreferrer" href="http://www.pttplc.com/webservice/pttinfo.asmx?WSDL">http://www.pttplc.com/webservice/pttinfo.asmx?WSDL</a></p> <h2 id="prerequisite">Prerequisite:<a class="zola-anchor" href="#prerequisite" aria-label="Anchor link for: prerequisite" style="visibility: hidden;"></a> </h2> <ul> <li>Python 3.4</li> <li>flask</li> <li>flask-cors</li> <li>suds-jurko</li> <li>xmltodict</li> </ul> <p>This script is located in <a rel="nofollow noreferrer" href="https://gist.github.com/mildronize/56a35fb6d26d0e9002a1">https://gist.github.com/mildronize/56a35fb6d26d0e9002a1</a></p> <pre data-lang="python" class="language-python z-code"><code class="language-python" data-lang="python"><span class="z-source z-python"><span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span>!/usr/bin/python3 </span></span><span class="z-source z-python"> </span><span class="z-source z-python"><span class="z-meta z-statement z-import z-python"><span class="z-keyword z-control z-import z-from z-python">from</span></span><span class="z-meta z-statement z-import z-python"><span class="z-meta z-import-source z-python"> <span class="z-meta z-import-path z-python"><span class="z-meta z-import-name z-python">flask</span></span> <span class="z-meta z-statement z-import z-python"><span class="z-keyword z-control z-import z-python">import</span></span></span></span><span class="z-meta z-statement z-import z-python"></span><span class="z-meta z-statement z-import z-python"> <span class="z-meta z-generic-name z-python">Flask</span></span> </span><span class="z-source z-python"><span class="z-meta z-statement z-import z-python"><span class="z-keyword z-control z-import z-from z-python">from</span></span><span class="z-meta z-statement z-import z-python"><span class="z-meta z-import-source z-python"> <span class="z-meta z-import-path z-python"><span class="z-meta z-import-name z-python">flask</span></span> <span class="z-meta z-statement z-import z-python"><span class="z-keyword z-control z-import z-python">import</span></span></span></span><span class="z-meta z-statement z-import z-python"></span><span class="z-meta z-statement z-import z-python"> <span class="z-meta z-generic-name z-python">request</span><span class="z-punctuation z-separator z-import-list z-python">,</span> <span class="z-meta z-generic-name z-python">jsonify</span></span> </span><span class="z-source z-python"><span class="z-meta z-statement z-import z-python"><span class="z-keyword z-control z-import z-from z-python">from</span></span><span class="z-meta z-statement z-import z-python"><span class="z-meta z-import-source z-python"> <span class="z-meta z-import-path z-python"><span class="z-meta z-import-name z-python">flask</span><span class="z-punctuation z-accessor z-dot z-python">.</span><span class="z-meta z-import-name z-python">ext</span><span class="z-punctuation z-accessor z-dot z-python">.</span><span class="z-meta z-import-name z-python">cors</span></span> <span class="z-meta z-statement z-import z-python"><span class="z-keyword z-control z-import z-python">import</span></span></span></span><span class="z-meta z-statement z-import z-python"></span><span class="z-meta z-statement z-import z-python"> <span class="z-variable z-other z-constant z-python">CORS</span></span> </span><span class="z-source z-python"><span class="z-meta z-statement z-import z-python"><span class="z-keyword z-control z-import z-from z-python">from</span></span><span class="z-meta z-statement z-import z-python"><span class="z-meta z-import-source z-python"> <span class="z-meta z-import-path z-python"><span class="z-meta z-import-name z-python">suds</span><span class="z-punctuation z-accessor z-dot z-python">.</span><span class="z-meta z-import-name z-python">client</span></span> <span class="z-meta z-statement z-import z-python"><span class="z-keyword z-control z-import z-python">import</span></span></span></span><span class="z-meta z-statement z-import z-python"></span><span class="z-meta z-statement z-import z-python"> <span class="z-meta z-generic-name z-python">Client</span></span> </span><span class="z-source z-python"><span class="z-meta z-statement z-import z-python"><span class="z-keyword z-control z-import z-python">import</span> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">xmltodict</span></span></span> </span><span class="z-source z-python"> </span><span class="z-source z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">app</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">Flask</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-qualified-name z-python"><span class="z-support z-variable z-magic z-python">__name__</span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">cors</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">CORS</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">app</span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"> </span><span class="z-source z-python"><span class="z-meta z-annotation z-python"><span class="z-punctuation z-definition z-annotation z-python">@</span><span class="z-meta z-annotation z-function z-python"></span></span><span class="z-meta z-annotation z-function z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">app</span></span><span class="z-meta z-qualified-name z-python"><span class="z-punctuation z-accessor z-dot z-python">.</span></span><span class="z-meta z-qualified-name z-python"><span class="z-variable z-annotation z-function z-python"><span class="z-meta z-generic-name z-python">route</span></span></span></span><span class="z-meta z-annotation z-function z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span></span><span class="z-meta z-annotation z-arguments z-python"><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&quot;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python">/apis/get-oil-price<span class="z-punctuation z-definition z-string z-end z-python">&quot;</span></span></span> <span class="z-punctuation z-separator z-arguments z-python">,</span> <span class="z-variable z-parameter z-python">methods</span><span class="z-keyword z-operator z-assignment z-python">=</span><span class="z-meta z-sequence z-list z-python"><span class="z-punctuation z-section z-sequence z-begin z-python">[</span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">POST<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span><span class="z-punctuation z-section z-sequence z-end z-python">]</span></span></span><span class="z-meta z-annotation z-function z-python"><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"><span class="z-meta z-function z-python"><span class="z-storage z-type z-function z-python"><span class="z-keyword z-declaration z-function z-python">def</span></span> <span class="z-entity z-name z-function z-python"><span class="z-meta z-generic-name z-python">get_oil_price</span></span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-begin z-python">(</span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-end z-python">)</span></span><span class="z-meta z-function z-python"><span class="z-punctuation z-section z-function z-begin z-python">:</span></span> </span><span class="z-source z-python"> <span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span> Get variable from http POST </span></span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">date_string</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-support z-type z-python">str</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-item-access z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">request</span><span class="z-punctuation z-accessor z-dot z-python">.</span><span class="z-meta z-generic-name z-python">form</span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-begin z-python">[</span></span><span class="z-meta z-item-access z-arguments z-python"><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">date<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-end z-python">]</span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">date_string</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">date_string</span></span><span class="z-meta z-qualified-name z-python"><span class="z-punctuation z-accessor z-dot z-python">.</span></span><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">split</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">-<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">day</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-item-access z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">date_string</span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-begin z-python">[</span></span><span class="z-meta z-item-access z-arguments z-python"><span class="z-constant z-numeric z-integer z-decimal z-python">2</span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-end z-python">]</span></span> </span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">month</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-item-access z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">date_string</span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-begin z-python">[</span></span><span class="z-meta z-item-access z-arguments z-python"><span class="z-constant z-numeric z-integer z-decimal z-python">1</span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-end z-python">]</span></span> </span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">year</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-item-access z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">date_string</span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-begin z-python">[</span></span><span class="z-meta z-item-access z-arguments z-python"><span class="z-constant z-numeric z-integer z-decimal z-python">0</span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-end z-python">]</span></span> </span><span class="z-source z-python"> <span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span> Get SOAP Service via suds </span></span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">url</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">http://www.pttplc.com/webservice/pttinfo.asmx?WSDL<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span> </span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">client</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">Client</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">url</span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"> <span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span> Execute GetOilPrice method of SOAP </span></span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">xml</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">client</span><span class="z-punctuation z-accessor z-dot z-python">.</span><span class="z-meta z-generic-name z-python">service</span></span><span class="z-meta z-qualified-name z-python"><span class="z-punctuation z-accessor z-dot z-python">.</span></span><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">GetOilPrice</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&quot;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python">EN<span class="z-punctuation z-definition z-string z-end z-python">&quot;</span></span></span><span class="z-punctuation z-separator z-arguments z-python">,</span> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">day</span></span><span class="z-punctuation z-separator z-arguments z-python">,</span> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">month</span></span><span class="z-punctuation z-separator z-arguments z-python">,</span> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">year</span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"> <span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span> Convert XML to dict </span></span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">res_dict</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">xmltodict</span></span><span class="z-meta z-qualified-name z-python"><span class="z-punctuation z-accessor z-dot z-python">.</span></span><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">parse</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">xml</span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">result</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-mapping z-empty z-python"><span class="z-punctuation z-section z-mapping z-begin z-python">{</span><span class="z-punctuation z-section z-mapping z-end z-python">}</span></span> </span><span class="z-source z-python"> <span class="z-meta z-item-access z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">result</span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-begin z-python">[</span></span><span class="z-meta z-item-access z-arguments z-python"><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">result<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-end z-python">]</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-item-access z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">res_dict</span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-begin z-python">[</span></span><span class="z-meta z-item-access z-arguments z-python"><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">PTT_DS<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-end z-python">]</span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-begin z-python">[</span></span><span class="z-meta z-item-access z-arguments z-python"><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">DataAccess<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-end z-python">]</span></span> </span><span class="z-source z-python"> <span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span> Convert dict to JSON </span></span><span class="z-source z-python"> <span class="z-keyword z-control z-flow z-return z-python">return</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">jsonify</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-keyword z-operator z-arithmetic z-python">*</span><span class="z-keyword z-operator z-arithmetic z-python">*</span><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">result</span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"> </span><span class="z-source z-python"><span class="z-meta z-annotation z-python"><span class="z-punctuation z-definition z-annotation z-python">@</span><span class="z-meta z-annotation z-function z-python"></span></span><span class="z-meta z-annotation z-function z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">app</span></span><span class="z-meta z-qualified-name z-python"><span class="z-punctuation z-accessor z-dot z-python">.</span></span><span class="z-meta z-qualified-name z-python"><span class="z-variable z-annotation z-function z-python"><span class="z-meta z-generic-name z-python">route</span></span></span></span><span class="z-meta z-annotation z-function z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span></span><span class="z-meta z-annotation z-arguments z-python"><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&quot;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python">/apis/current-oil-price<span class="z-punctuation z-definition z-string z-end z-python">&quot;</span></span></span> <span class="z-punctuation z-separator z-arguments z-python">,</span> <span class="z-variable z-parameter z-python">methods</span><span class="z-keyword z-operator z-assignment z-python">=</span><span class="z-meta z-sequence z-list z-python"><span class="z-punctuation z-section z-sequence z-begin z-python">[</span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">GET<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span><span class="z-punctuation z-section z-sequence z-end z-python">]</span></span></span><span class="z-meta z-annotation z-function z-python"><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"><span class="z-meta z-function z-python"><span class="z-storage z-type z-function z-python"><span class="z-keyword z-declaration z-function z-python">def</span></span> <span class="z-entity z-name z-function z-python"><span class="z-meta z-generic-name z-python">oil_current_price</span></span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-begin z-python">(</span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-end z-python">)</span></span><span class="z-meta z-function z-python"><span class="z-punctuation z-section z-function z-begin z-python">:</span></span> </span><span class="z-source z-python"> <span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span> Get SOAP Service via suds </span></span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">url</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">http://www.pttplc.com/webservice/pttinfo.asmx?WSDL<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span> </span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">client</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">Client</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">url</span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"> <span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span> Execute CurrentOilPrice method of SOAP </span></span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">xml</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">client</span><span class="z-punctuation z-accessor z-dot z-python">.</span><span class="z-meta z-generic-name z-python">service</span></span><span class="z-meta z-qualified-name z-python"><span class="z-punctuation z-accessor z-dot z-python">.</span></span><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">CurrentOilPrice</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&quot;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python">EN<span class="z-punctuation z-definition z-string z-end z-python">&quot;</span></span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"> <span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span> Convert XML to dict </span></span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">res_dict</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">xmltodict</span></span><span class="z-meta z-qualified-name z-python"><span class="z-punctuation z-accessor z-dot z-python">.</span></span><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">parse</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">xml</span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"> <span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">result</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-mapping z-empty z-python"><span class="z-punctuation z-section z-mapping z-begin z-python">{</span><span class="z-punctuation z-section z-mapping z-end z-python">}</span></span> </span><span class="z-source z-python"> <span class="z-meta z-item-access z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">result</span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-begin z-python">[</span></span><span class="z-meta z-item-access z-arguments z-python"><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">result<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-end z-python">]</span></span> <span class="z-keyword z-operator z-assignment z-python">=</span> <span class="z-meta z-item-access z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">res_dict</span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-begin z-python">[</span></span><span class="z-meta z-item-access z-arguments z-python"><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">PTT_DS<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-end z-python">]</span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-begin z-python">[</span></span><span class="z-meta z-item-access z-arguments z-python"><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">DataAccess<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span></span><span class="z-meta z-item-access z-python"><span class="z-punctuation z-section z-brackets z-end z-python">]</span></span> </span><span class="z-source z-python"> <span class="z-comment z-line z-number-sign z-python"><span class="z-punctuation z-definition z-comment z-python">#</span> Convert dict to JSON </span></span><span class="z-source z-python"> <span class="z-keyword z-control z-flow z-return z-python">return</span> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">jsonify</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-keyword z-operator z-arithmetic z-python">*</span><span class="z-keyword z-operator z-arithmetic z-python">*</span><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">result</span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span><span class="z-source z-python"> </span><span class="z-source z-python"><span class="z-meta z-statement z-conditional z-if z-python"><span class="z-keyword z-control z-conditional z-if z-python">if</span> <span class="z-meta z-qualified-name z-python"><span class="z-support z-variable z-magic z-python">__name__</span></span> <span class="z-keyword z-operator z-comparison z-python">==</span> <span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&quot;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python">__main__<span class="z-punctuation z-definition z-string z-end z-python">&quot;</span></span></span><span class="z-punctuation z-section z-block z-conditional z-if z-python">:</span></span> </span><span class="z-source z-python"> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-meta z-generic-name z-python">app</span></span><span class="z-meta z-qualified-name z-python"><span class="z-punctuation z-accessor z-dot z-python">.</span></span><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-meta z-generic-name z-python">run</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-variable z-parameter z-python">host</span><span class="z-keyword z-operator z-assignment z-python">=</span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python"><span class="z-punctuation z-definition z-string z-begin z-python">&#39;</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-single z-python">0.0.0.0<span class="z-punctuation z-definition z-string z-end z-python">&#39;</span></span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span> </span></code></pre> 2015-05-03T00:00:00+00:00 2015-05-03T00:00:00+00:00 https://thadaw.com/posts/how-to-setup-this-blog/ <p>I'm following <a rel="nofollow noreferrer" href="http://dev.im-bot.com/2014/06/16/how-to-set-up-this-blog/">botbotbot 's blog</a> to setup this blog. Some contents of this post is original from him.</p> <blockquote> <p>"This blog created by Jekyll that is ruby scripts to transforms plain text into static html website and blogs and hosted on Github Page that free hosting support Jekyll.This blog use Lanyon theme that based on Poole a minimal style of Jekyll." botbotbot said.</p> </blockquote> <p>All of below steps are same as <a rel="nofollow noreferrer" href="http://dev.im-bot.com/2014/06/16/how-to-set-up-this-blog/">botbotbot 's blog</a>, but I have used <a rel="nofollow noreferrer" href="http://hyde.getpoole.com/">Hyde</a> theme intead.</p> <h2 id="set-up-github-page">Set up github page:<a class="zola-anchor" href="#set-up-github-page" aria-label="Anchor link for: set-up-github-page" style="visibility: hidden;"></a> </h2> <ol> <li> <p>Follow setup guilde of Github page for more information about jekyll on github look at</p> <pre class="z-code"><code><span class="z-text z-plain">http://help.github.com/articles/using-jekyll-with-pages </span></code></pre> </li> <li> <p>Clone project from <a rel="nofollow noreferrer" href="http://hyde.getpoole.com/">Hyde</a>.</p> <pre class="z-code"><code><span class="z-text z-plain">git clone https://github.com/poole/hyde.git </span></code></pre> </li> <li> <p>Configs jekyll in <code>_config.yml</code>.</p> <pre data-lang="yaml" class="language-yaml z-code"><code class="language-yaml" data-lang="yaml"><span class="z-source z-yaml"><span class="z-comment z-line z-number-sign z-yaml"><span class="z-punctuation z-definition z-comment z-line z-number-sign z-yaml">#</span> Setup </span></span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">title</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">Mildronize&#39;s blog</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">tagline</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>mildronize-blog<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">description</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-quoted z-single z-yaml"><span class="z-punctuation z-definition z-string z-begin z-yaml">&#39;</span>My dev blog<span class="z-punctuation z-definition z-string z-end z-yaml">&#39;</span></span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">url</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">http://mildronize.github.io</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">baseurl</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-string z-unquoted z-plain z-out z-yaml">/</span> </span><span class="z-source z-yaml"><span class="z-string z-unquoted z-plain z-out z-yaml"><span class="z-entity z-name z-tag z-yaml">paginate</span></span><span class="z-punctuation z-separator z-key-value z-mapping z-yaml">:</span> <span class="z-constant z-numeric z-integer z-decimal z-yaml">5</span> </span></code></pre> </li> <li> <p>Make tags.md in root directory copy code from</p> <pre class="z-code"><code><span class="z-text z-plain"> https://github.com/LanyonM/lanyonm.github.io/blob/master/tags.html </span></code></pre> </li> <li> <p>Let blog it.</p> </li> </ol> <h3 id="next-step">Next Step<a class="zola-anchor" href="#next-step" aria-label="Anchor link for: next-step" style="visibility: hidden;"></a> </h3> <ul> <li><a rel="nofollow noreferrer" href="http://milanaryal.com/2015/adding-hover-anchor-links-to-header-on-github-pages-using-jekyll">Add hover anchor links to header on GitHub Pages using Jekyll</a></li> </ul> <h3 id="note">Note:<a class="zola-anchor" href="#note" aria-label="Anchor link for: note" style="visibility: hidden;"></a> </h3> <p>If you got the message from jekyll build(or serve) <code>Liquid Exception: Failed to get header.</code>, try to check your python version that is python 2.7.</p> <p>See full instruction from <a rel="nofollow noreferrer" href="http://akenn.org/blog/Liquid-Exception-Jekyll/">http://akenn.org/blog/Liquid-Exception-Jekyll/</a></p> <h3 id="recommended-resources">Recommended Resources<a class="zola-anchor" href="#recommended-resources" aria-label="Anchor link for: recommended-resources" style="visibility: hidden;"></a> </h3> <ul> <li><a rel="nofollow noreferrer" href="http://jmcglone.com/guides/github-pages/">Creating and Hosting a Personal Site on GitHub from scratch (step by step)</a></li> </ul> <h3 id="related-resources">Related Resources<a class="zola-anchor" href="#related-resources" aria-label="Anchor link for: related-resources" style="visibility: hidden;"></a> </h3> <h4 id="git-github-and-github-pages">Git, GitHub, and GitHub Pages<a class="zola-anchor" href="#git-github-and-github-pages" aria-label="Anchor link for: git-github-and-github-pages" style="visibility: hidden;"></a> </h4> <ul> <li><a rel="nofollow noreferrer" href="http://git-scm.com/doc">Git Documentation</a></li> <li><a rel="nofollow noreferrer" href="https://try.github.io/levels/1/challenges/1">Learn Git and GitHub in 15 minutes</a></li> <li><a rel="nofollow noreferrer" href="https://help.github.com/articles/github-glossary">GitHub Glossary</a></li> <li><a rel="nofollow noreferrer" href="https://help.github.com/">GitHub Help</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/tiimgreen/github-cheat-sheet">GitHub Cheat Sheet</a></li> <li><a rel="nofollow noreferrer" href="http://blogs.lse.ac.uk/impactofsocialsciences/2013/06/04/github-for-academics/">GitHub For Academics</a></li> <li><a rel="nofollow noreferrer" href="https://help.github.com/categories/20/articles">GitHub Pages Help</a></li> </ul> <h4 id="jekyll">Jekyll<a class="zola-anchor" href="#jekyll" aria-label="Anchor link for: jekyll" style="visibility: hidden;"></a> </h4> <ul> <li><a rel="nofollow noreferrer" href="https://github.com/jekyll/jekyll/wiki/Sites">Sites Using Jekyll</a></li> <li><a rel="nofollow noreferrer" href="http://import.jekyllrb.com/docs/home/">Blog Migrations to Jekyll</a></li> </ul> <h4 id="markdown">Markdown<a class="zola-anchor" href="#markdown" aria-label="Anchor link for: markdown" style="visibility: hidden;"></a> </h4> <ul> <li><a rel="nofollow noreferrer" href="http://daringfireball.net/projects/markdown/">Official Markdown Spec</a></li> <li><a rel="nofollow noreferrer" href="http://packetlife.net/media/library/16/Markdown.pdf">Printable Markdown Cheatsheet</a></li> <li><a rel="nofollow noreferrer" href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown Cheatsheet</a></li> <li><a rel="nofollow noreferrer" href="https://help.github.com/articles/github-flavored-markdown">GitHub Flavored Markdown</a></li> </ul>