Cara Menjalankan Aplikasi Kontainer ReactJS

back4app containers adalah platform yang kuat untuk hosting aplikasi react dengan kemampuannya untuk secara otomatis menerapkan aplikasi react yang terdockerisasi, 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 react anda di back4app containers, mencakup segala sesuatu dari proyek sederhana hingga pengaturan yang lebih kompleks kami akan mulai dengan persiapan yang diperlukan, kemudian beralih ke mendockerisasi 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 https //back4appcommunity slack com/join/shared invite/zt mul3jkwn ny7e 6yliocomvujr3mfhq#/shared invite/email di slack untuk diskusi yang spesifik tentang react di back4app containers kapan saja anda juga dapat menghubungi kami di community\@back4app com kapan saja, jika anda ingin memeriksa contoh proyek react yang berfungsi di back4app containers, kunjungi https //github com/templates back4app/containers react sample 1 persiapkan aplikasi react anda a struktur proyek verifikasi bahwa aplikasi react anda mengikuti struktur direktori yang tepat, dengan semua file dan folder yang diperlukan, seperti src , public , components , dan assets , terorganisir dengan baik titik masuk utama untuk aplikasi anda haruslah file src/index js atau src/index jsx b ketergantungan periksa apakah semua ketergantungan yang diperlukan terdaftar dalam file package json , termasuk versi yang benar pastikan anda telah menginstal semua ketergantungan menggunakan npm install atau yarn install untuk menghasilkan file package lock json atau yarn lock c proses build untuk proyek yang lebih kompleks yang melibatkan proses build, pastikan skrip dan konfigurasi build anda (misalnya, webpack, babel, atau create react app) 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 file env dengan variabel yang diperlukan didefinisikan saat melakukan deploy ke back4app containers, anda perlu mengonfigurasi variabel lingkungan ini dalam pengaturan deployment e pengaturan server (jika berlaku) jika aplikasi react anda mencakup server kustom (misalnya, express), pastikan itu diatur dan dikonfigurasi dengan benar untuk melayani aplikasi react anda uji server anda secara lokal untuk memastikan ia berfungsi seperti yang diharapkan f optimisasi aplikasi optimalkan aplikasi react 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 mempersiapkan aplikasi react anda dengan seksama, anda dapat melanjutkan ke langkah berikutnya, yaitu membuat sebuah dockerfile untuk proyek anda 2 dockerisasi dockerisasi aplikasi react 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 react biasa 1 buat file baru bernama dockerfile (tanpa ekstensi file) di direktori root aplikasi react anda 2 tentukan gambar dasar mulailah dockerfile dengan menentukan gambar dasar menggunakan perintah from untuk aplikasi react 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 ini adalah tempat di mana file aplikasi anda akan disimpan dan dieksekusi workdir /app 3 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 / 4 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 5 salin sisa file proyek gunakan perintah copy lagi untuk menyalin file dan folder yang tersisa dari mesin lokal anda ke dalam kontainer docker copy 6 bangun aplikasi react tambahkan perintah run untuk membangun aplikasi react anda menggunakan skrip build anda, biasanya npm run build ini menghasilkan versi aplikasi react anda yang siap produksi di folder build run npm run build 7 konfigurasi server anda memerlukan server untuk menyajikan aplikasi react yang telah anda bangun salah satu pilihan umum adalah serve pertama, instal secara global di dalam kontainer docker menggunakan perintah run run npm install g serve 8 paparkan port server gunakan perintah expose untuk menentukan port di mana server anda akan berjalan di dalam kontainer docker misalnya, anda dapat menggunakan port 5000 expose 5000 9 mulai server gunakan perintah cmd untuk menentukan perintah yang memulai server untuk melayani aplikasi react yang telah anda bangun dengan serve, anda dapat menentukan flag s untuk aplikasi satu halaman dan folder build sebagai sumber cmd \["serve", " s", "build", " l", "5000"] dockerfile lengkap untuk aplikasi react biasa harus terlihat seperti ini from node 14 workdir /app copy package json / run npm ci copy run npm run build run npm install g serve expose 5000 cmd \["serve", " s", "build", " l", "5000"] contoh dockerfile lain yang dapat anda gunakan sebagai referensi contoh 1 aplikasi react dasar dockerfile ini untuk aplikasi react sederhana ini menginstal paket yang diperlukan dari file package json, menyalin file proyek, melayani aplikasi react menggunakan nginx yang mengekspos port 80 cmd menentukan perintah untuk memulai server nginx \# stage 1 build the react application from node 14 as build workdir /app copy package json / run npm install copy run npm run build \# stage 2 serve the react application using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html \# copy the default nginx conf provided by the docker image copy nginx/nginx conf /etc/nginx/conf d/default conf expose 80 cmd \["nginx", " g", "daemon off;"] contoh 2 aplikasi react dengan server kustom dockerfile ini untuk aplikasi react yang lebih kompleks yang menggunakan server kustom (misalnya, express) ini menginstal paket yang diperlukan dari file package json, menyalin file proyek, dan mengekspos port 8000 untuk server kustom cmd menentukan perintah untuk memulai server kustom \# base image from node 14 \# working directory workdir /app \# copy package json and package lock json and install dependencies copy package json / run npm ci \# copy the rest of the project files copy \# expose the server port expose 8000 \# command to start the server cmd \["npm", "run", "server"] 4 uji proyek anda secara lokal sebelum menerapkan aplikasi react 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 react anda di terminal anda, navigasikan ke direktori root proyek anda dan jalankan perintah berikut, mengganti your app name dengan nama aplikasi anda docker build t your app name 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 your app name uji aplikasi anda buka browser web dan navigasikan ke http //localhost 3000 http //localhost 3000 untuk melihat aplikasi react anda pastikan semuanya berfungsi seperti yang diharapkan jika anda menemui masalah, selesaikan sebelum melanjutkan ke langkah berikutnya 5 dorong 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, komit file proyek anda, dan dorong 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 deployment 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 deployment dan tangani kemungkinan kesalahan perhatikan log dan status deployment di dasbor back4app containers tangani setiap kesalahan atau masalah yang muncul selama deployment dalam kasus proyek yang lebih kompleks, pastikan semua layanan yang diperlukan (seperti basis data atau api eksternal) dikonfigurasi dengan benar dan dapat diakses 8 menyelesaikan masalah umum kesalahan penyebaran umum saat menjalankan aplikasi react di kontainer back4app tercantum di sini https //www back4app com/docs containers/troubleshooting kesalahan umum lainnya saat menyebarkan aplikasi react adalah menggunakan npm start alih alih npm run build npm start disarankan ketika anda memiliki skenario pengembangan tetapi untuk lingkungan produksi lebih tepat menggunakan npm run build juga, perintah pembangunan ini akan menghasilkan konsumsi memori yang lebih sedikit menyajikan file statis menggunakan nginx praktik baik lainnya adalah menyajikan file statis dengan server aplikasi seperti nginx konfigurasi port yang salah aplikasi react 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 5000 untuk port 5000) ketergantungan yang tidak kompatibel atau hilang pastikan semua ketergantungan yang diperlukan tercantum dalam file package json dan bahwa 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 yang 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 dalam dockerfile anda menggunakan perintah env aplikasi macet atau pengecualian yang tidak ditangani pengecualian yang tidak ditangani atau macet dalam kode aplikasi react 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 react 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 jika anda mengalami masalah lain saat menyebarkan aplikasi react anda di back4app containers, hubungi tim dukungan back4app di community\@back4app com 9 skala aplikasi anda untuk proyek yang lebih kompleks yang memerlukan sumber daya tambahan atau penskalaan horizontal/vertikal, pertimbangkan untuk meningkatkan rencana back4app containers anda untuk menangani peningkatan lalu lintas dan beban 10 aplikasi contoh untuk proyek aplikasi django contoh, anda dapat pergi ke https //github com/templates back4app/containers python flask sample