คุณจะปรับใช้แอพเชิงมุมได้อย่างไร

คุณจะปรับใช้แอพเชิงมุมเมื่อพวกเขามาถึงขั้นตอนการผลิตได้อย่างไร

คำแนะนำทั้งหมดที่ฉันเคยเห็น (แม้กระทั่งในangular.io ) กำลังนับบน lite-server สำหรับการให้บริการและ browserSync เพื่อแสดงการเปลี่ยนแปลง - แต่เมื่อคุณเสร็จสิ้นการพัฒนาคุณจะเผยแพร่แอพได้อย่างไร?

ฉันจะนำเข้า.jsไฟล์ที่รวบรวมทั้งหมดในindex.htmlหน้าหรือฉันจะลดขนาดพวกเขาโดยใช้อึก? พวกเขาจะทำงานอย่างไร ฉันต้องการ SystemJS ทั้งหมดในเวอร์ชันการผลิตหรือไม่

คุณอยู่ที่นี่เพื่อสัมผัสสองคำถามในหนึ่งเดียว

คนแรกคือวิธีการโฮสต์ใบสมัครของคุณ? .
และตามที่ @toskv พูดถึงคำถามที่กว้างเกินไปจริง ๆ ที่จะตอบและขึ้นอยู่กับสิ่งต่าง ๆ มากมาย

อย่างที่สองคือคุณจะเตรียมเวอร์ชันการปรับใช้แอพพลิเคชั่นอย่างไร? .
คุณมีหลายตัวเลือกที่นี่:

1. ปรับใช้ตามที่เป็นอยู่ เพียงแค่นั้น - ไม่มีการทำให้เป็น minification, concatenation, ชื่อ mangling, ฯลฯ Transpile โครงการ ts ทั้งหมดของคุณคัดลอก js / css / ... ทั้งหมดที่เป็นผลลัพธ์ของคุณ + การอ้างอิงไปยังเซิร์ฟเวอร์โฮสต์และคุณก็พร้อมที่จะไป

2. ปรับใช้โดยใช้เครื่องมือการรวมพิเศษเช่นwebpackหรือตัวsystemjsสร้าง
   พวกเขามาพร้อมกับความเป็นไปได้ทั้งหมดที่ขาดใน # 1
   คุณสามารถบรรจุรหัสแอปทั้งหมดของคุณลงในไฟล์ js / css / ... เพียงสองไฟล์ที่คุณอ้างอิงใน HTML ของคุณ systemjsผู้สร้างยังช่วยให้คุณสามารถกำจัดความต้องการที่จะรวมsystemjsเป็นส่วนหนึ่งของแพคเกจการใช้งานของคุณ

3. คุณสามารถใช้ng deployตั้งแต่ 8 Angular เพื่อปรับใช้แอปของคุณจาก CLI ของคุณ ng deployจะต้องใช้ร่วมกับแพลตฟอร์มที่คุณเลือก (เช่น@angular/fire) คุณสามารถตรวจสอบเอกสารอย่างเป็นทางการเพื่อดูว่าอะไรทำงานได้ดีที่สุดสำหรับคุณที่นี่

ใช่คุณอาจจำเป็นต้องปรับใช้systemjsและรวบรวมไลบรารีภายนอกอื่น ๆ เป็นส่วนหนึ่งของแพ็คเกจของคุณ และใช่คุณจะสามารถรวมเป็นไฟล์ js สองสามไฟล์ที่คุณอ้างอิงจากหน้า HTML ของคุณ

คุณไม่จำเป็นต้องอ้างอิงไฟล์ js ที่รวบรวมทั้งหมดของคุณจากหน้า - systemjsเนื่องจากตัวโหลดโมดูลจะดูแลสิ่งนั้น

ฉันรู้ว่ามันฟังดูงี่เง่า - เพื่อช่วยให้คุณเริ่มต้นกับ # 2 ที่นี่คือแอปพลิเคชันตัวอย่างที่ดีสองแบบ:

ตัวสร้าง SystemJS: เมล็ด angular2

WebPack: เริ่มต้น angular2 webpack

คำตอบง่ายๆ ใช้ Angular CLI และออก

ng build 

คำสั่งในไดเรกทอรีรากของโครงการของคุณ เว็บไซต์จะถูกสร้างขึ้นในไดเรกทอรี dist และคุณสามารถปรับใช้กับเว็บเซิร์ฟเวอร์ใด ๆ

สิ่งนี้จะสร้างสำหรับการทดสอบหากคุณมีการตั้งค่าการผลิตในแอปของคุณคุณควรใช้

ng build --prod

สิ่งนี้จะสร้างโครงการในdistไดเรกทอรีและสามารถส่งไปยังเซิร์ฟเวอร์ได้

เกิดขึ้นมากมายตั้งแต่ฉันโพสต์คำตอบนี้เป็นครั้งแรก ในที่สุด CLI ก็อยู่ที่ 1.0.0 ดังนั้นให้ทำตามคำแนะนำนี้ไปอัพเกรดโครงการของคุณก่อนที่คุณจะพยายามสร้าง https://github.com/angular/angular-cli/wiki/stories-rc-update

ด้วย Angular CLI นั้นง่ายมาก ตัวอย่างสำหรับ Heroku:

1. สร้างบัญชี Heroku และติดตั้ง CLI

2. ย้ายangular-clidep ไปยังdependenciesin package.json(เพื่อให้ติดตั้งได้เมื่อคุณกดไปที่ Heroku

3. เพิ่มpostinstallสคริปต์ที่จะทำงานng buildเมื่อรหัสถูกส่งไปยัง Heroku เพิ่มคำสั่งเริ่มต้นสำหรับเซิร์ฟเวอร์โหนดที่จะสร้างขึ้นในขั้นตอนต่อไปนี้ การทำเช่นนี้จะวางไฟล์แบบคงที่สำหรับแอพในdistไดเรกทอรีบนเซิร์ฟเวอร์และเริ่มแอพหลังจากนั้น

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

4. สร้างเซิร์ฟเวอร์ Express เพื่อให้บริการแอพ

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

5. สร้างรีโมต Heroku และกดเพื่อนำแอพออก

heroku create
git add .
git commit -m "first deploy"
git push heroku master

นี่คือการเขียนแบบย่อที่ฉันทำซึ่งมีรายละเอียดมากขึ้นรวมถึงวิธีบังคับให้ใช้ HTTPS และวิธีจัดการPathLocationStrategy:)

ฉันใช้กับตลอดไป :

1. สร้างแอปพลิเคชันของคุณด้วยAngular-cliเพื่อ dist folderng build --prod --output-path ./dist

2. สร้างไฟล์server.jsในเส้นทางแอปพลิเคชันของคุณ:

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(__dirname + '/dist'));
   
   app.get('/*', function(req,res) {
       res.sendFile(path.join(__dirname + '/dist/index.html'));
   });
   app.listen(80);

3. เริ่มต้นตลอดไป forever start server.js

นั่นคือทั้งหมด! แอปพลิเคชันของคุณควรใช้งาน!

หวังว่านี่จะช่วยได้และหวังว่าฉันจะลองทำในสัปดาห์นี้

1. สร้างเว็บแอปที่ Azure
2. สร้างแอป Angular 2 ในรูปของ vs code
3. Webpack to bundle.js
4. ดาวน์โหลดไซต์ Azure ที่เผยแพร่โปรไฟล์ xml
5. กำหนดค่า Azure-deploy โดยใช้ https://www.npmjs.com/package/azure-deployด้วยโปรไฟล์ไซต์
6. ปรับใช้.
7. ลองชิมครีม

หากคุณทดสอบแอปอย่างฉันบนlocalhostหรือคุณจะมีปัญหากับหน้าขาวที่ว่างเปล่าฉันใช้วิธีนี้:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

คำอธิบาย:

ng build

สร้างแอป แต่ในรหัสมีช่องว่างแท็บและสิ่งอื่น ๆ ที่ทำให้มนุษย์อ่านรหัสได้ สำหรับเซิร์ฟเวอร์มันไม่สำคัญว่ารหัสดู นี่คือเหตุผลที่ฉันใช้:

ng build --prod --build-optimizer 

รหัสนี้ใช้สำหรับการผลิตและลดขนาด [ --build-optimizer] อนุญาตให้ลดรหัสเพิ่มเติม]

ดังนั้นในตอนท้ายฉันเพิ่ม--base-href="http://127.0.0.1/my-app/"เพื่อแสดงแอปพลิเคชันซึ่งเป็น 'เฟรมหลัก' [ในคำง่ายๆ] ด้วยคุณสามารถมีแอพเชิงมุมหลายแอปในโฟลเดอร์ใดก็ได้

ในการปรับใช้แอป Angular2 ของคุณไปยังเซิร์ฟเวอร์ที่ใช้งานผลิตก่อนอื่นให้แน่ใจว่าแอปของคุณทำงานในเครื่องของคุณ

แอป Angular2 ยังสามารถปรับใช้เป็นแอปโหนด

ดังนั้นสร้างโหนดไฟล์จุดเข้าใช้งานเซิร์ฟเวอร์ server.js / app.js (ตัวอย่างของฉันใช้ด่วน)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

เพิ่มด่วนเป็นการอ้างอิงในไฟล์ package.json ของคุณ

จากนั้นปรับใช้บนสภาพแวดล้อมที่คุณต้องการ

ฉันได้รวบรวมบล็อกเล็ก ๆ สำหรับใช้งานกับ IIS ตามลิงค์

ในการปรับใช้แอปพลิเคชันของคุณใน IIS ให้ทำตามขั้นตอนด้านล่าง

ขั้นตอนที่ 1: สร้างแอปพลิเคชันเชิงมุมของคุณโดยใช้คำสั่งng build --prod

ขั้นตอนที่ 2: หลังจากสร้างไฟล์ทั้งหมดจะถูกเก็บไว้ในโฟลเดอร์ dist ของแอ็พพลิเคชันพา ธ ของคุณ

ขั้นตอนที่ 3: สร้างโฟลเดอร์ในC: \ inetpub \ Wwwrootโดยใช้ชื่อQRCode

ขั้นตอนที่ 4: คัดลอกเนื้อหาของโฟลเดอร์ DIST เพื่อC: \ inetpub \ Wwwroot \ QRCodeโฟลเดอร์

ขั้นตอนที่ 5: เปิดตัวจัดการ IIS โดยใช้คำสั่ง(หน้าต่าง + R)และพิมพ์inetmgrคลิกตกลง

ขั้นตอนที่ 6: คลิกขวาบนเว็บไซต์เริ่มต้นและคลิกที่เพิ่มแอพลิเคชัน

ขั้นตอนที่ 7: กรุณาใส่ชื่อนามแฝง'QRCode'และกำหนดเส้นทางทางกายภาพเพื่อC: \ inetpub \ Wwwroot \ QRCode

ขั้นตอนที่ 8: เปิดไฟล์index.htmlแล้วค้นหาบรรทัดhref = "\"แล้วลบ '\'

ขั้นตอนที่ 9: เรียกดูแอปพลิเคชันในเบราว์เซอร์ใด ๆ

คุณสามารถติดตามวิดีโอเพื่อความเข้าใจที่ดีขึ้น

URL วิดีโอ: https://youtu.be/F8EI-8XUNZc

หากคุณปรับใช้แอปพลิเคชันของคุณใน Apache (เซิร์ฟเวอร์ Linux) เพื่อให้คุณสามารถทำตามขั้นตอนต่อไปนี้: ทำตามขั้นตอนต่อไปนี้ :

ขั้นตอนที่ 1 : ng build --prod --env=prod

ขั้นตอนที่ 2 (คัดลอก dist ลงในเซิร์ฟเวอร์) จากนั้นสร้างโฟลเดอร์ dist คัดลอกโฟลเดอร์ dist และนำไปใช้ในไดเรกทอรีรากของเซิร์ฟเวอร์

ขั้นตอนที่ 3 สร้าง.htaccessไฟล์ในโฟลเดอร์รูทแล้ววางลงใน.htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

คุณจะได้ชุดการผลิตที่เล็กที่สุดและเร็วที่สุดโดยการคอมไพล์กับคอมไพเลอร์ Ahead of Time และการเขย่าต้นไม้ / การย่อขนาดด้วยการยกเลิกดังที่แสดงในตำรา AOT เชิงมุมที่นี่: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

Angular-CLI ดังกล่าวมีให้ในคำตอบก่อนหน้านี้ แต่ถ้าคุณยังไม่ได้สร้างแอพโดยใช้ CLI คุณควรทำตามตำราอาหาร

ฉันยังมีตัวอย่างการทำงานกับวัสดุและแผนภูมิ SVG (สำรองโดย Angular2) ว่ามีชุดข้อมูลที่สร้างด้วยตำรา AOT คุณยังค้นหาการกำหนดค่าและสคริปต์ทั้งหมดที่จำเป็นสำหรับการสร้างบันเดิล ตรวจสอบที่นี่: https://github.com/fintechneo/angular2-templates/

ฉันสร้างวิดีโอสั้น ๆ ที่แสดงให้เห็นถึงความแตกต่างระหว่างจำนวนไฟล์และขนาดของ AoT ที่คอมไพล์ด้วยบิวด์บิวด์และสภาพแวดล้อมการพัฒนา มันแสดงให้เห็นโครงการจากพื้นที่เก็บข้อมูล GitHub ข้างต้น คุณสามารถดูได้ที่นี่: https://youtu.be/ZoZDCgQwnmQ

การปรับใช้เชิงมุม 2 ในหน้า Github

การทดสอบการใช้งานของ Angular2 Webpack ใน ghpages

ขั้นแรกให้รับไฟล์ที่เกี่ยวข้องทั้งหมดจากdistโฟลเดอร์แอปพลิเคชันของคุณสำหรับฉันมันคือ: + css files ในโฟลเดอร์ asset + main.bundle.js + polyfills.bundle.js + seller.bundle.js

จากนั้นดันไฟล์นี้ใน repo ที่คุณสร้างขึ้น

1 - หากคุณต้องการให้แอปพลิเคชันทำงานในไดเรกทอรีรากให้สร้าง repo พิเศษที่มีชื่อ[yourgithubusername] .github.ioและกดไฟล์เหล่านี้ในสาขาหลัก

2 - ที่ไหนถ้าคุณต้องการสร้างหน้าเหล่านี้ในไดเรกทอรีย่อยหรือสาขาอื่นนอกเหนือจากรูทให้สร้างสาขาgh-pagesและผลักไฟล์เหล่านี้ในสาขานั้น

ในทั้งสองกรณีวิธีที่เราเข้าถึงหน้าปรับใช้เหล่านี้จะแตกต่างกัน

สำหรับกรณีแรกมันจะเป็นhttps: // [yourgithubusername] .github.ioและกรณีที่สองก็จะเป็น[yourgithubusername] .github.io / [ชื่อ Repo]

หากสมมติว่าคุณต้องการปรับใช้โดยใช้ตัวพิมพ์ที่สองตรวจสอบให้แน่ใจว่าได้เปลี่ยน URL พื้นฐานของไฟล์ index.html ในส่วนที่เหลือเนื่องจากการแมปเส้นทางทั้งหมดขึ้นอยู่กับเส้นทางที่คุณให้และควรตั้งค่าเป็น [/ branchname]

เชื่อมโยงไปยังหน้านี้

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

สำหรับวิธีที่รวดเร็วและประหยัดในการโฮสต์แอพเชิงมุมฉันได้ใช้โฮสติ้ง Firbase แล้ว ฟรีในระดับแรกและง่ายมากในการปรับใช้เวอร์ชันใหม่โดยใช้ Firebase CLI บทความนี้จะอธิบายขั้นตอนที่จำเป็นในการปรับใช้แอปเชิงมุมการผลิตของคุณกับ Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

ในระยะสั้นคุณเรียกใช้ng build --prodซึ่งสร้างโฟลเดอร์ dist ในแพ็คเกจและเป็นโฟลเดอร์ที่ปรับใช้กับ Firebase Hosting

การปรับใช้ Angular 2 ในสีฟ้าเป็นเรื่องง่าย

1. รันng build --prodซึ่งจะสร้างโฟลเดอร์ dist ที่มีทุกอย่างที่รวมอยู่ในไฟล์บางไฟล์ซึ่งรวมถึง index.html

2. สร้างกลุ่มทรัพยากรและเว็บแอพในนั้น

3. วางไฟล์ dist folder ของคุณโดยใช้ FTP ในสีฟ้ามันจะมองหา index.html เพื่อเรียกใช้แอปพลิเคชัน

แค่นั้นแหละ. แอปของคุณกำลังทำงาน!

ในปี 2560 วิธีที่ดีที่สุดคือใช้angular-cli (v1.4.4) สำหรับโครงการเชิงมุมของคุณ

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

คุณไม่จำเป็นต้องเพิ่ม - อย่างชัดเจนตามที่เปิดใช้โดยค่าเริ่มต้นด้วย --prod และการใช้ - เอาท์พุท - แฮชเป็นไปตามความชอบส่วนบุคคลของคุณเกี่ยวกับแคชระเบิด

คุณสามารถเพิ่มการสนับสนุนCDNได้อย่างชัดเจนโดยเพิ่ม:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

หากคุณวางแผนที่จะใช้ CDN สำหรับการโฮสต์ซึ่งรวดเร็วมาก

ด้วยAngular CLIคุณสามารถใช้คำสั่งต่อไปนี้:

ng build --prod

มันสร้างโฟลเดอร์ dist ด้วยทั้งหมดที่คุณต้องการในการปรับใช้แอปพลิเคชัน

หากคุณไม่ได้ฝึกฝนกับเว็บเซิร์ฟเวอร์ฉันแนะนำให้คุณใช้Angular to CloudCloud คุณเพียงแค่บีบอัดโฟลเดอร์ dist เป็นไฟล์ zip และอัปโหลดในแพลตฟอร์ม

ฉันจะบอกว่าผู้คนจำนวนมากที่มีประสบการณ์บนเว็บก่อนที่จะเป็นเหลี่ยมใช้ในการปรับใช้สิ่งประดิษฐ์เว็บของพวกเขาในสงคราม (เช่น jquery และ html ภายในโครงการ Java / Spring) ฉันลงเอยด้วยการทำสิ่งนี้เพื่อแก้ไขปัญหา CORS หลังจากพยายามแยกโครงการเชิงมุมและส่วนที่เหลือของฉันออกจากกัน

ทางออกของฉันคือการย้ายเนื้อหาเชิงมุม (4) ทั้งหมดที่สร้างด้วย CLI จากแอพของฉันไปยัง MyJavaApplication / angular จากนั้นฉันแก้ไข Maven build ของฉันเพื่อใช้ maven-resources-plugin เพื่อย้ายเนื้อหาจาก / angular / dist ไปที่รูทของการแจกจ่ายของฉัน (เช่น $ project.build.directory} / MyJavaApplication) โหลดทรัพยากรจากรากของสงครามโดยค่าเริ่มต้น

เมื่อฉันเริ่มเพิ่มเส้นทางไปยังโครงการเชิงมุมของฉันฉันแก้ไข maven build เพื่อคัดลอก index.html จาก / dist ไปยัง WEB-INF / app และเพิ่มตัวควบคุม Java ที่เปลี่ยนเส้นทางส่วนที่เหลือฝั่งเซิร์ฟเวอร์ทั้งหมดเรียกไปยังดัชนี

เพียงไปตามลิงค์ด้านล่าง

เปลี่ยนหน้า Index.html พา ธ ของไฟล์สคริปต์เปลี่ยนพา ธ component.html ของคุณเพื่อรับข้อผิดพลาดที่ไม่สามารถหาตำแหน่งได้

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy