Angular 容器部署
很多人反应很难访问 Github Page,所以 ng-alain.com 转移到阿里云服务器上,因此做了一次完整的 Angular 容器部署。 以下我会阐述 ng-alain 整个过程,其中包括 Docker、Nginx、Let's Sencrypt 证书等范涛,我无法保证新手可以很好的阅读她,不过你可以通过一些文章关键字在搜索引擎获得更多资料。 我们知道Docker有两个很重要的概念:镜像、容器。而Anguar容器部署只需要把Angular构建的生产环境(例如: 一、构建Angular镜像1、编译Angular一般而言会把 Angular 构建也在一个容器内完成,在 Angular 项目根目录下创建 FROM node:8 LABEL authors="cipchk <cipchk@qq.com>" WORKDIR /usr/src/app COPY package.json package.json RUN npm config set registry https://registry.npm.taobao.org && npm i COPY . . RUN ng build --prod
最后,执行构建镜像命令: docker build -f Dockerfile.build -t ng-app-build . 其中 2、Angular 运行环境我们并不会基于编译 Angular 镜像基础上构建 Angualr 运行环境镜像,因此里头包括很多无意义的文件,例如 因此,从编译 Angular 镜像提取 # 运行编译 Angular 镜像 docker run --name ng-app-build ng-app-build # 将 `dist` 复制到项目根目录下 docker cp ng-app-build:/usr/src/app/dist ./dist/ # 删除编译 Angular 镜像实例 docker rm -f ng-app-build 注意: 容器路径必须上一步 Angular 编译的 最后,在 Angular 项目根目录下创建 FROM nginx COPY _nginx/default.conf /etc/nginx/conf.d/ RUN rm -rf /usr/share/nginx/html/* COPY /dist /usr/share/nginx/html CMD ["nginx","-g","daemon off;"] 参数和上一节略同,只是将提取的 同时把 Angular 项目的 但是我比较建设这里的 Nginx 配置应该极简单化,把一些 GZip、SSL 统一在反向代理层上完成,毕竟容器化后的应用不可能在一台机器上只部署一个应用。 以下是一个 Angular 应用最简化的配置信息: server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }
最后,构建生产环境镜像: docker build -f Dockerfile -t ng-app . 当然,这个时候的编译 Angular 镜像已经没有存在的意义了。 docker rmi -f ng-app-build 二、运行Angular我们可以查看已经存在的镜像: docker images 当然,上述在 Nginx 配置采用的是一个 docker run -d -p 80:80 --name web ng-app 若你域名绑定了该主机,则可以直接访问。至此,已经是 Angular 容器化后所有内容,下面是关于 Nginx 反向代理 Docker 应用的部分,若你已经这么做,那直接忽略下一章节。 Nginx 反向代理绝大多数情况下会利用一个代理服务器容器,来转发多个站点,因此很少会直接在一个 Angular 站点里直接使用 在之前我尝试使用 jwilder/nginx-proxy 镜像来处理,它真的非常方便,但是在SSL环节让我吃了很多苦头,最后放弃之,而改用直接在主机上安装 Nginx 作为反向代理。 在Angular容器化过程中,我们并未配置任何 SSL、GZip 等,只是保留 Nginx 服务所需的配置项而已,而这一部分我们可以放在反向代理层完成。 这个过程包括三个步骤:安装 Nginx、安装 acme.sh 签发 Let's Sencrypt 证书、配置并运行 Nginx。 1、安装Nginx以 CenOS7 为例,更多系统请自行Google: sudo yum install epel-release sudo yum install nginx # 启动Nginx sudo systemctl start nginx 2、通过acme.sh签发证书acme.sh 是国内一大牛写的用于简化申请 Let's Sencrypt 证书,并自动续签证书,几乎上第一次安装完全后,后续都无须人工干预。 Let's Sencrypt 不久前发布支持泛域,因此这一次也是申请了 *.ng-alain.com 泛域证书。 安装 acem.sh: curl https://get.acme.sh | sh 这里我使用DNS来签发证书,目前支持几十种服务商,当然包括阿里云: export Ali_Key="aaaaaaaaaaa" export Ali_Secret="xxxxxxxxxxxxxxxx" acme.sh --issue --dns dns_ali -d ng-alain.com -d *.ng-alain.com
最后,利用 acme.sh --installcert -d ng-alain.com --key-file $(pwd)/proxy/certs/ng-alain.com.key --fullchain-file $(pwd)/proxy/certs/fullchain.cer --reloadcmd "service nginx force-reload" acme.sh 会纪录这行命令的所有细节,并且当自动续签触发后再一次执行它们。其中 整个过程我非常顺利,没有任何错误,acme.sh 也有很多说明文档,包括中文,有关更多细节请自行阅读。 3、运行 Nginx之前在安装 Nginx 时我们就已经启动了,那么,我们只需要对 有两个主要细节:SSL配置和代理转化Angular容器实例端口的配置。 对于前者,若你在运行上述命令时依然保持路径的话,则: ssl_certificate /root/proxy/certs/fullchain.cer; ssl_certificate_key /root/proxy/certs/ng-alain.com.key; ssl_session_timeout 30m; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers ECDH+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_cache shared:SSL:10m; ssl_prefer_server_ciphers on; 而对于代理转化,这其决于你映射Angular容器的端口,例如上述在运行容器的命令是这样: docker run -d -p 80:80 --name web ng-app 我们可以重新换另一个映射端口,例如: docker kill web docker run -d -p 8001:80 --name web ng-app 然后在 Nginx 配置相应的代理转化: server { listen 80; server_name ng-alain.com www.ng-alain.com; return 301 https://$server_name$request_uri; } server { listen 443 ssl http2; server_name ng-alain.com www.ng-alain.com; location / { proxy_pass http://127.0.0.1:8001/; } }
配置文件保持后,你可以先执行 最后,重启 Nginx。 service nginx force-reload 三、持续部署上述有系列的 Docker 命令甚是繁琐,应该把这一切自动化,有个专业名称叫:持续部署(简称:cd);ng-alain.com 现在是使用 DaoCloud 完成这项工作。 DaoCloud 提供一种叫【安全镜像】的构建功能,分为三个步骤——编译、提取、打包;等同上述 Angular 项目的编译、提供和发布。 只需要在项目下创建 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: ""
注意: 其中
四、总结将生产环境容器化已经是一种架构标准,上述只是在部署 ng-alain.com 的一些总结,实际可能遇到的问题会更多,大家可以通过以下找到答案:
当然,未来Angular cli 也将会内置 Docker 部署,这里有一份来自 Angular 的相关 ng docker 命令的设计文档。 以上所有代码可以在 delon 上找得到,可能存在个人路径不同罢了。 (完) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |