[refactor] reduce Docker image size

[add] Health Check configuration of Docker services
[add] Entry Badge of GitHub codespaces & GitPod.io
[optimize] update Upstream packages

Dockerfile

@@ -1,21 +1,21 @@
-FROM node:18-slim
+FROM node:18-slim AS base
+RUN apt-get update && \
+    apt-get install curl -y --no-install-recommends
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+COPY . /app
+WORKDIR /app
 
-USER root
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
 
-RUN npm rm yarn -g
-RUN npm i pnpm -g
-
-RUN mkdir /home/node/app
-WORKDIR /home/node/app
-
-COPY package.json pnpm-lock.yaml /home/node/app/
-RUN pnpm i --frozen-lockfile
-
-COPY . /home/node/app
+FROM base AS build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 RUN pnpm build
 
-RUN pnpm prune --prod || true \
-    pnpm store prune
-
+FROM base
+COPY --from=prod-deps /app/node_modules /app/node_modules
+COPY --from=build /app/.next /app/.next
 EXPOSE 3000
 CMD ["npm", "start"]

README.md

@@ -2,16 +2,19 @@
 
 [React][1] project scaffold based on [TypeScript][2], [Next.js][3], [Bootstrap][4] & [Workbox][5]. And this project bootstrapped with [`create-next-app`][6].
 
-[![CI & CD](https://github.com/idea2app/Next-Bootstrap-ts/actions/workflows/main.yml/badge.svg)][8]
+[![CI & CD](https://github.com/idea2app/Next-Bootstrap-ts/actions/workflows/main.yml/badge.svg)][7]
+
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)][8]
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][9]
 
 ## Technology stack
 
-- Language: [TypeScript v5][2] + [MDX v3][10]
+- Language: [TypeScript v5][2] + [MDX v3][11]
 - Component engine: [Nextjs v14][3]
 - Component suite: [Bootstrap v5][4]
 - PWA framework: [Workbox v6][5]
-- State management: [MobX v6][9]
-- CI / CD: GitHub [Actions][11] + [Vercel][12]
+- State management: [MobX v6][10]
+- CI / CD: GitHub [Actions][12] + [Vercel][13]
 
 ## Major examples
 
@@ -33,26 +36,26 @@ Open http://localhost:3000 with your browser to see the result.
 
 You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-[API routes][13] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.
+[API routes][14] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes][13] instead of React pages.
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes][14] instead of React pages.
 
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation][14] - learn about Next.js features and API.
-- [Learn Next.js][15] - an interactive Next.js tutorial.
+- [Next.js Documentation][15] - learn about Next.js features and API.
+- [Learn Next.js][16] - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository][16] - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository][17] - your feedback and contributions are welcome!
 
 ## Deployment
 
 ### Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform][12] from the creators of Next.js.
+The easiest way to deploy your Next.js app is to use the [Vercel Platform][13] from the creators of Next.js.
 
-Check out our [Next.js deployment documentation][17] for more details.
+Check out our [Next.js deployment documentation][18] for more details.
 
 ### Docker
 
@@ -67,13 +70,15 @@ pnpm container
 [4]: https://getbootstrap.com/
 [5]: https://developers.google.com/web/tools/workbox
 [6]: https://github.com/vercel/next.js/tree/canary/packages/create-next-app
-[8]: https://github.com/idea2app/Next-Bootstrap-ts/actions/workflows/main.yml
-[9]: https://github.com/mobxjs/mobx/tree/mobx4and5/docs
-[10]: https://mdxjs.com/
-[11]: https://github.com/features/actions
-[12]: https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme
-[13]: https://nextjs.org/docs/api-routes/introduction
-[14]: https://nextjs.org/docs
-[15]: https://nextjs.org/learn
-[16]: https://github.com/vercel/next.js/
-[17]: https://nextjs.org/docs/deployment
+[7]: https://github.com/idea2app/Next-Bootstrap-ts/actions/workflows/main.yml
+[8]: https://codespaces.new/idea2app/Next-Bootstrap-ts
+[9]: https://gitpod.io/?autostart=true#https://github.com/idea2app/Next-Bootstrap-ts
+[10]: https://github.com/mobxjs/mobx/tree/mobx4and5/docs
+[11]: https://mdxjs.com/
+[12]: https://github.com/features/actions
+[13]: https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme
+[14]: https://nextjs.org/docs/api-routes/introduction
+[15]: https://nextjs.org/docs
+[16]: https://nextjs.org/learn
+[17]: https://github.com/vercel/next.js/
+[18]: https://nextjs.org/docs/deployment

docker-compose.yml

@@ -13,6 +13,25 @@ services:
       - 3000:3000
     networks:
       - idea2app
+    healthcheck:
+      test: ['CMD-SHELL', 'curl -f http://localhost:3000/ || exit 1']
+      interval: 3s
+      retries: 5
+      start_period: 30s
+    labels:
+      - 'autoheal=true'
+    restart: always
+    logging:
+      driver: 'json-file'
+      options:
+        max-size: '10m'
+
+  autoheal:
+    image: willfarrell/autoheal:1.2.0
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    restart: always
+
   caddy:
     depends_on:
       - next-bootstrap-ts

package.json

@@ -1,38 +1,38 @@
 {
   "name": "@idea2app/next-bootstrap-ts",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
-    "@editorjs/code": "^2.8.0",
+    "@editorjs/code": "^2.9.0",
     "@editorjs/editorjs": "^2.28.2",
-    "@editorjs/header": "^2.7.0",
-    "@editorjs/image": "^2.8.2",
-    "@editorjs/link": "^2.5.0",
-    "@editorjs/list": "^1.8.0",
+    "@editorjs/header": "^2.8.1",
+    "@editorjs/image": "^2.9.0",
+    "@editorjs/link": "^2.6.2",
+    "@editorjs/list": "^1.9.0",
     "@editorjs/paragraph": "^2.11.3",
-    "@editorjs/quote": "^2.5.0",
+    "@editorjs/quote": "^2.6.0",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
-    "@next/mdx": "^14.0.0",
+    "@next/mdx": "^14.0.3",
     "copy-webpack-plugin": "^11.0.0",
     "editorjs-html": "^3.4.3",
     "idea-react": "^1.0.0-rc.30",
-    "koajax": "^0.9.4",
+    "koajax": "^0.9.6",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "lodash": "^4.17.21",
-    "mobx": "^6.10.2",
-    "mobx-i18n": "^0.4.1",
-    "mobx-react": "^9.0.1",
+    "mobx": "~6.10.2",
+    "mobx-i18n": "^0.4.2",
+    "mobx-react": "~9.0.2",
     "mobx-restful": "^0.6.12",
-    "mobx-restful-table": "^1.2.0",
-    "next": "^14.0.0",
+    "mobx-restful-table": "^1.2.2",
+    "next": "^14.0.3",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.5.2",
+    "next-ssr-middleware": "^0.6.1",
     "next-with-less": "^3.0.1",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
@@ -48,27 +48,27 @@
   },
   "devDependencies": {
     "@octokit/openapi-types": "^19.0.2",
-    "@types/lodash": "^4.14.200",
-    "@types/node": "^18.18.7",
-    "@types/react": "^18.2.33",
-    "eslint": "^8.52.0",
-    "eslint-config-next": "^14.0.0",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^18.18.13",
+    "@types/react": "^18.2.38",
+    "eslint": "^8.54.0",
+    "eslint-config-next": "^14.0.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^15.0.2",
-    "prettier": "^3.0.3",
+    "lint-staged": "^15.1.0",
+    "prettier": "^3.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "~5.2.2"
+    "typescript": "~5.3.2"
   },
   "prettier": {
     "singleQuote": true,
     "trailingComma": "all",
     "arrowParens": "avoid"
   },
   "lint-staged": {
-    "*.{html,md,less,json,yml,js,ts,tsx}": "prettier --write",
-    "*.{js,jsx,ts,tsx}": "eslint --fix"
+    "*.{html,md,less,json,yml,js,mjs,ts,tsx}": "prettier --write",
+    "*.{js,mjs,ts,tsx}": "eslint --fix"
   },
   "scripts": {
     "prepare": "husky install",