# 在GCP上使用Compute Engine服務，佈署Laravel與VUE專案（使用Apache2）

## 前言

本篇是根據[使用 Docker 部署專案的學習筆記](/y8ZFYerdQ-2mK-QPAqwqlA)系列內容，將專案佈署到GCP上的筆記。
大部分的佈署邏輯是相同的，只是有一些設定需要額外處理。

前端使用 **Vue**，後端使用 **Laravel**，整體通過 **Docker Compose** 來部署。
前後端運行在不同的 port 上，並通過 API 互動，實現前後端完全分離的配置。

---

## 部署步驟詳解

### 1. 建立 Google Compute Engine 實例
- 進入 [GCP](https://cloud.google.com/?hl=zh-TW)頁面，選擇使用**Compute Engine**服務，並啟動API。
- 創建 **Google Compute Engine (GCE)** 實例，有很多種方案和作業系統可以選擇。
本次使用**Ubuntu**作為OS，方案為**E2-small**。
- 要做網頁的關係，防火牆的http和https設定可以預設開啟。
沒開到也可以之後再開。
- 將外部IP改為靜態
- 進入GCP**虛擬私有雲網路**服務
- 左側選單點選**IP位置**
- 點選**預留外部靜態IP位置**
- 相關設定填一填，儲存後看到外部IP的狀態從`臨時`轉為`靜態`就成功了。

### 2. SSH、SFTP連線

#### 2-1. SSH 連線
- 進入專案的**執行個體頁面**，找到要操作的VM。
最右側點擊 **SSH** 即可從網頁端直接連線進入VM。

>[!Tip] 防火牆開啟
>我會先從網頁端進去更新把防火牆開啟，詳見[使用 Docker 部署專案的學習筆記01](/y8ZFYerdQ-2mK-QPAqwqlA)
>先打開ssh port就好。

- 使用其他SSH工具連線：
- **使用 SSH 金鑰連線**
如果希望使用自己的終端（如 GitBash 或 PuTTY），需要使用 **SSH 金鑰**進行連線。
- 在本地生成 SSH 金鑰：

      ssh-keygen -t rsa -b 4096 -C "[e-mail]"

- 按照提示生成金鑰，預設存放在 `~/.ssh/id_rsa`。
- 上傳公鑰到 VM：
- 使用 `cat`指令查看公鑰內容，或手動複製 `.ssh/id_rsa.pub` 的內容：

        cat ~/.ssh/id_rsa.pub

- 打開GCP進入console，在**Compute Engine**側欄點選進入**中繼資料**。
- 選擇**安全殼層資料**，點選**編輯**，**新增項目**。
- 將剛才複製的公鑰貼上，點選儲存。
- 使用 SSH 工具連線：

      ssh -i ~/.ssh/id_rsa username@your-instance-external-ip

>[!Tip]SSH Config
>以上設定完畢後，每次連線都必須輸入金鑰連結檔案跟username和IP
>因為很麻煩所以可以考慮設定ssh comfig
> - 在本地`~/.ssh/`新增config檔
> ```bash
> Host <host-name>
> HostName <連結的IP>
> User <使用的username>
> IdentityFile ~/.ssh/id_rsa <金鑰檔案位置>
> ```
>之後就可以直接輸入`ssh host-name`進行連線
>也可以設定多個host連線到不同IP位置，或者讓不同使用者快速連線
>
>如果有多台裝置要用同個帳號登入，只要複製**私鑰**和`config`檔放在設定的路徑，即可直接使用不用重複設定。**←有一定風險，不推薦**

#### 2-2. 使用SFTP連線

- 本次使用**FileZilla**新增站台
- 設定：
- 協定：SFTP
- 主機：<外部IP>
- 登入型式：金鑰檔案
- 使用者：<username>
- 金鑰檔案：<選擇私鑰檔案>

這樣就能成功連線，之後其他設定可以自行調整。

### 3. 用Docker-Compose佈署環境

到這邊為止，應該已經可以成功連上GCP的VM了。
接下來就可以按照以下內容佈署環境及專案內容。

[使用 Docker 部署專案的學習筆記03](/0mP9ZVcfT8-VRYFjqmfU_Q)
[使用 Docker 部署專案的學習筆記04](/HsO1HKPqRtKRWs-NdZSFGQ)

佈署完後記得打開防火牆
三個port應該可以分別顯示**Laravel歡迎頁**、**phpmyadmin**、**vue自訂頁面**
這樣就算成功了。

### 6. 設定防火牆規則
- 在 GCP 中，為你的 VM 開放以下 port：
- HTTP (`80`)
- Vue 前端 (`8083`)
- Laravel 後端 (`8081`)
- phpMyAdmin (`8082`)
- MySQL (`3307`)