Cara Jalankan NextJS di Aplikasi Kontainer

back4app containers adalah platform yang kuat untuk hosting aplikasi next js dengan kemampuannya untuk secara otomatis menerapkan aplikasi next js yang terdocker, anda dapat meluncurkan proyek anda dalam lingkungan yang dapat diskalakan dan fleksibel dengan mudah dalam panduan ini, kami akan memandu anda melalui proses mempersiapkan dan menerapkan aplikasi next js anda di back4app containers, mencakup segala hal mulai dari proyek sederhana hingga pengaturan yang lebih kompleks kami akan mulai dengan persiapan yang diperlukan, kemudian beralih ke dockerizing aplikasi, mengujinya secara lokal, mendorong proyek ke github, mengatur proyek di back4app containers, memantau penerapan, dan memecahkan masalah umum jika anda memiliki pertanyaan atau komentar, silakan bergabung dalam percakapan di saluran #containers di komunitas back4app di slack kapan saja anda juga dapat menghubungi kami di community\@back4app com kapan saja, jika anda ingin memeriksa contoh proyek next js yang berfungsi di back4app containers, kunjungi https //github com/templates back4app/containers nextjs sample https //github com/templates back4app/containers nextjs sample 1 persiapkan aplikasi next js anda a struktur proyek verifikasi bahwa aplikasi next js anda mengikuti struktur direktori yang benar, dengan semua file dan folder yang diperlukan, seperti pages , public , components , dan styles , diatur dengan tepat titik masuk utama untuk aplikasi anda haruslah pages/index js atau pages/index jsx file b ketergantungan periksa apakah semua ketergantungan yang diperlukan terdaftar di dalam package json file, termasuk versi yang benar pastikan anda telah menginstal semua ketergantungan menggunakan npm install atau yarn install untuk menghasilkan package lock json atau yarn lock file c proses build untuk proyek yang lebih kompleks yang melibatkan proses build, pastikan skrip dan konfigurasi build anda (misalnya, webpack, babel, atau next js) diatur dengan benar anda harus dapat menjalankan proses build secara lokal tanpa masalah d variabel lingkungan jika aplikasi anda bergantung pada variabel lingkungan, pastikan anda memiliki env file dengan variabel yang diperlukan didefinisikan saat melakukan deploy ke back4app containers, anda perlu mengonfigurasi variabel lingkungan ini di pengaturan deployment e pengaturan server (jika berlaku) jika aplikasi next js anda mencakup server kustom (misalnya, express), pastikan itu diatur dan dikonfigurasi dengan benar untuk melayani aplikasi next js anda uji server anda secara lokal untuk memastikan ia berfungsi seperti yang diharapkan f optimisasi aplikasi optimalkan aplikasi next js anda dengan meminimalkan ukuran bundle, menggunakan pemisahan kode, dan menerapkan praktik terbaik kinerja gunakan alat seperti lighthouse untuk mengaudit aplikasi anda dan mengatasi masalah kinerja atau aksesibilitas g kompatibilitas lintas browser uji aplikasi anda di berbagai browser dan perangkat untuk memastikan rendering dan fungsionalitas yang tepat setelah anda meninjau dan menyiapkan aplikasi next js anda dengan teliti, anda dapat melanjutkan ke langkah berikutnya, yaitu membuat sebuah dockerfile untuk proyek anda 2 dockerisasi dockerisasi aplikasi next js melibatkan pembuatan dockerfile di direktori root proyek anda dockerfile berisi instruksi untuk membangun gambar docker dari aplikasi anda, yang kemudian dapat diterapkan ke kontainer back4app berikut adalah penjelasan rinci tentang cara membuat dockerfile untuk aplikasi next js yang khas 1 buat file baru bernama dockerfile (tanpa ekstensi file) di direktori root aplikasi next js anda 2 tentukan gambar dasar mulailah dockerfile dengan menentukan gambar dasar menggunakan perintah from untuk aplikasi next js yang khas, gambar dasar harus berupa gambar node js, misalnya, node 14 atau node 16 from node 14 3 tetapkan direktori kerja gunakan perintah workdir untuk menetapkan direktori kerja untuk aplikasi anda di dalam kontainer docker di sinilah file aplikasi anda akan disimpan dan dieksekusi workdir /app 4 salin package json dan package lock json salin file package json dan package lock json dari mesin lokal anda ke kontainer docker menggunakan perintah copy file file ini diperlukan untuk menginstal dependensi aplikasi anda copy package json / 5 instal dependensi gunakan perintah run untuk menginstal dependensi aplikasi anda dari file package json ini biasanya dilakukan menggunakan npm ci, yang menginstal versi dependensi yang tepat yang ditentukan dalam file package lock json run npm ci 6 salin sisa file proyek gunakan perintah copy lagi untuk menyalin file dan folder yang tersisa dari mesin lokal anda ke dalam kontainer docker copy 7 bangun aplikasi next js tambahkan perintah run untuk membangun aplikasi next js anda menggunakan skrip build anda, biasanya npm run build ini menghasilkan versi siap produksi dari aplikasi next js anda di folder next run npm run build 8 konfigurasi server anda memerlukan server untuk melayani aplikasi next js yang telah anda bangun salah satu pilihan umum adalah server next js bawaan pertama, instal secara global di dalam kontainer docker menggunakan perintah run run npm install g next 9 expose port server gunakan perintah expose untuk menentukan port di mana server anda akan berjalan di dalam kontainer docker misalnya, anda dapat menggunakan port 3000 expose 3000 10 mulai server gunakan perintah cmd untuk menentukan perintah yang memulai server untuk melayani aplikasi next js yang telah anda bangun dengan server next js bawaan, anda dapat menentukan skrip mulai dan nomor port cmd \["next", "start", " p", "3000"] dockerfile lengkap untuk aplikasi next js yang khas harus terlihat seperti ini from node 14 workdir /app copy package json / run npm ci copy run npm run build run npm install g next expose 3000 cmd \["next", "start", " p", "3000"] contoh dockerfile lain yang dapat anda gunakan sebagai referensi contoh 1 menggunakan server nginx jika anda lebih suka menggunakan server nginx untuk menyajikan aplikasi next js anda, anda dapat membuat dockerfile multi tahap dalam hal ini, anda akan terlebih dahulu membangun aplikasi next js dan kemudian menyalin file yang dihasilkan ke server nginx \# stage 1 build the next js application from node 14 as builder workdir /app copy package json / run npm ci copy run npm run build \# stage 2 set up the nginx server from nginx\ stable alpine copy from=builder /app/ next /usr/share/nginx/html copy from=builder /app/public /usr/share/nginx/html/ next/static copy nginx conf /etc/nginx/conf d/default conf pastikan untuk membuat file nginx conf yang sesuai untuk mengonfigurasi server nginx dengan benar contoh 2 menggunakan server kustom jika anda memiliki server kustom yang disiapkan untuk aplikasi next js anda, anda dapat memodifikasi dockerfile sesuai kebutuhan berikut adalah contoh menggunakan file server js kustom from node 14 workdir /app copy package json / run npm ci copy run npm run build expose 3000 cmd \["node", "server js"] dalam contoh ini, server kustom dimulai dengan perintah node server js alih alih menggunakan server next js 3 membangun dan menjalankan kontainer docker setelah membuat dockerfile, anda dapat membangun gambar docker dan menjalankan kontainer darinya gunakan perintah berikut untuk membangun dan menjalankan kontainer docker build t your image name docker run p 3000 3000 your image name ganti "your image name" dengan nama untuk gambar docker anda setelah kontainer berjalan, anda dapat mengakses aplikasi next js anda di http //localhost 3000 http //localhost 3000 di browser web anda 4 uji proyek anda secara lokal sebelum menerapkan aplikasi next js anda di back4app containers, penting untuk mengujinya secara lokal menggunakan docker ini membantu memastikan bahwa aplikasi anda berjalan seperti yang diharapkan dan membantu anda mengidentifikasi serta memperbaiki masalah sebelum penerapan bangun gambar docker untuk aplikasi next js anda di terminal anda, navigasikan ke direktori root proyek anda dan jalankan perintah berikut, ganti your app name dengan nama aplikasi anda docker build t nama aplikasi anda jalankan kontainer docker secara lokal selanjutnya, jalankan perintah berikut untuk memulai kontainer docker secara lokal perintah ini memetakan port yang diekspos oleh kontainer (misalnya, 3000) ke port di mesin lokal anda (misalnya, 3000) docker run p 3000 3000 nama aplikasi anda uji aplikasi anda buka browser web dan navigasikan ke http //localhost 3000 http //localhost 3000 , untuk melihat aplikasi next js anda pastikan semuanya berfungsi seperti yang diharapkan jika anda mengalami masalah, selesaikan sebelum melanjutkan ke langkah berikutnya 5 push proyek anda ke github buat sebuah gitignore file di direktori root proyek anda untuk mengecualikan file yang tidak perlu atau sensitif dari repositori anda (misalnya, node modules , env , build , dll ) inisialisasi repositori git, commit file proyek anda, dan push ke repositori jarak jauh (misalnya, di github) git add git commit m "initial commit" git remote add origin \<your remote repo url> git push u origin master 6 deploy aplikasi anda di back4app containers setelah membuat akun back4app anda, anda dapat mengikuti langkah langkah yang terdaftar di dokumen 1 hubungkan repositori github anda dengan back4app https //www back4app com/docs containers/integrate with github 2 siapkan proyek anda untuk penyebaran https //www back4app com/docs containers/prepare your deployment secara ringkas, kontainer akan mengikuti instruksi yang terperinci di dockerfile anda dan mulai membuat aplikasi anda 7 monitor penyebaran dan tangani kemungkinan kesalahan perhatikan log penyebaran dan status di dasbor kontainer back4app tangani setiap kesalahan atau masalah yang muncul selama penyebaran dalam kasus proyek yang lebih kompleks, pastikan semua layanan yang diperlukan (seperti basis data atau api eksternal) dikonfigurasi dengan benar dan dapat diakses 8 memecahkan masalah umum kesalahan penyebaran umum saat menjalankan aplikasi next js di kontainer back4app tercantum di sini https //www back4app com/docs containers/troubleshooting kesalahan umum lainnya saat menyebarkan aplikasi next js adalah konfigurasi port yang salah aplikasi next js harus dikonfigurasi untuk berjalan di port tertentu saat disebarkan di kontainer back4app jika aplikasi masih tidak dapat diakses, periksa dockerfile untuk memastikan port yang benar diekspos (misalnya, expose 3000 untuk port 3000) ketergantungan yang tidak kompatibel atau hilang pastikan semua ketergantungan yang diperlukan terdaftar di file package json dan versi mereka kompatibel satu sama lain dan dengan kode aplikasi anda ketergantungan yang hilang atau tidak kompatibel dapat menyebabkan kesalahan saat runtime variabel lingkungan atau konfigurasi tidak valid periksa apakah aplikasi anda bergantung pada variabel lingkungan atau file konfigurasi tertentu, dan pastikan mereka diatur dengan benar di lingkungan kontainer back4app atur variabel lingkungan yang diperlukan di dockerfile anda menggunakan perintah env aplikasi macet atau pengecualian yang tidak ditangani pengecualian yang tidak ditangani atau kerusakan dalam kode aplikasi next js anda dapat menyebabkan kegagalan penyebaran atau perilaku yang tidak terduga periksa log aplikasi anda untuk pesan kesalahan, dan atasi masalah apa pun dalam kode anda periksa log kontainer dengan menjalankan docker logs your app name untuk melihat apakah ada kesalahan atau pengecualian yang terjadi gunakan alat seperti sentry untuk melacak dan memantau kesalahan dalam aplikasi anda konfigurasi rendering sisi server jika aplikasi next js anda menggunakan rendering sisi server (ssr), pastikan bahwa pengaturan ssr anda dikonfigurasi dengan benar di dockerfile anda dan bahwa itu memulai aplikasi anda menggunakan titik masuk yang tepat 9 skalakan aplikasi anda untuk proyek yang lebih kompleks yang memerlukan sumber daya tambahan atau penskalaan horizontal/vertikal, pertimbangkan untuk meningkatkan rencana kontainer back4app anda untuk menangani peningkatan lalu lintas dan beban 10 aplikasi contoh untuk proyek aplikasi next js contoh, anda dapat pergi ke https //github com/templates back4app/containers nextjs sample