Comments (4)
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.
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.
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.
Related convo on the Discord: https://discord.com/channels/686873244791210014/1249887793082138758/1249887793082138758
from open-saas.
Related Issues (20)
- Potentially improve the docs for file upload
- No stripe webhook trigger + cumulative subscription HOT 2
- update openAI sdk to latest version
- Add zod checks to social auth user fields getters
- setUsername.ts does more than the name says
- Drop (or modify) the suggestion to update your open-saas app HOT 1
- SendGris Issue HOT 1
- improve opensaas app_diff patching instructions for mac
- Consider gitignoring package-lock.json in template/app and opensaas-sh/app(_diff) HOT 2
- type fileArgs -> rename to type FileDescription (in server/actions.ts)
- Avast says opensaas.sh is malicious! HOT 20
- SDK Build Error HOT 1
- e2e tests failing with cookie banner check HOT 1
- Stripe Integration, address and Name HOT 6
- 【feature request】lemon squeezy HOT 2
- deploy open-saas on AWS HOT 1
- onAuthSucceededRedirectTo value isn't respected when the user visits login route post successful auth HOT 9
- Refactor <Link /> components from React-Router to Wasp Links HOT 1
- Deepen the feature-set for subscriptions / e commerce
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from open-saas.