핀드 - 내 추억 속의 랜드마크

<공모전 출품용> 지역 랜드마크와 관련된 내 추억을 공유하는 지도 기반 웹 SNS 서비스

SNS Link(Disabled): Link

Developers

이준혁 (팀장, 백엔드, 프로젝트 설계 및 디자인, 스프린트 매니징, 아키텍처 설계)
박종윤 (백엔드, API 테스트)
최수용 (프론트엔드, UI/UX 디자인 및 구현)
허재원 (프론트엔드, UI/UX 디자인 및 구현)

About App

1. Stack

Framework: Backend - Django, Python / Frontend - Next.js, tailwind.css
DB: PostgreSQL
Cache DB: Redis
Proxy: Nginx
Container: Docker

2. Directory Tree

├── .github (sources of github templates)
├── project_pinned (backend sources)
│   ├── project_pinned (sources)
│   │   └── source files ...
│   ├── Dockerfile (백엔드 앱 컨테이너 빌드 파일)
│   ├── manage.py
│   ├── setup.cfg (linter or test env configurations)
│   ├── setup.py (configurations)
│   ├── serviceAccountKey.json (개발자 각자 반드시 개인적으로 받아야 하는 파일)
│   ├── requirements.txt (백엔드 프로젝트 의존성 파일)
│   └── .env (개발자 각자 반드시 개인적으로 받아야 하는 파일)
│
├── nginx (proxy service)
│
├── front (frontend sources)
│   ├── components
│   │   └── source files ...
│   ├── contexts
│   │   └── source files ...
│   ├── HOC
│   │   └── source files ...
│   ├── hook
│   │   └── source files ...
│   ├── pages
│   │   └── source files ...
│   ├── public
│   │   └── source files ...
│   ├── styles
│   │   └── source files ...
│   ├── utils
│   │   └── source files ...
│   ├── .babelrc
│   ├── .dockerignore
│   ├── .env (개발자 각자 반드시 개인적으로 받아야 하는 파일)
│   ├── .eslintrc.json
│   ├── .gitignore
│   ├── Dockerfile (프론트 앱 컨테이너 빌드 파일)
│   ├── jsonconfig.json
│   ├── next,config.js
│   ├── package.json
│   ├── package-lock.json
│   ├── postcss.config.js (framework config file)
│   ├── tailwind.config.js (framework config file)
│   └── README.md
├── .env (개발자 각자 반드시 개인적으로 받아야 하는 파일)
├── .gitignore
├── docker-compose.yml (build containers for development)
├── docker-compose.test.yml (build containers for before deployment, check availability)
├── docker-compose.prod.yml (build containers for production)
├── scripts
│   ├── apitest.sh (API test script - backend)
│   ├── build_dev.sh (build script for development)
│   ├── build_test.sh (build script for before deployment, check availability)
│   └── build_prod.sh (build script for production)
└── README.md

3. API Docs

API endpoint에 대한 설명이 기재되어 있습니다:

4. DB Schemas

PostgreSQL Database에 구현된 Table에 대한 schema가 정의되어 있습니다: Link

5. UI/UX Diagrams

프론트 뷰에 구현된 UI/UX 다이어그램이 정의되어 있습니다(업로드 예정): Link

Contribution Guide

필수 환경

Python 3.10.10 버전 이상 혹은 해당 버전의 Python
Git
Docker

개발 환경 구성

현재 github repository를 작업할 Local 디렉토리에 clone: git clone [email protected]:bnbong/Project-Pinned.git
디렉토리에 python 가상 환경을 구성: python -m venv pinn-venv
python 가상 환경으로 접속:
- Mac / Linux: source pinn-venv/bin/activate
- Window: .pinn-venv/Scripts/activate
의존성 설치: pip install -r requirements.txt
IDE가 venv 속 python과 linter로 pylint를 사용하도록 변경: depends on your IDE environment.
공유받은 .env 파일을 프로젝트 디렉토리에 저장: 없다면 팀장에게 개인 연락 혹은 메일하기 ([email protected])
정의된 컨테이너들을 빌드: bash scripts/build_dev.sh
프론트 앱을 빌드: cd front & npm install & npm run build & npm run dev
컨테이너들이 정상적으로 빌드가 되었는지 확인.
localhost 환경에서 개발하기, 이때 프론트 앱은 localhost:3000에서 확인 가능(브라우저의 CORS 기능을 꺼준 상태에서 개발하기).
개발이 완료되면 컨테이너들을 종료: bash scripts/stop_dev.sh
파이썬 가상환경을 종료: deactivate

Contribution Guide

코딩 컨벤션, 커밋 메시지 작성 방법, branch 전략, document contribution 방법이 기재되어 있습니다: Link

Dockerize한 frontend application 컨테이너가 앱을 빌드하지 못하는 현상

front/ 폴더에 다음과 같이 Dockerfile을 추가하여 컨테이너 빌드 스크립트를 짰다.

# Start from the official Node.js LTS base image
FROM node:16-alpine

# Set the working directory to /app
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install dependencies
RUN npm ci
# RUN npm install

# Copy the rest of the code
COPY . .

# Build the app
RUN npm run build

# Expose port 3000
EXPOSE 3000

# Start the app
CMD ["npm", "start"]

해당 Dockerfile 스크립트를 통해 docker compose up 명령어를 입력하여 전체 프로젝트 빌드를 수행했더니 다음과 같은 오류가 발생했다.

위 사진과 같이 frontend 앱을 컨테이너가 빌드하는 과정에서 오류 로그로

project-pinned-frontend-1  | 
project-pinned-frontend-1  | > [email protected] start
project-pinned-frontend-1  | > next start
project-pinned-frontend-1  | 
project-pinned-frontend-1  | sh: next: not found
project-pinned-frontend-1 exited with code 127

가 발생했다.

프로젝트 디렉토리 변경사항

루트 디렉토리 project-pinned에 있던 Dockerfile은 backend application을 빌드하기 위한 Dockerfile 이었다.

프론트앤드 앱과 백앤드 앱을 분리하여 빌드를 수행하도록 docker-compose.yml을 다음과 같이 수정함에 따라 프론트 프로젝트와 백엔드 프로젝트에 새로 Dockerfile을 각각 정의했다.

변경한 docker-compose.yml 파일

version: '3.8'

services:
  db:
    image: postgres
    environment:
      POSTGRES_DB: pinned_db
      POSTGRES_USER: pinned
      POSTGRES_PASSWORD: pinned
    volumes:
      - postgres_data:/var/lib/postgresql/data/
    ports:
      - "5432:5432"

  redis:
    image: "redis:alpine"
    volumes:
      - redis_data:/data
    ports:
      - "6379:6379"

  backend:
    build:
      context: ./project_pinned
      dockerfile: Dockerfile
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - ./project_pinned:/app
    ports:
      - "8000:8000"
    depends_on:
      - db
      - redis

  frontend:
    build:
      context: ./front
      dockerfile: Dockerfile
    volumes:
      - ./front:/app
    ports:
      - "3000:3000"
    environment:
      - REACT_APP_BACKEND_URL=http://backend:8000

volumes:
  postgres_data:
  redis_data:

백엔드 앱의 Dockerfile이 Django 프로젝트 폴더 내부로 이동하게 되면서 .env 파일과 requirements.txt 파일 또한 같이 이동하게 되었다. -> README.md 파일의 디렉토리 트리 부분 수정 예정.

bnbong / project-pinned Goto Github PK

project-pinned's Introduction

핀드 - 내 추억 속의 랜드마크

Developers

About App

1. Stack

2. Directory Tree

3. API Docs

4. DB Schemas

5. UI/UX Diagrams

Contribution Guide

필수 환경

개발 환경 구성

Contribution Guide

project-pinned's People

Contributors

Stargazers

Watchers

Forkers

project-pinned's Issues

프로젝트 디렉토리 변경사항

Main page

Login page

Signup page

추가

Recommend Projects

Recommend Topics

Recommend Org