theindex
1.0.0
TheIndex의 프론트 엔드, 편집자 패널 및 API.
가장 쉬운 방법은 Docker Compose를 사용하는 것입니다. github에서 docker-compose.yml 및 example.env 파일을 복사해야합니다. example.env .env 바꾸고 필요한대로 환경 변수를 조정하십시오. 다음 명령으로 :
docker-compose up -d <host-port> 선택한 포트로 변경해야합니다. 웹 서버는 SSL/TLS를 통해 고정되지 않으며이 컨테이너 앞에 리버스 프록시를 넣는 것이 귀하의 책임입니다. 이미지를 처음 실행하면 ENV SETUP_WHITELIST_DISCORD_ID 에서 자신의 discord-id를 설정하여 로그인하고 편집 할 수 있습니다. 컨테이너가 한 번 설정되면 설정에서 ENV 변수를 제거 할 수 있습니다.
우리는 MongoDB를 데이터베이스 서버로 사용합니다. 자신의 몽고 설정으로 HA 서비스 또는 예를 들어 간단한 단일 도커 컨테이너를 배포 할 수 있습니다.
참고 : 데이터베이스가 비어 있기 시작하면 데이터를 직접 채워야합니다.
docker run -d
--name mongo
-v ./db:/data/db
mongo개발 또는 테스트 목적으로 데이터베이스의 현재 상태에 액세스,보기 및 편집하기 위해 Mongo-Express를 사용하는 것이 좋습니다. 공개적으로 액세스 할 수있게하려면 로그인 자격 증명 으로 보호하는 것을 잊지 마십시오 .
Mongo-Express Docker 컨테이너를 회전 시키려면 다음을 실행하십시오.
docker run -d
--name mongo-express
-p 8081:8081
mongo-express 제공하는 docker-compose 파일을 설정하는 방법에 대한 우리의 Docker-Compose 파일을 살펴볼 수도 있습니다.
성능을 높이려면 MongoDB의 Redis to Cache를 사용합니다. 캐시는 캐시 미스에서 자동 인구 화되고 있습니다.
실행하여 Docker로 새 인스턴스를 만들 수 있습니다.
docker run -d
--name redis
redis Redis DB는 이미 예제 docker-compose 파일에 포함되어 있습니다.
경고 : 우리는 어떤 종류의 공식 지원도 제공하지 않으며 모든 업데이트는 변경 사항을 깨뜨릴 수 있습니다. 업데이트하기 전에 백업을해야합니다
최신 버전의 컨테이너 이미지를 얻으려면 다음을 실행해야합니다.
docker pull ghcr.io/snaacky/theindex:latest그 후, 현재 실행중인 인스턴스를 중지하고 제거하고 다시 시작해야합니다.
다음은 .env 파일에서 설정 해야하는 기본값이있는 가능한 환경 변수 모음입니다.
| 매개 변수 | 기능 | 기본 |
|---|---|---|
NEXT_PUBLIC_SITE_NAME | 귀하의 사이트 이름 | "The Index" |
NEXT_PUBLIC_DOMAIN | 도메인 또는 IP, 후행 슬래시를 제거하십시오 | "https://theindex.moe" |
DATABASE_URL | MongoDB 문서를 살펴보십시오 | "mongodb://mongo:27017/index" |
CACHE_URL | Redis 캐시 데이터베이스의 연결 문자열 | "redis://redis:6379" |
CHROME_URL | WebSocket URL이 실행중인 Chrome 인스턴스 | "ws://chrome:3300" |
AUDIT_WEBHOOK | Audit-Log의 경우 WebHook-URL, 지원을 비활성화하려면 비워 두십시오 | "" |
AUTH_DISCORD_ID | discord oauth2 클라이언트 ID | "your_discord_oauth_client_id" |
AUTH_DISCORD_SECRET | Discord OAUTH2 클라이언트 비밀 | "your_discord_oauth_client_secret" |
DISCORD_BOT_TOKEN | 봇 자원에 액세스하는 데 필요합니다 | "your_discord_bot_token" |
SETUP_WHITELIST_DISCORD_ID | 신분증을받는 데 도움이 필요한 경우이 안내서를 확인하십시오. | "your_discord_id" |
다음과 같은 ENT 변수는 DEV 모드에 있고 DB를 디버깅 할 때만 필요합니다.
| 매개 변수 | 기능 | 기본 |
|---|---|---|
ME_CONFIG_BASICAUTH_USERNAME | Mongo-Express 사용자 이름 | "관리자" |
ME_CONFIG_BASICAUTH_PASSWORD | Mongo-Express 비밀번호 | "super_secret" |
Docker-Compose 파일이 Envs를 채우는 방법을 확인하려면 docker-compose config 사용하십시오.
시작하는 것은 그렇게 간단하지 않습니다. 컴퓨터에 Docker-Compose를 사용하여 최신 버전의 Docker를 설치해야합니다.
그래픽 git 클라이언트 (적극 권장)를 통해 레포를 클로닝하여 시작하거나 CLI를 통해 사용하십시오.
git clone https://github.com/snaacky/theindexexample.env 파일을 .env 로 복사하십시오.NEXT_PUBLIC_DOMAIN 및 NEXTAUTH_URL http://localhost:3000 으로 바꾸십시오NEXTAUTH_SECRET 에 사용하십시오. 생성기를 사용하거나 1Password를 사용하거나 직접 만들 수 있습니다.mongo , redis 및 chrome 대신 LocalHost를 사용하려면 DATABASE_URL , CACHE_URL 및 CHROME_URL 변경하십시오 : mongodb://mongo:27017 >은 mongodb://localhost:27017 입니다.https://discord.com/developers > 새 응용 프로그램 생성 -> 응용 프로그램 패널 내부의 Auth2 로 이동 -> CLIENT ID 와 CLIENT SECRET .env 파일로 복사하십시오.Auth2 의 Redirects 에서 Discord 로그인을 확인하는 데 필요한 다음 URL을 복사하여 붙여 넣습니다 http://localhost:3000/api/auth/callback/discord .SETUP_WHITELIST_DISCORD_ID 채우면 로그인 할 때 관리자 계정을 가질 수 있습니다.MEILI_MASTER_KEY 에 사용하십시오. 생성기를 사용하거나 1Password를 사용하거나 직접 만들 수 있습니다.docker-compose 파일의 이미지에 다음 포트를 추가하십시오.| 서비스 | 포트 맵핑 |
|---|---|
mongo | 27017:27017 |
redis | 6379:6379 |
meili | 7700:7700 |
chrome | 3300:3000 |
예를 들어, mongo 설정은 다음과 비슷해 보일 것입니다.
mongo :
image : mongo
container_name : index-db
restart : unless-stopped
ports :
- ' 27017:27017 '
volumes :
- ./db:/data/dbdocker-compose up -d mongo redis meili chrome mongo-express또는 인덱스 서비스를 주석하거나 제거하고 명령을 실행할 수도 있습니다.
docker-compose up -d프론트 엔드에서 코딩을 시작하려면 최신 버전의 node.js가 올바르게 설치되어 있는지 확인해야합니다. 필요한 모든 종속성을 설치하려면 한 번 실행됩니다.
bun install참고 : 우리는 의존성을 관리하기 위해 원사 대신 NPM을 고수하기로 결정했습니다.
이제 node_modules 라는 폴더가 있어야합니다. 여기에는 필요한 모든 종속성이 포함되어 있습니다. 우리는 React 웹 서비스의 프레임 워크로 Next.js를 사용합니다. 웹 서비스를 테스트하려면 백그라운드에서 DB 서버를 실행하고 다음을 통해 프론트 엔드를 시작해야합니다.
bun run dev컴파일 후 선택한 브라우저에서 http : // localhost : 3000을 열고 실행중인 웹 응용 프로그램을 볼 수 있습니다.
우리가 Next.js를 사용하면 Frontend는 핫 재 장전을 지원하므로 코드를 수정하고 브라우저에서 즉시 변경 사항을 볼 수있는 동안 페이지를 열어 두십시오.
기성품 도커 이미지를 만들려면 그냥 실행하십시오.
docker build . -t index 이제 실행할 수있는 코드의 배포 가능한 버전이 포함 된 태그 index 포함 된 로컬 이미지가 있습니다.
우리는 더 예쁘게 사용하여 모든 참가자의 일관된 코드 스타일을 보장합니다. 예를 들어 명령을 실행하면서 모든 것을 자동 형성 할 수 있습니다.
bunx prettier --write . 가능하면 ISR을 사용하여 CDN 또는 프록시로 캐싱을위한 공개적으로 액세스 할 수있는 모든 페이지를 사전 생성하면서 SWR이 자신의 API를 요청하는 새로운 데이터를 검증하고 가져 오는 경우가 있습니다.
엔드 포인트 /api 에 대한 모든 API 요청을 제공하며 해당 코드는 페이지 /API에서 볼 수 있습니다.
/api/auth nexuth.js에 예약되어 있습니다./api/edit/... 로그인 한 사용자와 일반적으로 (적어도) 편집기 권한이 필요하며 새 컨텐츠를 수정하거나 생성하기위한 것입니다. _id 키워드 _new 는 새 콘텐츠를 만들기 위해 예약되어 있습니다./api/delete/... 로그인 한 사용자와 일반적으로 (적어도) 편집기 권한이 필요하며 컨텐츠를 삭제하기위한 것입니다./api/[content]s 특정 컨텐츠의 모든 항목 목록을 가져 오기위한 공개 엔드 포인트입니다./api/[content]/... 특정 콘텐츠에 대한 정보를 가져 오기위한 공개 엔드 포인트입니다. 모든 페이지 요청은 기본 레이아웃이 적용되는 _app.ts를 통해 먼저 이동하고 페이지에 auth 속성이있는 경우 사용자가 주어진 페이지에 액세스 할 수 있는지 여부도 확인합니다. 유효한 인증 속성은 다음과 같습니다.
auth 자체는 null 또는 typeof auth === "undefined" , 제한 사항이 없습니다. 이것은 공개 페이지 인 것 같습니다.requireLogin 실제로 필요하지 않지만 논리 이유로 설정하십시오. 사용자는 로그인해야합니다.requireAdmin , 관리자 권한이있는 사용자만이 페이지에 액세스 할 수 있습니다.requireEditor , 편집자만이 페이지를 볼 수 있습니다. 풀 레퍼스트는 항상 환영하지만 인덱스에 대한 우리의 아이디어와 일치해야하므로 항상 병합되지는 않을 수 있습니다. 특정 기능을 원하거나 아이디어가 있으면 항상 문제의 기능 요청을 열거 나 #index 의 불일치에 대해보고 할 수 있습니다. 그것이 나쁘지 않다면, 우리의 아이디어와 일치 할 때, 우리는 시간을 찾을 수 있습니다. 우리는 확실히 귀하의 요청 된 기능 (언젠가 ...)을 구현할 것입니다.
그리고 가장 중요한 것은 :
우리의 멋진 커뮤니티의 도움 : 3
Editor -뷰func(_id, dataObject) 형식으로 삽입하고 업데이트를 통합하고 필요에 따라 업데이트하면 GraphQL이 좋을 것입니다 ...add 로 이동하여 전체 배열을 업데이트 목록으로 보내지 않고 API를 remove .-> GraphQL?
