iT邦幫忙

2021 iThome 鐵人賽

0
Modern Web

網站一條龍 - 從架站到前端系列 第 31

[Day31] 佈署 Angular App 到 GPC VM

呼...這兩天稍作休息終於復活了。

到目前為止,我們的 Angular app 還只能在本機自 high,今天我們就要來把 Angular 佈署到 GCP 的 VM 上,這樣我們就隨時隨地能夠瀏覽我們自己做的網頁了。

在 VM 上安裝 Angular CLI

我們需要 Angular CLI 來幫我們建置 app,建置完才能夠佈署這些編譯成 js 的檔案。首先,我們一樣要安裝 Node.js,再透過 Node.js 安裝 Angular CLI。不過,如果直接輸入 yum install nodejs 會裝到很奇怪的版本,所以我們會需要先透過 curl 來把最新的 Node.js 加入 yum 的 repository 中
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash

GCP 的 CentOS 內建 curl 所以可以直接執行指令,使用其他平台的邦友可能會需要先安裝 curl
sudo yum install curl

加入完成之後就能用 yum 安裝 Node.js
sudo yum install nodejs

接著,就透過 npm 安裝 Angular CLI
npm install -g @angular/cli

建置 Angular App

在建置 app 之前,我們一樣先透過 Git 把原始碼抓到 VM 上
cd /ironman # 一樣先跳到整個網頁(含前後端)的資料夾
sudo mkdir angular_app # 建立一個放前端 code 的資料夾

然後 clone 我們的原始碼
cd /ironman/angular_app/ # 跳到剛剛開的資料夾內
sudo git clone https://github.com/eric-yijuin-lin/ironman-frontend.git

抓完原始碼之後,我們要安裝這個專案所需要的 npm module,進到與 angular.json 同一層的地方(本範例是 /ironman/angular_app/ironman-frontend/)
cd ./ironman-frontend

然後執行 npm 指令安裝 module
sudo npm install

裝好之後,就可以執行 Angular CLI 指令建置 app,這邊我們加一個 --prod 參數,讓 Angular 幫我們套用正式環境的設定。
sudo ng build --prod

修改 Nginx 設定

因為現在我們的前端程式也要上到 VM,讓 Nginx 幫我們做反向代理,所以不能像以前一樣不管什麼 request 都轉發到 .NET API,我們需要對 Nginx 的設定檔做一些修改,讓 Angular 可以透過 request 的目標 url 決定要回傳前端頁面或打 API 做事。

使用 vim 修改我們之前為這個網站做的設定檔
sudo vi /etc/nginx/conf.d/ironman.conf

然後修改 location 區塊

# 其他不變
location / {
        root /ironman/angular_app/ironman-frontend/dist/ironman-frontend/;
        try_files $uri $uri/ /index.html;
    }

location /api {
    proxy_pass         http://127.0.0.1:5000;
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection keep-alive;
    proxy_set_header   Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto $scheme;
}
# 其他不變

上面的修改主要用意是:

  • 要打 API 變成要在根路徑後加上 /api 才轉發到 http://127.0.0.1:5000
  • 根路徑變成回傳 Angular App

root 指向我們建置完成的輸出資料夾;try_file 讓 Nginx 嘗試從 root 指到的資料夾取得 index.html 並回傳。以前我們說過,Angular 最後只會有一個 index.html,所有的互動跟頁面顯示通通透過編譯完的 js 完成,所以只要回傳這個 index.html,瀏覽器再引入(下載)這個 index.html 所需的 js 檔,我們的網頁就能順利的運作

修改 SELinux 設定

這時候如果我們很開心地馬上輸入我們的網站位址,就會看到大大的幾個字

403 Forbidden

這是因為 CentOS 的 SELinux 安全設定在作怪,所以我們這時候需要用一個指令,讓 SELinux 不會再阻擋 Nginx 讀取我們的 index.html
sudo chcon -Rt httpd_sys_content_t /ironman/angular_app/ironman-frontend/dist/ironman-frontend/

改完設定,重啟一下 Nginx
sudo nginx -s reload

然後我們就可以透過瀏覽器瀏覽我們自己做的網站了!
https://ithelp.ithome.com.tw/upload/images/20211002/20140664XLj3CKcx13.png


上一篇
[Day30] Angular 的 Routing
下一篇
[Day32] Angular Material
系列文
網站一條龍 - 從架站到前端33

尚未有邦友留言

立即登入留言