ADD 서비스 배포 설정 (#274)

* 🚀 #273 - 배포 관련 파일 추가 및 수정

* 💄 #273 - 사용자 기기 별 선호 색상에 따른 설정값 흰색으로 통일

* 🍱 #273 - favicon add icon으로 변경

* 🔧 #273 - prettier eol 규칙 추가

* 🩹 #273 - 파일 마지막 라인 추가

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+dockerfile
+.github
+.next

.gitignore

@@ -26,7 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env*.local
+.env*
 
 # vercel
 .vercel

.prettierrc

@@ -4,5 +4,6 @@
   "tabWidth": 2,
   "trailingComma": "all",
   "arrowParens": "always",
-  "printWidth": 80
+  "printWidth": 80,
+  "endOfLine": "lf"
 }

docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3.5'
+
+services:
+  add-fe:
+    container_name: add-fe
+    image: woosang0430/add-fe
+    env_file:
+      - ./.env
+    ports:
+      - 80:3000
+    restart: always

dockerfile

@@ -0,0 +1,36 @@
+FROM node:18-alpine AS base
+
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY package.json yarn.lock* ./
+RUN yarn --frozen-lockfile
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+RUN yarn run build
+
+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
+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"]

next.config.js

@@ -26,6 +26,7 @@ const nextConfig = {
     });
     return config;
   },
+  output: 'standalone',
 };
 
 module.exports = nextConfig;

src/components/layouts/Layout.tsx

@@ -34,4 +34,5 @@ export default Layout;
 
 const Main = styled.main<{ showNavbar: boolean }>`
   ${({ showNavbar }) => showNavbar && 'margin-bottom: 63px;'};
+  background-color: #fff; // FIXME: theme 설정 시 수정 예정입니다.
 `;

src/styles/GlobalStyle.ts

@@ -99,11 +99,11 @@ const GlobalStyle = css`
     -webkit-appearance: none;
   }
 
-  @media (prefers-color-scheme: dark) {
+  /* @media (prefers-color-scheme: dark) {
     html {
       color-scheme: dark;
     }
-  }
+  } */
 `;
 
 export default GlobalStyle;