Eine kurze Diskussion darüber, wie man Angular kompiliert und verpackt? Wie veröffentliche ich mit Docker?

Dieser Artikel stellt Ihnen die Methode des AngularKompilierens, Packens und Docker-Publishing vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Umgebung:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm: 6.14.6
• IDE: Visual. Studio Code

1. Zusammenfassung

Nachdem wir die Entwicklung von Angular abgeschlossen haben, wie stellen wir es auf dem Server bereit? [Empfohlene verwandte Tutorials: „Angular-Tutorial“]

2. Kompilierung und Verpackung

2.1. Grundlegende Paketierungsbefehle

Das auf der Angular-CLI generierte Angular-Projekt verfügt standardmäßig über zwei Umgebungskonfigurationsdateien

└──myProject/src/environments/
               └──environment.ts
               └──environment.prod.ts

• environment.ts: Umgebungsdatei für die Entwicklungsumgebung

• environment.prod.ts: Beim Kompilieren für die Produktionsumgebung wird die ursprüngliche Environment.ts ersetzt und dann gepackt. (angular.json im Stammverzeichnis definiert dieses Standardverhalten und kann bei Bedarf geändert werden)

Nachdem AngularCLI gerade zwei Dateien generiert hat und Sie die Unterschiede zwischen den beiden Dateien öffnen und vergleichen, können Sie die verwendete Umgebung sehen die Entwicklungsumgebung In der .ts-Datei gibt es diesen Satz produktion: false. Denn für die Produktionsumgebung muss Angular Aspekte wie Effizienz beim Kompilieren berücksichtigen, während es für die Entwicklungsumgebung für Entwickler bequem zu debuggen sein muss und der Schwerpunkt anders ist.

production: false。因为，针对生产环境，angular在编译时需要核心考虑效率等问题，而开发环境，要考虑方便开发者进行调试，侧重点不同。

那么针对生产环境如何编译呢？Angular CLI同样提供了命令,

ng build --prod

其中，参数--prod 即告诉编译环境，编译为生产环境包。同样，angular.json中定义了默认的编译参数，如果需要，可以进行修改。主要配置参数如下

"configurations": {
    "production": {
        "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
        }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": false,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": false,
        "budgets": [
        {
            "type": "initial",
            "maximumWarning": "5mb",
            "maximumError": "10mb"
        }
        ]
    }
}

Angular默认打包到根目录下的dist目录下，生成的文件为纯静态文件（html, css, js)，以及图片文件。

2.2. 打包部署到二级目录

有不少情况，我们的angular web站点不能直接部署到网站的根目录下，需要部署到二级目录下。 比如，不能部署到 http://abc.com下，要求部署到 http://abc.com/demo 这个二级目录下。针对这种情况，就需要修改一下我们的编译参数，修改为：

ng build --prod --deploy-url /demo/ --base-href /demo/

增加 --deploy-url 和 --base-href。

使用场景：比如我们有多个站点，希望使用同一个反向代理， http://site1, http://site2, 分别映射到 http://abc.com/site1, http://abc.com/site2/。 那么为了方便配置，需要把site1， site2都部署到二级目录，如http://site1/site1, http://site2/site2。 然后 http://site1/site1代理到http://abc.com/site1, http://site2/site2代理到http://abc.com/site2/， 免得css、js因为目录级别问题找不到。

3. Angular站点的发布

Angular站点编译打包后，可以方便的发布到已有web服务器，或者打成docker image， 然后发布。

3.1. web服务器发布

因为我们打包后，生成的文件为纯静态文件（html, css, js, 图片等)， 所以打包后的问题，可以直接copy到iis， nginx , apache tomcat等web服务器，或者node.js， java等可以显示静态文件的程序的目录下即可。

3.2. 使用docker发布

如果部署到docker，我们可以基于一个基础的nginx docker， 然后把编译好的angular项目，copy到docker 内的nginx目录下即可。

基本步骤：

• 准备Dockerfile 文件， docker可以基于nginx:alpine， 将编译好的angular 站点文件复制到 docker 的nginx默认目录 /usr/share/nginx/html

FROM nginx:alpine
COPY . /usr/share/nginx/html

说明： 1) 假设angular打包后的文件，与Dockerfile文件在同一个目录
2) COPY . /usr/share/nginx/html, 两个参数 . 代表当前路径， /usr/share/nginx/htmlWie kompiliert man es also für die Produktionsumgebung? Angular CLI stellt auch Befehle bereit:

docker build -t your-docker-name .
docker save your-docker-name > your-docker-name.tar
gzip your-docker-name.tar

Darunter weist der Parameter --prod die Kompilierungsumgebung an, in ein Produktionsumgebungspaket zu kompilieren. Ebenso sind Standardkompilierungsparameter in angle.json definiert und können bei Bedarf geändert werden. Die Hauptkonfigurationsparameter lauten wie folgt: Angular wird standardmäßig in das Verzeichnis dist im Stammverzeichnis gepackt. Die generierten Dateien sind reine statische Dateien (HTML, CSS, JS) und Bilddateien.

• 2.2. Packen und im sekundären Verzeichnis bereitstellen

Es gibt viele Situationen, in denen unsere Angular-Website nicht direkt im Stammverzeichnis der Website bereitgestellt werden kann und im sekundären Verzeichnis bereitgestellt werden muss. Es kann beispielsweise nicht auf http://abc.com bereitgestellt werden. Es muss im sekundären Verzeichnis http://abc.com/demo bereitgestellt werden. Als Reaktion auf diese Situation müssen wir unsere Kompilierungsparameter wie folgt ändern: 🎜rrreee🎜Fügen Sie --deploy-url und --base-href hinzu. 🎜🎜🎜Nutzungsszenarien: Beispielsweise haben wir mehrere Sites und möchten denselben Reverse-Proxy verwenden, http://site1, http://site2, dem zugeordnet ist http://abc.com/site1, http://abc.com/site2/. Um die Konfiguration zu erleichtern, müssen Site1 und Site2 in sekundären Verzeichnissen bereitgestellt werden, z. B. http://site1/site1, http://site2/site2. Dann ist http://site1/site1 ein Proxy für http://abc.com/site1 und http://site2/site2 Proxy für http://abc.com/site2/, sodass CSS und JS aufgrund von Problemen auf Verzeichnisebene nicht gefunden werden können. 🎜🎜🎜🎜3. Veröffentlichung der Angular-Site 🎜🎜🎜Nachdem die Angular-Site kompiliert und gepackt wurde, kann sie einfach auf einem vorhandenen Webserver veröffentlicht oder in ein Docker-Image umgewandelt und dann veröffentlicht werden. 🎜🎜🎜🎜3.1. Webserver-Release🎜🎜🎜🎜Da es sich bei den generierten Dateien nach dem Packen um reine statische Dateien (HTML, CSS, JS, Bilder usw.) handelt, können die gepackten Probleme direkt nach iis, nginx kopiert werden Es kann im Verzeichnis eines Webservers wie Apache Tomcat oder eines Programms abgelegt werden, das statische Dateien wie node.js, Java usw. anzeigen kann. 🎜🎜🎜🎜3.2. Verwenden Sie Docker zum Veröffentlichen 🎜🎜🎜🎜Bei der Bereitstellung im Docker können wir einen einfachen Nginx-Docker verwenden und dann das kompilierte Angular-Projekt in das Nginx-Verzeichnis im Docker kopieren. 🎜🎜Grundlegende Schritte: 🎜🎜🎜🎜 Docker-Datei vorbereiten: Kopieren Sie die kompilierte Angular-Site-Datei in das Nginx-Standardverzeichnis /usr/share/nginx basierend auf <code>nginx:alpine /html🎜🎜🎜rrreee🎜🎜Anweisungen: 1) Nehmen Sie an, dass sich die eckig gepackte Datei im selben Verzeichnis befindet wie die Dockerfile-Datei
2) COPY . /usr/share/nginx/html, zwei Parameter . stellt den aktuellen Pfad dar, /usr/share/nginx/html ist das Zielverzeichnis im Docker 🎜🎜🎜🎜🎜Kompilieren Sie Docker. Führen Sie im Dockerfile-Verzeichnis die drei Befehle 🎜🎜🎜rrreee🎜 aus: 🎜

• Generieren Sie ein Docker-Image, der Name (Name) ist Ihr-Docker-Name.
• Exportieren Sie das Docker-Image als lokale Datei. Der Dateiname lautet Ihr-Docker-Name.tar.
• Komprimieren Sie das Docker-Image Sehen Sie es, weil es sich bei der Winkelkompilierung um rein statische Dateien handelt, sodass die Veröffentlichung mit Docker sehr einfach ist. Bei der Bereitstellung müssen Sie lediglich die Docker-Datei auf den Zielcomputer kopieren, sie dekomprimieren und dann docker load < your-docker-name.tar ausführen, um das Docker-Image auf den Zielcomputer zu laden.

4. Zusammenfassung

Zum Kompilieren für die Produktionsumgebung müssen Sie unbedingt den Parameter hinzufügen --prod docker load < your-docker-name.tar 即可加载docker image到目标机器。

4. 总结

• 为生产环境编译，一定要加参数--prod

• 如果要部署到二级目录，编译时加参数。如部署到/demo二级目录下，加参数： --deploy-url /demo/ --base-href /demo/

• Wenn Sie im sekundären Verzeichnis bereitstellen möchten, fügen Sie beim Kompilieren Parameter hinzu. Wenn Sie im sekundären Verzeichnis /demo bereitgestellt werden, fügen Sie Parameter hinzu: --deploy-url /demo/ --base-href /demo/

Verwenden Sie Docker zum Veröffentlichen. Sie können den einfachen Nginx-Docker auswählen , und kopieren Sie dann die kompilierte Winkeldatei in das Nginx-Verzeichnis.
Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie man Angular kompiliert und verpackt? Wie veröffentliche ich mit Docker?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!