معرفی
من می دانم که مقالات زیادی در مورد یک موضوع وجود دارد، اما اکثر راه حل ها با آخرین پیکربندی خط لوله برای من کار نمی کنند. بنابراین، به فکر نوشتن این مقاله افتادم. در اینجا، ما میخواهیم پیکربندی خط لوله ساخت و انتشار برنامه Angular خود را به راحتی تنظیم کنیم، در واقع با انجام چند کار اساسی. ما از Azure DevOps FTP Pipeline Service Connection برای پیکربندی استفاده خواهیم کرد. بیایید مقدمه را متوقف کنیم و وارد پیکربندی شویم.
شما همیشه می توانید این مقاله را در وبلاگ من اینجا بخوانید .
من سعی داشتم برنامه Angular خود را در Azure مستقر کنم. برای آن، من میخواستم خطوط لوله ساخت و انتشار خود را راهاندازی کنم. من برخی از آموزش های موجود را دنبال کرده بودم اما با آنها با مشکلاتی روبرو بودم. بعداً تصمیم گرفتم از Azure FTP Upload Release Task استفاده کنم. بنابراین، اساسا، ما تنها یک وظیفه در خط لوله انتشار خود خواهیم داشت.
همانطور که اشاره کردم، در اینجا، ما می خواهیم پیکربندی ساخت و انتشار خود را پیکربندی کنیم.
در اینجا، ما قصد داریم خط لوله ساخت Azure DevOps را پیکربندی کنیم. اما قبل از آن باید اسکریپت خود را در فایل package.json تعریف کنیم.
- "scripts": {
- "ng": "ng",
- "start": "ng serve",
- "build": "ng build",
- "test": "ng test",
- "lint": "ng lint",
- "e2e": "ng e2e",
- "prod-build-dev": "ng build --prod --build-optimizer",
- "prod-build-staging": "ng build --prod --configuration=staging --build-optimizer"
- }
اگر مسیرهای مختلفی دارید و باید مستقیماً در URL مرورگر به آنها دسترسی داشته باشید، باید یک فایل web.config را به پوشه "src" خود اضافه کنید.
- <configuration>
- <system.webServer>
- <rewrite>
- <rules>
- <rule name="Angular" stopProcessing="true">
- <match url=".*" />
- <conditions logicalGrouping="MatchAll">
- <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
- <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
- </conditions>
- <action type="Rewrite" url="/" />
- </rule>
- </rules>
- </rewrite>
- </system.webServer>
- </configuration>
پس از انجام این کار، آن را به عنوان یک دارایی به فایل angular.json اضافه کنید.
- "assets": [ "src/favicon.ico", "src/assets", "src/web.config"]
اکنون به سایت Azure DevOps خود بروید و روی Pipelines و سپس Builds کلیک کنید. روی نماد مثبت کلیک کنید.
روی قسمت Pipeline کلیک کنید. در اینجا می توانید نام خط لوله و استخر عامل را ذکر کنید. لطفاً به یاد داشته باشید که Agent pool را به عنوان میزبان VS2017 انتخاب کنید. در غیر این صورت، ممکن است در نهایت با یک خطا مواجه شوید که « Npm با کد برگشت ناموفق بود: 1 2019–01–07T10:14:37.3309955Z ##[section]Finishing: npm build ».
![](https://cdn-images-1.medium.com/max/1600/0*VqB9IcGtX3iEBAw-.jpg)
تصویر: عامل Pipeline را انتخاب کنید
فاز 1
من به شما توصیه می کنم این را همانطور که هست بگذارید. هر چند می توانید نام نمایشی را تغییر دهید.
روی نماد + در قسمت Phase کلیک کنید و "npm" را جستجو کنید و روی "افزودن" کلیک کنید. اکنون می توانیم این وظیفه را پیکربندی کنیم.
![](https://cdn-images-1.medium.com/max/1600/0*cRLZPvwaHxfMRrjf.jpg)
همچنین می توانید روی نوار View YAML کلیک کنید تا نسخه YML کار را مشاهده کنید.
در این مرحله یک وظیفه npm جدید اضافه می کنیم و آن را برای اسکریپت Build خود پیکربندی می کنیم.
![](https://cdn-images-1.medium.com/max/1600/0*6URP3XB1IemQK2h3.jpg)
لطفاً توجه داشته باشید که دستور سفارشی است و ما اسکریپتی را که قبلاً در فایل package.json خود تنظیم کرده ایم، که prod-build-dev است، داده ایم.