refactor(frontend):Use a Monorepo architecture replace the current ar…

…chitecture of frontend project (#3545)

* refactor(frontend):replace to monorepo

* chore(frontend):add push auto image in makefile

.github/workflows/frontend.yml

@@ -38,8 +38,70 @@ env:
   DEFAULT_OWNER: "labring"
 
 jobs:
+  image-prebuild:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        module:
+          [ 
+            deps
+          ]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Prepare
+        id: prepare
+        run: |
+          bash ./scripts/resolve-tag-image.sh "${{ inputs.push_image }}" "${{ steps.check_tag.outputs.isTag }}"  "${{ inputs.push_image_tag }}"
+      - name: Extract module name
+        id: module_name
+        run: |
+          MODULE_NAME=$(basename ${{ matrix.module }})
+          echo "MODULE_NAME=${MODULE_NAME}" >> $GITHUB_ENV
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: |
+            ghcr.io/${{ github.repository_owner }}/sealos-${{ env.MODULE_NAME }}-frontend
+          tags: |
+            type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'main') }}
+            type=raw,value=dev,enable=true
+            type=raw,value=${{ steps.prepare.outputs.tag_name }},enable=true
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to Github Container Hub
+        if: ${{ (github.event_name == 'push') ||(github.event_name == 'create') || (inputs.push_image == true) }}
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GH_PAT }}
+
+      - name: Build And Push
+        uses: docker/build-push-action@v4
+        with:
+          context: ./frontend
+          file: ./frontend/Dockerfile
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          target: deps
+          # Push if it's a push event or if push_image is true
+          push: false
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
   image-build:
     runs-on: ubuntu-latest
+    needs:
+      - image-prebuild
     strategy:
       matrix:
         module:
@@ -106,12 +168,16 @@ jobs:
       - name: Build And Push
         uses: docker/build-push-action@v4
         with:
-          context: ./frontend/${{ matrix.module }}
-          file: ./frontend/${{ matrix.module }}/Dockerfile
+          context: ./frontend
+          file: ./frontend/Dockerfile
+          build-args: |
+            name=${{ env.MODULE_NAME }}
+            path=${{ matrix.module }}
           # Push if it's a push event or if push_image is true
           push: ${{ (github.event_name == 'push') ||(github.event_name == 'create') || (inputs.push_image == true)  }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
   save-sealos:
     uses: ./.github/workflows/import-save-sealos.yml
   cluster-image-build:

frontend/.dockerignore

@@ -0,0 +1,14 @@
+**/Dockerfile
+**/.dockerignore
+**/node_modules/
+**/npm-debug.log
+**/README.md
+**/.next/
+**/.git/
+**/.env.local
+**/config.yaml
+**/.vscode/
+**/.yalc/
+**/dist/
+**/yalc.lock
+**/.gitignore

frontend/.gitignore

@@ -0,0 +1 @@
+node_modules/

frontend/Dockerfile

@@ -0,0 +1,100 @@
+# Copyright © 2022 sealos.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+# ARG name
+# ARG path
+FROM node:current-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+RUN sed -i 's/https/http/' /etc/apk/repositories
+RUN apk add curl \
+  && apk add ca-certificates \
+  && update-ca-certificates
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# Install dependencies only when needed
+FROM node:current-alpine AS deps
+
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat && npm install -g pnpm
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager root workspace
+COPY pnpm-lock.yaml package.json pnpm-workspace.yaml ./
+
+RUN \
+  [ -f pnpm-lock.yaml ] && pnpm fetch || \
+  (echo "Lockfile not found." && exit 1) 
+COPY ./tsconfig.json ./tsconfig.json
+COPY ./tsconfig.deps.json ./tsconfig.deps.json
+COPY ./tsconfig.base.json ./tsconfig.base.json
+COPY ./packages ./packages
+
+RUN pnpm -r --offline --filter=./packages/* install \
+&& pnpm -r --filter=./packages/* run build 
+
+
+
+# Rebuild the source code only when needed
+FROM node:current-alpine AS builder
+
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+# COPY --from=deps /app/packages ./packages
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm install -g pnpm
+
+
+COPY --from=deps /app/packages ./packages
+
+COPY . .
+# RUN pnpm -r --offline --filter=./packages/* install \
+# && pnpm -r --filter=./packages/* run build 
+
+
+ARG name
+ARG path
+
+RUN \
+  [ -f $path/pnpm-lock.yaml ] && (pnpm --offline --filter=$name install && pnpm --filter=$name run build) || \
+  (echo "Lockfile not found." && exit 1) 
+
+# Production image, copy all the files and run next
+FROM runner
+
+ARG name
+ARG path
+# You only need to copy next.config.js if you are NOT using the default configuration
+# COPY --from=builder /app/desktop/next.config.js ./
+COPY --from=builder /app/$path/public ./$path/public
+COPY --from=builder --chown=nextjs:nodejs /app/$path/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/$path/.next/static ./$path/.next/static
+
+ENV launchpath=./${path}/server.js
+
+ENTRYPOINT ["sh","-c","node ${launchpath}"]
+
+

frontend/Makefile

@@ -0,0 +1,75 @@
+ifeq ($(OS),Windows_NT)
+  SHELL := powershell.exe
+  DOCKER_USERNAME := $(DOCKER_USERNAME)
+else
+  UNAME_S := $(shell uname -s)
+  ifeq ($(UNAME_S),Linux)
+    SHELL := /bin/bash
+    CURRENT_USER := $(shell echo $$USER)
+  endif
+  ifeq ($(UNAME_S),Darwin)
+    SHELL = /usr/bin/env bash
+    CURRENT_USER := $(shell id -un)
+  endif
+endif
+
+ifneq ($(strip $(DOCKER_USERNAME)),)
+  imageOwner := $(DOCKER_USERNAME)/
+else
+  imageOwner :=
+endif
+
+# build image
+buildTargets := \
+	desktop \
+	providers/terminal \
+	providers/adminer \
+	providers/bytebase \
+	providers/costcenter \
+	providers/dbprovider \
+	providers/applaunchpad \
+	providers/imagehub
+
+buildTargets-all := $(addprefix image-build-,$(buildTargets))
+pushTargets-all := $(addprefix image-push-,$(buildTargets))
+$(foreach target,$(buildTargets),$(eval .PHONY: image-build-$($(target))))
+$(foreach target,$(buildTargets),$(eval .PHONY: image-push-$($(target))))
+$(foreach target,$(buildTargets),$(eval .PHONY: dev-$($(target))))
+$(foreach target,$(buildTargets),$(eval .PHONY: build-$($(target))))
+.PHONY: all dev-desktop image-prebuild
+
+all: image-prebuild $(buildTargets-all)
+
+push-images: image-prebuild $(pushTargets-all)
+fetch-deps: pnpm-lock.yaml
+	pnpm fetch
+build-packages: fetch-deps
+	pnpm -r --offline --filter=./packages/* install
+	pnpm -r --offline --filter=./packages/* build
+build-providers/%: build-packages
+	pnpm -r --offline --filter=./providers/$* install
+	pnpm -r --offline --filter=./providers/$* build
+build-%: build-packages
+	pnpm -r --offline --filter=$* install
+	pnpm -r --offline --filter=$* build
+dev-providers/%: build-packages
+	pnpm -r --offline --filter=./providers/$* install
+	pnpm -r --offline --filter=./providers/$* dev
+dev-%: build-packages
+	pnpm -r --offline --filter=$* install
+	pnpm -r --offline --filter=$* dev
+
+# prebuild-image-for -j
+image-prebuild: pnpm-lock.yaml
+	docker build --target deps . -t $(imageOwner)sealos-deps:dev
+
+image-build-providers/%: image-prebuild
+	docker build -t $(imageOwner)sealos-$*:dev --build-arg path=providers/$* --build-arg name=$* . 
+image-build-%: image-prebuild
+	docker build -t $(imageOwner)sealos-$*:dev --build-arg path=$* --build-arg name=$* . 
+
+image-push-providers/%: image-build-providers/%
+	docker push $(imageOwner)sealos-$*:dev 
+image-push-%: image-build-%
+	docker push $(imageOwner)sealos-$*:dev
+# Default target to run all builds.

frontend/READMD.md

@@ -18,6 +18,37 @@ echo '35.240.227.100 apiserver.cluster.local' | sudo tee -a /etc/hosts
 echo '121.41.82.246 apiserver.cluster.local' | sudo tee -a /etc/hosts
 ```
 
+## how to dev
+
+- dev your app
+
+```bash
+cd frontend
+make dev-[app path, such as providers/costcenter, desktop, etc.]
+```
+
+- add packages
+
+```bash
+cd frontend
+# add remote
+pnpm --filter=[project name or path] -r add \[package name\] 
+# add local
+pnpm --filter=[project name or path] -r --offline add \[package name\] 
+
+```
+
+## how to build
+
+```bash
+cd frontend
+make image-build-[app path, such as providers/costcenter, desktop, etc.]
+# multi jobs build
+make all -j
+```
+
+- you can use `make all DOCKER_USERNAME=your_account` to build all apps for your account.
+
 ## new App
 
 Refer to other apps to add some configuration.
@@ -28,3 +59,4 @@ Refer to other apps to add some configuration.
 4. frontend/providers/app/deploy/manifests/appcr.yaml.tmpl
 5. frontend/providers/app/deploy/manifests/deploy.yaml
 6. frontend/providers/app/deploy/manifests/ingress.yaml.tmpl
+7. makefile