如何使用nginx部署前端靜態網站？

這篇會使用到 Google Cloud Platform (GCP) 的 computed engine ，其實部署前端靜態網站最快的方式是用 Docker + GCP cloud run ，而且 cloud run 會給一個 https 的預覽網址。但是這次客戶要求只能先打 http 的 api ，所以只好自己用 nginx 放。

事前準備：

1. 建立一個 GCP project
2. 建立一個computed engine (以下簡稱vm)
3. 打包好的靜態網站

 

進入 vm：

你可以選擇用他們的瀏覽器終端機打開，或是複製他的進入指令，用本地的終端機進入。

安裝nginx：

$ sudo apt update 
$ sudo apt install nginx

安裝好之後，打開 vm 外部ip看看有沒有出現 nginx 預覽畫面

就是他會出現「Welecome to nginx!」的字就算安裝成功。

 

接下來要把本地檔案搬到 vm 上，其實有很多種方式：

1. 一種是你直接在 vm 安裝git，然後 clone 進去；
2. 另一種就是本地直接把打包檔案壓縮搬過去。

我這邊用的是第二種～

 

安裝解壓縮軟體：

$ sudo apt install unzip

 

在 /var/www 創建新資料夾：

$ cd /var/www 
$ sudo mkdir {projectName}

 

在~/創建新資料夾：

$ cd ~ 
$ mkdir files

 

把本地的檔案搬到遠端：要注意這邊就是在本地的路徑，也就是你的電腦。所以這個步驟你應該是開啟一個本地終端機，登入gcloud後執行的～

$ gcloud compute scp ~/project/xxx/dist.zip tasks:~/files

 

把上傳的檔案搬到 /var/www/{projectName}：

$ cd ~/files 
$ sudo mv dist.zip /var/www/{projectName}

 

解壓縮：

$ cd /var/www/{projectName} 
$ unzip dist.zip

 

寫nginx conf檔：

$ cd /etc/nginx/sites-availible 
$ sudo touch {projectName}.conf 
$ sudo vi {projectName}.conf

 

貼上以下這段：

依照自己的需求修改port之類的參數

server {     
  listen 5000;     
  root /var/www/{projectName}/dist;     
  index index.html;     
  location / {         
    try_files $uri $uri/ /index.html;     
  } 
}

 

同步.conf ：

$ sudo ln -s /etc/nginx/sites-available/{projectName}.conf /etc/nginx/sites-enabled/

 

檢查有沒有語法寫錯：

$ sudo nginx -t

 

重啟nginx：

$ sudo systemctl restart nginx

這時候再一次拜訪vm的外部ip就可以看到網站囉！

ip後面記得要加上port號。