/NAYA

๐Ÿ‘๐Ÿป NAYA | NA๋ฅผ ์†Œ๊ฐœํ•˜๋Š” ๊ฐ€์žฅ ์‰ฌ์šด ๋ฐฉ๋ฒ•, ๋‚˜์•ผ

Primary LanguageC++

Footer__1_

[TOC]

1. NAYA ์†Œ๊ฐœ

์†Œ๊ฐœ์˜์ƒ [ https://youtu.be/aoKpCYj-c7E ]

NA(๋‚˜)๋ฅผ ์†Œ๊ฐœํ•˜๋Š” ๊ฐ€์žฅ ์‰ฌ์šด ๋ฐฉ๋ฒ• NAYA ์†Œ๊ฐœ ์นด๋“œ ๊ด€๋ฆฌ ์„œ๋น„์Šค

logo_dark

2. ๐Ÿ” ๊ฐœ๋ฐœ ํ™˜๊ฒฝ

2-1. ํ™˜๊ฒฝ ์„ค์ •

๐Ÿ‘จโ€๐Ÿ’ป Front-end

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.6",
    "@types/jest": "^27.5.2",
    "@types/node": "^17.0.45",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "axios": "^1.1.3",
    "cors": "^2.8.5",
    "react": "^18.2.0",
    "react-device-detect": "^2.2.2",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0",
    "react-redux": "^8.0.4",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-router-dom": "^5.3.3"
  }
}

๐Ÿ‘จโ€๐Ÿ’ป Back-end

server.servlet.context-path= /naya
server.port=8080

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://172.17.0.2:3306/naya?serverTimezone=UTC&characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=eowjswkdbfb104

#spring
#spring.jpa.show-sql=true.jpa.database-platform=org.hibernate.dialect.MySql8Dialect
spring.jpa.hibernate.ddl-auto=update

#spring.mvc.pathmatch.matching-strategy=ant_path_matcher

๐Ÿ‘ฉโ€๐Ÿ’ป CI/CD

# backend
FROM openjdk:8
WORKDIR /var/jenkins_home/workspace/NAYA/backend/naya
ENV TZ Asia/Seoul
COPY build/libs/NAYA-0.0.1-SNAPSHOT.jar app.jar
ENTRYPOINT ["java","-jar","app.jar"]
  

# frontend
FROM node:16 as build-stage

# ์•ฑ ๋””๋ ‰ํ„ฐ๋ฆฌ ์ƒ์„ฑ
WORKDIR /jenkins/workspace/NAYA/frontend
ENV TZ Asia/Seoul

# ์•ฑ ์˜์กด์„ฑ ์„ค์น˜
# ๊ฐ€๋Šฅํ•œ ๊ฒฝ์šฐ(npm@5+) package.json๊ณผ package-lock.json์„ ๋ชจ๋‘ ๋ณต์‚ฌํ•˜๊ธฐ ์œ„ํ•ด
# ์™€์ผ๋“œ์นด๋“œ๋ฅผ ์‚ฌ์šฉ
COPY package*.json ./

RUN npm install --save --legacy-peer-deps
# ํ”„๋กœ๋•์…˜์„ ์œ„ํ•œ ์ฝ”๋“œ๋ฅผ ๋นŒ๋“œํ•˜๋Š” ๊ฒฝ์šฐ
# RUN npm ci --only=production

# ์•ฑ ์†Œ์Šค ์ถ”๊ฐ€
COPY . .

RUN npm run build

FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /jenkins/workspace/NAYA/frontend/build /usr/share/nginx/html
COPY --from=build-stage /jenkins/workspace/NAYA/frontend/deploy_conf/nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 3000
CMD ["nginx", "-g", "daemon off;"]

2-2. ์„œ๋น„์Šค ์•„ํ‚คํ…์ฒ˜

logo_dark

3. ๐Ÿ“˜ ์‹คํ–‰ ๋ฐฉ๋ฒ•

docker๋ฅผ ํ™œ์šฉํ•œ ์‹คํ–‰ ๊ฐ€์ด๋“œ

  1. git clone
git clone https://lab.ssafy.com/s07-final/S07P31B104.git

  1. ๋„์ปค ์„ค์น˜ ๋ฐ ๋„์ปค ์ปดํฌ์ฆˆ ์„ค์น˜

  2. Dockerfile ๋ฐ docker-compose.yml์ž‘์„ฑ

    • frontend Dockerfile

       FROM node:16 as build-stage

 # ์•ฑ ๋””๋ ‰ํ„ฐ๋ฆฌ ์ƒ์„ฑ
 WORKDIR /jenkins/workspace/NAYA/frontend
 ENV TZ Asia/Seoul

 # ์•ฑ ์˜์กด์„ฑ ์„ค์น˜
 # ๊ฐ€๋Šฅํ•œ ๊ฒฝ์šฐ(npm@5+) package.json๊ณผ package-lock.json์„ ๋ชจ๋‘ ๋ณต์‚ฌํ•˜๊ธฐ ์œ„ํ•ด
 # ์™€์ผ๋“œ์นด๋“œ๋ฅผ ์‚ฌ์šฉ
 COPY package*.json ./

 RUN npm install --save --legacy-peer-deps
 # ํ”„๋กœ๋•์…˜์„ ์œ„ํ•œ ์ฝ”๋“œ๋ฅผ ๋นŒ๋“œํ•˜๋Š” ๊ฒฝ์šฐ
 # RUN npm ci --only=production

 # ์•ฑ ์†Œ์Šค ์ถ”๊ฐ€
 COPY . .

 RUN npm run build

 FROM nginx:stable-alpine as production-stage
 COPY --from=build-stage /jenkins/workspace/NAYA/frontend/build /usr/share/nginx/html
 COPY --from=build-stage /jenkins/workspace/NAYA/frontend/deploy_conf/nginx.conf /etc/nginx/conf.d/default.conf

 EXPOSE 3000
 CMD ["nginx", "-g", "daemon off;"]

    • backend dockerfile

       FROM openjdk:8
 WORKDIR /var/jenkins_home/workspace/NAYA/backend/naya
 ENV TZ Asia/Seoul
 #VOLUME /tmp
 #ARG JAR_FILE=build/libs/*.jar
 #COPY {JAR_FILE} app.jar
 #RUN ln -snf /usr/share/zoneinfo/Asia/Seoul /etc/localtime
 COPY build/libs/NAYA-0.0.1-SNAPSHOT.jar app.jar
 ENTRYPOINT ["java","-jar","app.jar"]

    • nginx.conf ํŒŒ์ผ

       upstream backend{
   ip_hash;
   server {๋‚ด๋ถ€ ๋กœ์ปฌ ์ฃผ์†Œ:ํฌํŠธ๋ฒˆํ˜ธ}; ex)172.26.14.37:8080;
 }

 map $http_upgrade $connection_upgrade {
   default upgrade;
   ''      close;
 }

 server {
         listen  80;
         server_name     {๋„๋ฉ”์ธ ์ฃผ์†Œ}; ex) k7b104.p.ssafy.io;
         location / {
                 return 301 https://$host$request_uri;
         }
         #location /naya/api {
         #       proxy_name http://localhost:8080/naya/api;
         #}
 }

 server {
     listen       443 ssl;
 #    listen  [::]:443;
     server_name  {๋„๋ฉ”์ธ ์ฃผ์†Œ}; ex) k7b104.p.ssafy.io;

     access_log  /var/log/nginx/host.access.log  main;

   ssl_certificate /etc/letsencrypt/live/{๋„๋ฉ”์ธ ์ฃผ์†Œ}/fullchain.pem;
 # ex)   ssl_certificate /etc/letsencrypt/live/k7b104.p.ssafy.io/fullchain.pem;
   ssl_certificate_key /etc/letsencrypt/live/{๋„๋ฉ”์ธ ์ฃผ์†Œ}/privkey.pem;
 # ex)   ssl_certificate_key /etc/letsencrypt/live/k7b104.p.ssafy.io/privkey.pem;
   ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3 SSLv3;
   ssl_ciphers ALL;

     location / {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
         error_page 405 = $uri;
         proxy_redirect off;
         try_files $uri.html $uri $uri/ /index.html;

         charset utf-8;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header X-Nginx-Proxy true;
     }

         location /api/ {
         proxy_pass http://backend/;
         proxy_redirect     off;
         charset utf-8;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header X-Nginx-Proxy true;
     }

    • docker-compose.yml

       version: '3'
   services:
       jenkins:
           image: jenkins/jenkins:lts
           container_name: jenkins
           volumes:
               - /var/run/docker.sock:/var/run/docker.sock
               - /jenkins:/var/jenkins_home
           ports:
               - "9090:8080"
           privileged: true
           user: root

  3. ๋„์ปค ์ปจํ…Œ์ด๋„ˆ ์‹คํ–‰

  • mysql ์ด๋ฏธ์ง€ ์‹คํ–‰ํ•˜๊ธฐ

     # MySQL ์ปจํ…Œ์ด๋„ˆ ์ƒ์„ฑ
 docker run --name naya_DB -e MYSQL_ROOT_PASSWORD -d mysql

 # Dump ๋„ฃ๊ธฐ
 docker cp {๋คํ”„ํŒŒ์ผ ์œ„์น˜} naya_DB:/home

 # naya_DB ๋‚ด๋ถ€ ์ ‘์†
 docker exec -it naya_DB bash

 # Dump import
 mysql -hlocalhost -uroot -p{password} < /home/{๋คํ”„ํŒŒ์ผ๋ช…}
    • ๋˜๋Š” 3306ํฌํŠธ๋กœ mySQL ์ ‘์†ํ•˜์—ฌ naya ์Šคํ‚ค๋งˆ ์ƒ์„ฑ

  • docker-compose ์‹คํ–‰

    sudo docker-compose up -d

  • ์  ํ‚จ์Šค์— ์ ‘์†ํ•ด ๋นŒ๋“œ ์„ค์ •

    • Build Steps - Excute shell ์ถ”๊ฐ€
     docker image prune -a --force
 mkdir -p /var/jenkins_home/images
 cd /var/jenkins_home/workspace/NAYA/frontend/
 docker build -t react .
 docker save react > /var/jenkins_home/images/react.tar

 cd /var/jenkins_home/workspace/NAYA/backend/NAYA/
 chmod +x ./gradlew
 ./gradlew clean build
 docker build -t springboot .
 docker save springboot > /var/jenkins_home/images/springboot.tar

 ls /var/jenkins_home/images
    • ๋นŒ๋“œ ํ›„ ์กฐ์น˜ ์ถ”๊ฐ€
      sudo docker load < /jenkins/images/react.tar
  sudo docker load < /jenkins/images/springboot.tar

  if (sudo docker ps -a | grep "react"); then sudo docker stop react; fi
  if (sudo docker ps -a | grep "springboot"); then sudo docker stop springboot; fi

  sudo docker run -it -d --rm -p 80:80 -p 443:443 -v /home/ubuntu/certbot/conf:/etc/letsencrypt/ -v /home/ubuntu/certbot/www:/var/www/certbot --name react react
  echo "Run frontend"
  sudo docker run -it -d --rm -p 8080:8080 --name springboot springboot
  echo "Run backend"
  1. ์ž‘๋™ ํ™•์ธ

  • ์‹คํ–‰ ์ค‘์ธ ์ปจํ…Œ์ด๋„ˆ ์กฐํšŒ

    docker ps

4. โญ ์ฃผ์š” ๊ธฐ๋Šฅ

  1. ๋‚˜๋งŒ์˜ ์ปค์Šคํ…€ ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ์นด๋“œ(Naya) ์ œ์ž‘
- Naya ์นด๋“œ๋Š” SNS ๋“ฑ์—์„œ ์œ ๋จธ์žˆ๊ฒŒ ์ž์‹ ์„ ํ‘œํ˜„ํ•˜๋Š” ์ˆ˜๋‹จ์œผ๋กœ ํ™œ์šฉ ๊ฐ€๋Šฅ

- ๋‹ค์–‘ํ•œ Naya ์†Œ๊ฐœ ์นด๋“œ ์ž‘์„ฑ ๊ฐ€๋Šฅ

- ๋‹ค์–‘ํ•œ Naya ์†Œ๊ฐœ ์นด๋“œ๋ฅผ ๋‹ค์–‘ํ•œ ์ƒํ™ฉ์— ๋งž๊ฒŒ ํ™œ์šฉ ๊ฐ€๋Šฅ
  1. ์—ฐ๋ฝ์ฒ˜๋ฅผ ๋ชจ๋ฅด๋Š” ์‚ฌ๋žŒ๊ณผ๋„ ์นด๋“œ ๊ณต์œ  ๊ฐ€๋Šฅ
- QR์ฝ”๋“œ๋ฅผ ์ด์šฉํ•œ ์นด๋“œ ๊ณต์œ 

- ์นด์นด์˜คํ†ก์„ ์ด์šฉํ•œ ์นด๋“œ ๊ณต์œ 

- ์ธ์Šคํƒ€๊ทธ๋žจ์„ ์ด์šฉํ•œ ์นด๋“œ ๊ณต์œ 
  1. ๋น ๋ฅธ ๋ช…ํ•จ ๋“ฑ๋ก ๊ณผ์ •
- ๋ช…ํ•จ ์ดฌ์˜์„ ํ†ตํ•œ ๋“ฑ๋ก

- ๊ฐค๋Ÿฌ๋ฆฌ๋ฅผ ํ†ตํ•œ ๊ธฐ์กด ์ด๋ฏธ์ง€ ๋“ฑ๋ก

- ํ…œํ”Œ๋ฆฟ์„ ์ด์šฉํ•œ ๋ช…ํ•จ ์ž‘์„ฑ ๋ฐ ๋“ฑ๋ก
  1. ๋น„์ฆˆ๋‹ˆ์Šค ์ƒํ™ฉ / ์บ์ฃผ์–ผ ์ƒํ™ฉ ๋ชจ๋‘ ํ™œ์šฉ ๊ฐ€๋Šฅ
- Naya, Nuya ์†Œ๊ฐœ ์นด๋“œ

  - Naya ์†Œ๊ฐœ ์นด๋“œ : ๋‚˜์˜ ์†Œ๊ฐœ ์นด๋“œ

  - Nuya ์†Œ๊ฐœ ์นด๋“œ : ์ƒ๋Œ€๋ฐฉ์ด ๊ณต์œ ํ•œ ์†Œ๊ฐœ ์นด๋“œ

- Business Naya, Nuya ๋ช…ํ•จ ์นด๋“œ

  - Business Naya ์นด๋“œ : ์‚ฌ์šฉ์ž ๋ณธ์ธ ๋ช…ํ•จ

  - Business Nuya ์นด๋“œ : ์ƒ๋Œ€๋ฐฉ์ด ๊ณต์œ ํ•œ ๋ช…ํ•จ

5. ๐Ÿ” ์‚ฌ์šฉ ๊ธฐ์ˆ 

  • ๐Ÿ’Ž ํ”„๋ก ํŠธ์—”๋“œ: React 18.2.0
  • ๐Ÿ‘‘ ๋ฐฑ์—”๋“œ: Java 1.8, SpringBoot 2.5.5
  • ๐Ÿ’ก DB : Firebase, Room (SQLite)
  • ๐ŸŒณ ์šด์˜์ฒด์ œ, ์„œ๋ฒ„: Ubuntu 20.04
  • ๐Ÿ“ฒ ๋ชจ๋ฐ”์ผ : Android, Kotlin, Jetpack Compose, Jetpack Navigation, CameraX, Retrofit2
  • ๐Ÿ‘๏ธ OCR: OpenCV, Tesseract

6. ๐Ÿ›ก ๋ฐฐํฌ

7. ๐Ÿ‘€ ์„ธ๋ถ€ํ™”๋ฉด

7-1. ๋‚˜์•ผ์ปค์Šคํ…€/๊ณต์œ /๋ช…ํ•จ์ธ์‹/ํ…œํ”Œ๋ฆฟ/์ผ์ •๊ด€๋ฆฌ

๋‚˜์•ผ ์ปค์Šคํ…€ ๋‚˜์•ผ ๊ณต์œ  ๋ช…ํ•จ ์ธ์‹ ๋ช…ํ•จ ํ…œํ”Œ๋ฆฟ ์ผ์ • ๊ด€๋ฆฌ

8. ๐Ÿ“ ์„ค๊ณ„ ๋ฌธ์„œ

8-1. ERD

์ž์œจํ”„๋กœ์ ํŠธ

8-2. Design System

logo_dark

logo_dark

8-3. Design

logo_dark

9. ๐Ÿ–Š Cooperation&Promises

9-1. Tools

- Git

- Jira

- Notion

- Mattermost

- Webex

10. ํŒ€์› ์†Œ๊ฐœ

logo_dark