GCP (Google Cloud Platform) - Nginx + 靜態網站部署在 GCE (Google Compute Engine) 教學

紀錄一下如何在 GCE 上部署 Nginx + 靜態網站,其實方法有很多,當然最不需要手動的方式不外乎還是 Docker 的方式去部署。沒有太多時間解釋,有空再補 XD,順便有空補 UI 的方式部署~

方法一 (手動無極限)

  1. 建立 VM

    1
    gcloud compute instances create <vm_name> --machine-type n1-standard-2 --tags http-server --zone [your_zone]
  2. SSH 進去到 VM

    1
    gcloud compute ssh <vm_name> --zone [YOUR_ZONE]
    • 安裝 Nginx&Git

      1
      2
      3
      4
      5
      6
      7
      8
      # 取得root權限
      sudo su -
      # 更新OS
      apt-get update
      # 安裝Nginx
      apt-get install -y nginx
      # 安裝Git
      apt-get install -y git
    • 刪除 Nginx 預設的頁面

      1
      rm -f /etc/nginx/sites-enabled/default
    • Clone 靜態網站專案

      1
      git clone https://gitlab.com/KennyChenFight/nginx-html-demo.git
    • 複製專案內的 Nginx 設定檔、相關 html 檔案

      1
      2
      cp ./nginx-html-demo/nginx.conf /etc/nginx/conf.d
      cp ./nginx-html-demo/demo.html /var/www/html
    • Nginx 重新 reload 配置

      1
      /etc/init.d/nginx reload
  3. 開啟 VM 的 External IP 即可看到~

方法二 (少數手動 + Docker)

  1. 建立 VM

    1
    gcloud compute instances create <vm_name> --machine-type n1-standard-2 --tags http-server --zone [your_zone]
  2. SSH 進去到 VM

    1
    gcloud compute ssh <vm_name> --zone [YOUR_ZONE]
    • 安裝 Docker

      1
      2
      3
      4
      5
      6
      # 取得root權限
      sudo su -
      # 安裝Docker
      curl -fsSL https://get.docker.com -o get-docker.sh
      sudo sh get-docker.sh
      sudo usermod -aG docker <username>
    • Clone 靜態網站專案

      1
      git clone https://gitlab.com/KennyChenFight/nginx-html-demo.git
    • docker build & run

      1
      2
      3
      cd nginx-html-demo/
      docker build . -t nginx-html-demo
      docker run --name nginx-container -p 80:80 -d nginx-html-demo
  3. 開啟 VM 的 External IP 即可看到~

方法三 (加入 start-script)

  1. local 啟動 start-script

    1. 本地 Clone 靜態網站專案

      1
      git clone https://gitlab.com/KennyChenFight/nginx-html-demo.git
    2. 建立 VM + 啟動 start-script

      1
      gcloud compute instances <vm_name> --metadata-from-file startup-script=./nginx-html-demo/start-script-1.sh --tags http-server --zone [your_zone]
    3. 要等一段時間在開 External IP~

方法四 (直接使用 GCE+GCR)

  1. 本地 Clone 靜態網站專案

    1
    git clone https://gitlab.com/KennyChenFight/nginx-html-demo.git
  2. 本地 docker build

    1
    2
    cd nginx-html-demo
    docker build . -t nginx-html-demo
  3. tag docker image

    1
    docker tag nginx-html-demo gcr.io/<project_id>/nginx-html-demo:v1
  4. push image to gcr

    1
    docker push gcr.io/<project_id>/nginx-html-demo:v1
  5. 建立 VM 並指定 container

    1
    gcloud compute instances create-with-container <vm_name> --container-image gcr.io/<project_id>/nginx-html-demo:v1 --tags http-server --zone [your_zone]
  6. 開啟 VM 的 External IP 即可看到~

如何更新 VM 上的容器?

先 push 到 gcr 上,接著利用指令更新

1
2
gcloud compute instances update-container <vm_name> \
--container-image gcr.io/<project_id>/nginx-html-demo:<version>

最後最後!請聽我一言!

如果你還沒有註冊 Like Coin,你可以在文章最下方看到 Like 的按鈕,點下去後即可申請帳號,透過申請帳號後可以幫我的文章按下 Like,而 Like 最多可以點五次,而你不用付出任何一塊錢,就能給我寫這篇文章的最大的回饋!