Merge pull request #23 from lispking/feat/issue-22

issue(#22): After optimizing NextJS, Dockerfile and ci process

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [21.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -27,7 +27,5 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
-    - run: npm i
-    # - run: npm ci
-    - run: npm run build --if-present
-    # - run: npm test
+    - run: yarn
+    - run: yarn build

.github/workflows/docker.yml

@@ -0,0 +1,118 @@
+name: Build & Publish Images
+
+on:
+  push:
+    tags:
+      - v[0-9]+.*
+
+permissions:
+  contents: read
+  packages: write
+
+jobs:
+  build:
+    name: Build Image
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [linux/amd64, linux/arm64]
+        bin: [playground]
+        include:
+          - bin: playground
+            dockerfile: ./Dockerfile
+
+    steps:
+    - name: Set environment variable
+      run: echo "IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/${{ matrix.bin }}" >> $GITHUB_ENV
+
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Extract metadata (tags, labels) for Docker
+      id: meta
+      uses: docker/metadata-action@v5
+      with:
+        images: ${{ env.IMAGE_NAME }}
+
+    - name: Build and push image by digest
+      id: build
+      uses: docker/build-push-action@v5
+      with:
+        context: .
+        file: ${{ matrix.dockerfile }}
+        platforms: ${{ matrix.platform }}
+        labels: ${{ steps.meta.outputs.labels }}
+        outputs: type=image,name=${{ env.IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=true
+        provenance: false
+        cache-from: type=gha
+        cache-to: type=gha
+
+    - name: Export digest
+      run: |
+        mkdir -p "/tmp/digests/${{ matrix.bin }}"
+        digest="${{ steps.build.outputs.digest }}"
+        touch "/tmp/digests/${{ matrix.bin }}/${digest#sha256:}"
+
+    - name: Upload digests
+      uses: actions/upload-artifact@v4
+      with:
+        name: ${{ matrix.bin }}-digests
+        path: /tmp/digests/${{ matrix.bin }}/*
+        if-no-files-found: error
+        retention-days: 1
+
+  merge:
+    name: Merge digests
+    runs-on: ubuntu-latest
+    needs: build
+    strategy:
+      fail-fast: false
+      matrix:
+        bin: [playground]
+
+    steps:
+    - name: Set environment variable
+      run: echo "IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/${{ matrix.bin }}" >> $GITHUB_ENV
+
+    - name: Download digests
+      uses: actions/download-artifact@v4
+      with:
+        name: ${{ matrix.bin }}-digests
+        path: /tmp/digests/${{ matrix.bin }}
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+
+    - name: Extract metadata (tags, labels) for Docker
+      id: meta
+      uses: docker/metadata-action@v5
+      with:
+        images: ${{ env.IMAGE_NAME }}
+
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Create manifest list and push
+      working-directory: /tmp/digests/${{ matrix.bin }}
+      run: |
+        docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+          $(printf '${{ env.IMAGE_NAME }}@sha256:%s ' *)
+
+    - name: Inspect image
+      run: |
+        docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}

.gitignore

@@ -57,4 +57,3 @@ dist-ssr
 *.sw?
 
 package-lock.json
-yarn.lock

Dockerfile

@@ -1,20 +1,46 @@
-# docker build -t amphitheatre-playground:v0.0.1 .
-FROM node:18-buster-slim AS build
+#
+# docker build -t ghcr.io/amphitheatre-app/playground:v0.0.1 .
+#
+FROM node:21-slim AS base
 
-WORKDIR /app/playground
-COPY package*.json ./
-RUN npm i
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+COPY package.json ./
+RUN yarn config set registry https://registry.npmmirror.com
+RUN yarn --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
+RUN yarn build
 
-RUN npm run build
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
 
-FROM node:18-buster-slim AS prod
+ENV NODE_ENV production
 
-WORKDIR /home/app
+RUN npm uninstall -g yarn
 
-COPY --from=build /app/playground/dist /home/app/dist
-COPY --from=build /app/playground/node_modules /home/app/node_modules
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
 
-ENV NODE_ENV production
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/build/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/build/static ./build/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
+COPY --from=builder --chown=nextjs:nodejs /app/package.json ./package.json
+
+USER nextjs
+
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+ENV PORT 3000
+EXPOSE $PORT
 
-CMD [ "./node_modules/vite/bin/vite.js", "./dist" ]
+CMD ["node", "server.js"]

README.md

@@ -100,12 +100,12 @@ The Playground accepts the following props/parameters.
 
 To run the playground locally, run:
 
-- `npm install` to install dependencies
-- `npm run build` to compile the app and place it in the `dist/` directory
-- `npm run serve` to serve from the `dist/` directory and open a page on your
+- `yarn` to install dependencies
+- `yarn build` to compile the app and place it in the `build/` directory
+- `yarn start` to serve from the `build/` directory and open a page on your
   browser.
 
-For a fast edit-refresh cycle when developing run `npm run serve-watch`. This will
+For a fast edit-refresh cycle when developing run `yarn dev`. This will
 start an http server and automatically re-compile the TypeScript, HTML and CSS
 files whenever they change.
 

README.zh-CN.md

@@ -99,12 +99,12 @@ export default function App() {
 
 要在本地运行，请执行以下操作：
 
-- `npm install` 安装依赖包
-- `npm run build` 编译应用程序并将其放置在 `dist/` 目录中
-- `npm run serve` 从 `dist/` 目录中服务并打开浏览器页面。
+- `yarn` 安装依赖包
+- `yarn build` 编译应用程序并将其放置在 `build/` 目录中
+- `yarn start` 从 `build/` 目录中服务并打开浏览器页面。
 
 
-在开发过程中，为了实现快速的编辑刷新循环，请运行 `npm run serve-watch`。这将启动
+在开发过程中，为了实现快速的编辑刷新循环，请运行 `yarn dev`。这将启动
 一个 `HTTP` 服务器，并在 `TypeScript`、`HTML` 和 `CSS` 文件发生变化时自动重新编
 译它们。
 

docker-compose.yaml

@@ -12,4 +12,6 @@ services:
   playground:
     image: ghcr.io/amphitheatre-app/playground:latest
     ports:
-    - 5173:5173
+    - 3000:3000
+    environment:
+      PORT: 3000

next.config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    distDir: 'build',
+    output: 'standalone',
+    experimental: {
+        turbotrace: {
+            logAll: true,
+        },
+    },
+}
+export default nextConfig

package.json

@@ -1,12 +1,13 @@
 {
   "name": "playground",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "clean": "rm -rf build .next"
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",

src/components/Layout/index.tsx

@@ -1,4 +1,4 @@
-function Layout({ children }) {
+function Layout({ children }: Readonly<{ children: any }>) {
   return (
     <div>
       <header></header>

src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import "../styles/globals.css"; // 导入全局样式
 import Layout from "../components/Layout";
-function App({ Component, pageProps }) {
+function App({ Component, pageProps }: Readonly<{ Component: any, pageProps: any }>) {
   return (
     <Layout>
       <Component {...pageProps} />