Git Product home page Git Product logo

jamstack-gcloud's Introduction

Jamstack on Google Cloud

Summary

  • Strapi CMS deployed on AppEngine
  • Content on Postgres (Cloud SQL) / Media on a Cloud Storage bucket
  • Static 11ty site deployed on Cloud Storage + Cloud CDN
  • Cloud build pipeline triggered by a Strapi webhook to update website with new content
  • nip.io is used for simplicity, to provide a https url

Architecture

GCP architecture

Installation

  • Get a GCP project with a linked billing account
  • Create app engine application
  • Create a bucket for terraform state
  • Fork this repository
  • Connect your forked repository to Cloud Build
  • Set config files from templates (infra/backend.conf.template & infra/terraform.tfvars.template)

infra/backend.conf

Property Description
bucket Name of the terraform state bucket
prefix Prefix for state files in the bucket (usually tfstate/)

infra/terraform.tfvars

Property Description
project_id GCP project id.
service_src_bucket Name of the bucket that will be created to store app engine sources.
strapi_app_keys See app.keys. You can set random strings separated by a comma.
strapi_api_token_salt See apiToken.salt. You can set a random string.
strapi_admin_jwt_secret See auth.secret. You can set a random string.
strapi_jwt_secret See JWT configuration. You can set a random string.
strapi_media_bucket Name of the bucket that will be created to store strapi media files.
front_bucket Name of the bucket that will be created to store 11ty static website.
repository_owner Owner of the forked bucket (https://github.com/<repository_owner>/<repository_name>).
repository_name Name of the forked bucket (https://github.com/<repository_owner>/<repository_name>).

Run terraform

terraform init -backend-config=backend.conf
terraform plan
terraform apply

Note the outputs:

Outputs:

front_url = "<ip>.nip.io"
strapi_url = "https://strapi-dot-<project_id>.appspot.com/admin"
  • Browse Cloud Build triggers page on the GCP console
  • Click on webhook-trigger
  • Click on SHOW URL PREVIEW and copy the webhook url
  • Browse Strapi url (url in the terraform outputs)
  • Create an admin account
  • Go to Settings > Webhooks
  • Create a new webhook: set a name > paste the webhook url > enable Entry events > Save
  • Go to Settings > USERS & PERMISSIONS PLUGIN > Roles
  • Add a new role: Post > enable find & findOne > Save
  • Go to Content Manager > Post
  • Add a new entry with some images in the content and publish it
  • You shoud see a new build triggered in the Cloud Build page
  • Once the build is completed, browse the front url (url in the terraform outputs) and you should find your post in the Blog section

jamstack-gcloud's People

Contributors

femtozer avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.