SSerVe's Devlog 블로그의 레포지토리입니다.
Python 3.11.1 & NodeJS v18.13.0
- Python Environment - Pipenv
- Backend - FastAPI
- Frontend - NextJS
- Backend와 Frontend는 localhost에서 통신하기 때문에, 반드시 같은 환경에서 실행되어야 합니다.
- SQLite3 데이터베이스를 쓰고 있으며, 컨텐츠 서버를 따로 구축해 (https://cdn.sserve.work) 업로드 시 토큰을 주도록 설계되어 있습니다.
- Frontend
- 실행 시 환경변수로 API_KEY를 넘겨주고, 컨텐츠 서버에 업로드를 시도 할 때 Header로 API_KEY를 전송, 인증을 시도합니다.
- Backend
- Pipenv를 사용했기 때문에 다음과 같은 절차가 필요합니다.
pip install pipenv
- 전역으로 pipenv 설치cd Blog
- 레포지토리 루트 폴더로 이동pipenv install
- virtualenv 생성 & 종속성 설치pipenv shell
- pipenv의 virtualenv 실행
- 이후 virtualenv 안에서
python main.py
를 입력하여 실행을 시도할 수 있습니다. - 환경변수로는 ADMIN_ID와 ADMIN_PW를 받고,
/admin/login
루트에서 로그인 등을 시도할 때 인증을 위해 사용합니다. - 로그 설정 파일은 Dev와 Prod 환경에 맞게 따로 구성되어 있습니다.
- 실행 시
--reload
옵션을 줌으로서 백엔드 파일의 변화를 감지해 빠르게 재시작할 수 있습니다. - 실행 시
--log-config devlog.ini
옵션을 줌으로서 Dev 환경의 로그 설정을 적용할 수 있습니다.
- Pipenv를 사용했기 때문에 다음과 같은 절차가 필요합니다.
Docker와 Nginx를 활용하는 것을 권장합니다.
- Backend와 Frontend 둘 다 Dockerfile이 있습니다.
- frontend/globals.js와 next-sitemap.config.js에서 웹사이트의 URL을 변경해야 합니다.
- Docker를 이용하는 경우
- frontend/globals.js에서 dev 변수를 false로 설정해야 합니다
- backend의 docker container 이름을
blogbackend
로 설정해야 합니다.
- 메인 검색 기능
- 메인 페이지 넘기기 기능
- 시리즈에 태그 붙이기
- 썸네일 업로드
- 포스트 컨텐츠에 이미지 끌어서 업로드 (PC용)
- 포스트 컨텐츠에 이미지 올리기 버튼 (모바일/태블릿용)
- 포스트에 태그 붙이기
- 시리즈에서 포스트 리스트로 만들고 수정 삭제 가능하게
- 에디터에서 PID 있으면 update api 호출
- Delete 구현
- 401 redirection과 기타 에러 Toast로 처리
- SEO 구현
- 다크 모드 코드 하이라이팅 스타일 처리
- 하이라이팅시 unescaped HTML 고치기
- 포스트 에디터 라이브 프리뷰
- 메인 페이지 네비게이션
- 포스트 안에서 시리즈 목록 보기
- 마크다운 링크 스타일링
- View 카운트
- katex-html aria-hidden=true hidden처리
- 씹창난 모바일 뷰 개선
- 포스트 댓글