Create-react-app, Docker və Nginx ilə işləmə müddəti dəyişənlərini tətbiq edin

React tətbiqinizi konfiqurasiya etməyin bir çox yolu var. On iki amil tətbiq metodologiyasına hörmət edən bir yanaşma istifadə edək. Bu o deməkdir ki, iş vaxtı yenidən bir konfiqurasiya məcbur edilir. Bu səbəbdən ətraf mühit üçün heç bir tikinti tələb olunmayacaqdır.

Nəyə nail olmaq istəyirik?

React tətbiqetməmizi bir dəfə yaradılan bir Docker konteyner kimi çalışdıra bilmək istəyirik. İş vaxtında konfiqurasiya edilərək hər yerdə işləyir. Çıxış, Reaktiv tətbiqetməmizə Ngnix Alpine ilə əldə etdiyimiz statik məzmun olaraq xidmət edəcək yüngül və güclü bir qab olmalıdır. Tətbiqimiz bu kimi Docker Compose sənədində konfiqurasiyaya icazə verməlidir:

Docker run əmrini istifadə edərkən React tətbiqetməmizi -e bayrağı (mühit dəyişən) ilə konfiqurasiya edə bilməliyik.

İlk baxışdan bu yanaşmanın ilkin quraşdırma üçün tələb olunan əlavə iş üçün az faydası olduğu görünür. Quraşdırma başa çatdıqdan sonra ətraf mühitə uyğun konfiqurasiya və yerləşdirmənin idarə olunması çox asandır. Dinamik mühitləri hədəf alan və ya orkestrasiya sistemlərindən istifadə edən hər kəs üçün bu yanaşma mütləq nəzərə alınmalıdır.

Problem Problem

Hər şeydən əvvəl brauzer mühitində heç bir mühit dəyişəninin olmadığı aydın olmalıdır. Bu günlərdə istifadə etdiyimiz hansı həll yolu olursa olsun, saxta abstraktdan başqa bir şey deyil.

Sonra sənədlərdən birbaşa gələn .env faylları və REACT_APP mühiti dəyişənləri barədə nə düşünürsünüz? Mənbə kodu daxilində belə Node.js.-də mühit dəyişənlərindən istifadə etdiyimiz kimi bunlar da process.env kimi istifadə olunur.

Əslində, obyekt prosesi brauzer mühitində mövcud deyil, lakin düyünə xasdır. Varsayılan olaraq, CRA server tərəfdən göstərmə etmir. Məzmun çatdırılması zamanı mühit dəyişkənləri daxil edilə bilməz (Next.js-də olduğu kimi). Transpilyasiya zamanı Webpack prosesi, process.env-in bütün hadisələrini müəyyən bir sətir dəyəri ilə əvəz edir. Bu o deməkdir ki, onu yalnız yaradılış zamanı konfiqurasiya etmək olar.

həll

Hələ də mühit dəyişkənlərini vurmaq mümkün olan xüsusi an, konteynerimizi işə saldığımızda baş verir. Sonra konteynerdən ətraf mühit dəyişənlərini oxuya bilərik. Onları Nginx vasitəsi ilə təqdim edilə bilən bir dosyaya yaza bilərik (bunun içərisində React tətbiqimiz də var). Bunu edəcəksən

Məqalənin sonunda GitHub deposuna bir keçid var.

Step Addım-addım təlimat

Bir tətbiq qurmaq və ona cavab vermək və məruz qalacaq ilk mühit dəyişənimizlə bir ENV faylı yaratmaq üçün sadə bir layihədən başlayaq.

Sonra .env faylını oxuyan və dosyaya yazılmış mühit dəyişənlərini çıxaran bir az bash skriptini yazırıq. Konteynerin içərisində bir mühit dəyişənini təyin etsəniz, dəyəri istifadə ediləcək, əks təqdirdə ENV sənədindəki standart dəyər istifadə ediləcəkdir. Ətraf dəyişkən dəyərlərini bir widgetın mülkiyyəti olaraq təyin edilmiş bir obyekt kimi saxlayan bir JavaScript faylı yaradılmışdır.

Bizə aşağıdakı sətri əlavə etməliyik İndex.html-də element əlavə edin, sonra baş skriptimiz tərəfindən yaradılan faylı idxal edəcəkdir.

Tətbiqdə ətraf mühit dəyişkənlərimizi göstərək:

. İnkişaf

İnkişaf zamanı Docker-dən istifadə etmək istəmiriksə, bash skriptini npm script runner-dən pack.json-i dəyişdirərək işlədə bilərik:

Və mövzu geliştiricisini çalıştırdığımızda nəticəni belə görməliyik:

ENV sənədindən standart API_URL dəyərindən istifadə edin

Ətraf mühit dəyişkənlərini yenidən qurmağın iki yolu var. Ya .env sənədindəki standart dəyəri dəyişdirin və ya iplik devcommandını ətraf mühit dəyişənləri ilə işləyərək standart dəyərlərin üzərinə yazın:

CLI-dən keçən API_URL dəyərinin istifadəsi

Nəhayət .gitignore-u redaktə edin ki, ətraf konfiqurasiyalarını mənbə kodundan xaric edək.

İnkişaf mühiti hazırdır! Yarım yoldayıq. CRA-nın inkişaf mühiti üçün standart olaraq təklif etdiyi ilə müqayisədə bu nöqtədə çox böyük bir fərq yaratmadıq. Bu yanaşmanın həqiqi potensialı istehsalatdadır.

istehsal

İndi minimal Nginx konfiqurasiyası yaradacağıq ki, istehsala hazır tətbiqə xidmət edəcək optimize bir görüntü yarada bilək.

Əsas konfiqurasiya faylı belə olmalıdır:

Şəbəkə keçişi zamanı resurslarımızı daha yüngülləşdirmək üçün GZIP sıxılmasını təmin etmək də faydalıdır:

İndi Nginx konfiqurasiyamız tamamlandıqdan sonra nəhayət Dockerfile və Docker Compose faylları yarada bilərik:

Əvvəlcə tətbiqimiz üçün optimallaşdırılmış istehsal quruluşu yaratmaq üçün node: alpine image istifadə edirik. Sonra nginx: alpine üzərində işləmə şəkli yaradırıq.

Konteynerimiz artıq hazırdır. Bütün adi işləri onunla edə bilərik. Bir konteyner yarada, içəridəki konfiqurasiyalarla işləyə və Dockerhub kimi xidmətlər tərəfindən təmin olunan bir deposuna köçürə bilərik.

Yuxarıdakı Docker run əmri aşağıdakı tətbiqi göstərməlidir:

Docker run əmri üçün mühit dəyişən bayrağı tərəfindən verilən API_URL-un istifadəsi

Nəhayət, Docker Compose sənədimizi yaradırıq. Tipik olaraq, mühitinizə görə fərqli Docker-Compose sənədlərinə sahib olacaqsınız və hansı faylın istifadə ediləcəyini seçmək üçün -f bayrağını istifadə edəcəksiniz.

Docker-Compose etdikdə nəticəni belə görməliyik:

Docker-compose mühit mülkiyyəti vasitəsilə verilən API_URL-un istifadəsi

Əla! İndi məqsədimizə çatdıq. Həm inkişaf, həm də istehsal mühitində tətbiqimizi çox rahat bir şəkildə yenidən qura bilərik. Nəhayət yalnız bir dəfə inşa edib hər yerə qaça bilərik!

Zorlandığınız və ya daha çox fikiriniz varsa, GitHub'daki mənbə koduna daxil olun.

Növbəti addımlar

Kabuk skriptinin hazırkı tətbiqi, ENV sənədindəki bütün dəyişənləri çıxarır. Çox vaxt hamısını ifşa etmək istəmirik. Prefikslərdən və ya bənzər bir texnikadan istifadə edərək məruz qalmaq istəmədiyiniz dəyişkənlərə filtrlər tətbiq edə bilərsiniz.

Alternativ həllər

Yuxarıda qeyd edildiyi kimi, yaradılış vaxtı konfiqurasiyası əksər istifadə hallarına uyğun olacaq. Ətraf mühitə .env fayllarını istifadə edərək və hər mühit üçün bir konteyner yaradaraq, CRA Webpack-in təmin etdiyi mühit dəyişənləri vasitəsilə dəyərlər əlavə edərək standart yanaşmaya etibar edə bilərsiniz.

Bu məsələni əhatə edən bu CRA GitHub deposuna da nəzər yetirə bilərsiniz. İndiyə qədər bu mövzunu əhatə edən daha çox yazı və mövzu olmalıdır. Hər biri yuxarıdakı kimi oxşar bir həll təklif edir. Müəyyən detalların necə tətbiq olunacağına qərar vermək sizin özünüzdədir. Tətbiqinizi idarə etmək üçün Node.js istifadə edə bilərsiniz. Bu da shell skriptini Node.js skripti ilə əvəz edə biləcəyiniz deməkdir. Qeyd edək ki, Nginx statik məzmuna xidmət göstərmək üçün daha əlverişlidir.

Hər hansı bir sualınız varsa və ya rəy bildirmək istəyirsinizsə; GitHub-da bir nəşr açmaqdan çəkinməyin. İstəyə görə veb texnologiyaları ilə əlaqəli digər yazılar üçün məni izləyə bilərsiniz.