1
00:00:00,000 --> 00:00:04,686
[MUSIC] Die

2
00:00:04,686 --> 00:00:09,110
letzte Frage, die in Ihrem Kopf auftreten könnte, ist, wie erstelle und

3
00:00:09,110 --> 00:00:11,590
bereitstelle ich die Angular-Anwendung?

4
00:00:11,590 --> 00:00:15,787
Wenn Sie sich erinnern,

5
00:00:15,787 --> 00:00:19,801
haben wir im früheren Kurs auf Bootstrap 4 gelernt, wie Sie die MPM-Skripte oder Grand oder

6
00:00:19,801 --> 00:00:26,560
Culp verwenden, um den Distributionsordner zu erstellen, um unsere Webanwendung zu erstellen.

7
00:00:26,560 --> 00:00:31,504
Jetzt, mit Angular Anwendung, die wir in diesem Kurs entwickelt haben,

8
00:00:31,504 --> 00:00:33,797
haben wir die Hilfe der Angular CLI.

9
00:00:33,797 --> 00:00:39,402
Die Angular CLI bietet einen Build-Befehl, der es uns ermöglicht, unsere

10
00:00:39,402 --> 00:00:45,010
Angular-Anwendung zu erstellen, den Distributionsordner zu erstellen und dann alle Dateien für

11
00:00:45,010 --> 00:00:50,286
unsere Angular-Anwendung kompiliert und bereit für die Bereitstellung auf einer Server-Site.

12
00:00:50,286 --> 00:00:53,497
Das werden wir also in dieser Übung lernen.

13
00:00:55,477 --> 00:01:00,065
Um mit dem Erstellen und Bereitstellen unserer Angular-Anwendung an

14
00:01:00,065 --> 00:01:04,969
der Eingabeaufforderung fortzufahren, geben Sie ng building ein — weil wir die

15
00:01:04,969 --> 00:01:09,935
Produktionsversion unserer Angular-Anwendung entwickeln möchten, die auf einem Server bereitgestellt werden kann. Geben

16
00:01:09,935 --> 00:01:13,925
Sie dazu an der Eingabeaufforderung, wie ich bereits erwähnt habe, ng

17
00:01:15,045 --> 00:01:19,935
build —prod ein und lassen Sie dann den Build-Prozess abgeschlossen.

18
00:01:22,225 --> 00:01:26,755
Dies wird ein wenig Zeit in Anspruch nehmen, bis der Build-Prozess abgeschlossen ist.

19
00:01:26,755 --> 00:01:28,924
Nachdem der Build-Prozess abgeschlossen ist,

20
00:01:28,924 --> 00:01:32,391
werden Sie sehen, dass der Distributionsordner jetzt bereit ist.

21
00:01:32,391 --> 00:01:35,860
Sobald der Erstellungsprozess erfolgreich abgeschlossen ist, so dass

22
00:01:35,860 --> 00:01:41,111
Sie sehen können, dass es alles grün ist, so dass der Distributionsordner jetzt vorbereitet ist.

23
00:01:41,111 --> 00:01:44,829
Nun, wie stellen wir Angular Anwendung bereit?

24
00:01:44,829 --> 00:01:50,789
Nun, in diesem Fall, wenn wir einen Server haben, auf dem Sie Ihre Webanwendung bereitstellen können,

25
00:01:50,789 --> 00:01:54,547
dann ist es nur eine Frage der Kopieren des Inhalts

26
00:01:54,547 --> 00:01:58,420
des Distributionsordners direkt auf den Server.

27
00:01:58,420 --> 00:02:02,770
Und dann wird Ihre Angular-Anwendung in kürzester Zeit einsatzbereit sein.

28
00:02:02,770 --> 00:02:06,842
Nun, zum Glück, haben wir bereits unseren JSON-Server läuft dort.

29
00:02:06,842 --> 00:02:09,411
Wir werden also unseren JSON-Server und

30
00:02:09,411 --> 00:02:14,468
den Öffentlichen Ordner unseres JSON-Servers verwenden, so dass sie den gesamten Inhalt

31
00:02:14,468 --> 00:02:19,057
des Distributionsordners in den Öffentlichen Ordner unseres JSON-Servers kopieren.

32
00:02:19,057 --> 00:02:23,317
Gehen Sie in den ConFusion-Ordner, in dem unsere Anwendung gespeichert ist,

33
00:02:23,317 --> 00:02:26,370
gehen wir jetzt in den Distributionsordner.

34
00:02:26,370 --> 00:02:28,720
Sie sehen, dass der Distributionsordner erstellt wurde.

35
00:02:28,720 --> 00:02:31,390
So gehen Sie in den Distributionsordner und

36
00:02:31,390 --> 00:02:36,450
Sie werden sehen, dass eine Reihe von Dateien durch den Angular CLI-Build-Prozess erstellt wurde.

37
00:02:38,015 --> 00:02:43,199
Lassen Sie uns einfach den gesamten Inhalt dieses Ordners kopieren, und

38
00:02:43,199 --> 00:02:50,327
dann gehen wir zum JSON-Server, der sich im json-server-Ordner befindet, und

39
00:02:50,327 --> 00:02:54,760
gehen Sie in den öffentlichen Ordner des json-server-Ordners.

40
00:02:54,760 --> 00:02:59,597
Und dann kopieren wir einfach den Inhalt in diesen Öffentlichen Ordner.

41
00:02:59,597 --> 00:03:05,596
Jetzt sollte Ihre Angular-Anwendung unter localhost: 3000 verfügbar sein, da

42
00:03:05,596 --> 00:03:12,031
Ihr JSON-Server alles bereitstellt, was sich im öffentlichen Ordner unter localhost: 3000 befindet.

43
00:03:12,031 --> 00:03:18,886
Gehen Sie zu einem Browser, jetzt in einer neuen Registerkarte werde ich einfach localhost: 3000 eingeben und

44
00:03:18,886 --> 00:03:26,080
Sie werden sehen, dass Ihre Angular-Anwendung jetzt in kürzester Zeit ausgeführt wird.

45
00:03:26,080 --> 00:03:29,230
So würden Sie Ihre Angular-Anwendung bereitstellen.

46
00:03:29,230 --> 00:03:32,970
Nun, in diesem Fall, da wir unseren Server unter unserer Kontrolle haben,

47
00:03:32,970 --> 00:03:36,270
geht es natürlich nur darum, die Dateien auf die Serverseite zu kopieren.

48
00:03:36,270 --> 00:03:42,030
Nun, wenn Sie diese Bereitstellung auf einem echten Server in der Cloud durchführen,

49
00:03:42,030 --> 00:03:46,395
dann müssen Sie nur den Anweisungen folgen,

50
00:03:46,395 --> 00:03:51,056
die vom Cloud-Dienstanbieter angegeben werden, um die Serverseite zu verbessern.

51
00:03:51,056 --> 00:03:56,982
Daher können sie einen Öffentlichen Ordner haben, der möglicherweise auf ihrem Cloud-Server unterstützt wird.

52
00:03:56,982 --> 00:04:02,706
In diesem Fall müssen Sie möglicherweise einfach den

53
00:04:02,706 --> 00:04:09,920
Inhalt Ihres Verteilungsordners in den Ordner des öffentlichen Servers bei Ihrem Clouddienstanbieter kopieren.

54
00:04:09,920 --> 00:04:14,204
Natürlich müssen Sie auch sicherstellen, dass ein

55
00:04:14,204 --> 00:04:17,982
Back-End-Server ausgeführt wird, der die REST-API unterstützt.

56
00:04:17,982 --> 00:04:21,266
In unserem Fall erfüllt der JSON-Server den Zweck.

57
00:04:21,266 --> 00:04:25,719
Wenn Sie den letzten Kurs in dieser Spezialisierung abschließen,

58
00:04:25,719 --> 00:04:30,434
wo wir uns mit der serverseitigen Entwicklung mit Node-JS beschäftigen,

59
00:04:30,434 --> 00:04:36,370
erfahren Sie die Vorgehensweise zum Erstellen Ihres eigenen benutzerdefinierten REST-API-Servers.

60
00:04:36,370 --> 00:04:41,240
In diesem Fall gibt es dann innerhalb des REST-API-Servers einen Öffentlichen Ordner, der

61
00:04:41,240 --> 00:04:43,870
ihn unterstützt, und dann

62
00:04:43,870 --> 00:04:48,360
müssten Sie Ihre Angular-Anwendung in den öffentlichen Ordner auf Ihrer Serverseite kopieren. Auf

63
00:04:49,490 --> 00:04:53,170
diese Weise würden Sie Ihre Angular-Anwendung bereitstellen.

64
00:04:53,170 --> 00:04:55,860
Damit schließen wir diese Übung ab.

65
00:04:55,860 --> 00:05:00,300
In dieser Übung haben wir gelernt, wie wir unsere

66
00:05:00,300 --> 00:05:02,341
Angular-Anwendung auf einem Server bereitstellen.

67
00:05:02,341 --> 00:05:07,124
Und wie man die Angular CLI nutzt, um eine Produktionsversion unserer

68
00:05:07,124 --> 00:05:11,352
Angular-Anwendung zu erstellen, bevor wir die Bereitstellung unserer

69
00:05:11,352 --> 00:05:13,604
Angular-Anwendung auf der Serverseite durchführen.

70
00:05:13,604 --> 00:05:19,459
( MUSIK)