Production dockerfile (#4)

+ Add `Dockerfile.production`

.dockerignore

@@ -0,0 +1 @@
+./yarn

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "arcanis.vscode-zipfs",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
   ]
 }

.vscode/settings.json

@@ -5,5 +5,6 @@
   },
   "eslint.nodePath": ".yarn/sdks",
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs"
 }

.yarn/sdks/eslint/lib/unsupported-api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/use-at-your-own-risk
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/use-at-your-own-risk your application uses
+module.exports = absRequire(`eslint/use-at-your-own-risk`);

.yarn/sdks/eslint/package.json

@@ -1,6 +1,14 @@
 {
   "name": "eslint",
-  "version": "8.45.0-sdk",
+  "version": "8.52.0-sdk",
   "main": "./lib/api.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "eslint": "./bin/eslint.js"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./lib/api.js",
+    "./use-at-your-own-risk": "./lib/unsupported-api.js"
+  }
 }

.yarn/sdks/prettier/bin/prettier.cjs

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/bin/prettier.cjs
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real prettier/bin/prettier.cjs your application uses
+module.exports = absRequire(`prettier/bin/prettier.cjs`);

.yarn/sdks/prettier/package.json

@@ -1,6 +1,7 @@
 {
   "name": "prettier",
   "version": "3.0.0-sdk",
-  "main": "./index.js",
-  "type": "commonjs"
+  "main": "./index.cjs",
+  "type": "commonjs",
+  "bin": "./bin/prettier.cjs"
 }

.yarn/sdks/typescript/lib/typescript.js

@@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/typescript.js
+    // Setup the environment to be able to require typescript
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real typescript/lib/typescript.js your application uses
-module.exports = absRequire(`typescript/lib/typescript.js`);
+// Defer to the real typescript your application uses
+module.exports = absRequire(`typescript`);

.yarn/sdks/typescript/package.json

@@ -2,5 +2,9 @@
   "name": "typescript",
   "version": "5.0.4-sdk",
   "main": "./lib/typescript.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "tsc": "./bin/tsc",
+    "tsserver": "./bin/tsserver"
+  }
 }

Dockerfile.development

@@ -0,0 +1,8 @@
+FROM node:18
+WORKDIR /app
+COPY package.json yarn.lock ./*.yml ./*.yaml ./*.config.js ./*.json ./
+COPY ./.yarn/releases ./.yarn/releases
+RUN yarn
+COPY ./src ./src
+COPY ./public ./public
+CMD ["yarn", "run", "dev"]

Dockerfile.production

@@ -0,0 +1,50 @@
+FROM node:21-alpine AS base
+
+# Install dependencies only when needed
+FROM base 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 git
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* ./
+RUN \
+    corepack enable && \
+    yarn set version from sources && \
+    yarn install
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/.yarn ./.yarn
+COPY . .
+RUN yarn build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

docker-compose.yaml

@@ -0,0 +1,10 @@
+services:
+  nextjs:
+    ports:
+      - 80:3000
+    build:
+      context: .
+      dockerfile: Dockerfile
+    volumes:
+      - ./src:/app/src:ro
+      - ./public:/app/public:ro

eslint-results.sarif

@@ -14,32 +14,32 @@
       "artifacts": [
         {
           "location": {
-            "uri": "file:///C:/Users/seheon/Documents/GitHub/gifthub-web/next-env.d.ts"
+            "uri": "next-env.d.ts"
           }
         },
         {
           "location": {
-            "uri": "file:///C:/Users/seheon/Documents/GitHub/gifthub-web/next.config.js"
+            "uri": "next.config.js"
           }
         },
         {
           "location": {
-            "uri": "file:///C:/Users/seheon/Documents/GitHub/gifthub-web/postcss.config.js"
+            "uri": "postcss.config.js"
           }
         },
         {
           "location": {
-            "uri": "file:///C:/Users/seheon/Documents/GitHub/gifthub-web/src/app/layout.tsx"
+            "uri": "src/app/layout.tsx"
           }
         },
         {
           "location": {
-            "uri": "file:///C:/Users/seheon/Documents/GitHub/gifthub-web/src/app/page.tsx"
+            "uri": "src/app/page.tsx"
           }
         },
         {
           "location": {
-            "uri": "file:///C:/Users/seheon/Documents/GitHub/gifthub-web/tailwind.config.js"
+            "uri": "tailwind.config.js"
           }
         }
       ],

next.config.js

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'cdn.gifthub.kr',
+      },
+    ],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -9,12 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tailwindcss/forms": "^0.5.6",
     "autoprefixer": "10.4.14",
     "next": "13.4.7",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-icons": "^4.10.1",
+    "react-hook-form": "^7.47.0",
+    "react-icons": "^4.11.0",
     "return-fetch": "^0.4.5",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"

src/apis/giftcards.ts

@@ -0,0 +1,43 @@
+import { http } from './http';
+
+export interface GetGiftcard {
+  senderProfile: string;
+  senderName: string;
+  message: string;
+  productImage: string;
+  productName: string;
+  brandImage: string;
+  brandName: string;
+  expirationDate: string;
+}
+
+async function getGiftcard(
+  uuid: string,
+  password: string,
+): Promise<GetGiftcard> {
+  try {
+    const response = await http.get(`/giftcards/${uuid}`, {
+      headers: {
+        Authorization: `Basic ${atob(password)}`,
+      },
+    });
+    return await response.json();
+  } catch {
+    return {
+      senderProfile: '/dahyeon.jpeg',
+      senderName: uuid,
+      message: password,
+      productImage: '/dahyeon.jpeg',
+      productName: '아이스 카페 아메리카노 T',
+      brandImage: '/dahyeon.jpeg',
+      brandName: '스타벅스',
+      expirationDate: '2023-07-25',
+    };
+  }
+}
+
+const GiftcardApi = {
+  getGiftcard,
+};
+
+export default GiftcardApi;

src/apis/http.ts

@@ -0,0 +1,26 @@
+import returnFetch from 'return-fetch';
+
+const instance = returnFetch({
+  baseUrl: 'https://api.dev.gifthub.kr',
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  },
+});
+
+const http = {
+  get: function (url: string, options?: RequestInit) {
+    return instance(url, {
+      method: 'GET',
+      ...options,
+    });
+  },
+  post: function (url: string, options?: RequestInit) {
+    return instance(url, {
+      method: 'POST',
+      ...options,
+    });
+  },
+};
+
+export { http };