[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

然後我们就可以透过浏览器浏览我们自己做的网站了！