From 5bba1ca2c1ddb54ce6cdbd6d686d05e2a68fb143 Mon Sep 17 00:00:00 2001 From: Ali Najmabadi Date: Wed, 2 Oct 2024 12:02:55 +0330 Subject: [PATCH] add angular/ github-deployment docs --- src/pages/paas/angular/how-tos/deploy-app.mdx | 264 +++++++++++++++++- src/pages/paas/angular/quick-start.mdx | 187 ++++++++++++- 2 files changed, 443 insertions(+), 8 deletions(-) diff --git a/src/pages/paas/angular/how-tos/deploy-app.mdx b/src/pages/paas/angular/how-tos/deploy-app.mdx index 43fe062c..0ede808c 100644 --- a/src/pages/paas/angular/how-tos/deploy-app.mdx +++ b/src/pages/paas/angular/how-tos/deploy-app.mdx @@ -25,7 +25,7 @@ import Head from "next/head"; توجه داشته باشید؛ تنها برنامه‌هایی که با Angular CLI ساخته شده باشند، در پلتفرم Angular لیارا قابل اجرا خواهند بود.

@@ -287,6 +287,268 @@ import Head from "next/head";

, + <> +

+ پس از ساخت برنامه، باید در مسیر اصلی پروژه، یک فایل به نام gitignore. ایجاد کنید و درون آن، اسامی تمامی فایل‌ها یا پوشه‌هایی که قصد ندارید در لیارا آپلود شوند را، وارد کنید؛ به عنوان مثال، نیازی به آپلود دایرکتوری node_modules به همراه محتوای آن نیست؛ چرا که لیارا در حین استقرار برنامه، آن را برای شما می‌سازد؛ پس بایستی نام این دایرکتوری در یکی از دو فایل فوق، نوشته شود؛ قطعه کد قرار گرفته در لینک زیر، یک gitignore. عالی برای برنامه‌های Angular است که می‌توانید از آن، استفاده کنید: +

+
+ + +
+

+ نمونه فایل gitignore. برای برنامه‌های Angular +

+
+ + + +
+

+ همچنین، پروژه شما باید شامل فایل package.json باشد؛ لیارا، در حین فرایند استقرار، به صورت خودکار این فایل را پیدا می‌کند و عملیات زیر را انجام می‌دهد: +

+ +

نصب وابستگی‌های برنامه

+

لیارا، تمامی ماژول‌ها و وابستگی‌های برنامه که در فیلدهای dependencies و devDependencies قرار گرفته‌اند را با استفاده از دستور npm install نصب می‌کند.

+ + ) + }, + { + step: "۲", + content: ( + <> +

اجرای اسکریپت build

+

اگر که در این فایل، اسکریپت build وجود داشته باشد، لیارا با اجرای دستور npm run build آن را، اجرا می‌کند.

+ + ) + }, + { + step: "۳", + content: ( + <> +

اجرای اسکریپت start

+

لیارا برای اجرای برنامه، از اسکریپت start استفاده می‌کند؛ پس باید حتماً این اسکریپت در فایل package.json تعریف شده باشد.

+ + ) + } + ]}/> +
+

+ قطعه کد زیر، یک نمونه از فایل package.json استاندارد برای برنامه‌های Angular است: +

+
+
+ + {`{ + "name": "angular-getting-started", + "version": "0.1.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development" + }, + "dependencies": { + "@angular/animations": "~13.1.0", + "@angular/common": "~13.1.0", + "@angular/compiler": "~13.1.0", + "@angular/core": "~13.1.0", + "@angular/forms": "~13.1.0", + "@angular/platform-browser": "~13.1.0", + "@angular/platform-browser-dynamic": "~13.1.0", + "@angular/router": "~13.1.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~13.1.2", + "@angular/cli": "~13.1.2", + "@angular/compiler-cli": "~13.1.0", + "@types/node": "^12.11.1", + "typescript": "~4.5.2" + } +}`} + +
+
+

+ لیارا در جهت استقرار سریع‌تر، برای نصب پکیج‌های npm، از mirror اختصاصی خود استفاده می‌کند؛ از همین رو، ممکن است که در نصب برخی از پکیج‌های جدید، دچار مشکل شود. برای رفع این مشکل، می‌توانید در مسیر اصلی پروژه، یک فایل به نام liara.json ایجاد کنید و mirror لیارا را با قراردادن قطعه کد زیر در این فایل، غیرفعال کنید: +

+
+
+ + {`{ + "angular": { + "mirror": false + } +}`} + +
+
+

+ Source Map یک فایل است که به ابزارهای دیباگ این امکان را می‌دهد تا کد منبع اصلی (مثل فایل‌های جاوااسکریپت، TypeScript یا SCSS) را به کد تبدیل شده (مثل فایل‌های minified) مرتبط کنند. + Source Map در پلتفرم Angular لیارا به‌صورت پیش‌فرض غیرفعال است اما درصورت نیاز به فعال کردن این قابلیت می‌توانید قطعه‌کد زیر را در فایل liara.json قرار دهید: +

+ +
+
+ + {`{ + "angular": { + "sourceMap": true + } +}`} + +
+
+

+ در نهایت، یک فایل liara.json می‌تواند مانند قطعه کد زیر باشد: +

+
+
+ + {`{ + "angular": { + "mirror": false, + "sourceMap": true + } +}`} + +
+
+ +

+ در فایل فوق، برای جلوگیری از خطا خوردن فرایند استقرار، از فیلدهای app و platform استفاده نکنید؛ چرا که لیارا، آن‌ها را به صورت خودکار، تشخیص خواهد داد. +

+ + همچنین بخوانید: تعیین موقعیت build برنامه +

+ در ادامه، بایستی یک ریپازیتوری در حساب گیت‌هاب خود برای برنامه‌مدنظرتان با نام دلخواه‌تان ایجاد کنید، برای این کار، پس از ورود به گیت‌هاب، وارد بخش Repositories شوید و بر روی دکمه New کلیک کنید؛ پس از نوشتن نام و توضیحات ریپازیتوری، سطح دسترسی ریپازیتوری را (public یا private)، انتخاب کنید و در نهایت بر روی دکمه create repository کلیک کنید تا ریپازیتوری برای‌تان ساخته شود: +

+
+ +
+ +

+ در صورتی که از قبل، این کار را انجام داده‌اید یا قصد دارید از ریپازیتوری‌های فعلی خود استفاده کنید؛ نیازی به ساخت ریپازیتوری جدید نیست. +

+ +

+ اکنون، باید پروژه نهایی خود را در ریپازیتوری‌تان در گیت‌هاب آپلود کنید؛ + حتماً در نظر داشته باشید که درون پروژه‌تان، فایل gitignore. قرار داشته باشد و درون آن، فایل‌های اضافی + برنامه، که قصد ندارید آپلود شوند؛ لیست شده باشند. می‌توانید برای آپلود، مانند دستورات زیر + در ترمینال ریشه پروژه‌تان، عمل کنید: +

+
+
+ + {`git init # تعریف اولیه مخزن در ریشه پروژه`} + +
+
+ + {`git add . # اضافه کردن تمامی فایل‌ها به استیج`} + +
+
+ + {`git commit -m "make ready to deploy on liara" # ثبت کامیت`} + +
+
+ + {`git remote add origin https://github.com/your-account-user/your-repo-name.gi # افزودن دسترسی ریموت به مخزن`} + +
+
+ + {`git push origin master # آپلود پروژه در گیت‌هاب`} + +
+
+ +

+ در صورتی که هنوز git را در سیستم عامل خود نصب ندارید؛ می‌توانید آن را از اینجا، دانلود و نصب نمایید. +

+ + +

+ اگر که از قبل، پروژه نهایی خود را همراه با فایل liara.json، در گیت‌هاب آپلود کرده‌اید؛ نیازی به انجام مجدد این کار نیست. +

+ +

+ در ادامه، بایستی حساب لیارا خود را به گیت‌هاب متصل کنید. برای اتصال حساب لیارا خود به گیت‌هاب، در لیارا بر روی پروفایل خود کلیک کرده و وارد زیر قسمت حساب کاربری شوید. در ادامه + وارد منوی گیت‌هاب شوید و بر روی دکمه اتصال به گیت‌هاب، کلیک کنید. پس از + انجام این کار و وارد کردن اطلاعات مربوط به گیت‌هاب، حساب لیارا شما به گیت‌هاب متصل خواهد شد: +

+
+ +
+ +

+ در صورت مواجه با خطای "اتصال به Github"، بایستی از حساب لیارا خود، خارج شده و مجدداً به وسیله Github، به اکانت لیارا خود، وارد شوید. +

+ +

+ بعد از اتصال به اکانت گیت‌هاب، بر روی گزینه ویرایش دسترسی‌ها کلیک کرده و ریپازیتوری (ریپازیتوری‌های) مدنظرتان را به حساب لیارا متصل کنید. +

+

+ برای این کار در ابتدا، حساب شخصی یا سازمانی خود را انتخاب کنید؛ سپس + در صورتی که قصد دارید تمام ریپازیتوری‌های حساب گیت‌هاب‌تان به لیارا متصل شود؛ گزینه All repositories را انتخاب کنید؛ + اما اگر قصد دارید که فقط یک یا چند ریپازیتوری مدنظرتان را انتخاب کنید؛ گزینه Only select repositories را انتخاب کرده و در ادامه ریپازیتوری‌های مدنظرتان را در کشوی باز شده، انتخاب کنید. + در نهایت، بر روی گزینه Install & Authorize کلیک کنید تا ریپازیتوری‌های انتخابی، به حساب لیارا، متصل شوند: +

+
+ +
+ +

+ در نهایت، بر روی برنامه خود کلیک کرده وارد صفحه استقرار جدید شوید؛ سپس در منوی گیت‌هاب، ریپازیتوری مدنظرتان را انتخاب کرده و پس از انتخاب نوع استقرار (استقرار در صورت CI موفق یا استقرار خودکار) و branch مدنظرتان، بر روی گزینه اتصال به برنامه کلیک کنید تا برنامه‌تان به ریپازیتوری مدنظرتان متصل شود. + در نهایت، کافیست تا یک‌بار بر روی گزینه استقرار دستی کلیک کنید تا آخرین commit شما در لیارا مستقر شود: +

+
+ +
+

+ پس از انجام کارهای فوق، با هر بار push کردن پروژه‌تان در ریپازیتوری انتخاب شده، + یک استقرار جدید مطابق آخرین تغییرات شما در لیارا، انجام خواهد شد. +

+
+ +

+ برای قطع ارتباط برنامه و ریپازیتوری نیز، می‌توانید بر روی دکمه قطع اتصال کلیک کنید تا تغییرات جدید، مستقر نشوند. +

+ + +

+ در صورت انتخاب گزینه استقرار در صورت CI موفق، تمامی تست‌های تعریف شده باید pass شده و تیک سبز رنگ گرفته باشند، در غیر این‌صورت، + پروژه‌تان در لیارا، مستقر نخواهد شد. +

+ +
+ + ]} /> diff --git a/src/pages/paas/angular/quick-start.mdx b/src/pages/paas/angular/quick-start.mdx index ec81d5ef..8e1d8231 100644 --- a/src/pages/paas/angular/quick-start.mdx +++ b/src/pages/paas/angular/quick-start.mdx @@ -22,7 +22,7 @@ import Head from "next/head"; توجه داشته باشید؛ تنها برنامه‌هایی که با Angular CLI ساخته شده باشند، در پلتفرم Angular لیارا قابل اجرا خواهند بود.