iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 30
1
Modern Web

從零開始的點餐系統,Google好棒棒系列 第 30

[Day30] GCP雲端部屬說明(前後端)

How - 部屬MongoDB

  1. 登入以下網址
    https://www.mongodb.com/cloud/atlas

  2. 點選Start Free (一個Mail帳號可以提供一個免費的Sandbox 512mb空間的MongoDB)

  3. 填寫基本資料

  4. 選取Create a cluster 開始吧

  5. 選取Cloud的供應商,這邊我們選擇GCP,在選擇GCP在台灣的機房,未來也可以依照你想要提供服務的區域進行相關的選擇部屬

  6. 選擇M0 Sandbox,此為開發與測試環境,當需要部署到正式環境時可以修改設定即可不停機的狀況下輪巡升級

  7. 進階設定包含備份等機制,可以在這邊設定,不過需要付費的才有。再輸入Cluster 名稱即可點下Create

  8. 這邊如果選擇付費的服務,則會顯示價錢by hour 收費

  9. 接下來等待完成建置

  10. 建立DB使用者,並選取其角色 (https://docs.atlas.mongodb.com/security-add-mongodb-users/#database-user-privileges)



  11. 建立可連線到DB的IP白名單,很重要,建議一定要設定,避免被駭客加密勒索 (也可以設定CDN等網址進行授權)



  12. 回到Cluster,點選Connect,這裡可以依照需求選取連線方式,透過AP連線可以取得連線字串,並且可以取得對應程式語言的SampleCode,是不是很方便呢!!



  13. 到這就完成MongoDB的部屬

How - 部屬GO API

  1. 登入GCP
    https://console.cloud.google.com
  2. Creating a Cloud project
gcloud projects create PROJECT_ID
  1. Create your App Engine app
gcloud app create
  1. 準備yaml檔案 (follow Structuring your files)
runtime: go114  # or go112 or go113 for Go 1.12 or Go 1.13

instance_class: F2

env_variables:
  BUCKET_NAME: "example-gcs-bucket"

handlers:
- url: /stylesheets
  static_dir: stylesheets

- url: /(.*\.(gif|png|jpg))$
  static_files: static/\1
  upload: static/.*\.(gif|png|jpg)$

- url: /.*
  script: auto
  1. Deploy
gcloud app deploy
  1. View (https://PROJECT_ID.REGION_ID.r.appspot.com)
gcloud app browse
  1. Finished

How - 部屬Web

  1. 將Angular Project先行編譯
ng build --prod
  1. 準備app.yaml檔案
runtime: python27
api_version: 1
threadsafe: true
handlers:


# Initial route that will serve up index.html, main entry point to your app


- url: /
secure: always
static_files: {$ your app folder name}/index.html
upload: {$ your app folder name}/.*


# Routing for typedoc, assets and favicon.ico to serve directly


- url: /((?:assets|docs)/.*|favicon\.ico)
secure: always
redirect_http_response_code: 301
static_files: {$ your app folder name}/\1
upload: {$ your app folder name}/.*


# Routing for any js files
- url: /(.*\.js)
secure: always
redirect_http_response_code: 301
static_files: {$ your app folder name}/\1
upload: {$ your app folder name}/.*\.js


# Routing for any css files


- url: /(.*\.css)
secure: always
redirect_http_response_code: 301
static_files: {$ your app folder name}/\1
mime_type: text/css
upload: {$ your app folder name}/.*\.css


# Routing for anything (wild card) after
- url: /.*
secure: always
static_files: {$ your app folder name}/index.html
upload: {$ your app folder name}/.*
  1. 將Angular Build 的 dist 裡面的資料夾和 app.ymal 上傳

  2. Deploy

gcloud app deploy
  1. Finished

上一篇
[Day 29] 完成註冊功能
系列文
從零開始的點餐系統,Google好棒棒30

尚未有邦友留言

立即登入留言