first commit

Author: Ruthgyeul

.github/workflows/deploy.yml

@@ -0,0 +1,61 @@
+name: Build Docker and Upload to S3
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-upload:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout Code
+      uses: actions/checkout@v3
+
+    - name: Create .env file
+      run: |
+        echo "DOCKER_HUB_USERNAME=${{ secrets.DOCKER_HUB_USERNAME }}" > .env
+        echo "NEXT_PUBLIC_SUPABASE_URL=${{secrets.NEXT_PUBLIC_SUPABASE_URL}}" >> .env
+        echo "NEXT_PUBLIC_SUPABASE_ANON_KEY=${{secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY}}" >> .env
+
+    - name: Login to DockerHub (Optional)
+      uses: docker/login-action@v2
+      with:
+        username: ${{ secrets.DOCKER_HUB_USERNAME }}
+        password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
+
+    - name: Build and Push Docker Image
+      run: |
+        docker build -t ${{ secrets.DOCKER_HUB_USERNAME }}/gdgoc-solution-gallery:latest .
+        docker run --rm ${{ secrets.DOCKER_HUB_USERNAME }}/gdgoc-solution-gallery:latest ls -la /app
+        docker push ${{ secrets.DOCKER_HUB_USERNAME }}/gdgoc-solution-gallery:latest
+
+    - name: Create Deployment Package
+      run: |
+        cp scripts/deploy.sh ./deploy.sh
+        zip -r deploy.zip .env docker-compose.yml deploy.sh appspec.yml \
+            Dockerfile package.json package-lock.json next.config.ts \
+            pages public .next
+
+    - name: Configure AWS credentials
+      run: |
+        aws configure set aws_access_key_id ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws configure set aws_secret_access_key ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws configure set region ${{ secrets.AWS_REGION }}
+
+    - name: Upload Deployment Package to S3
+      run: |
+        aws s3 cp deploy.zip s3://${{ secrets.AWS_S3_BUCKET }}/deploy.zip
+
+    - name: Trigger CodeDeploy (CLI)
+      env:
+        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        AWS_REGION: ap-northeast-2
+      run: |
+        aws deploy create-deployment \
+          --application-name ${{ secrets.AWS_CODEDEPLOY_APP }} \
+          --deployment-group-name ${{ secrets.AWS_CODEDEPLOY_GROUP }} \
+          --s3-location bucket=${{ secrets.S3_BUCKET }},bundleType=zip,key=deploy.zip \
+          --file-exists-behavior OVERWRITE

.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# ide
+.idea/
+.cursor/

Dockerfile

@@ -0,0 +1,56 @@
+# 1단계: 빌드 환경
+FROM node:18 AS builder
+
+ARG APP_DIR=/app
+WORKDIR ${APP_DIR}
+
+# package.json과 package-lock.json을 먼저 복사하고, npm install 실행
+COPY package.json package-lock.json ./
+RUN npm install
+
+# .env 파일을 먼저 복사
+COPY .env ./
+
+# 이후 전체 파일 복사
+COPY . .
+
+# next.config.ts 확인
+RUN cat next.config.ts
+
+# 빌드 실행 (output: export가 있는지 확인)
+# 명시적으로 next build 명령 사용
+RUN npx next build
+
+# 빌드 결과 확인
+RUN ls -la ${APP_DIR}
+RUN ls -la ${APP_DIR}/.next || echo ".next 디렉토리가 없습니다"
+RUN ls -la ${APP_DIR}/out || echo "out 디렉토리가 없습니다"
+
+# 2단계: 실행 환경
+FROM node:18
+
+ARG APP_DIR=/app
+WORKDIR ${APP_DIR}
+
+# 프로덕션 의존성만 가져오기
+COPY package*.json ./
+RUN npm install --omit=dev
+
+# .env 파일 복사
+COPY .env ./
+
+# 빌드된 결과물 가져오기
+COPY --from=builder ${APP_DIR}/.next ./.next
+COPY --from=builder ${APP_DIR}/public ./public
+COPY --from=builder ${APP_DIR}/node_modules ./node_modules
+COPY --from=builder ${APP_DIR}/package.json ./package.json
+COPY --from=builder ${APP_DIR}/next.config.ts ./next.config.ts
+
+# 실행환경 확인
+RUN ls -la ${APP_DIR}
+RUN ls -la ${APP_DIR}/.next || echo ".next 디렉토리가 없습니다"
+
+EXPOSE 3001
+
+# Next.js 서버 시작
+CMD ["npm", "run", "start"]

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

appspec.yml

@@ -0,0 +1,11 @@
+version: 0.0
+os: linux
+files:
+  - source: /
+    destination: /home/ubuntu/gdgoc-solution-gallery
+
+hooks:
+  AfterInstall:
+    - location: deploy.sh
+      timeout: 300
+      runas: root

buildspec.yml

@@ -0,0 +1,19 @@
+# 버전 정보
+version: 0.2
+
+# 빌드 단계를 정의
+phases:
+  # 빌드 전 단계
+  pre_build:
+    commands:
+      - npm install  # npm을 이용하여 필요한 패키지들을 설치
+  # 빌드 단계
+  build:
+    commands:
+      - npm run build  # npm 스크립트를 통해 빌드 수행
+      
+# 빌드 후 생성된 결과물에 대한 정보
+artifacts:
+  files:
+    - '**/*'  # 모든 파일과 디렉토리를 포함
+  base-directory: out  # Next.js 정적 사이트 파일이 있는 디렉토리로 변경

docker-compose.yml

@@ -0,0 +1,14 @@
+version: "3.8"
+
+services:
+  frontend:
+    image: "${DOCKER_HUB_USERNAME}/gdgoc-solution-gallery:latest"
+    container_name: gdgoc-solution-gallery
+    restart: always
+    ports:
+      - "3001:3001"
+    environment:
+      NODE_ENV: production
+    working_dir: /app
+    command: "npm run start"
+

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  images: {
+    domains: ['ytyzerwpwcelmazjbfhv.supabase.co', 'placehold.co']
+  }
+};
+
+export default nextConfig;