A brief discussion on how to compile and package Angular? How to publish using Docker?

This article will introduce to you the method of Angular compilation, packaging & Docker publishing. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Environment:

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

1. Summary

After we complete the development of angular, how to deploy it to the server? [Recommended related tutorials: "angular tutorial"]

2. Compile and package

2.1. Basic packaging commands

The Angular project generated based on Angular CLI will have 2 environment configuration files by default

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

• environment.ts: environment used for the development environment File

• environment.prod.ts: When compiling for production environment, the original environment.ts will be replaced and then packaged. (angular.json in the root directory defines this default behavior, which can be modified if necessary)

After AngularCLI has just generated two files, if you open and compare the differences between the two files, You can see that in the environment.ts file used in the development environment, there is such a sentence production: false. Because, for the production environment, Angular needs to consider issues such as efficiency when compiling, while for the development environment, it is necessary to consider convenience for developers to debug, and the focus is different.

So how to compile it for production environment? Angular CLI also provides the command,

ng build --prod

, where the parameter --prod tells the compilation environment to compile into a production environment package. Similarly, default compilation parameters are defined in angular.json and can be modified if necessary. The main configuration parameters are as follows

"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 is packaged into the dist directory under the root directory by default. The generated files are pure static files (html, css, js) and image files.

2.2. Package and deploy to the secondary directory

There are many situations where our angular web site cannot be deployed directly to the root directory of the website , it needs to be deployed to the secondary directory. For example, it cannot be deployed to http://abc.com. It is required to be deployed to the secondary directory http://abc.com/demo. In response to this situation, we need to modify our compilation parameters to:

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

Add --deploy-url and --base-href.

Usage scenarios: For example, we have multiple sites and want to use the same reverse proxy, http://site1, http://site2 , respectively mapped to http://abc.com/site1, http://abc.com/site2/. Then in order to facilitate configuration, site1 and site2 need to be deployed to the secondary directory, such as http://site1/site1, http://site2/site2. Then http://site1/site1 is proxy to http://abc.com/site1, http://site2/site2 is proxy to http://abc.com/site2/, so that css and js cannot be found due to directory level problems.

3. Publishing the Angular site

After the Angular site is compiled and packaged, it can be easily published to an existing web server, or made into a docker image, and then release.

3.1. Web server publishing

Because after we package, the generated files are pure static files (html, css, js, pictures, etc. ), so the packaged problems can be directly copied to the directory of a web server such as iis, nginx, apache tomcat, or a program that can display static files such as node.js, java, etc.

3.2. Use docker to publish

If deployed to docker, we can base it on a basic nginx docker, and then put the compiled angular project , copy it to the nginx directory in docker.

Basic steps:

• Prepare the Dockerfile file. Docker can copy the compiled angular site file to docker's nginx based on nginx:alpine Default directory /usr/share/nginx/html

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

Instructions: 1) Assume that the angular packaged file is in the same directory as the Dockerfile file
2) COPY ./usr/share/nginx/html, the two parameters . represent the current path, /usr/share/nginx/html is the target directory in docker

• Compile docker. In the Dockerfile directory, execute the three commands

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

:

• Generate docker image, the name (name) is your-docker-name
• Export the docker image as a local file, the file name is your-docker-name.tar
• Compress docker image

As you can see, because angular is compiled into a pure static file, publishing using docker is very simple. When deploying, you only need to copy the docker file to the target machine, decompress it, and then execute docker load < your-docker-name.tar to load the docker image to the target machine.

4. Summary

• # To compile for production environment, be sure to add parameters--prod

• If you want to deploy to the secondary directory, add parameters when compiling. If deployed to the /demo secondary directory, add parameters: --deploy-url /demo/ --base-href /demo/

• Use docker to publish , you can choose the basic nginx docker, and then copy the compiled angular file to the nginx directory.

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on how to compile and package Angular? How to publish using Docker?. For more information, please follow other related articles on the PHP Chinese website!