Giter VIP home page Giter VIP logo

Comments (4)

Martinsos avatar Martinsos commented on July 19, 2024 1

The backend URL is a bit ugly, additionally it is not under the same domain so you might run under CORS issues. Firebase offers automatic redirect to the cloud run backend directly from your website, I still need to crack that part !

While Firebase does offer a way to rewrite routes to send all requests to e.g. example.com/api towards the server, we concluded that better option is, if we do want to have server on the same domain as the client, to go with a subdomain instead (e.g. api.example.com) as it provides multiple benefits and is easier to set up (DNS configuration + a bit of config on the GCP side).

from open-saas.

TomDarmon avatar TomDarmon commented on July 19, 2024

Optional, but if you need to see every steps as one big script I've made github actions for my CD. This might give a global overview of the steps to follow:

backend-cd.yml

name: Deploy to Cloud Run on merge

on:
  push:
    branches:
      - main

jobs:
  build_and_deploy_backend:
    runs-on: ubuntu-latest

    env:
      # Env variables
      GCP_PROJECT_ID: ${{ vars.GCP_PROJECT_ID }}
      WASP_SERVER_URL_DEV: ${{ vars.WASP_SERVER_URL_DEV }}
      WASP_WEB_CLIENT_URL_DEV: ${{ vars.WASP_WEB_CLIENT_URL_DEV }}
      ADMIN_EMAILS_DEV: ${{ vars.ADMIN_EMAILS_DEV }}
      # Secrets
      DATABASE_URL_DEV: ${{ secrets.DATABASE_URL_DEV }}
      SERVICE_ACCOUNT: ${{ secrets.SERVICE_ACCOUNT }}
      GOOGLE_CLIENT_ID_DEV: ${{ secrets.GOOGLE_CLIENT_ID_DEV }}
      GOOGLE_CLIENT_SECRET_DEV: ${{ secrets.GOOGLE_CLIENT_SECRET_DEV }}
      HOBBY_SUBSCRIPTION_PRICE_ID_DEV: ${{ secrets.HOBBY_SUBSCRIPTION_PRICE_ID_DEV }}
      PRO_SUBSCRIPTION_PRICE_ID_DEV: ${{ secrets.PRO_SUBSCRIPTION_PRICE_ID_DEV }}
      SENDGRID_API_KEY_DEV: ${{ secrets.SENDGRID_API_KEY_DEV }}
      STRIPE_KEY_DEV: ${{ secrets.STRIPE_KEY_DEV }}
      STRIPE_WEBHOOK_SECRET_DEV: ${{ secrets.STRIPE_WEBHOOK_SECRET_DEV }}
      JWT_SECRET_DEV: ${{ secrets.JWT_SECRET}}

    steps:
      - uses: actions/checkout@v4

      - name: Build Docker Image
        run: |
          curl -sSL https://get.wasp-lang.dev/installer.sh | sh
          cd app
          wasp build
          cd .wasp/build
          docker build -t backend-image -f Dockerfile .
          docker tag backend-image europe-west1-docker.pkg.dev/${{ env.GCP_PROJECT_ID }}/backend/backend-image:${{ github.sha }}

      - name: Authenticate to GCP
        uses: google-github-actions/auth@v1
        with:
          credentials_json: ${{ secrets.SERVICE_ACCOUNT }}

      - name: Configure Docker
        run: |
          gcloud auth configure-docker europe-west1-docker.pkg.dev

      - name: Push Docker Image
        run: |
          docker push europe-west1-docker.pkg.dev/${{ env.GCP_PROJECT_ID }}/backend/backend-image:${{ github.sha }}

      - name: Deploy to Cloud Run
        run: |
          gcloud run deploy backend \
            --image europe-west1-docker.pkg.dev/${{ env.GCP_PROJECT_ID }}/backend/backend-image:${{ github.sha }} \
            --project ${{ env.GCP_PROJECT_ID }} \
            --platform managed \
            --region europe-west1 \
            --max-instances 2 \
            --min-instances 0 \
            --allow-unauthenticated \
            --set-env-vars "DATABASE_URL=${{ env.DATABASE_URL_DEV }}" \
            --set-env-vars "STRIPE_KEY=${{ env.STRIPE_KEY_DEV }}" \
            --set-env-vars "GOOGLE_CLIENT_ID=${{ env.GOOGLE_CLIENT_ID_DEV }}" \
            --set-env-vars "GOOGLE_CLIENT_SECRET=${{ env.GOOGLE_CLIENT_SECRET_DEV }}" \
            --set-env-vars "HOBBY_SUBSCRIPTION_PRICE_ID=${{ env.HOBBY_SUBSCRIPTION_PRICE_ID_DEV }}" \
            --set-env-vars "PRO_SUBSCRIPTION_PRICE_ID=${{ env.PRO_SUBSCRIPTION_PRICE_ID_DEV }}" \
            --set-env-vars "SENDGRID_API_KEY=${{ env.SENDGRID_API_KEY_DEV }}" \
            --set-env-vars "STRIPE_WEBHOOK_SECRET=${{ env.STRIPE_WEBHOOK_SECRET_DEV }}" \
            --set-env-vars "WASP_SERVER_URL=${{ env.WASP_SERVER_URL_DEV }}" \
            --set-env-vars "WASP_WEB_CLIENT_URL=${{ env.WASP_WEB_CLIENT_URL_DEV }}" \
            --set-env-vars "ADMIN_EMAILS=${{ env.ADMIN_EMAILS_DEV }}" \
            --set-env-vars "JWT_SECRET=${{ env.JWT_SECRET_DEV }}"

frontend-cd.yml

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - main

jobs:
  build_and_deploy_frontend:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: |
          curl -sSL https://get.wasp-lang.dev/installer.sh | sh
          cd app
          wasp build
          cd .wasp/build/web-app
          npm install
          REACT_APP_API_URL=${{ vars.WASP_SERVER_URL_DEV }}
          npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.SERVICE_ACCOUNT }}
          channelId: live
          projectId: ${{ vars.GCP_PROJECT_ID }}

from open-saas.

Martinsos avatar Martinsos commented on July 19, 2024

This is awesome, thanks @TomDarmon !

We can use this as a good foundation for writing the docs for deploying to GCP.

CI action is also quite useful!

from open-saas.

Martinsos avatar Martinsos commented on July 19, 2024

Related convo on the Discord: https://discord.com/channels/686873244791210014/1249887793082138758/1249887793082138758

from open-saas.

Related Issues (20)

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.