1.BuildAndDeploy.md

DEVoca 포팅 매뉴얼

Gitlab 소스 클론 이후 빌드 및 배포할 수 있도록 정리한 문서

• 빌드 시 사용되는 환경 변수 등의 주요 내용 상세 기재
• 배포 시 특이사항 기재
• DB 접속 정보 등 프로젝트에 활용되는 주요 계정 및 프로퍼티가 정의된 파일 목록

---

Table of Contents

• DEVoca 포팅 매뉴얼
  • Table of Contents
  • Development Environment
  • Build & Deploy
    • Clone repository
    • Environment variables
    • Prepare docker network
    • Certifications
    • Deploy Databases
      • MySQL
      • Redis
    • Deploy API server
    • Build Frontend pages
    • Deploy Nginx
    • Install Chrome extension
  • MySQL Workbench

---

Development Environment

	Name	Version			Name	Version
FE	node	v20.11.0		BE	Java	Temurin 17.0.9
FE	Vue	^3.3.11		BE	Spring Boot	3.2.2
FE	vue-router	^4.2.5		BE	MySQL	8.0.35
FE	axios	^1.6.7		BE	Redis	7.2
FE	event-source-polyfill	^1.0.31		BE	Gradle	8.5
FE	pinia	^2.1.7		BE	jjwt-api	0.11.5
FE	stompjs	^2.2.3		OS	Ubuntu	20.04.6 LTS
FE	eslint	^8.49.0		Infra	Docker	25.0.1
FE	prettier	^3.0.3		Infra	Docker Compose	2.24.2
FE	tailwindcss	^3.4.1		DevOps	Jenkins	2.442
FE	vite	^5.0.10		IDE	IntelliJ IDEA	2023.3.3 (Ultimate Edition)
FE	Nginx	1.25		IDE	VisualStudio Code	1.86.1

Build & Deploy

Clone repository

git clone https://lab.ssafy.com/s10-webmobile2-sub2/S10P12D112.git --depth 1
cd ./S10P12D112
pwd
# /home/ssafy/S10P12D112

Environment variables

.env 파일 수정

cd ./deploy
pwd
# /home/ssafy/S10P12D112/deploy

cp .env.template .env
vi .env

MYSQL_ROOT_PASSWORD=rootpw
MYSQL_USER=d112user
MYSQL_PASSWORD=d112userpw
MYSQL_DATABASE=DEVOCA
MYSQL_HOST=i10d112.p.ssafy.io
MYSQL_PORT=3306
MYSQL_EXTERNAL_PORT=3306

HTTP_PORT=80
NGINX_PORT=443
JWT_SALT=DEVOCA_D112_JWT_SALT

ALLOWED_ORIGINS=http://localhost:5173,https://i10d112.p.ssafy.io,chrome-extension://pceknneimgkjkgidkfdbpkjbnehddhpd

KAKAO_CLIENT_ID=f9cb962...     # 카카오 API 클라이언트 아이디
KAKAO_CLIENT_SECRET=ZIdet9C... # 카카오 API 클라이언트 시크릿
KAKAO_REDIRECT_URL=https://i10d112.p.ssafy.io/kakao/callback
KAKAO_LOGOUT_REDIRECT_URL=https://i10d112.p.ssafy.io/login

NAVER_CLIENT_ID=4co8xPe...     # 네이버 API 클라이언트 아이디
NAVER_CLIENT_SECRET=ffkeJ2V... # 네이버 API 클라이언트 시크릿

MM_ENDPOINT=https://meeting.ssafy.com/hooks/... # 알림을 받을 MatterMost Incomming Webhook 엔드포인트
MM_CHANNEL=D112-Alert

REDIS_HOST=redis
REDIS_PORT=6379
REDIS_USER=d112user
REDIS_PASSWORD=d112userpw

Prepare docker network

배포 시 필요한 도커 네트워크 생성

# /home/ssafy/S10P12D112/deploy
docker network create devoca_network

Certifications

deploy/.cert/ 디렉토리에 privkey.pem, fullchain.pem 파일 준비

# /home/ssafy/S10P12D112/deploy
tree .cert
.cert
├── cert.pem
├── fullchain.pem
└── privkey.pem

Deploy Databases

MySQL

# /home/ssafy/S10P12D112/deploy
docker compose up -d mysql

Redis

# /home/ssafy/S10P12D112/deploy
docker compose up -d redis

Deploy API server

# /home/ssafy/S10P12D112/deploy
docker compose up -d --build api

Build Frontend pages

# /home/ssafy/S10P12D112/deploy
docker compose up -d --build frontend && docker compose stop frontend && docker compose rm -f frontend

Deploy Nginx

# /home/ssafy/S10P12D112/deploy
docker compose up -d nginx

Install Chrome extension

1. 소스 코드 다운로드 & 압축 해제

2. 크롬 브라우저에서 확장 프로그램 관리 페이지 접속

   

   • 우측 상단 '개발자 모드' 토글 켜기

3. 압축 해제한 확장 프로그램 로드

   

4. 단어 검색

   

! Note !
현재 확장 프로그램은 배포 상태가 아니라 개발자 모드에서 실행되기 때문에 확장 프로그램 아이디를 서버의 .env 파일의 ALLOWED_ORIGINS 부분에 수동으로 등록해줘야 합니다.

MySQL Workbench

• Connection Info
  • .env 파일의 정보를 사용