BLOG-9 Automatical deployment (#33)

### Description - Create a Dockerfile to build the docker image. - Set up the workflow to run deployment, which is to build and upload image to remote registry. - Add a head meta html tag to show the version. ### Package Changes _No response_ ### Screenshots _No response_ ### Reference Resolves #9 ### Checklist - [x] A milestone is set - [x] The related issuse has been linked to this branch Reviewed-on: #33 Reviewed-by: zoe <zoe@noreply.localhost> Co-authored-by: SquidSpirit <squid@squidspirit.com> Co-committed-by: SquidSpirit <squid@squidspirit.com>
2025-01-25 00:03:55 +08:00 · 2025-01-25 00:03:55 +08:00 · 35af8fd090
commit 35af8fd090
parent c4535ce399
5 changed files with 73 additions and 4 deletions
--- a/.gitea/workflows/deployment.yaml
+++ b/.gitea/workflows/deployment.yaml
@ -0,0 +1,34 @@
+name: Deployment
+on:
+  release:
+    types:
+      - published
+
+jobs:
+  frontend-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build image and push to registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ vars.REGISTRY }}
+          username: ${{ vars.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          context: ./frontend
+          tags:
+            - ${{ vars.REGISTRY }}/${{ vars.IMAGE_REPO_FRONTEND }}:latest
+            - ${{ vars.REGISTRY }}/${{ vars.IMAGE_REPO_FRONTEND }}:${{ gitea.event.release.tag_name }}
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@ -0,0 +1,27 @@
+FROM node:20-alpine AS base
+ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+
+FROM base AS deps
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN apk add --no-cache libc6-compat && \
+    corepack enable pnpm && \
+    pnpm install --frozen-lockfile
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN corepack enable pnpm && \
+    pnpm run build
+
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+EXPOSE 3000
+ENV HOSTNAME=0.0.0.0
+ENV PORT=3000
+CMD ["node", "server.js"]
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@ -3,6 +3,11 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
  // Avoid from rendering twice in development mode
  reactStrictMode: false,
+
+  output: "standalone",
+  env: {
+    APP_VERSION: process.env.npm_package_version,
+  },
 };

 export default nextConfig;
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@ -47,7 +47,7 @@ importers:
        version: 5.2.1(prettier@3.4.2)
      '@types/node':
        specifier: ^20.17.14
-        version: 20.17.14
+        version: 20.17.16
      '@types/react':
        specifier: ^19.0.7
        version: 19.0.7
@ -447,8 +447,8 @@ packages:
  '@types/json5@0.0.29':
    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}

-  '@types/node@20.17.14':
-    resolution: {integrity: sha512-w6qdYetNL5KRBiSClK/KWai+2IMEJuAj+EujKCumalFOwXtvOXaEan9AuwcRID2IcOIAWSIfR495hBtgKlx2zg==}
+  '@types/node@20.17.16':
+    resolution: {integrity: sha512-vOTpLduLkZXePLxHiHsBLp98mHGnl8RptV4YAO3HfKO5UHjDvySGbxKtpYfy8Sx5+WKcgc45qNreJJRVM3L6mw==}

  '@types/react-dom@19.0.3':
    resolution: {integrity: sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==}
@ -2211,7 +2211,7 @@ snapshots:

  '@types/json5@0.0.29': {}

-  '@types/node@20.17.14':
+  '@types/node@20.17.16':
    dependencies:
      undici-types: 6.19.8

--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@ -48,6 +48,9 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="zh-Hant">
+      <head>
+        <meta name="app-version" content={process.env.APP_VERSION} />
+      </head>
      <body className={`${notoSansTc.variable} ${notoSansMono.variable} ${hackNerdMono.variable} antialiased`}>
        <div className="min-h-screen">
          <Navbar />