theindexダウンロードtheindexソースコードのダウンロード

theindex

ウェブサイトデータ

1.0.0

ダウンロード

theindex

TheIndexのフロントエンド、エディターパネル、およびAPI。

はじめる

最も簡単な方法は、Docker Composeを使用することです。 githubからdocker-compose.ymlとexample.envファイルをコピーする必要があります。 example.env .env変更して、必要な環境変数を調整します。次のコマンドで：

docker-compose up -d

<host-port>選択したポートに変更する必要があります。 WebサーバーはSSL/TLSを介して保護されていません。このコンテナの前に逆プロキシを置くのはあなたの責任です。画像を初めて実行したら、env SETUP_WHITELIST_DISCORD_IDに独自のDiscord-idを設定して、ログインと編集できるようにしてください。コンテナが一度セットアップされたら、セットアップからENV変数を削除できます。

データベース

MongoDBをデータベースサーバーとして使用します。独自のMongoセットアップをHAサービスとして、またはEGを介して単純な単一のDockerコンテナとして展開できます。

注：データベースは空に起動します。自分でデータを入力する必要があります。

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ファイルをセットアップする方法についても確認することもできます。

Cache-DB

パフォーマンスを向上させるために、Redisを使用してMongodbの結果をキャッシュします。キャッシュは、キャッシュミスにオートポップ抑制されています。

実行して、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 Docsをご覧ください	`"mongodb://mongo:27017/index"`
`CACHE_URL`	Redisキャッシュデータベースの接続文字列	`"redis://redis:6379"`
`CHROME_URL`	実行中のChromeインスタンスへのWebSocket URL	`"ws://chrome:3300"`
`AUDIT_WEBHOOK`	監査ログ用の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`	IDの取得を支援する必要がある場合は、このガイドをチェックしてください	`"your_discord_id"`

そして、次のENV変数は、あなたが開発モードであり、DBをデバッグしているときにのみ必要です

パラメーター	関数	デフォルト
`ME_CONFIG_BASICAUTH_USERNAME`	Mongo-Expressユーザー名	「管理者」
`ME_CONFIG_BASICAUTH_PASSWORD`	Mongo-Expressパスワード	「super_secret」

Docker-ComposeファイルがENVの充填方法を確認する場合は、 docker-compose config使用してください

コーディングを開始します

Webアプリの周りにセットアップ

始めることはそれほど簡単ではありません。 MachineにDocker-Composeを備えたDockerの最新バージョンをインストールする必要があります。
グラフィカルGitクライアントを介してレポをクローニングすることから始めます（強くお勧めします）か、CLIを使用してください

git clone https://github.com/snaacky/theindex

example.envファイルを.envにコピーします。

.envを埋める方法

NEXT_PUBLIC_DOMAINとNEXTAUTH_URL http://localhost:3000に置き換えます
少なくとも32文字のランダムな強い文字列を生成し、 NEXTAUTH_SECRETに使用します。 1Passwordなどの発電機を使用するか、自分で作成できます。
DATABASE_URL 、 CACHE_URL 、 CHROME_URLを変更してmongodb://localhost:27017 mongo 、 redis 、 chromeの代わりにローカルホストを使用しますmongodb://mongo:27017
https://discord.com/developers >新しいアプリケーションを作成する - >アプリケーションパネル内のAuth2に移動 - > CLIENT IDとCLIENT SECRETを.envファイルにコピーします。
Auth2のRedirectsで、不一致ログインhttp://localhost:3000/api/auth/callback/discordを確認するために必要な以下のURLをコピーして貼り付けます。
ログイン時に管理者アカウントを作成するために、 SETUP_WHITELIST_DISCORD_ID discord idに記入します。
少なくとも32文字の別のランダムな強い文字列を再び生成し、 MEILI_MASTER_KEYに使用します。 1Passwordなどの発電機を使用するか、自分で作成できます。
最後に、Mongo-Expressのパスワードを変更したい場合は、最後の2つの変数を使用して行うことができますが、通常はローカルで開発している間は誰もしません。

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/db

コマンドを実行して、必要なすべてのバックエンドプロセスを起動する

docker-compose up -d mongo redis meili chrome mongo-express

または、インデックスサービスにコメントまたは削除してコマンドを実行することもできます

docker-compose up -d

Webサービス

フロントエンドでコーディングを開始するには、node.jsの最新バージョンが正しくインストールされていることを確認する必要があります。必要な依存関係をすべてインストールするには、1回実行されます。

bun install

注：依存関係を管理するために、糸の代わりにNPMに固執することにしました。

これで、必要なすべての依存関係を含むnode_modulesというフォルダーが必要です。 next.jsは、React Webサービスのフレームワークとして使用します。 Webサービスをテストするには、バックグラウンドでDBサーバーを実行し、以下を介してフロントエンドを開始する必要があります。

bun run dev

コンパイル後、選択したブラウザでhttp：// localhost：3000を開き、実行中のWebアプリケーションをご覧ください。

next.jsを使用すると、フロントエンドはホットリロードをサポートしているため、コードを変更してブラウザでその場での変更を確認しながら、ページを開いたままにしておくことができます。

Docker画像

既製のDocker画像を作成するには、実行するだけです。

docker build . -t index

これで、実行できるコードの分散バージョンを含むタグindexを備えたローカル画像が表示されます。

オートフォーマッター

私たちは、すべての参加者にわたって一貫したコードスタイルを確保するために、きれいを使用します。たとえば、コマンドを実行している場合、すべてを自動形成することができます

bunx prettier --write .

Webアプリのデザイン

ISR/SSR

可能であれば、ISRを使用して、SWRが独自のAPIを要求することで新しいデータを検証およびフェッチしながら、CDNまたはプロキシによるキャッシュ用のすべての公開可能なページを事前に生成します。

API

すべてのAPI要求をエンドポイント/apiで提供します。対応するコードはページ /APIで表示できます。

/api/authはnextauth.js用に予約されています。
/api/edit/...ログインしたユーザーと通常（少なくとも）エディターの権利が必要であり、新しいコンテンツを変更または作成するためです。 _idキーワード_newは、新しいコンテンツの作成用に予約されています。
/api/delete/...ログインしたユーザーと通常（少なくとも）エディターの権利が必要であり、コンテンツを削除するためのものです。
/api/[content]s特定のコンテンツのすべてのアイテムのリストを取得するためのパブリックエンドポイントです。
/api/[content]/...特定のコンテンツに関する情報を取得するためのパブリックエンドポイントです。

ページの制限

すべてのページリクエストは、最初に_app.tsを使用する必要があります。_app.tsでは、基本的なレイアウトが適用され、ページにauthプロパティがある場合、ユーザーが指定されたページにアクセスできるかどうかも検証します。有効な認証属性は次のとおりです。

auth自体はnullまたはtypeof auth === "undefined"あり、制限はありません。これは公開ページのようです。
requireLoginありませんが、論理的な理由で設定します。ユーザーはログインする必要があります。
requireAdmin 、管理者権を持つユーザーのみがこのページにアクセスできます。
requireEditor 、編集者のみがこのページを表示できます。

貢献

プルレクエストは常に歓迎されますが、インデックスのアイデアと一致する必要があるため、常にマージされるとは限りません。特定の機能が必要な場合、またはアイデアが必要な場合は、問題の機能要求をいつでも開くか、 #indexの不一致に報告することができます。悪くない場合は、アイデアに合わせて、しばらくすることができるようになります。リクエストされた機能を確実に実装します（いつか...）。