這篇文章主要介紹Angular容器如何部署，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是一家專業(yè)提供梁子湖企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為梁子湖眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

一、構(gòu)建Angular鏡像

1、編譯Angular

一般而言會(huì)把 Angular 構(gòu)建也在一個(gè)容器內(nèi)完成，在 Angular 項(xiàng)目根目錄下創(chuàng)建 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 指定一個(gè) node 基礎(chǔ)鏡像，這是構(gòu)建 Angular 項(xiàng)目的最簡(jiǎn)的基本

2. LABEL 鏡像元數(shù)據(jù)，例如 authors 作者信息

3. WORKDIR 指定鏡像內(nèi)工作目錄

4. COPY 復(fù)制項(xiàng)目 package.json 并安裝依賴包

5. RUN 復(fù)制項(xiàng)目文件后并執(zhí)行 ng build 命令

最后，執(zhí)行構(gòu)建鏡像命令：

docker build -f Dockerfile.build -t ng-app-build .

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

2、Angular 運(yùn)行環(huán)境

我們并不會(huì)基于編譯 Angular 鏡像基礎(chǔ)上構(gòu)建 Angualr 運(yùn)行環(huán)境鏡像，因此里頭包括很多無(wú)意義的文件，例如 npm i 產(chǎn)生的 node_modules。而是從上述鏡像提取 dist 目錄，并產(chǎn)生一個(gè)新鏡像；Angular 運(yùn)行環(huán)境應(yīng)該是一個(gè)干凈、簡(jiǎn)單的。

因此，從編譯 Angular 鏡像提取 dist：

# 運(yùn)行編譯 Angular 鏡像
docker run --name ng-app-build ng-app-build
# 將 `dist` 復(fù)制到項(xiàng)目根目錄下
docker cp ng-app-build:/usr/src/app/dist ./dist/
# 刪除編譯 Angular 鏡像實(shí)例
docker rm -f ng-app-build

注意： 容器路徑必須上一步 Angular 編譯的 WORKDIR 路徑

最后，在 Angular 項(xiàng)目根目錄下創(chuàng)建 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;"]

參數(shù)和上一節(jié)略同，只是將提取的 dist 寫入到鏡像內(nèi)的 Nginx 默認(rèn)運(yùn)行目錄里。

同時(shí)把 Angular 項(xiàng)目的 _nginx/default.conf 作為 Nginx 的配置文件，在項(xiàng)目里包括 Nginx 配置，像使用HTML5路由策略時(shí)需要處理 404 問(wèn)題、GZip等。

但是我比較建設(shè)這里的 Nginx 配置應(yīng)該極簡(jiǎn)單化，把一些 GZip、SSL 統(tǒng)一在反向代理層上完成，畢竟容器化后的應(yīng)用不可能在一臺(tái)機(jī)器上只部署一個(gè)應(yīng)用。

以下是一個(gè) Angular 應(yīng)用最簡(jiǎn)化的配置信息：

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 可以保證當(dāng)訪問(wèn)的路徑未找到文件時(shí)直接使用 index.html 文件替代，這也就是 Angular HTML5 路由策略很重要的一環(huán)。

最后，構(gòu)建生產(chǎn)環(huán)境鏡像：

docker build -f Dockerfile -t ng-app .

當(dāng)然，這個(gè)時(shí)候的編譯 Angular 鏡像已經(jīng)沒(méi)有存在的意義了。

docker rmi -f ng-app-build

二、運(yùn)行Angular

我們可以查看已經(jīng)存在的鏡像：

docker images

當(dāng)然，上述在 Nginx 配置采用的是一個(gè) 80 端口，因此可以直接使用：

docker run -d -p 80:80 \
  --name web \
  ng-app

若你域名綁定了該主機(jī)，則可以直接訪問(wèn)。至此，已經(jīng)是 Angular 容器化后所有內(nèi)容，下面是關(guān)于 Nginx 反向代理 Docker 應(yīng)用的部分，若你已經(jīng)這么做，那直接忽略下一章節(jié)。

Nginx 反向代理

絕大多數(shù)情況下會(huì)利用一個(gè)代理服務(wù)器容器，來(lái)轉(zhuǎn)發(fā)多個(gè)站點(diǎn)，因此很少會(huì)直接在一個(gè) Angular 站點(diǎn)里直接使用 80 端口，而是透過(guò)另一個(gè)代理層進(jìn)行轉(zhuǎn)發(fā)。

在之前我嘗試使用jwilder/nginx-proxy 鏡像來(lái)處理，它真的非常方便，但是在SSL環(huán)節(jié)讓我吃了很多苦頭，最后放棄之，而改用直接在主機(jī)上安裝 Nginx 作為反向代理。
在Angular容器化過(guò)程中，我們并未配置任何 SSL、GZip 等，只是保留 Nginx 服務(wù)所需的配置項(xiàng)而已，而這一部分我們可以放在反向代理層完成。

這個(gè)過(guò)程包括三個(gè)步驟：安裝 Nginx、安裝 acme.sh 簽發(fā) Let's Sencrypt 證書、配置并運(yùn)行 Nginx。

1、安裝Nginx

以 CenOS7 為例，更多系統(tǒng)請(qǐng)自行Google：

sudo yum install epel-release
sudo yum install nginx
# 啟動(dòng)Nginx
sudo systemctl start nginx

2、通過(guò)acme.sh簽發(fā)證書

acme.sh 是國(guó)內(nèi)一大牛寫的用于簡(jiǎn)化申請(qǐng) Let's Sencrypt 證書，并自動(dòng)續(xù)簽證書，幾乎上第一次安裝完全后，后續(xù)都無(wú)須人工干預(yù)。

Let's Sencrypt 不久前發(fā)布支持泛域，因此這一次也是申請(qǐng)了 *.ng-alain.com 泛域證書。

安裝 acem.sh：

curl https://get.acme.sh | sh

這里我使用DNS來(lái)簽發(fā)證書，目前支持幾十種服務(wù)商，當(dāng)然包括阿里云：

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 是對(duì)應(yīng)的阿里云的 Access key，注意要給予 DNS 授權(quán)。

最后，利用 --installcert 來(lái)提取 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 會(huì)紀(jì)錄這行命令的所有細(xì)節(jié)，并且當(dāng)自動(dòng)續(xù)簽觸發(fā)后再一次執(zhí)行它們。其中 service nginx force-reload 是指命令執(zhí)行完成后重啟 nginx 使啟證書立刻生效。

整個(gè)過(guò)程我非常順利，沒(méi)有任何錯(cuò)誤，acme.sh 也有很多說(shuō)明文檔，包括中文，有關(guān)更多細(xì)節(jié)請(qǐng)自行閱讀。

3、運(yùn)行 Nginx

之前在安裝 Nginx 時(shí)我們就已經(jīng)啟動(dòng)了，那么，我們只需要對(duì) /etc/nginx/nginx.conf 編寫一些 Nginx 配置即可。

有兩個(gè)主要細(xì)節(jié)：SSL配置和代理轉(zhuǎn)化Angular容器實(shí)例端口的配置。

對(duì)于前者，若你在運(yùn)行上述命令時(shí)依然保持路徑的話，則：

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;

而對(duì)于代理轉(zhuǎn)化，這其決于你映射Angular容器的端口，例如上述在運(yùn)行容器的命令是這樣：

docker run -d -p 80:80 \
  --name web \
  ng-app

我們可以重新?lián)Q另一個(gè)映射端口，例如：8001。

docker kill web
docker run -d -p 8001:80 \
  --name web \
  ng-app

然后在 Nginx 配置相應(yīng)的代理轉(zhuǎn)化：

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 這里有兩個(gè)分別對(duì) 80 和 443，前者強(qiáng)制跳轉(zhuǎn) https，當(dāng)你不希望用戶使用 http 訪問(wèn)你站點(diǎn)時(shí)。

2. server_name 指定監(jiān)聽(tīng)的域名

3. proxy_pass 指定代理轉(zhuǎn)發(fā)域，8001 端口就是上述 Angular 應(yīng)用所處容器所映射的端口

配置文件保持后，你可以先執(zhí)行 nginx -t 來(lái)校驗(yàn)配置文件是否正確。

最后，重啟 Nginx。

service nginx force-reload

三、持續(xù)部署

上述有系列的 Docker 命令甚是繁瑣，應(yīng)該把這一切自動(dòng)化，有個(gè)專業(yè)名稱叫：持續(xù)部署（簡(jiǎn)稱：cd）；ng-alain.com 現(xiàn)在是使用DaoCloud 完成這項(xiàng)工作。

DaoCloud 提供一種叫【安全鏡像】的構(gòu)建功能，分為三個(gè)步驟——編譯、提取、打包；等同上述 Angular 項(xiàng)目的編譯、提供和發(fā)布。

只需要在項(xiàng)目下創(chuàng)建 daocloud.yml；它是 DaoCloud 提供的一種自定義項(xiàng)目流程的定義文件，若你對(duì)上述已經(jīng)了解，再來(lái)看它就不會(huì)非常陌生。以下是 ng-alain.com 完整的 daocloud.yml 內(nèi)容：

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 務(wù)必包含完整路徑。

以上是“Angular容器如何部署”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)名稱：Angular容器如何部署-創(chuàng)新互聯(lián)
文章來(lái)源：http://www.rwnh.cn/article22/ccisjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、商城網(wǎng)站、云服務(wù)器、網(wǎng)站建設(shè)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)