🚀 EC2 자동 배포 (#132)

* feat: deploy.yaml 추가 * fix: SunEditor 관련 빌드 오류 수정 * fix: add missing use client * test: 자동 배포 * feat: deploy.yaml에 ssh-action 적용 * test: 자동 배포 * deploy: 배포 브랜치 main으로 변경
wafflestudio · Feb 10, 2024 · 1e56f72 · 1e56f72
1 parent 5c5da31
commit 1e56f72
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 44 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -10,15 +10,38 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: SSH Remote Commands
-        uses: appleboy/[email protected]
+      - name: Setup Node.js environment
+        uses: actions/[email protected]
+
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Log in to the Container Registry
+        uses: docker/[email protected]
+        with:
+          registry: ghcr.io
+          username: ${{github.actor}}
+          password: ${{secrets.GITHUB_TOKEN}}
+
+      - name: Create .env file
+        run: |
+          echo "NEXT_PUBLIC_KAKAO_MAP_API_KEY=${{secrets.KAKAO_MAP_API_KEY}}" > .env.local
+      - name: Build and push Docker images
+        uses: docker/[email protected]
+        with:
+          context: '.'
+          push: true
+          tags: |
+            ghcr.io/wafflestudio/csereal_nextjs_image:latest
+            ghcr.io/wafflestudio/csereal_nextjs_image:${{github.sha}}
+      - name: executing remote ssh commands using password
+        uses: appleboy/[email protected]
         with:
-          host: ${{secrets.SSH_HOST}}
-          username: ${{secrets.SSH_USER}}
-          key: ${{secrets.SSH_KEY}}
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
           script: |
-            cd ~/csereal-web
-            git pull
-            npm i
-            npm run build
-            pm2 restart csereal_front
+            docker stop csereal_nextjs_image
+            docker rm csereal_nextjs_image
+            docker pull ghcr.io/wafflestudio/csereal_nextjs_image:latest
+            docker run -d -p 3000:3000 --name csereal_nextjs_image ghcr.io/wafflestudio/csereal_nextjs_image
diff --git a/Dockerfile b/Dockerfile
@@ -11,7 +11,7 @@ COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
 RUN \
     if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
     elif [ -f package-lock.json ]; then npm ci; \
-    elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+    elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
     else echo "Lockfile not found." && exit 1; \
     fi
 
@@ -25,12 +25,14 @@ COPY . .
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.
-ENV NEXT_TELEMETRY_DISABLED 1
-
-# RUN yarn build
+# ENV NEXT_TELEMETRY_DISABLED 1
 
-# If using npm comment out above and use below instead
-RUN npm run build
+RUN \
+    if [ -f yarn.lock ]; then yarn run build; \
+    elif [ -f package-lock.json ]; then npm run build; \
+    elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+    else echo "Lockfile not found." && exit 1; \
+    fi
 
 # Production image, copy all the files and run next
 FROM base AS runner
@@ -40,24 +42,97 @@ ENV NODE_ENV production
 # Uncomment the following line in case you want to disable telemetry during runtime.
 ENV NEXT_TELEMETRY_DISABLED 1
 
-RUN addgroup --system --gid 1001 yeolyi1310
-RUN adduser --system --uid 1001 yeolyi1310
-
-USER yeolyi1310
+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 /app/.next/standalone ./
-COPY --from=builder /app/.next/static ./.next/static
+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 localhost
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+# 시간대 설정
 ENV TZ Asia/Seoul
 ENV LANG ko_KR.UTF-8
 ENV TIME ko_KR.UTF-8
 
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
 CMD ["node", "server.js"]
+
+# FROM node:18-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
+# WORKDIR /app
+
+# # Install dependencies based on the preferred package manager
+# COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+# RUN \
+#     if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+#     elif [ -f package-lock.json ]; then npm ci; \
+#     elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+#     else echo "Lockfile not found." && exit 1; \
+#     fi
+
+
+# # Rebuild the source code only when needed
+# FROM base AS builder
+# WORKDIR /app
+# COPY --from=deps /app/node_modules ./node_modules
+# COPY . .
+
+# # Next.js collects completely anonymous telemetry data about general usage.
+# # Learn more here: https://nextjs.org/telemetry
+# # Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# # RUN yarn build
+
+# # If using npm comment out above and use below instead
+# RUN npm run build
+
+# # Production image, copy all the files and run next
+# FROM base AS runner
+# WORKDIR /app
+
+# ENV NODE_ENV production
+# # Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN addgroup --system --gid 1001 yeolyi1310
+# RUN adduser --system --uid 1001 yeolyi1310
+
+# USER yeolyi1310
+
+# COPY --from=builder /app/public ./public
+
+# # Automatically leverage output traces to reduce image size
+# # https://nextjs.org/docs/advanced-features/output-file-tracing
+# COPY --from=builder /app/.next/standalone ./
+# COPY --from=builder /app/.next/static ./.next/static
+
+# EXPOSE 3000
+
+# ENV PORT 3000
+# ENV HOSTNAME localhost
+# ENV TZ Asia/Seoul
+# ENV LANG ko_KR.UTF-8
+# ENV TIME ko_KR.UTF-8
+
+# CMD ["node", "server.js"]
diff --git a/app/[locale]/community/news/create/page.tsx b/app/[locale]/community/news/create/page.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-
 import { revalidateNewsTag } from '@/actions/newsActions';
+import { useRouter } from '@/navigation';
 
 import { postNews } from '@/apis/news';
 

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -1,5 +1,6 @@
 import { notFound } from 'next/navigation';
 import { NextIntlClientProvider } from 'next-intl';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import { ReactNode } from 'react';
 import { Toaster } from 'react-hot-toast';
 
@@ -31,6 +32,9 @@ export default async function RootLayout({
   children: React.ReactNode;
   params: { locale: string };
 }) {
+  // https://next-intl-docs.vercel.app/docs/getting-started/app-router#static-rendering
+  unstable_setRequestLocale(params.locale);
+
   return (
     <html lang={params.locale}>
       <body className="text-neutral-800 font-normal bg-white min-w-fit flex">

diff --git a/components/editor/common/SunEditorWrapper.tsx b/components/editor/common/SunEditorWrapper.tsx
@@ -1,10 +1,13 @@
 'use client';
 
-import { MutableRefObject, Suspense, lazy } from 'react';
+import { MutableRefObject, lazy } from 'react';
 import { ko } from 'suneditor/src/lang/';
 import SunEditorCore from 'suneditor/src/lib/core';
 import plugins from 'suneditor/src/plugins';
 
+// TODO
+// 정말 왜그러는지 모르겠는데 lazy + typeof window 조합으로만 빌드가 됨
+// 건들지 말..것..
 const SunEditor = lazy(() => import('suneditor-react'));
 
 import './suneditor.css';
@@ -18,7 +21,7 @@ export default function SunEditorWrapper({
   initialContent?: string;
 }) {
   return (
-    <Suspense fallback={<SunEditorFallback />}>
+    typeof window !== 'undefined' && (
       <SunEditor
         getSunEditorInstance={(x) => (editorRef.current = x)}
         setDefaultStyle={`padding: 1rem;`}
@@ -39,25 +42,26 @@ export default function SunEditorWrapper({
           // imageUploadUrl: `${BASE_URL}/file/upload`,
         }}
       />
-    </Suspense>
+    )
   );
 }
 
-const SunEditorFallback = () => {
-  return (
-    <div className="animate-pulse flex flex-col mx-[3.75rem] mt-3 h-[400px]">
-      <div className="flex flex-col gap-2">
-        <div className="h-4 bg-[#ffffff] opacity-30 rounded w-2/5"></div>
-        <div className="h-4 bg-[#ffffff] opacity-30 rounded w-2/5"></div>
-      </div>
-      <div className="flex flex-1 flex-col gap-2 w-3/5 mt-4">
-        <div className="h-4 bg-[#ffffff] opacity-30 rounded"></div>
-        <div className="h-4 bg-[#ffffff] opacity-30 rounded"></div>
-        <div className="h-4 bg-[#ffffff] opacity-30 rounded"></div>
-      </div>
-    </div>
-  );
-};
+// Suspense 쓰도록 고칠 때까지 삭제
+// const SunEditorFallback = () => {
+//   return (
+//     <div className="animate-pulse flex flex-col mx-[3.75rem] mt-3 h-[400px]">
+//       <div className="flex flex-col gap-2">
+//         <div className="h-4 bg-[#ffffff] opacity-30 rounded w-2/5"></div>
+//         <div className="h-4 bg-[#ffffff] opacity-30 rounded w-2/5"></div>
+//       </div>
+//       <div className="flex flex-1 flex-col gap-2 w-3/5 mt-4">
+//         <div className="h-4 bg-[#ffffff] opacity-30 rounded"></div>
+//         <div className="h-4 bg-[#ffffff] opacity-30 rounded"></div>
+//         <div className="h-4 bg-[#ffffff] opacity-30 rounded"></div>
+//       </div>
+//     </div>
+//   );
+// };
 
 // https://github.com/JiHong88/SunEditor/issues/199
 export const isContentEmpty = (editor: SunEditorCore) => {

diff --git a/components/layout/header/Header.tsx b/components/layout/header/Header.tsx
@@ -2,7 +2,6 @@
 
 import { useTranslations } from 'next-intl';
 
-
 import { BASE_URL } from '@/apis';
 import { useSessionContext } from '@/contexts/SessionContext';
 import { Link } from '@/navigation';

diff --git a/next.config.mjs b/next.config.mjs
@@ -5,6 +5,14 @@ const withNextIntl = createNextIntlPlugin();
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+    output: 'standalone',
+
+  // TODO: 아래 옵션 없이 빌드
+  eslint: {
+    // Warning: This allows production builds to successfully complete even if
+    // your project has ESLint errors.
+    ignoreDuringBuilds: true,
+  },
 
   webpack(config) {
     // Grab the existing rule that handles SVG imports