---
# System prepended metadata

title: 在GCP上使用Compute Engine服務，佈署Laravel與VUE專案（使用Apache2）
tags: [SSH, ubuntu, apache, 佈署, SFTP, docker-compose, GCP, Docker, FTP]

---

# 在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 金鑰：
      ```bash
      ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
      ```
      - 按照提示生成金鑰，預設存放在 `~/.ssh/id_rsa`。
    - 上傳公鑰到 VM：
      - 使用 `cat`指令查看公鑰內容，或手動複製 `.ssh/id_rsa.pub` 的內容：
        ```bash
        cat ~/.ssh/id_rsa.pub
        ```
      - 打開GCP進入console，在**Compute Engine**側欄點選進入**中繼資料**。
      - 選擇**安全殼層資料**，點選**編輯**，**新增項目**。
      - 將剛才複製的公鑰貼上，點選儲存。
    - 使用 SSH 工具連線：
      ```bash
      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`)
