ci: 支持webpack-vue3项目部署

fix #74

chore: 更新 lock 文件

chore: version packages

build: dockerfile缺失webpack-vue3目录

chore: 更新changesets

Author: cumt-robin

.changeset/fresh-laws-accept.md

@@ -1,4 +1,4 @@
-name: frontend_cicd
+name: vite-vue3-cicd
 
 on:
   push:
@@ -31,8 +31,8 @@ jobs:
       run: |
         echo "${{env.IMAGE_VERSION}}"
         docker login --username=${{secrets.DOCKER_USERNAME}} --password=${{secrets.DOCKER_PASSWORD}} ${{secrets.DOCKER_REGISTRY}}
-        docker build --target frontend -t ${{secrets.DOCKER_REGISTRY}}/${{secrets.DOCKER_NAMESPACE}}/${{secrets.DOCKER_FRONTEND_REPOSITORY}}:${{env.IMAGE_VERSION}} .
-        docker push ${{secrets.DOCKER_REGISTRY}}/${{secrets.DOCKER_NAMESPACE}}/${{secrets.DOCKER_FRONTEND_REPOSITORY}}:${{env.IMAGE_VERSION}}
+        docker build --target vite-vue3-frontend -t ${{secrets.DOCKER_REGISTRY}}/${{secrets.DOCKER_NAMESPACE}}/fullstack-blog-vite-vue3:${{env.IMAGE_VERSION}} .
+        docker push ${{secrets.DOCKER_REGISTRY}}/${{secrets.DOCKER_NAMESPACE}}/fullstack-blog-vite-vue3:${{env.IMAGE_VERSION}}
 
   deploy:
     needs: [extract, build]
@@ -62,9 +62,9 @@ jobs:
           cat >>~/remote.sh <<END
           docker ps
           docker login --username=${{secrets.DOCKER_USERNAME}} --password=${{secrets.DOCKER_PASSWORD}} ${{secrets.DOCKER_REGISTRY}}
-          docker pull ${{secrets.DOCKER_REGISTRY}}/${{secrets.DOCKER_NAMESPACE}}/${{secrets.DOCKER_FRONTEND_REPOSITORY}}:${{env.IMAGE_VERSION}}
+          docker pull ${{secrets.DOCKER_REGISTRY}}/${{secrets.DOCKER_NAMESPACE}}/fullstack-blog-vite-vue3:${{env.IMAGE_VERSION}}
           cd ${{secrets.PROJECT_DIR}}
-          sed -i 's/^FRONTEND_VERSION=.*/FRONTEND_VERSION=${{env.IMAGE_VERSION}}/' .env.docker.local
+          sed -i 's/^VITE_VUE3_VERSION=.*/VITE_VUE3_VERSION=${{env.IMAGE_VERSION}}/' .env.docker.local
           docker compose --env-file .env.docker.local up -d
           echo "Done"
           END

.github/workflows/frontend.yml renamed to .github/workflows/vite-vue3.yml

@@ -0,0 +1,72 @@
+name: webpack-vue3-cicd
+
+on:
+  push:
+    tags:
+      - 'webpack-vue3@*'
+
+env:
+  SSH_PRIVATE_KEY: ${{secrets.SSH_PRIVATE_KEY}}
+
+jobs:
+  extract:
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.extract_version.outputs.version }}
+    steps:
+      - id: extract_version
+        run: |
+          echo "version=$(echo ${{ github.ref_name }} | sed 's/webpack-vue3@//')" >> $GITHUB_OUTPUT
+
+  build:
+    needs: extract
+    runs-on: ubuntu-latest
+    env:
+      IMAGE_VERSION: ${{ needs.extract.outputs.version }}
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - name: Build & Push Image
+      run: |
+        echo "${{env.IMAGE_VERSION}}"
+        docker login --username=${{secrets.DOCKER_USERNAME}} --password=${{secrets.DOCKER_PASSWORD}} ${{secrets.DOCKER_REGISTRY}}
+        docker build --target webpack-vue3-frontend -t ${{secrets.DOCKER_REGISTRY}}/${{secrets.DOCKER_NAMESPACE}}/fullstack-blog-webpack-vue3:${{env.IMAGE_VERSION}} .
+        docker push ${{secrets.DOCKER_REGISTRY}}/${{secrets.DOCKER_NAMESPACE}}/fullstack-blog-webpack-vue3:${{env.IMAGE_VERSION}}
+
+  deploy:
+    needs: [extract, build]
+    runs-on: ubuntu-latest
+    env:
+      IMAGE_VERSION: ${{ needs.extract.outputs.version }}
+    steps:
+      - name: SSH Auth && Deploy Image
+        run: |
+          ssh -V
+
+          mkdir -p ~/.ssh
+
+          echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
+
+          chmod 600 ~/.ssh/id_rsa
+
+          cat >>~/.ssh/config <<END
+          Host remote
+          HostName ${{secrets.SSH_HOST}}
+          Port 22
+          User ${{secrets.SSH_USERNAME}}
+          IdentityFile ~/.ssh/id_rsa
+          StrictHostKeyChecking no
+          END
+
+          cat >>~/remote.sh <<END
+          docker ps
+          docker login --username=${{secrets.DOCKER_USERNAME}} --password=${{secrets.DOCKER_PASSWORD}} ${{secrets.DOCKER_REGISTRY}}
+          docker pull ${{secrets.DOCKER_REGISTRY}}/${{secrets.DOCKER_NAMESPACE}}/fullstack-blog-webpack-vue3:${{env.IMAGE_VERSION}}
+          cd ${{secrets.PROJECT_DIR}}
+          sed -i 's/^WEBPACK_VUE3_VERSION=.*/WEBPACK_VUE3_VERSION=${{env.IMAGE_VERSION}}/' .env.docker.local
+          docker compose --env-file .env.docker.local up -d
+          echo "Done"
+          END
+
+          ssh remote < ~/remote.sh

.github/workflows/webpack-vue3.yml

@@ -4,12 +4,6 @@ dist
 .eslintcache
 .stylelintcache
 
-# backend
-app/backend/src/config/dev.env.js
-app/backend/src/config/env.js
-app/backend/src/config/prod.env.js
-app/backend/deploy.config.js
-
 # local env files
 .env.local
 .env.*.local

.gitignore

@@ -1,6 +1,6 @@
 {
-    "app/frontend/src/**/*.{js,mjs,jsx,ts,tsx,vue}": "pnpm --filter frontend lint-fix",
-    "app/frontend/src/**/*.{css,less,scss,vue}": "pnpm --filter frontend lint-style-fix",
+    "app/webpack-vue3/src/**/*.{js,mjs,jsx,ts,tsx,vue}": "pnpm --filter webpack-vue3 lint-fix",
+    "app/webpack-vue3/src/**/*.{css,less,scss,vue}": "pnpm --filter webpack-vue3 lint-style-fix",
     "app/vite-vue3/src/**/*.{js,mjs,jsx,ts,tsx,vue}": "pnpm --filter vite-vue3 lint-fix",
     "app/vite-vue3/src/**/*.{css,less,scss,vue}": "pnpm --filter vite-vue3 lint-style-fix",
     "app/backend/src/**/*.js": "pnpm --filter backend lint-fix"

.lintstagedrc

@@ -7,17 +7,29 @@ FROM base AS build
 COPY . /usr/src/app
 WORKDIR /usr/src/app
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
-RUN pnpm deploy --filter=vite-vue3 /app/frontend
+RUN pnpm deploy --filter=vite-vue3 /app/vite-vue3
+RUN pnpm deploy --filter=webpack-vue3 /app/webpack-vue3
 RUN pnpm deploy --filter=backend /app/backend
 
-FROM base AS frontend-build
-COPY --from=build /app/frontend /usr/src/fullstack-blog/app/frontend
+FROM base AS vite-vue3-build
+COPY --from=build /app/vite-vue3 /usr/src/fullstack-blog/app/vite-vue3
 COPY tsconfig.base.json /usr/src/fullstack-blog/tsconfig.base.json
-WORKDIR /usr/src/fullstack-blog/app/frontend
+WORKDIR /usr/src/fullstack-blog/app/vite-vue3
 RUN pnpm build
 
-FROM nginx:latest AS frontend
-COPY --from=frontend-build /usr/src/fullstack-blog/app/frontend/dist/ /usr/share/nginx/html
+FROM nginx:latest AS vite-vue3-frontend
+COPY --from=vite-vue3-build /usr/src/fullstack-blog/app/vite-vue3/dist/ /usr/share/nginx/html
+COPY nginx/default.conf.template /etc/nginx/conf.d/default.conf.template
+EXPOSE 80
+
+FROM base AS webpack-vue3-build
+COPY --from=build /app/webpack-vue3 /usr/src/fullstack-blog/app/webpack-vue3
+COPY tsconfig.base.json /usr/src/fullstack-blog/tsconfig.base.json
+WORKDIR /usr/src/fullstack-blog/app/webpack-vue3
+RUN pnpm build
+
+FROM nginx:latest AS webpack-vue3-frontend
+COPY --from=webpack-vue3-build /usr/src/fullstack-blog/app/webpack-vue3/dist/ /usr/share/nginx/html
 COPY nginx/default.conf.template /etc/nginx/conf.d/default.conf.template
 EXPOSE 80
 

Dockerfile

@@ -7,12 +7,12 @@ FROM base AS build
 COPY . /usr/src/app
 WORKDIR /usr/src/app
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
-RUN pnpm deploy --filter=vite-vue3 /app/frontend
+RUN pnpm deploy --filter=vite-vue3 /app/vite-vue3
 RUN pnpm deploy --filter=backend /app/backend
 
-FROM base AS frontend
-COPY --from=build /app/frontend /usr/src/fullstack-blog/app/frontend
-WORKDIR /usr/src/fullstack-blog/app/frontend
+FROM base AS vite-vue3-frontend
+COPY --from=build /app/vite-vue3 /usr/src/fullstack-blog/app/vite-vue3
+WORKDIR /usr/src/fullstack-blog/app/vite-vue3
 EXPOSE 3000
 CMD ["pnpm", "dev"]
 

Dockerfile.dev

@@ -1,12 +1,12 @@
-# 敏感配置信息
-config/dev.env.js
-config/env.js
-config/prod.env.js
-deploy.config.js
-
-# Logs
-logs
-*.log
-
-# Optional eslint cache
-.eslintcache
+# 敏感配置信息
+src/config/dev.env.js
+src/config/env.js
+src/config/prod.env.js
+deploy.config.js
+
+# Logs
+logs
+*.log
+
+# Optional eslint cache
+.eslintcache