15 dəqiqə ərzində AWS-də bir Reakt veb saytını necə yaratmaq olar

Bu təlimat AWS S3-də yerləşdirilən və React ilə qurulmuş sadə bir fərdi və ya peşəkar veb sayt yaratmağa kömək edə bilər. React, istifadəçi interfeysi yaratmaq üçün bir Javascript kitabxanasıdır. Hələ də veb dizaynı və digər texnologiyalardan necə istifadə edəcəyinizi öyrəndiyinizi və öz canlı veb saytınızla qurmaq və qarışdırmaq üçün ucuz bir yol istədiyinizi deyək. Bunun ən yaxşı yolu veb səhifəni AWS S3-də yerləşdirməkdir, çünki 12 ay ərzində pulsuz istifadə olunur - 5 GB Amazon S3 standart yaddaş, 20.000 sorğu almaq və 2.000 sorğu. Bu o deməkdir ki, veb saytınıza ciddi trafik gətirmək üçün ayda bir dollardan az pul ödəməlisiniz.

Adım 1: Yerli olaraq bir cavab tətbiqi yaradın

Cavab tətbiqi yaratmaq üçün əvvəlcə node və npm quraşdırmalısınız. Hər ikisini də qurmaq üçün:

Bir Mac istifadə edirsinizsə və Homebrew quraşdırılmışsa, Brew quraşdırma nodunu çalıştırın. Mac OS üçün daha çox seçim: https://nodejs.org/en/download/package-manager/#macos Windows: https://nodejs.org / az / download / paket meneceri / # windows Yükləmələr: https://nodejs.org

Quraşdırma başa çatdıqdan sonra aşağıdakıları tətbiq edərək yeni bir tətbiq yarada bilərsiniz:

npx reaksiya-tətbiqetmə tətbiqim cd my-app npm start

Bu iş bitən kimi brauzeriniz localhost: 3000 ünvanına açılacaqdır. Reaksiya tətbiq kodunuzda etdiyiniz dəyişiklik dərhal brauzerdə görünəcəkdir.

Adım 2: Yerləşdirmə üçün yerli veb sayt yaradın

Veb saytınızın yerli versiyasında dəyişiklik etdikdən sonra reaktiv tətbiqlər qovluğundan aşağıdakı əmri işə salmaqla istehsal üçün edə bilərsiniz:

npm run build

Bu, bütün aktivləri ixrac edəcək və React-i düzgün şəkildə birləşdirərək və tətbiqi optimal performans üçün optimallaşdıraraq vahid bir azaldılmış Javascript faylı yaradacaqdır. Bu əmr yerinə yetirildikdən sonra, veb saytınızdakı bütün aktivlər yığma qovluğunda olacaqdır. İndi veb saytınız AWS-də yerləşdirilməyə hazırdır.

Addım 3: AWS Hesabı Yaradın

Bir Amazon hesabınız varsa, bu addımı atlaya bilərsiniz. Aws.amazon.com saytına gedin və yeni bir hesab yaradın. Xahiş edirik unutmayın ki, AWS hesabı yaratmaq üçün fakturaları təmizləmək, ödəmələr etmək və saxtakar istifadədən çəkinmək üçün kredit kartı məlumatları lazımdır.

Addım 4: S3 Kovası yaradın

AWS hesabınıza daxil olun. AWS konsolunuzdan S3 açın. "Kova Yarat" düyməsini vurun.

Veb saytınız üçün bir domen adı istifadə etməyi planlaşdırırsınızsa, eyni adda vedrə yaradın. Veb saytınızın domeni adınız abc.com varsa, S3 bucket adınız da abc.com olmalıdır.

Bir vedrə adını daxil edin və Yarat düyməsini basın.

Adım 5: S3-də statik veb barındırma konfiqurasiya edin

S3 Bucket Xüsusiyyətlərinə gedin və Statik Veb Hostinqini aktivləşdirin. "Veb sayt yerləşdirmək üçün bu vedrədən istifadə edin" seçin. İndeks sənədi və səhv sənədi olaraq "index.html" daxil edin.

Son nöqtənizi qeyd edin. Bu veb saytınıza daxil ola biləcəyiniz URL. İşi bitirdikdən sonra Saxla düyməsini basın.

Addım 6: S3 Bucket Oxu İcazələrini Public olaraq təyin edin

İnternetdəki hər kəsin veb saytınıza girmə ehtiyacı olduğundan S3 vedrə oxuma girişi ümumi olmalıdır. Bunu etmək üçün İcazələr bölməsini açın və səltənət adınızla əvəz etdikdən sonra aşağıdakı qaydaları yapışdırın.

{"Versiya": "2012-10-17", "Bəyanat": [{"Sid": "PublicReadGetObject", "Effect": "Allow", "Director": "*", "Action": "s3: GetObject "," Resource ":" arn: aws: s3 ::: / * "}]}

Adım 7: Veb saytının məzmununu S3-ə yükləyin

İndi yığma qovluğunuzun məzmununu S3 vedrənizə yükləməlisiniz.

S3 kovanınızı açın və "Yüklə" düyməsini basın. Qurma qovluğunuzun içindəkiləri yükləmə pəncərəsinə sürükləyin. Yarım qovluğunuzun alt qovluqları və faylları daxil olmaqla bütün məzmununun orada olduğunu yoxlayın. Bunu təsdiqlədikdən sonra "Yüklə" düyməsini vurun.

Bu belədir. Veb saytınız canlıdır. Adım 5-də qeyd etdiyiniz son nöqtədən istifadə edərək əldə edə bilərsiniz.

Adım 8: (İstəyə bağlı) S3-də sürətli bir yerləşdirmə qurun

Veb saytınızda hər dəfə yerli olaraq dəyişiklik etdiyiniz zaman dəyişikliklərinizi canlı veb saytına keçirtmək üçün qurma qovluğunuzun məzmununu S3-ə əl ilə yükləməlisiniz. Bunun qarşısını almaq üçün AWS CLI-ni quraşdırıb AWS etimadnamənizlə konfiqurasiya edə bilərsiniz. Daha sonra aşağıdakı əmrdən istifadə edərək qurma qovluğunuzun məzmununu yükləyə bilərsiniz.

aws s3 cp build / s3: // - təkrarlanan

Bunu daha da asanlaşdırmaq üçün bu əmri, reaksiya tətbiq qovluğunda tapa biləcəyiniz pack.json faylının skriptlər hissəsinə əlavə edə bilərsiniz.

"Scripts": {"start": "Reaksiya skriptlərini başlat", "build": "React skriptlərini qurun", "predeploy": "React skriptlərini yaradın", "deploy": "aws cp build s3: // --recursive "," test ":" React-Scripts-Test --env = jsdom "," Eject ":" React-Scripts Eject "}

İndi build qovluğunuzun məzmununu S3-ə yerləşdirmək üçün npm run deploy çalıştırabilirsiniz.

Təcrübəmə görə, sadə bir veb sayt üçün AWS istifadə etmək, hər hansı digər yerləşdirilmiş həll yolundan daha ucuzdur. AWS Lambda və digər AWS təkliflərindən istifadə etmək üçün müraciətinizi uzada bilərsiniz. Hackinglə əylənin!