AWS تضخيم وزاوي - كيف؟

كيفية تكوين وتهيئة واستخدام AWS Amplify وسلسلة الأدوات الجديدة المستندة إلى CLI و Javascript SDK من AWS لإدارة واستخدام خدمات AWS.

في هذا المنشور ، سنقوم بإنشاء تطبيق Angular أساسي وتمكينه من المصادقة مع AWS Cognito باستخدام AWS Amplify لإنشاء موارد AWS وتكوينه في Amplify frontend SDK.

تعمل AWS Amplify حاليًا مع الفئة التالية من خدمات AWS:

ملاحظة: تم تعديل AWS Amplify بحيث يمكنك فقط استيراد الوحدة التي تحتاج إليها (ولكن بالنسبة إلى الزاوية> 6 كانت هناك مشكلات ، لذلك كان علي استخدام الحزم بدون "@" أمامها ، وقد وصفت ذلك لاحقًا في هذا المنشور)) يتم سرد اسم الوحدة النمطية وحزم npm جنبًا إلى جنب مع الفئات المختلفة أدناه.

  1. الحزمة الأساسية - npm (@ aws-amplify / core): أنت بحاجة إلى هذه الحزمة الأساسية لتكوين Amplify لاستخدام أي مما يلي.
  2. Analytics - حزمة npm (@ aws-amplify / analytics)
  3. API - حزمة npm (@ aws-amplify / api)
  4. المصادقة (AWS Cognito) - حزمة npm (@ aws-amplify / auth): هذا المنشور هو كل شيء عن استخدام هذا في التطبيق الزاوي الخاص بك
  5. التفاعلات
  6. PubSub - حزمة npm (@ aws-amplify / pubsub)
  7. دفع الإخطارات
  8. التخزين - حزمة npm (@ aws- تضخيم / تخزين)
  9. XR

في هذا المنشور ، سنستمر في تضخيم عملية إنشاء واستخدام aws لتمكين المصادقة المستندة إلى AWS Cognito في تطبيق Angular.

متطلب سابق - إعداد تضخيم التكوين وبدء تطبيق الزاوي الجديد:

بعض الخطوات الأولية قبل البدء في هذا:

  1. تأكد من أن لديك حساب AWS وأنك على دراية بأساسيات AWS و Angular وأنظمتها ومصطلحاتها البيئية.
  2. تأكد من تهيئة AWS CLI على نظامك من خلال إعداد AWS Profile الخاص بحساب AWS الذي ستستخدمه في كيفية.

تثبيت AWS تضخيم CLI وإنشاء تطبيق الزاوي جديد:

  1. تثبيت @ aws- تضخيم / المبادرة القطرية
$ npm install -g @ aws-amplify / cli

2. تأكد من تثبيت AWS تضخيم CLI

تضخيم $

3. تثبيت وتأكد من أن لديك أحدث Angular CLI مثبتة

تثبيت npm $ - حفظ @ الزاوي / CLI
إصدار $ نانوغرام

4. قم بإنشاء تطبيق زاوي جديد (أقوم بتسمية تطبيق الزاوي الخاص بي "angular-amplify" ، لمتابعة فقط اختر نفس الشيء)

$ نانوغرام جديد الزاوي تضخيم

5. انتقل إلى دليل التطبيق الزاوي الذي تم إنشاؤه حديثًا وتثبيت الحزمة وتشغيله للتأكد من أن التطبيق المبدئي يعمل

القرص المضغوط الزاوي التضخيم
تثبيت $ npm
$ npm البداية

6. قم بتثبيت حزم npm إضافية لتطبيقك الزاوي / الواجهة الأمامية المرتبطة بـ AWS Amplify

  • aws-amplify - حزمة npm أدناه تحتاجها ، وإلا فسوف تحصل على خطأ
  • aws-amplify-angular - تضخيم المكونات الزاوية
  • @ aws-amplify / ui - UI - غير مدرج في وثائق Amplify ويحتاج المرء إلى تثبيته ليضيف UI نمط css تحت عنوان AWS. مجرد تثبيت هذه الحزمة لن تعمل. يتعين على المرء أيضًا استيراد السمة التالية وملف css في ملف styles.scss للمشروع الزاوي ، المفصل لاحقًا في هذا المنشور.
  • import "[email protected]/ui/src/Theme.css" ؛
  • import "[email protected]/ui/src/Angular.css" ؛
تثبيت npm $ - حفظ aws- تضخيم
تثبيت npm $ - حفظ aws- تضخيم الزاوي
تثبيت npm $ - حفظ @ aws- تضخيم / واجهة المستخدم

تهيئة تضخيم ملفات / مجلدات التكوين ذات الصلة:

ضمن الدليل الجذر لهذا المشروع ، أي / angulr-amplify ، قم بتشغيل الأمر التالي

تضخيم الحرف الأول

ثم اختر الخيارات التالية ، واحدة تلو الأخرى عند المطالبة:

أدناه يسرد خياري.

| => تضخيم الحرف الأول
ملاحظة: يوصى بتشغيل هذا الأمر من جذر دليل التطبيق الخاص بك
؟ اختر المحرر الافتراضي الخاص بك: Visual Studio Code
؟ اختر نوع التطبيق الذي تنشئ جافا سكريبت
من فضلك قل لنا عن المشروع الخاص بك
؟ ما إطار جافا سكريبت الذي تستخدمه الزاوي
؟ مسار دليل المصدر: src
؟ مسار دليل التوزيع: dist
؟ بناء القيادة: npm build
؟ بدء تشغيل الأمر: npm start
باستخدام موفر الافتراضي awscloudformation
لمزيد من المعلومات حول ملفات AWS ، انظر:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
؟ هل تريد استخدام ملف تعريف AWS؟ نعم
؟ يرجى اختيار ملف التعريف الذي تريد استخدامه الافتراضي
project تهيئة المشروع في السحابة ...

يجب أن يؤدي هذا إلى إنشاء المجموعة التالية من ملف التكوين والدلائل:

<أوس-آنج-تضخيم>
    | _amplify /
    | _ # الخلفية السحابية الحالية /
        | _ تضخيم meta.json
    | _. التكوين
        | _ aws-info.json
        | _ project-config.json
    | _ الخلفية /
        | _amplify-meta.json
    | _.amplifyrc

يتم توفير تفاصيل الملفات / الدليل أعلاه ، بالإضافة إلى ما يتم استخدامها بشكل كافٍ في هذا الرابط AWS تضخيم استخدام Javascript.

لفهم المصطلحات ، يجب أن يكون لديك فهم أساسي لـ AWS والمصطلحات المرتبطة بها وعروض الخدمات.

سيستخدم التطبيق الزاوي الذي نقوم بإنشائه خدمة AWS Auth أو AWS Cognito في الوقت الحالي ، لذلك ، دعونا نقوم بإنشاء قالب مكدس تشكيل السحابة لـ AWS Cognito.

$ تضخيم إضافة المصادقة

سيؤدي هذا إلى إنشاء دليل "auth / cognitoxxxxxxxx" داخل دليل تضخيم / الخلفية لجذر المشروع الخاص بك. يجب أن يحتوي هذا الدليل على برنامج نصي تم إنشاؤه حديثًا للتكوين السحابي وملف JSON للمعلمات.

الآن ، لنقم بإنشاء موارد AWS الفعلية ، باستخدام البرامج النصية لتشكيل السحابة المحلية التي تم إنشاؤها بواسطة تضخيم CLI. لإنشاء الموارد ، استخدم الأمر التالي.

تضخيم دفع دولار
| الفئة | اسم المورد | العملية | الموفر المساعد |
| -------- | --------------- | --------- | ----------------- |
| المصادقة | cognitoa67f309a | إنشاء | awscloudformation |
؟ هل أنت متأكد أنك تريد المتابعة؟ (Y / N)

أدخل "ص" أعلاه. بعد بضع دقائق ، سيتم إنشاء مورد AWS وإنشاء ملف تكوين "aws_exports.js" داخل المجلد / src.

سنستخدم ملف التكوين الذي تم إنشاؤه بمعلومات حول موارد AWS التي تم إنشاؤها حديثًا ، لتكوين AWS Amplify frontend SDK التالي في تطبيق Angular الخاص بنا.

الانتقال إلى التطبيق الزاوي الآن:

الآن قم بعمل نسخة من "aws-export.js" ضمن دليل "src" الذي تم إنشاؤه من الأعلى.

$ cp src / aws-export.js src / aws-export.ts

قم بإنشاء مكون باسم "المصادقة" باستخدام CLI الزاوي التالي

$ ng g c المصادقة
إنشاء src / app / auth / auth.component.scss (0 بايت)
CREATE src / app / auth / auth.component.html (23 بايت)
CREATE src / app / auth / auth.component.spec.ts (614 بايت)
CREATE src / app / auth / auth.component.ts (262 بايت)
UPDATE src / app / app.module.ts (467 بايت)

وبالمثل قم بإنشاء مكونات "منزلية" و "آمنة"

استخدم الأمر أدناه لإنشاء مكون "home".

$ ng g c المنزل
CREATE src / app / home / home.component.scss (0 بايت)
CREATE src / app / home / home.component.html (23 بايت)
CREATE src / app / home / home.component.spec.ts (614 بايت)
CREATE src / app / home / home.component.ts (262 بايت)
UPDATE src / app / app.module.ts (541 بايت)

استخدم الأمر أدناه لإنشاء مكون "آمن".

$ نانوغرام ج ج آمنة
CREATE src / app / secure / secure.component.scss (0 بايت)
CREATE src / app / secure / secure.component.html (25 بايت)
CREATE src / app / secure / secure.component.spec.ts (628 بايت)
CREATE src / app / secure / secure.component.ts (270 بايت)
UPDATE src / app / app.module.ts (623 بايت)

في هذه المرحلة ، تم إنشاء ملفات تهيئة AWS Amplify لدينا ، لدينا إعداد أساسي للتطبيق الزاوي مع المكونات: "auth" و "home" و "secure"

لدينا إعداد URL التطبيق لدينا التطبيق التجريبي الزاوي بسيط. لا شيء يتوهم هنا.

/ - سيتم تحميل المكون / الصفحة "الرئيسية" (الصفحة الافتراضية / الجذر)

/ المصادقة - سيتم تحميل مكون المصادقة / الصفحة

/ secure - إذا قمت بتسجيل الدخول ، ستقوم بتحميل المكون / الصفحة الآمنة ، أو ستعيد التوجيه إلى / auth وبعد التسجيل بنجاح ، خذ واحدة إلى هذا المكون / الصفحة

تحقق من أن التطبيق الزاوي يعمل:

$ npm البداية

تكوين التطبيق الزاوي لاستخدام AWS Amplify SDK:

تأكد من أن ملف "aws-export.ts" الخاص بك يشبه ما يلي بناءً على ملف aws-export.js الخاص بك:

تصدير const awsmobile = {
'aws_project_region': 'us-east-1' ،
'aws_cognito_identity_pool_id': 'us-east-1: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'،
'aws_cognito_region': 'us-east-1' ،
'aws_user_pools_id': 'us-east-1_XXXXXXXXX'، 'aws_user_pools_web_client_id': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX' '
}؛

قم بتغيير main.ts لإضافة الكود التالي لتكوين Amplify للتطبيق الخاص بك:

استيراد Amplify من "aws-amplify" ؛
استيراد * كـ awsamplify من "./aws-exports" ؛
Amplify.configure (awsamplify.awsmobile)؛

الآن قم بتشغيل التطبيق الخاص بك مرة أخرى:

$ npm البداية

قد تحصل على بعض مشكلات المخزن المؤقت والدفق مثل أدناه:

خطأ في node_modules / aws-sdk / clients / acm.d.ts (133،37): خطأ TS2580: لا يمكن العثور على الاسم 'Buffer'. هل تحتاج إلى تثبيت تعريفات النوع للعقدة؟ جرب `npm i @ types / node`.
....

إذا تلقيت الخطأ أعلاه ، فيرجى الاطلاع على الرابط التالي:

لحل المشكلة أعلاه حسب المستند أعلاه:

"لحل هذه المشكلات ، إما إضافة" أنواع ": [" عقدة "] إلى ملف tsconfig.app.json للمشروع ، أو قم بإزالة حقل" الأنواع "بالكامل."

لذلك قم بتغيير tsconfig.app.json من الأسفل:

{
"يمتد": "../tsconfig.json" ،
"compilerOptions": {
"outDir": "../out-tsc/app" ،
"أنواع": []
}،
"استبعاد": [
"test.ts"
"** / *. spec.ts"
]
}

إلى:

{
"يمتد": "../tsconfig.json" ،
"compilerOptions": {
"outDir": "../out-tsc/app" ،
// "أنواع": ["العقدة"]
}،
"استبعاد": [
"test.ts"
"** / *. spec.ts"
]
}

قم الآن بتنفيذ الأمر أدناه لإعادة تشغيل التطبيق Angular والانتقال إلى "http: // localhost: 4200 /" ، لضمان عمل التطبيق المبدئي الزاوية بشكل جيد.

$ npm البداية

إذا كانت الصفحة الرئيسية للتطبيق فارغة أو إذا رأيت الخطأ التالي عند النقر بزر الماوس الأيمن والتحقق من وحدة التحكم:

لم يتم التعرف على ReferenceError: لم يتم تعريف Global
    at Object ../ node_modules / buffer / index.js (index.js: 43)
    في __webpack_require__ (bootstrap: 78)
    في Object ../ node_modules / aws-sdk / lib / browserHashUtils.js (browserHashUtils.js: 1)
    في __webpack_require__ (bootstrap: 78)
    في Object ../ node_modules / aws-sdk / lib / browserHmac.js (browserHmac.js: 1)
    في __webpack_require__ (bootstrap: 78)
    في Object ../ node_modules / aws-sdk / lib / browserCryptoLib.js (browserCryptoLib.js: 1)
    في __webpack_require__ (bootstrap: 78)
    في Object ../ node_modules / aws-sdk / lib / browser_loader.js (browser_loader.js: 4)
    في __webpack_require__ (bootstrap: 78)

لإصلاح المشكلة أعلاه ، أضف الكود التالي إلى index.html قبل علامة