របៀបបង្ហោះគេហទំព័រឋិតិវន្តដោយប្រើ Yandex.Cloud Object Storage

ហេហេ!

នៅក្នុងអត្ថបទនេះ ខ្ញុំនឹងប្រាប់អ្នកពីវិធីងាយស្រួល និងសាមញ្ញក្នុងការបង្ហោះគេហទំព័រឋិតិវន្តដោយប្រើបច្ចេកវិទ្យា Yandex ពោលគឺ វត្ថុផ្ទុក.

នៅទីបញ្ចប់ អ្នកនឹងមានគេហទំព័រដែលបង្ហោះតាមអ៊ីនធឺណិត ដែលអាចចូលប្រើបានតាមរយៈតំណភ្ជាប់ខាងក្រៅ។

អត្ថបទនេះនឹងមានប្រយោជន៍ប្រសិនបើអ្នក

• អ្នកអភិវឌ្ឍន៍ដំបូងដែលទើបតែរៀនកម្មវិធី។
• អ្នកអភិវឌ្ឍន៍ដែលបានបង្កើតផលប័ត្រ ហើយចង់ដាក់វានៅក្នុងដែនសាធារណៈ ដើម្បីបង្ហាញវាដល់មិត្តភ័ក្តិ និងនិយោជក។

អំពីខ្លួនខ្ញុំ

ថ្មីៗនេះ ខ្ញុំកំពុងបង្កើតសេវាកម្ម SaaS ដែលជាទីផ្សារមួយប្រភេទដែលមនុស្សស្វែងរកគ្រូបង្វឹកកីឡាសម្រាប់ការបណ្តុះបណ្តាលផ្ទាល់ខ្លួន។ បានប្រើជង់សេវាកម្មបណ្តាញ Amazon (តទៅនេះហៅថា AWS) ។ ប៉ុន្តែនៅពេលដែលខ្ញុំចូលទៅក្នុងគម្រោងកាន់តែស៊ីជម្រៅ នោះខ្ញុំកាន់តែយល់កាន់តែច្បាស់អំពីដំណើរការផ្សេងៗនៃការរៀបចំការចាប់ផ្តើមអាជីវកម្ម។

ខ្ញុំបានជួបប្រទះបញ្ហាដូចខាងក្រោមៈ

• AWS បានចំណាយប្រាក់យ៉ាងច្រើន។ ដោយបានធ្វើការអស់រយៈពេល 3 ឆ្នាំនៅក្នុងក្រុមហ៊ុនសហគ្រាស ខ្ញុំបានប្រើភាពរីករាយដូចជា Docker, Kubernetes, CI/CD, ការដាក់ពង្រាយពណ៌ខៀវបៃតង ហើយក្នុងនាមជាអ្នកសរសេរកម្មវិធីដែលមានបំណងចង់ចាប់ផ្តើម ខ្ញុំចង់អនុវត្តដូចគ្នា។ ជាលទ្ធផលខ្ញុំបានឈានដល់ការសន្និដ្ឋានថា AWS ប្រើប្រាស់ 300-400 ដុល្លារក្នុងមួយខែ។ Kubernetes ប្រែទៅជាថ្លៃបំផុតប្រហែល 100 ដុល្លារ ជាមួយនឹងប្រាក់ឈ្នួលអប្បបរមានៃចង្កោមមួយ និងថ្នាំងមួយ។
  PS មិនចាំបាច់ធ្វើវានៅពេលចាប់ផ្តើមទេ។
• បន្ទាប់មក ដោយគិតអំពីផ្នែកច្បាប់ ខ្ញុំបានរៀនអំពីច្បាប់ 152-FZ ដែលបាននិយាយអ្វីមួយដូចតទៅ៖ "ទិន្នន័យផ្ទាល់ខ្លួនរបស់ពលរដ្ឋនៃសហព័ន្ធរុស្ស៊ីត្រូវតែរក្សាទុកនៅលើទឹកដីនៃសហព័ន្ធរុស្ស៊ី"បើមិនដូច្នេះទេ ការផាកពិន័យ ដែលខ្ញុំមិនចង់បាន។ ខ្ញុំបានសម្រេចចិត្តដោះស្រាយបញ្ហាទាំងនេះ មុនពេលដែលវាមករកខ្ញុំពីខាងលើ :) ។

បានបំផុសគំនិត អត្ថបទ អំពីការផ្ទេរហេដ្ឋារចនាសម្ព័ន្ធពី Amazon Web Services ទៅ Yandex.Cloud ខ្ញុំបានសម្រេចចិត្តសិក្សាលើ Yandex stack ឱ្យកាន់តែលម្អិត។

សម្រាប់ខ្ញុំ លក្ខណៈសំខាន់ៗរបស់ Yandex.Cloud មានដូចខាងក្រោម៖

• ថោកជាង 2-3 ដង (យោងតាមអត្ថបទខាងលើ និងតារាងតម្លៃសាធារណៈ)
• ការរក្សាទុកទិន្នន័យផ្ទាល់ខ្លួនរបស់អ្នកប្រើប្រាស់នៅលើទឹកដីនៃសហព័ន្ធរុស្ស៊ីដែល Amazon ដ៏អស្ចារ្យមិនអាចសម្រេចបាន។

ខ្ញុំបានសិក្សាពីដៃគូប្រកួតប្រជែងផ្សេងទៀតនៃសេវាកម្មនេះ ប៉ុន្តែនៅពេលនោះ Yandex កំពុងឈ្នះ។

ខ្ញុំបានប្រាប់អ្នកអំពីខ្លួនខ្ញុំ ដូច្នេះយើងអាចចុះទៅរកស៊ីបាន។

ជំហានទី 0. រៀបចំគេហទំព័រ

ដំបូង​យើង​ត្រូវ​ការ​គេហទំព័រ​ដែល​យើង​ចង់​ដាក់​នៅ​លើ​អ៊ីនធឺណិត។ ដោយសារខ្ញុំជាអ្នកអភិវឌ្ឍន៍ Angular ខ្ញុំនឹងបង្កើតគំរូកម្មវិធី SPA ដ៏សាមញ្ញមួយដែលខ្ញុំនឹងបង្ហោះនៅលើអ៊ីនធឺណិត។

PS អ្នកណាយល់ Angular ឬដឹងអំពីឯកសាររបស់វា។ https://angular.io/guide/setup-local, ទៅ ជំហានទី 1.

តោះដំឡើង Angular-CLI ដើម្បីបង្កើតគេហទំព័រ SPA នៅក្នុង Angular៖

npm install -g @angular/cli

តោះបង្កើតកម្មវិធី Angular ដោយប្រើពាក្យបញ្ជាខាងក្រោម៖

ng new angular-habr-object-storage

បន្ទាប់មកចូលទៅកាន់ថតកម្មវិធី ហើយបើកដំណើរការវាដើម្បីពិនិត្យមើលមុខងាររបស់វា៖

cd angular-habr-object-storage
ng serve --open

កម្មវិធីត្រូវបានបង្កើតឡើង ប៉ុន្តែមិនទាន់រួចរាល់សម្រាប់ការបង្ហោះ។ ចូរយើងប្រមូលផ្តុំកម្មវិធីទៅជាការបង្កើតតូចមួយ (ផលិតកម្ម) ដើម្បីលុបអ្វីៗដែលមិនចាំបាច់ចេញ ហើយទុកតែឯកសារចាំបាច់ប៉ុណ្ណោះ។
នៅក្នុង Angular អ្នកអាចធ្វើវាដោយប្រើពាក្យបញ្ជាដូចខាងក្រោមៈ

ng build --prod

ជាលទ្ធផលនៃពាក្យបញ្ជានេះ ថតមួយបានលេចចេញជា root នៃកម្មវិធី dist ជាមួយគេហទំព័ររបស់យើង។

ការងារ។ ឥឡូវនេះសូមបន្តទៅការបង្ហោះ។

ជំហាន 1 ។

តោះទៅគេហទំព័រ https://console.cloud.yandex.ru/ ហើយចុចលើប៊ូតុង "ភ្ជាប់" ។

ចំណាំ:

• ដើម្បីប្រើសេវាកម្ម Yandex អ្នកប្រហែលជាត្រូវការសំបុត្រ Yandex (ប៉ុន្តែនេះមិនប្រាកដទេ)
• សម្រាប់មុខងារមួយចំនួន អ្នកនឹងត្រូវដាក់ប្រាក់ចូលទៅក្នុងគណនីរបស់អ្នកនៅក្នុងគណនីផ្ទាល់ខ្លួនរបស់អ្នក (យ៉ាងតិច 500 រូប្លិ) ។

បន្ទាប់ពីការចុះឈ្មោះជោគជ័យ និងការអនុញ្ញាត ពួកយើងស្ថិតនៅក្នុងគណនីផ្ទាល់ខ្លួនរបស់អ្នក។

បន្ទាប់នៅខាងឆ្វេងក្នុងម៉ឺនុយ អ្នកត្រូវស្វែងរកសេវាកម្ម "Object Storage" ដែលយើងនឹងប្រើសម្រាប់ការបង្ហោះគេហទំព័រ។

និយាយដោយសង្ខេប៖

• Object Storage គឺជាកន្លែងផ្ទុកឯកសារដែលត្រូវគ្នាជាមួយនឹងបច្ចេកវិទ្យា AWS S3 ស្រដៀងគ្នារបស់ Amazon ដែលមាន API ផ្ទាល់ខ្លួនសម្រាប់គ្រប់គ្រងការផ្ទុកពីកូដ ហើយដូចជា AWS S3 អាចត្រូវបានប្រើដើម្បីបង្ហោះគេហទំព័រឋិតិវន្ត។
• នៅក្នុង Object Storage យើងបង្កើត "buckets" (buckets) ដែលជាកន្លែងផ្ទុកដាច់ដោយឡែកសម្រាប់ឯកសាររបស់យើង។

តោះបង្កើតមួយក្នុងចំណោមពួកគេ។ ដើម្បីធ្វើដូចនេះនៅក្នុងកុងសូលសេវាកម្មចុចលើប៊ូតុង "បង្កើតធុង" ។

ទម្រង់បែបបទសម្រាប់បង្កើតធុងទឹកមានវាលខាងក្រោម ចូរយើងឆ្លងកាត់ពួកវា៖

• ឈ្មោះធុង។ សម្រាប់ភាពសាមញ្ញ ចូរយើងហៅគម្រោងដូចគ្នានឹង Angular - angular-habr-object-storage
• អតិបរមា។ ទំហំ។ យើងភ្នាល់ច្រើនតាមដែលគេហទំព័ររបស់យើងមានទម្ងន់ ដោយសារគេហទំព័រនេះមិនត្រូវបានរក្សាទុកដោយឥតគិតថ្លៃ ហើយសម្រាប់ជីហ្គាបៃដែលបានបែងចែកនីមួយៗ យើងនឹងបង់ប្រាក់មួយកាក់ស្អាតដល់ Yandex។
• ការចូលប្រើដើម្បីអានវត្ថុ។ យើងកំណត់វាទៅជា "សាធារណៈ" ដោយហេតុថាអ្នកប្រើប្រាស់ត្រូវតែទទួលឯកសារនីមួយៗនៃគេហទំព័រឋិតិវន្តរបស់យើង ដើម្បីឱ្យប្លង់អាចគូរបានត្រឹមត្រូវនៅលើវា ស្គ្រីបអាចដំណើរការបាន។ល។
• ចូលប្រើបញ្ជីវត្ថុ និងចូលប្រើការកំណត់អាន។ ទុកវាជា "មានកំណត់" ។ វាចាំបាច់ដើម្បីប្រើធុងផ្ទុកឯកសារខាងក្នុងសម្រាប់កម្មវិធី។
• ថ្នាក់ផ្ទុក។ ទុកវាជា "ស្តង់ដារ" ។ នេះមានន័យថាគេហទំព័ររបស់យើងនឹងត្រូវបានចូលមើលញឹកញាប់ ហើយដូច្នេះឯកសារដែលបង្កើតគេហទំព័រនឹងត្រូវបានទាញយកជាញឹកញាប់។ បូកធាតុប៉ះពាល់ដល់ដំណើរការ និងការទូទាត់ (បញ្ចូលតំណ)។

ចុច "បង្កើតធុងទឹក" ហើយធុងត្រូវបានបង្កើត។

ឥឡូវនេះយើងត្រូវផ្ទុកគេហទំព័ររបស់យើងទៅធុង។ មធ្យោបាយងាយស្រួលបំផុតគឺបើកថតឯកសារដែលនៅជិត dist គេហទំព័ររបស់យើង ហើយអូសវាដោយផ្ទាល់ទៅលើទំព័រដោយប្រើចំណុចទាញ។ វាងាយស្រួលជាងការចុចលើប៊ូតុង "ផ្ទុកវត្ថុ" ពីព្រោះក្នុងករណីនេះថតមិនត្រូវបានផ្ទេរទេហើយអ្នកនឹងត្រូវបង្កើតវាដោយដៃក្នុងលំដាប់ត្រឹមត្រូវ។

ដូច្នេះ គេហទំព័រ​ត្រូវ​បាន​ផ្ទុក​ទៅ​ក្នុង​កន្លែង​ផ្ទុក ដូច្នេះ​យើង​អាច​ផ្តល់​ឱ្យ​អ្នក​ប្រើ​នូវ​ឱកាស​ក្នុង​ការ​ចូល​ប្រើ​កន្លែង​ផ្ទុក​ជា​គេហទំព័រ។
ដើម្បីធ្វើដូចនេះនៅផ្នែកខាងឆ្វេងនៃម៉ឺនុយចុចលើផ្ទាំង "គេហទំព័រ" ។

នៅលើទំព័រសម្រាប់ការដំឡើងធុងជាគេហទំព័រ សូមជ្រើសរើសផ្ទាំង "បង្ហោះ" ។ នៅទីនេះយើងចង្អុលបង្ហាញទំព័រសំខាន់នៃគេហទំព័រជាធម្មតា index.html ។ ប្រសិនបើអ្នកមានកម្មវិធី SPA នោះប្រហែលជាកំហុសទាំងអស់ត្រូវបានដំណើរការនៅលើទំព័រមេផងដែរ ដូច្នេះយើងក៏នឹងបង្ហាញ index.html នៅលើទំព័រកំហុសផងដែរ។

យើងឃើញភ្លាមៗនូវតំណភ្ជាប់ណាមួយដែលគេហទំព័ររបស់យើងនឹងអាចចូលបានតាមរយៈ។ ចុចរក្សាទុក។

បន្ទាប់ពី 5 នាទី, ចុចលើតំណភ្ជាប់, យើងឃើញថាគេហទំព័ររបស់យើងឥឡូវនេះមានសម្រាប់អ្នករាល់គ្នា។

អរគុណអ្នកទាំងអស់គ្នាដែលបានអានដល់ចប់! នេះគឺជាអត្ថបទដំបូងរបស់ខ្ញុំ ខ្ញុំមានគម្រោងពិពណ៌នាបន្ថែមអំពីសេវាកម្ម Yandex ផ្សេងទៀត និងការរួមបញ្ចូលរបស់ពួកគេជាមួយនឹងបច្ចេកវិទ្យា frontend និង backend ។

សរសេរនៅក្នុងមតិយោបល់អំពីរបៀបដែលអ្នកចាប់អារម្មណ៍ដើម្បីស្វែងយល់អំពីសេវាកម្ម Yandex ផ្សេងទៀត ឬអំពីការប្រើប្រាស់ Angular ក្នុងការអភិវឌ្ឍន៍ទំនើប។

ប្រភព: www.habr.com