Angular를 컴파일하고 패키징하는 방법에 대해 간략하게 설명하시겠습니까? Docker를 사용하여 게시하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

Angular를 컴파일하고 패키징하는 방법에 대해 간략하게 설명하시겠습니까? Docker를 사용하여 게시하는 방법은 무엇입니까?

青灯夜游

풀어 주다： 2021-06-07 11:08:48

앞으로

2655명이 탐색했습니다.

이 글에서는 Angular 컴파일, 패키징, Docker 퍼블리싱 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular를 컴파일하고 패키징하는 방법에 대해 간략하게 설명하시겠습니까? Docker를 사용하여 게시하는 방법은 무엇입니까?

환경:

Angular CLI: 11.0.6

Angular: 11.0.7

Node: 12.18.3

npm: 6.14.6

IDE: Visual Studio Code

1. 요약

Angular 개발이 완료되면 서버에 어떻게 배포하나요? [추천 관련 튜토리얼: "angular 튜토리얼"]

2. 컴파일 및 패키징

2.1. 기본 패키징 명령

Angular CLI를 기반으로 생성된 Angular 프로젝트에는 기본적으로 2개의 환경 구성 파일이 있습니다.

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

로그인 후 복사

environment.ts: 개발 환경용 환경 파일
environment.prod.ts: 프로덕션 환경용으로 컴파일할 때 원래 환경.ts가 교체된 후 패키징됩니다. (루트 디렉터리의 angular.json은 이 기본 동작을 정의하며 필요한 경우 수정할 수 있습니다.)

AngularCLI가 두 개의 파일을 생성한 후 두 파일의 차이점을 열어 비교하면 사용된 환경을 볼 수 있습니다. 개발 환경 .ts 파일에 production: false라는 문장이 있습니다. 왜냐하면 프로덕션 환경의 경우 Angular는 컴파일 시 효율성 등의 문제를 고려해야 하지만, 개발 환경의 경우 개발자의 디버그 편의성을 고려해야 한다는 점과 초점이 다르기 때문입니다. 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/html
그렇다면 프로덕션 환경에 맞게 컴파일하는 방법은 무엇일까요? Angular CLI는

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

로그인 후 복사

--prod

rrreee
Angular는 기본적으로 루트 디렉터리의 dist 디렉터리에 패키지되어 있습니다. 생성되는 파일은 순수 정적 파일(html, css, js)과 이미지 파일입니다.

2.2. 패키징 및 보조 디렉터리에 배포

🎜🎜🎜Angular 웹 사이트를 웹 사이트의 루트 디렉터리에 직접 배포할 수 없어 보조 디렉터리에 배포해야 하는 상황이 많이 있습니다. 예를 들어, http://abc.com에 배포할 수 없습니다. 보조 디렉터리인 http://abc.com/demo에 배포해야 합니다. 이러한 상황에 대응하여 컴파일 매개변수를 🎜rrreee🎜Add --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 사이트를 컴파일하고 패키징한 후 기존 웹 서버에 쉽게 게시하거나, Docker 이미지로 만든 후 게시할 수 있습니다. 🎜🎜🎜🎜3.1 웹 서버 릴리스🎜🎜🎜🎜패키징 후 생성된 파일은 순수 정적 파일(html, css, js, 그림 등)이므로 패키징된 문제를 iis, nginx에 직접 복사할 수 있습니다. , Apache Tomcat과 같은 웹 서버의 디렉터리에 위치할 수도 있고, node.js, java 등과 같은 정적 파일을 표시할 수 있는 프로그램에 위치할 수도 있습니다. 🎜🎜🎜🎜3.2. docker를 사용하여 게시 🎜🎜🎜🎜docker에 배포하는 경우 기본 nginx docker를 사용한 다음 컴파일된 각도 프로젝트를 docker의 nginx 디렉터리에 복사할 수 있습니다. 🎜🎜기본 단계: 🎜🎜🎜🎜 Dockerfile을 준비합니다. Docker는 컴파일된 각도 사이트 파일을 nginx:alpine /html/usr/share/nginx에 복사할 수 있습니다. /code>🎜🎜🎜rrreee🎜🎜지침: 1) 각도 패키지 파일이 Dockerfile 파일과 동일한 디렉터리에 있다고 가정합니다
2) COPY /usr/share/nginx/html, 두 개의 매개 변수 .는 현재 경로를 나타내며, /usr/share/nginx/html는 docker 🎜🎜🎜🎜🎜Compile docker의 대상 디렉터리입니다. Dockerfile 디렉터리에서 세 가지 명령 🎜🎜🎜rrreee🎜을 실행합니다. 🎜

도커 이미지 생성, 이름(이름)은 your-docker-name
도커 이미지를 로컬 파일로 내보냅니다. 파일 이름은 your-docker-name.tar
도커 이미지를 압축

할 수 있습니다. 각도 컴파일 때문에 보세요. 후자는 순전히 정적 파일이므로 docker를 사용하여 게시하는 것은 매우 간단합니다. 배포 시 docker 파일을 대상 머신에 복사하고 압축을 푼 다음 docker load < your-docker-name.tar를 실행하여 도커 이미지를 대상 머신에 로드하기만 하면 됩니다. docker load < your-docker-name.tar 即可加载docker image到目标机器。