feat: runtime env (#320)

* feat: runtime env

Signed-off-by: Innei <[email protected]>

* feat: build script

Signed-off-by: Innei <[email protected]>

* update

Signed-off-by: Innei <[email protected]>

* fix: update

Signed-off-by: Innei <[email protected]>

---------

Signed-off-by: Innei <[email protected]>

.env.template

@@ -19,3 +19,5 @@ TMDB_API_KEY=
 
 S3_ACCESS_KEY=
 S3_SECRET_KEY=
+
+GH_TOKEN=

.github/workflows/build.yml

@@ -0,0 +1,42 @@
+on:
+  push:
+    branches: [main]
+
+name: CI Build
+
+jobs:
+  build:
+    name: Upload CI Build artifact
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Checkout LFS objects
+        run: git lfs checkout
+
+      - uses: pnpm/[email protected]
+        with:
+          version: 8.x.x
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build project
+
+        run: |
+          sh ./ci-release-build.sh
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: artifact
+          path: assets/release.zip

.github/workflows/release-docker.yml

@@ -0,0 +1,47 @@
+name: Docker (release)
+
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
+
+jobs:
+  docker:
+    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: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            innei/mx-server
+          tags: |
+            type=ref,event=branch
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha
+            type=raw,value=latest
+      - name: Build and export to Docker
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          load: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          push: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -0,0 +1,63 @@
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
+
+name: Release
+
+jobs:
+  build:
+    name: Upload Release Asset
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Checkout LFS objects
+        run: git lfs checkout
+
+      - uses: pnpm/[email protected]
+        with:
+          version: 8.x.x
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build project
+
+        run: |
+          sh ./ci-release-build.sh
+
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: Release ${{ github.ref }}
+          draft: false
+          prerelease: false
+      - run: npx changelogithub
+        continue-on-error: true
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Upload Release Asset
+        id: upload-release-asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          asset_name: release.zip
+          upload_url: ${{ steps.create_release.outputs.upload_url }} # This pulls from the CREATE RELEASE step above, referencing it's ID to get its outputs object, which include a `upload_url`. See this blog post for more info: https://jasonet.co/posts/new-features-of-github-actions/#passing-data-to-future-steps
+          asset_path: ./assets/release.zip
+          asset_content_type: application/zip

Dockerfile

@@ -1,15 +1,17 @@
 FROM node:18-alpine AS base
 
+RUN npm install -g --arch=x64 --platform=linux sharp
+
 FROM base AS deps
 
 RUN apk add --no-cache libc6-compat
-
 RUN apk add --no-cache python3 make g++
 
 WORKDIR /app
 
 COPY . .
 
+
 RUN npm install -g pnpm
 RUN pnpm install
 
@@ -26,11 +28,21 @@ ENV NODE_ENV production
 ARG BASE_URL
 ARG NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
 ARG CLERK_SECRET_KEY
+ARG S3_ACCESS_KEY
+ARG S3_SECRET_KEY
+ARG WEBHOOK_SECRET
+ARG TMDB_API_KEY
+ARG GH_TOKEN
 ENV BASE_URL=${BASE_URL}
 ENV NEXT_PUBLIC_API_URL=${BASE_URL}/api/v2
 ENV NEXT_PUBLIC_GATEWAY_URL=${BASE_URL}
 ENV NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=${NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
 ENV CLERK_SECRET_KEY=${CLERK_SECRET_KEY}
+ENV S3_ACCESS_KEY=${S3_ACCESS_KEY}
+ENV S3_SECRET_KEY=${S3_SECRET_KEY}
+ENV TMDB_API_KEY=${TMDB_API_KEY}
+ENV WEBHOOK_SECRET=${WEBHOOK_SECRET}
+ENV GH_TOKEN=${GH_TOKEN}
 
 RUN pnpm build
 
@@ -48,5 +60,5 @@ COPY --from=builder /app/.next/server ./.next/server
 EXPOSE 2323
 
 ENV PORT 2323
-
-CMD echo "Mix Space Web [Shiro] Image." &&  node server.js;
+ENV NEXT_SHARP_PATH=/usr/local/lib/node_modules/sharp
+CMD echo "Mix Space Web [Shiro] Image." && node server.js;

ci-release-build.sh

@@ -0,0 +1,22 @@
+#!env bash
+set -e
+CWD=$(pwd)
+
+npm run build
+cd .next
+pwd
+rm -rf cache
+cp -r ../public ./standalone/public
+
+cd ./standalone
+echo ';process.title = "Shiro (NextJS)"' >>server.js
+mv ../static/ ./.next/static
+
+cp $CWD/ecosystem.standalone.config.js ./ecosystem.config.js
+cp $CWD/.env.template .env
+
+cd ..
+
+mkdir -p $CWD/assets
+rm -rf $CWD/assets/release.zip
+zip --symlinks -r $CWD/assets/release.zip ./*

docker-compose.yml

@@ -1,14 +1,12 @@
-version: "3"
+version: '3'
 
 services:
   shiro:
     container_name: shiro
     build:
       context: .
-      args:
-        - BASE_URL=REPLACE_WITH_YOUR_BASE_URL
-        - NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=REPLACE_WITH_YOUR_PUBLISHABLE_KEY
-        - CLERK_SECRET_KEY=REPLACE_WITH_YOUR_SECRET_KEY
+    volumes:
+      - /app/.env:./.docker-env
     restart: always
     ports:
-      - 2323:2323
+      - 2323:2323

package.json

@@ -96,6 +96,7 @@
     "mermaid": "10.9.0",
     "nanoid": "^5.0.6",
     "next": "14.1.4",
+    "next-runtime-env": "3.2.1",
     "next-themes": "0.2.1",
     "ofetch": "1.3.4",
     "openai": "4.29.2",

src/app/(app)/(home)/layout.tsx

@@ -9,6 +9,7 @@ import { requestErrorHandler } from '~/lib/request.server'
 
 import { queryKey } from './query'
 
+export const dynamic = 'force-dynamic'
 export const revalidate = 3600
 
 export default async function HomeLayout(props: PropsWithChildren) {

src/app/(app)/(note-topic)/notes/(topic-detail)/topics/[slug]/layout.tsx

@@ -9,6 +9,7 @@ import { getQueryClient } from '~/lib/query-client.server'
 
 import { getTopicQuery } from './query'
 
+export const dynamic = 'force-dynamic'
 export const generateMetadata = async (
   props: NextPageParams<{
     slug: string

src/app/(app)/(note-topic)/notes/(topic-detail)/topics/[slug]/page.tsx

@@ -14,6 +14,7 @@ import { routeBuilder, Routes } from '~/lib/route-builder'
 
 import { getTopicQuery } from './query'
 
+export const dynamic = 'force-dynamic'
 export default function Page() {
   const { slug } = useParams()
   const { data } = useQuery({

src/app/(app)/(note-topic)/notes/topics/layout.tsx

@@ -9,6 +9,7 @@ import { getQueryClient } from '~/lib/query-client.server'
 
 import { topicsQuery } from './query'
 
+export const dynamic = 'force-dynamic'
 export const metadata: Metadata = {
   title: '专栏',
 }

src/app/(app)/(page-detail)/[slug]/layout.tsx

@@ -30,6 +30,7 @@ import {
   PageTitle,
 } from './pageExtra'
 
+export const dynamic = 'force-dynamic'
 const getData = async (params: PageParams) => {
   attachUAAndRealIp()
   const data = await getQueryClient()

src/app/(app)/categories/[slug]/layout.tsx

@@ -9,6 +9,7 @@ import { getQueryClient } from '~/lib/query-client.server'
 
 import { getPageBySlugQuery } from './query'
 
+export const dynamic = 'force-dynamic'
 const getData = async (params: { slug: string }) => {
   attachUAAndRealIp()
   const data = await getQueryClient().fetchQuery(

src/app/(app)/layout.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { cache } from 'react'
 import { ToastContainer } from 'react-toastify'
+import { env, PublicEnvScript } from 'next-runtime-env'
 import type { Metadata, Viewport } from 'next'
 import type { PropsWithChildren } from 'react'
 
@@ -128,7 +129,7 @@ export const generateMetadata = async (): Promise<Metadata> => {
     },
   } satisfies Metadata
 }
-
+export const dynamic = 'force-dynamic'
 export default async function RootLayout(props: PropsWithChildren) {
   const { children } = props
 
@@ -137,14 +138,15 @@ export default async function RootLayout(props: PropsWithChildren) {
   const themeConfig = data.theme
 
   return (
-    <ClerkProvider>
+    <ClerkProvider publishableKey={env('NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY')}>
       <AppFeatureProvider tmdb={!!process.env.TMDB_API_KEY}>
         <html
           lang="zh-CN"
           className="noise !bg-accent"
           suppressHydrationWarning
         >
           <head>
+            <PublicEnvScript />
             <Global />
             <SayHi />
             <HydrationEndDetector />

src/app/(app)/notes/[id]/layout.tsx

@@ -21,6 +21,7 @@ import { Paper } from '../../../../components/layout/container/Paper'
 import { getData } from './api'
 import { Transition } from './Transition'
 
+export const dynamic = 'force-dynamic'
 export const generateMetadata = async ({
   params,
 }: {

src/app/(app)/notes/[id]/page.tsx

@@ -34,6 +34,7 @@ import {
   NoteTitle,
 } from './pageExtra'
 
+export const dynamic = 'force-dynamic'
 export default async function Page(props: {
   params: {
     id: string

src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx

@@ -15,6 +15,7 @@ import { LayoutRightSideProvider } from '~/providers/shared/LayoutRightSideProvi
 
 import { getData } from './api'
 
+export const dynamic = 'force-dynamic'
 export const generateMetadata = async ({
   params,
 }: {