Panel Frontend, Editor, dan API dari Theindex.
Cara termudah adalah dengan memulai adalah dengan menggunakan Docker Compose. Anda perlu menyalin file docker-compose.yml dan example.env dari GitHub. Ganti nama example.env ke .env dan sesuaikan variabel lingkungan yang Anda butuhkan. dengan perintah berikut:
docker-compose up -d Anda harus mengubah <host-port> ke port pilihan Anda. Server web tidak diamankan melalui SSL/TLS, adalah tanggung jawab Anda untuk menempatkan proxy terbalik di depan wadah ini. Saat Anda menjalankan gambar untuk pertama kalinya, jangan lupa untuk mengatur discord-id Anda sendiri di env SETUP_WHITELIST_DISCORD_ID untuk dapat masuk dan mengedit. Setelah wadah Anda diatur sendiri sekali, Anda dapat menghapus variabel Env dari pengaturan Anda.
Kami menggunakan MongoDB sebagai server database kami. Anda dapat menggunakan pengaturan Mongo Anda sendiri sebagai layanan HA atau hanya wadah Docker tunggal sederhana melalui misalnya:
Catatan: Basis data akan mulai kosong, Anda harus mengisi data sendiri.
docker run -d
--name mongo
-v ./db:/data/db
mongoUntuk tujuan pengembangan atau pengujian, sangat disarankan untuk menggunakan Mongo-Express untuk mengakses, melihat dan mengedit keadaan saat ini dari database. Jika Anda membuatnya dapat diakses secara publik, jangan lupa untuk mengamankannya dengan kredensial login .
Untuk sekadar memutar wadah Docker Mongo-Express, jalankan:
docker run -d
--name mongo-express
-p 8081:8081
mongo-express Anda juga dapat melihat file docker-compose kami yang disediakan tentang cara mengaturnya.
Untuk meningkatkan kinerja, kami menggunakan Redis untuk cache hasil dari MongoDB. Cache sedang autopopulasi pada cache-miss.
Anda dapat membuat instance baru dengan Docker dengan menjalankan:
docker run -d
--name redis
redis Redis DB sudah termasuk dalam contoh file docker-compose
Peringatan: Perlu diketahui, bahwa kami tidak menawarkan dukungan resmi apa pun dan setiap pembaruan mungkin dengan perubahan besar. Pastikan untuk membuat cadangan sebelum Anda memperbarui
Untuk mendapatkan versi terbaru dari gambar kontainer, Anda harus menjalankan:
docker pull ghcr.io/snaacky/theindex:latestSetelah itu, Anda harus berhenti dan menghapus instance Anda saat ini dan memulainya lagi.
Berikut adalah kumpulan variabel lingkungan yang mungkin dengan nilai default yang harus Anda atur dalam file .env Anda:
| Parameter | Fungsi | Bawaan |
|---|---|---|
NEXT_PUBLIC_SITE_NAME | Nama situs Anda | "The Index" |
NEXT_PUBLIC_DOMAIN | Domain atau IP Anda, hapus trailing slash | "https://theindex.moe" |
DATABASE_URL | Lihatlah dokumen MongoDB | "mongodb://mongo:27017/index" |
CACHE_URL | String koneksi untuk database Redis Cache | "redis://redis:6379" |
CHROME_URL | WebSocket URL ke instance Chrome yang berjalan | "ws://chrome:3300" |
AUDIT_WEBHOOK | WebHook-URL untuk Audit-Log, tinggalkan kosong untuk menonaktifkan dukungan | "" |
AUTH_DISCORD_ID | Perselisihan ID Klien OAuth2 | "your_discord_oauth_client_id" |
AUTH_DISCORD_SECRET | Perselisihan OAuth2 Klien Rahasia | "your_discord_oauth_client_secret" |
DISCORD_BOT_TOKEN | Diperlukan untuk mengakses sumber daya bot | "your_discord_bot_token" |
SETUP_WHITELIST_DISCORD_ID | Jika Anda memerlukan bantuan untuk mendapatkan ID Anda, lihat panduan ini | "your_discord_id" |
Dan variabel env berikut hanya diperlukan saat Anda berada dalam mode dev dan men -debug DB
| Parameter | Fungsi | Bawaan |
|---|---|---|
ME_CONFIG_BASICAUTH_USERNAME | Nama pengguna Mongo-Express | "Admin" |
ME_CONFIG_BASICAUTH_PASSWORD | Kata sandi Mongo-Express | "Super_Secret" |
Jika Anda ingin memverifikasi bagaimana file compose Docker mengisi Envs di, gunakan docker-compose config
Memulai bukanlah hal yang lurus ke depan. Anda harus menginstal Docker versi terbaru dengan komposisi Docker di mesin Anda.
Mulailah dengan mengkloning repo melalui klien git grafis (sangat disarankan) atau gunakan CLI via
git clone https://github.com/snaacky/theindexexample.env ke .env .NEXT_PUBLIC_DOMAIN dan NEXTAUTH_URL dengan http://localhost:3000NEXTAUTH_SECRET . Anda dapat menggunakan generator misalnya 1Password atau membuatnya sendiri.DATABASE_URL , CACHE_URL dan CHROME_URL untuk menggunakan localhost bukan mongo , redis dan chrome misalnya: mongodb://mongo:27017 -> menjadi mongodb://localhost:27017https://discord.com/developers -> Buat aplikasi baru -> masuk ke Auth2 di dalam panel aplikasi Anda -> Salin CLIENT ID dan CLIENT SECRET ke dalam file .env .Redirects dalam salinan Auth2 dan tempel url berikut yang diperlukan untuk memverifikasi login perselisihan Anda http://localhost:3000/api/auth/callback/discord .SETUP_WHITELIST_DISCORD_ID dengan ID perselisihan Anda untuk memiliki akun admin saat Anda login.MEILI_MASTER_KEY . Anda dapat menggunakan generator misalnya 1Password atau membuatnya sendiri.docker-compose :| melayani | Pemetaan Port |
|---|---|
mongo | 27017:27017 |
redis | 6379:6379 |
meili | 7700:7700 |
chrome | 3300:3000 |
Sebagai contoh, pengaturan untuk mongo harus terlihat mirip dengan ini:
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-expressAtau Anda juga dapat berkomentar atau menghapus layanan indeks dan menjalankan perintah
docker-compose up -dUntuk mulai mengkode di frontend, Anda harus memastikan, Anda memiliki versi terbaru dari Node.js yang diinstal dengan benar. Untuk menginstal semua dependensi yang diperlukan dijalankan sekali:
bun installCatatan: Kami memutuskan untuk tetap menggunakan NPM alih -alih benang untuk mengelola dependensi.
Anda sekarang harus memiliki folder yang disebut node_modules , yang berisi semua dependensi yang kita butuhkan. Kami menggunakan Next.js sebagai kerangka kerja untuk layanan web React kami. Untuk menguji layanan web, Anda harus menjalankan server DB di latar belakang dan memulai frontend melalui:
bun run devSetelah menyusun Anda dapat membuka http: // localhost: 3000 di browser pilihan Anda dan melihat aplikasi web yang sedang berjalan.
Saat kami menggunakan Next.js, Frontend mendukung pemuatan ulang panas, sehingga Anda dapat membiarkan halaman terbuka, saat Anda memodifikasi kode dan melihat perubahan pada terbang di browser Anda.
Untuk membuat gambar Docker yang sudah jadi, jalankan saja:
docker build . -t index Anda sekarang memiliki gambar lokal dengan index tag yang berisi versi kode yang dapat didistribusikan yang sekarang dapat dijalankan.
Kami menggunakan lebih cantik untuk memastikan gaya kode yang konsisten di semua peserta. Anda dapat memformat semuanya secara otomatis dengan misalnya menjalankan perintah
bunx prettier --write . Jika memungkinkan, kami menggunakan ISR untuk membuat pra menghasilkan semua halaman yang dapat diakses secara publik untuk caching oleh CDN atau proxy sambil memvalidasi dan mengambil data baru dengan SWR yang meminta API kami sendiri.
Kami melayani setiap permintaan API atas titik akhir /api , kode yang sesuai dapat dilihat di halaman /API.
/api/auth dicadangkan untuk NextAuth.js./api/edit/... membutuhkan pengguna yang masuk dan biasanya (setidaknya) hak editor dan untuk memodifikasi atau membuat konten baru. Kata kunci _id _new dicadangkan untuk membuat konten baru./api/delete/... membutuhkan pengguna yang masuk dan biasanya (setidaknya) hak editor dan untuk menghapus konten./api/[content]s adalah titik akhir publik untuk mengambil daftar semua item dari konten tertentu./api/[content]/... adalah titik akhir publik untuk mengambil informasi tentang konten tertentu. Setiap permintaan halaman pertama harus melalui _App.ts, di mana tata letak dasar diterapkan dan jika halaman memiliki properti auth , itu juga memvalidasi apakah pengguna dapat mengakses halaman yang diberikan. Atribut auth yang valid adalah:
auth itu sendiri adalah null atau typeof auth === "undefined" , tidak ada batasan. Ini tampaknya menjadi halaman publik.requireLogin , tidak benar -benar dibutuhkan, tetapi atur untuk alasan logika. Pengguna harus masuk.requireAdmin , hanya pengguna dengan hak admin yang dapat mengakses halaman ini.requireEditor , hanya editor yang dapat melihat halaman ini. Pull-Requests selalu diterima, tetapi mungkin tidak selalu digabungkan karena harus selaras dengan ide kami tentang indeks. Jika Anda menginginkan fitur tertentu atau memiliki ide, Anda selalu dapat membuka permintaan fitur dalam masalah atau melaporkannya pada perselisihan kami di #index untuk dibahas. Jika tidak buruk, selaras dengan ide -ide kami, dan kami menemukan waktu, kami pasti akan menerapkan fitur yang Anda minta (kadang -kadang ...).
Dan yang paling penting:
Bantuan komunitas kami yang luar biasa: 3
Editor -Viewsfunc(_id, dataObject) dan perbarui hanya sesuai kebutuhan, graphql akan menyenangkan ...add , remove API daripada harus mengirim seluruh array untuk memperbarui daftar -> GraphQL?