Angular 容器部署的方法

2023-09-14 03:22:04 76

很多人反应很难访问GithubPage，所以ng-alain.com转移到阿里云服务器上，因此做了一次完整的Angular容器部署。

以下我会阐述ng-alain整个过程，其中包括Docker、Nginx、Let'sSencrypt证书等范涛，我无法保证新手可以很好的阅读她，不过你可以通过一些文章关键字在搜索引擎获得更多资料。

我们知道Docker有两个很重要的概念：镜像、容器。而Anguar容器部署只需要把Angular构建的生产环境（例如：ngbuild-prod）产生的目录dist写入至一个静态服务器镜像（例如：Nginx），最后实例这个镜像。

一、构建Angular镜像

1、编译Angular

一般而言会把Angular构建也在一个容器内完成，在Angular项目根目录下创建Dockerfile.compile文件：

FROMnode:8

LABELauthors="cipchk"

WORKDIR/usr/src/app

COPYpackage.jsonpackage.json

RUNnpmconfigsetregistryhttps://registry.npm.taobao.org\
&&npmi

COPY..

RUNngbuild--prod

FROM指定一个node基础镜像，这是构建Angular项目的最简的基本
LABEL镜像元数据，例如authors作者信息
WORKDIR指定镜像内工作目录
COPY复制项目package.json并安装依赖包
RUN复制项目文件后并执行ngbuild命令

最后，执行构建镜像命令：

dockerbuild-fDockerfile.build-tng-app-build.

其中ng-app-build表示镜像名称。

2、Angular运行环境

我们并不会基于编译Angular镜像基础上构建Angualr运行环境镜像，因此里头包括很多无意义的文件，例如npmi产生的node_modules。而是从上述镜像提取dist目录，并产生一个新镜像；Angular运行环境应该是一个干净、简单的。

因此，从编译Angular镜像提取dist：

#运行编译Angular镜像
dockerrun--nameng-app-buildng-app-build
#将`dist`复制到项目根目录下
dockercpng-app-build:/usr/src/app/dist./dist/
#删除编译Angular镜像实例
dockerrm-fng-app-build

注意：容器路径必须上一步Angular编译的WORKDIR路径

最后，在Angular项目根目录下创建Dockerfile.package文件：

FROMnginx

COPY_nginx/default.conf/etc/nginx/conf.d/

RUNrm-rf/usr/share/nginx/html/*

COPY/dist/usr/share/nginx/html

CMD["nginx","-g","daemonoff;"]

参数和上一节略同，只是将提取的dist写入到镜像内的Nginx默认运行目录里。

同时把Angular项目的_nginx/default.conf作为Nginx的配置文件，在项目里包括Nginx配置，像使用HTML5路由策略时需要处理404问题、GZip等。

但是我比较建设这里的Nginx配置应该极简单化，把一些GZip、SSL统一在反向代理层上完成，毕竟容器化后的应用不可能在一台机器上只部署一个应用。

以下是一个Angular应用最简化的配置信息：

server{
listen80;

server_namelocalhost;

location/{
root/usr/share/nginx/html;
indexindex.htmlindex.htm;
try_files$uri$uri//index.html;
}

error_page500502503504/50x.html;
location=/50x.html{
root/usr/share/nginx/html;
}
}

try_files可以保证当访问的路径未找到文件时直接使用index.html文件替代，这也就是AngularHTML5路由策略很重要的一环。

最后，构建生产环境镜像：

dockerbuild-fDockerfile-tng-app.

当然，这个时候的编译Angular镜像已经没有存在的意义了。

dockerrmi-fng-app-build

二、运行Angular

我们可以查看已经存在的镜像：

dockerimages

当然，上述在Nginx配置采用的是一个80端口，因此可以直接使用：

dockerrun-d-p80:80\
--nameweb\
ng-app

若你域名绑定了该主机，则可以直接访问。至此，已经是Angular容器化后所有内容，下面是关于Nginx反向代理Docker应用的部分，若你已经这么做，那直接忽略下一章节。

Nginx反向代理

绝大多数情况下会利用一个代理服务器容器，来转发多个站点，因此很少会直接在一个Angular站点里直接使用80端口，而是透过另一个代理层进行转发。

在之前我尝试使用jwilder/nginx-proxy镜像来处理，它真的非常方便，但是在SSL环节让我吃了很多苦头，最后放弃之，而改用直接在主机上安装Nginx作为反向代理。
在Angular容器化过程中，我们并未配置任何SSL、GZip等，只是保留Nginx服务所需的配置项而已，而这一部分我们可以放在反向代理层完成。

这个过程包括三个步骤：安装Nginx、安装acme.sh签发Let'sSencrypt证书、配置并运行Nginx。

1、安装Nginx

以CenOS7为例，更多系统请自行Google：

sudoyuminstallepel-release
sudoyuminstallnginx
#启动Nginx
sudosystemctlstartnginx

2、通过acme.sh签发证书

acme.sh是国内一大牛写的用于简化申请Let'sSencrypt证书，并自动续签证书，几乎上第一次安装完全后，后续都无须人工干预。

Let'sSencrypt不久前发布支持泛域，因此这一次也是申请了*.ng-alain.com泛域证书。

安装acem.sh：

curlhttps://get.acme.sh|sh

这里我使用DNS来签发证书，目前支持几十种服务商，当然包括阿里云：

exportAli_Key="aaaaaaaaaaa"
exportAli_Secret="xxxxxxxxxxxxxxxx"
acme.sh--issue--dnsdns_ali-dng-alain.com-d*.ng-alain.com

Ali_Key和Ali_Secret是对应的阿里云的Accesskey，注意要给予DNS授权。

最后，利用--installcert来提取Nginx所需要的证书文件。

acme.sh--installcert\
-dng-alain.com\
--key-file$(pwd)/proxy/certs/ng-alain.com.key\
--fullchain-file$(pwd)/proxy/certs/fullchain.cer\
--reloadcmd"servicenginxforce-reload"

acme.sh会纪录这行命令的所有细节，并且当自动续签触发后再一次执行它们。其中servicenginxforce-reload是指命令执行完成后重启nginx使启证书立刻生效。

整个过程我非常顺利，没有任何错误，acme.sh也有很多说明文档，包括中文，有关更多细节请自行阅读。

3、运行Nginx

之前在安装Nginx时我们就已经启动了，那么，我们只需要对/etc/nginx/nginx.conf编写一些Nginx配置即可。

有两个主要细节：SSL配置和代理转化Angular容器实例端口的配置。

对于前者，若你在运行上述命令时依然保持路径的话，则：

ssl_certificate/root/proxy/certs/fullchain.cer;
ssl_certificate_key/root/proxy/certs/ng-alain.com.key;
ssl_session_timeout30m;
ssl_protocolsTLSv1TLSv1.1TLSv1.2;
ssl_ciphersECDH+AESGCM:DH+AESGCM:ECDH+AES256:DH+AES256:ECDH+AES128:DH+AES:ECDH+3DES:DH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aNULL:!MD5:!DSS;
ssl_session_cacheshared:SSL:10m;
ssl_prefer_server_cipherson;

而对于代理转化，这其决于你映射Angular容器的端口，例如上述在运行容器的命令是这样：

dockerrun-d-p80:80\
--nameweb\
ng-app

我们可以重新换另一个映射端口，例如：8001。

dockerkillweb
dockerrun-d-p8001:80\
--nameweb\
ng-app

然后在Nginx配置相应的代理转化：

server{
listen80;
server_nameng-alain.comwww.ng-alain.com;
return301https://$server_name$request_uri;
}

server{
listen443sslhttp2;
server_nameng-alain.comwww.ng-alain.com;

location/{
proxy_passhttp://127.0.0.1:8001/;
}
}

server这里有两个分别对80和443，前者强制跳转https，当你不希望用户使用http访问你站点时。
server_name指定监听的域名
proxy_pass指定代理转发域，8001端口就是上述Angular应用所处容器所映射的端口

配置文件保持后，你可以先执行nginx-t来校验配置文件是否正确。

最后，重启Nginx。

servicenginxforce-reload

三、持续部署

上述有系列的Docker命令甚是繁琐，应该把这一切自动化，有个专业名称叫：持续部署（简称：cd）；ng-alain.com现在是使用DaoCloud完成这项工作。

DaoCloud提供一种叫【安全镜像】的构建功能，分为三个步骤——编译、提取、打包；等同上述Angular项目的编译、提供和发布。

只需要在项目下创建daocloud.yml；它是DaoCloud提供的一种自定义项目流程的定义文件，若你对上述已经了解，再来看它就不会非常陌生。以下是ng-alain.com完整的daocloud.yml内容：

version:3
stages:
-compile
-deploy
release:
stage:compile
job_type:lite_image_build
only:
branches:
-master
allow_failure:false
compile:
build_dir:/
cache:false
dockerfile_path:/Dockerfile.compile
extract:
-/usr/src/app/dist
-/usr/src/app/_nginx/default.conf
package:
build_dir:/
cache:false
dockerfile_path:/Dockerfile.package
self:
stage:deploy
job_type:DCS_deploy
only:
branches:
-master
allow_failure:false
dependencies:
-release
app_name:web
cluster_id:""

注意：其中extract务必包含完整路径。

四、总结

将生产环境容器化已经是一种架构标准，上述只是在部署ng-alain.com的一些总结，实际可能遇到的问题会更多，大家可以通过以下找到答案：

Docker—从入门到实践
Docker问答录（100问）
DaoCloudServices文档

当然，未来Angularcli也将会内置Docker部署，这里有一份来自Angular的相关ngdocker命令的设计文档。

以上所有代码可以在delon上找得到，可能存在个人路径不同罢了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Angular 容器部署的方法

热门推荐

随机推荐