All Articles

gcpで簡単にwebサイトを公開する方法

GCPでwebサイト

なぜGCP

  1. 単純に使ったことがあまりなかった
  2. AWSのAPI gatewayに疲れてきた

    方法とメリデメ

  3. GCSにhtmlをおいて静的コンテンツとして公開
  4. GAEで静的コンテンツとして公開

静的サイトホスティングの為のGCS/GAE/Firebase Hosting比較 に細かく情報が載っていますが、 今回はIP制限とhttps通信を考えてGAEを選びました。

サービス メリット デメリット
GCS https通信ができない
S3と似たやり方でできそう
IP制限ができない
GAE IP制限ができる 新しく勉強が必要

やりかた

フォルダ構造

$ tree
.
├── add_contents
│   ├── add_contents.css
│   └── add_contents.js
├── app.yaml
├── index.html
└── cloud_function
    └── sample
        └── main.py

GAEでアプリを公開する

  1. app.yamlを作成する

    runtime: python37
    # サービス名
    service: YOUR_SERVICE_NAME
    # cacheの保存期間(開発中のためかなり短め)
    default_expiration: 10s

handlers:

URL直下にきた場合に返すhtml

  • url: / static_files: index.html upload: index.html

html内で使うコンテンツ(js・cssなど)を入れたフォルダ

  • url: /addcontents staticdir: add_contents

  • 適当に index.html を作成する

  • ローカルから以下のコマンドでデプロイしてブラウザで見る。

    $ gcloud app deploy --project YOUR_PROJECT
    $ gcloud app browse -s YOUR_SERVICE_NAME --project=YOUR_PROJECT

cloudfroneでapiを作成

  1. コード保存用GCSバケットの作成

    gsutil mb -p YOUR_PROJECT gs://YOUR_BUCKET
  2. apiの中身である main.py を作成 名前は main.py でないとエラーが出ます。 main.py

    import json

def searchstore(request): headers = { “Content-Type”: “application/json” } res = { ‘statusCode’: 200, ‘body’:‘Hello world !!’ } return (json.dumps(shoplist, indent=2, ensure_ascii=False), headers)

ローカルテスト用

if name == ”main”: search_store("")

3. ローカルからデプロイ
```bash
gcloud functions deploy YOUR_FUNCTION_NAME --project YOUR_PROJECT --runtime python37 \
--stage-bucket YOUR_BUCKET --source ./cloud_function/sample/ --trigger-http
  1. firewall rules を追加する このままだと全世界から接続可能な状態のため、 もしIP制限をかける場合は firewall rules を追加する必要があります。 firewall rules はgae全てにip制限をかけることができます。 まずdefaultで全てallowになっているので、 そちらをdenyに変更して以下のコマンドで個別に許可するipを追加します。 一つの優先度につき1ipしか追加できないので注意してください。
#!/usr/bin/env bash
  
ip_ranges=(**.**.**.**/32 **.**.**.**/** **.**.**.**/**)
i=1
for ip in ${ip_ranges[@]}
do
    gcloud app firewall-rules create $(( 100 + i )) --project rls-blt-poc --action allow \
    --source-range ${ip} --description "allow connection from *** lan"
    i=${i}+1
done