首頁 > web前端 > js教程 > 主體

Angular容器部署步驟詳解

php中世界最好的语言
發布: 2018-04-28 11:37:51
原創
1838 人瀏覽過

這次帶給大家Angular容器部署步驟詳解,Angular容器部署的注意事項有哪些,下面就是實戰案例,一起來看一下。

以下我會闡述ng-alain 整個過程,其中包括Docker、Nginx、Let's Sencrypt 證書等範濤,我無法保證新手可以很好的閱讀她,不過你可以通過一些文章關鍵字在搜索引擎獲得更多資料。

我們知道Docker有兩個很重要的概念:映像檔、容器。而Anguar容器部署只需要把Angular建置的生產環境(例如:ng build -prod)產生的目錄 dist 寫入到一個靜態伺服器鏡像(例如:Nginx),最後實例這個鏡像。

一、建構Angular鏡像

#1、編譯Angular

一般而言會把Angular 建置也在一個容器內完成,在Angular 專案根目錄下建立Dockerfile.compile 檔案:

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
登入後複製
  1. FROM 指定一個node 基礎映像,這是建置Angular 專案的最簡的基本

  2. LABEL 鏡像元數據,例如authors 作者資訊

  3. WORKDIR 指定鏡像內工作目錄

  4. #COPY 複製專案package.json 並安裝依賴套件

  5. RUN 複製專案檔後並執行ng build 指令

最後,執行建立鏡像指令:

docker build -f Dockerfile.build -t ng-app-build .
登入後複製

其中ng-app-build 表示鏡像名稱。

2、Angular 運行環境

我們並不會基於編譯Angular 鏡像基礎上構建Angualr 運行環境鏡像,因此裡頭包括很多無意義的文件,例如npm i 產生的node_modules。而是從上述鏡像提取 dist 目錄,並產生一個新鏡像;Angular 運行環境應該是一個乾淨、簡單的。

因此,從編譯Angular 映像提取dist:

# 运行编译 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 編譯的WORKDIR 路徑

最後,在Angular 專案根目錄下建立Dockerfile .package 檔案:

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;"]
登入後複製

參數和上一節略同,只是將提取的dist 寫入到鏡像內的Nginx 預設運行目錄裡。

同時把 Angular 專案的 _nginx/default.conf 作為 Nginx 的設定檔,在專案裡包含 Nginx 配置,像使用HTML5路由策略時需要處理 404 問題、GZip等。

但是我比較建造這裡的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;
  }
}
登入後複製

try_files 可以保證當存取的路徑找不到檔案時直接使用index.html 檔案替代,也就是Angular HTML5 路由策略很重要的一環。

最後,建構生產環境鏡像:

docker build -f Dockerfile -t ng-app .
登入後複製

當然,這個時候的編譯 Angular 鏡像已經沒有存在的意義了。

docker rmi -f ng-app-build
登入後複製

二、運行Angular

我們可以查看已經存在的映像:

docker images
登入後複製

當然,上述在Nginx 配置採用的是一個80 端口,因此可以直接使用:

docker run -d -p 80:80 \
  --name web \
  ng-app
登入後複製
登入後複製

如果你網域綁定了該主機,則可以直接存取。至此,已經是 Angular 容器化後所有內容,以下是關於 Nginx 反向代理 Docker 應用的部分,若你已經這麼做,那直接忽略下一章節。

Nginx 反向代理

絕大多數情況下會利用一個代理伺服器容器,來轉發多個站點,因此很少會直接在一個Angular 站點裡直接使用80 端口,而是透過另一個代理層進行轉送。

在之前我尝试使用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
登入後複製

Ali_Key 和 Ali_Secret 是对应的阿里云的 Access key,注意要给予 DNS 授权。

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

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 会纪录这行命令的所有细节,并且当自动续签触发后再一次执行它们。其中 service nginx force-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_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
登入後複製
登入後複製

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

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/;
  }
}
登入後複製
  1. server 这里有两个分别对 80 和 443,前者强制跳转 https,当你不希望用户使用 http 访问你站点时。

  2. server_name 指定监听的域名

  3. proxy_pass 指定代理转发域,8001 端口就是上述 Angular 应用所处容器所映射的端口

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

最后,重启 Nginx。

service nginx force-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 问)
DaoCloud Services 文档

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

以上所有程式碼可以在 delon 上找得到,可能存在個人路徑不同罷了。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

js中el表達式怎樣做出非空判斷

VUE對ElTableColumn進行擴充

以上是Angular容器部署步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板