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

發表於 更新於 分類於 Disqus： 文章字數： 2.3k 所需閱讀時間 ≈ 4 分鐘

紀錄一下如何在 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 最多可以點五次，而你不用付出任何一塊錢，就能給我寫這篇文章的最大的回饋！