在上個章節我們完成了前後端的功能與內容，在這章節我們將會把這些內容進行編譯，並將成果打包成對應的 Image。 在閱讀本篇文章前，有些 Dockerfile 相關的知識會比較容易閱讀，而關於縮小 Image 體積的經驗談上，這邊筆者有閱讀到有篇很受用的文章，做了很詳細的介紹，很建議讀者可以在閱讀本篇文章前參閱下： 實測有效！手把手帶你將 Docker Image 體積減少 90% Docker Image 體積越大，那部署要花的時間就越長；假如每個版本都有好幾 GB，那並不是一個理想的狀態；因此筆者開始動手實作，想看看到底能將 Docker Image 的體積縮小多少！medium.com 這邊先附上上個章節與這個章節目標的 …

上個章節我們加入了 Prisma 作為與資料庫溝通的中間層，這篇我們將使用它來協助我們開幾隻基礎的 Api 並且完成 Todo List 的功能，而本篇會有些 React 的部分，但很抱歉這邊並不會針對 React 的細節做說明，這邊預設讀者是有使用過 React 的經驗。 這邊先附上上個章節與這個章節目標的樣子： 上個章節結尾 blog-post-docker-compose-nodejs/my-project-3 at main · tokileecy/blog-post-docker-compose-nodejs Contribute to tokileecy/blog-post-docker-compose-nodejs development by creating an account on GitHub.github.com 這個章節目標 blog-post-docker-compose-nodejs/my-project-4 at main · tokileecy/blog-post-docker-compose-nodejs Contribute to tokileecy/blog-post-docker-compose-nodejs development by creating an account on GitHub.github.com

在前兩個章節，我們建立了開發用的容器與基礎的配置，但目前兩個容器間還沒有實質互動，在實作一些功能之前，為了要能夠儲存資料，我們會需要加入資料庫的容器並建立與後端服務的連結。 這邊先附上上個章節與這個章節目標的樣子： 上個章節結尾 blog-post-docker-compose-nodejs/my-project-2 at main · tokileecy/blog-post-docker-compose-nodejs Contribute to tokileecy/blog-post-docker-compose-nodejs development by creating an account on GitHub.github.com 這個章節目標 blog-post-docker-compose-nodejs/my-project-3 at main · tokileecy/blog-post-docker-compose-nodejs Contribute to tokileecy/blog-post-docker-compose-nodejs development by creating an account on GitHub.github.com

延續上個章節的專案，這篇文章我們將在專案加入 ESLint 的部分，但這邊會以 VSCode 為編輯器的角度來進行設置，如果是使用其他編輯器的讀者，可能要想想看自己熟悉的編輯器該怎麼架設。而還不清楚 ESLint 的讀者，可以參考看看我之前有篇關於 ESLint 的文章： [筆記] React 專案配置 ESLint + stylelint + Prettier 為了控制程式碼的品質或是統一團隊的程式碼風格，一個專案多少會使用到程式碼的檢查工具，在前端的開發中主要就是 JavaScript 也就是 ESLint，而之前也了解到了 styleLint ，可以對類 CSS…tokileecy.medium.com 那在這邊先附上上個章節與這個章節目標的樣子： 上個章節結尾 blog-post-docker-compose-nodejs/my-project-1 at main · toiletry/blog-post-docker-compose-nodejs Contribute to tokileecy/blog-post-docker-compose-nodejs development by creating an account on GitHub.github.com

前陣子有段時間，我個人相當專注於 Monorepo 的相關技術，而近期專案上反而比較少使用到那些工具，不過這次的主題是建立一個以容器化為基礎的開發環境，並且依然會把不同 App 的 Source Code 放在同一個 Repo 下來開發，而就這點來看也還是有那麼些類似的感覺。 開始之前 本系列的文章會說明一個簡易的架構，並著重在展示一個專案開發環境建立的過程，所 …

最近稍微回顧了下過去，想起幾年前在前端上主要使用 jQuery 而到今天漸漸習慣了前端框架的使用，不過 jQuery 已經漸漸離我遠去，當然也時常在想著不知道哪天會有更突破的架構或工具改變現狀。 我重新思考了下框架帶給我的是什麼？在我剛學前端框架時，我以為框架帶給我的是資料的綁定與方便的語法。 也許這些看法還是正確的，不過老實說也有不少工具雖然常配 …

最近注意到 Material-UI 似乎再將一些基本的 component 遷移為 Emotion，而我在開發的專案中原本使用 CSS Modules 進行開發，但遇到了需要使用到 CSS-in-JS 的必要，所以我就決定以 Emotion 來開發試試看，目前覺得適應良好，也很推薦任何人來玩玩看，而在這裡就簡單的說明下兩者的差異。 CSS Modules CSS Module …

早在微軟發佈了 Remote Development 的套件後，這個套件就已是我無法割捨的套件之一，對我來說，這可不只是建議安裝，而是絕對絕對一定要安裝的套件！而最近工作上將會配合上 Container 的環境進行開發，有些同事正好也尚未體驗過 VSCode Remote Development 的便利，說真的實在太可惜了，只好寫篇筆記記錄下，當 …

之前使用到了 CodeSandbox 做些範例，發現接配合 GitHub 使用，可以直接 Fork GitHub 的專案以 CodeSandbox 開啟，這點覺得還蠻方便的，並且也能夠登入 GitHub 的帳號發出 PR，這樣有時候就能夠無腦的直接開瀏覽器開發了呢。 在這篇會使用到之前文章的專案做個範例，[心得] 如何在 React (with Next.js) 上使用到 WebComponents (上)，雖然沒有關聯，但也可以看看。 Import GitHub 專案 若要從 GitHub import 專案到 CodeSandbox ，可以使用 Create Sandbox 中的 Import Project： 不過這邊建議可以安裝個官方的擴充套件：