GitHub Action for Google App Engine (deliverables) - google-app-engine

I am trying to set up a GitHub action to automatically deploy to Google App Engine when I push to the master branch. However, I am quite new in the pipelines. I tried to do my homework and I ended up stuck with this.
First, this is my .github/workflows/main.yml:
name: Deployment
on:
push:
branches:
- master
jobs:
deploy:
name: Deploy to App Engine
runs-on: ubuntu-latest
steps:
- name: Google App Engine
uses: google-github-actions/deploy-appengine#v0.4.0
with:
project_id: my-gae-project-id
version: master
credentials: ${{secrets.GOOGLE_APP_ENGINE_KEY}}
flags: --no-cache
deliverables: app.yaml
Now I tried to create the app.yaml in the root directory and also in the .github/workflows directory. None of them works. For now, my app.yaml is just:
runtime: php74
env: standard
Here is the outcome of my GH action everytime:
I tried to do some research and found recommendation to put the app.yaml in a folder, so I also tried .github/workflows/gae/app.yaml and then set it as deliverables: gae/app.yaml - no success. Also tried to put the path in quotes like deliverables: "gae/app.yaml" - no success. Also tried to put the app.yaml to the root and set it as deliverables: ../../app.yaml. In some cases, the app.yaml creates a new GitHub action which is even more irritating.
Now I'm just getting frustrated, because I know this is going to be something silly, but I didn't find many resources about this specific case.

There is a missing step in your main.yml that's why your workflow can't find and access the files. To fix it, add checkout#v2 action in your steps:
name: Deployment
on:
push:
branches:
- master
jobs:
deploy:
name: Deploy to App Engine
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v2
- name: Google App Engine
uses: google-github-actions/deploy-appengine#v0.4.0
with:
project_id: my-gae-project-id
version: master
credentials: ${{secrets.GOOGLE_APP_ENGINE_KEY}}
flags: --no-cache
deliverables: app.yaml
You can also visit this official github example for your reference.

Related

GitHub autodeploy node js app in Google cloud

I have successfully started my nodejs app (discord bot) in Google App engine and Google Compute Engine but i couldn't auto deploy the commits made on github
Is there and way to do those, so that if i commit a change the it should be updated in Google Cloud Programs
I tried Google open cloud source repositories but didn't work
I tried GitHub Actions as mentioned by #Ismail and it worked for me
# This is a basic workflow to help you get started with Actions
name: Upload to Google Cloud App Engine
# Controls when the action will run.
on:
# Triggers the workflow on push or pull request events but only for the master branch
push:
branches: [ master ]
pull_request:
branches: [ master ]
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
# This workflow contains a single job called "build"
build:
# The type of runner that the job will run on
runs-on: ubuntu-latest
# Steps represent a sequence of tasks that will be executed as part of the job
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- uses: actions/checkout#v2
- name: Set up Cloud SDK
uses: google-github-actions/setup-gcloud#master
with:
project_id: myid
service_account_key: ${{ secrets.GCP_AUTHCode }}
export_default_credentials: true
- id: Deploy
name: Deploy to App Engine
uses: google-github-actions/deploy-appengine#main
with:
project_id: myid
- uses: actions/setup-node#v1
with:
node-version: 12
- run: npm install
- run: npm install pm2 -g
- run: pm2 start index.js --watch
You can automate App Engine deployments with Cloud Build. Study and follow this GitHub App trigger guide.
With regards to build configuration, you can use this sample build config file (cloudbuild.yaml):
steps:
- name: "gcr.io/cloud-builders/gcloud"
args: ["app", "deploy"]
timeout: "1600s"
This configuration will make Cloud Build run gcloud app deploy on your repo whenever you push commits. The step will timeout if the deployment takes 27 minutes but you're free to change it.
As additional reference, here's another guide on how to automate app deployment with Cloud Source Repositories.
To summarize, you need to enable Cloud Build on your project to use its trigger feature and it will build your app from source then deploy based on your build config.

Cloud Build to serve only build folder from React

I'm new to google cloud and I'm trying my best to implement CI / CD on a simple MERN stack application.
I was able to set up google cloud build and get the deploy with automatic triggers (from github branch) to work.
I have only one question: in the cloudbuild.yaml file I have inserted several steps, to do first npm install, then npm build and finally deploy. The process is quite slow and it also copies all the code to the server, not just the build folder.
I would like to understand how to configure the file to be able to use the build folder already present in the github repository and do the deploy directly, without further steps.
On the frontend I use react, the only thing I have to do is serve the static index.html file.
Here is my current configuration (only the frontend, to understand)
steps:
# Step 0: FRONTEND npm install
- name: "gcr.io/cloud-builders/npm"
dir: 'frontend'
args: ['install']
timeout: "5m"
# Step 1: FRONTEND optimized build
- name: "gcr.io/cloud-builders/npm"
dir: 'frontend'
args: ["run", "build"]
timeout: "5m"
# Step 2: FRONTEND Deploy cloud app frontend
- name: "gcr.io/cloud-builders/gcloud"
args: ["app", "deploy", "-v", "0-1-2", "app.yaml"]
dir: 'frontend'
timeout: "20m"
timeout: 60m
In my remote repository I have the build folder ready to use, but I can't figure out how to do the job.
I've also tried something similar to this:
Upload build folder in Google Cloud Build
without success.
One of the problems is that at the end of the process it appears that cloud build is trying to start npm start.
Finally, I am currently using express to simply serve static files.
Using google cloud can I avoid using it and simply configure the handlers from the app.yaml file?
What web server does it use under the hood to serve files if I don't implement express?
If you only need to deploy the build folder, then the link you've provided should do the job. You don't need to run npm install and npm run build unless you want to to copy all your code and create the build folder using Cloud Build.
Credits to #Guillaume (updated, assuming the .yaml file is located at the root directory of the project and build located at a directory called frontend):
steps:
# Step 0: FRONTEND copy only build and deploy cloud app frontend
- name: 'gcr.io/cloud-builders/gcloud'
entrypoint: bash
dir: 'frontend'
args:
- '-c'
- |
cd ..
cp app-production-build.yaml frontend/build
cd frontend/build
gcloud app deploy
timeout: '1600s'
By default, Cloud Build uses a directory named /workspace as a working directory. If you set the dir field in the build step, the working directory is set to /workspace/<dir>. Basically for this build step, Cloud Build's currently on a directory called frontend in the root directory of your project/repo.
Also as Guillaume mentioned, you need to update your app.yaml URL handlers for this to work. I tested this sample inside the build folder of a new React app and it works for me:
runtime: nodejs12
service: frontend-react
handlers:
# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
static_files: \1
upload: (.*\..+)$
# Catch all handler to index.html
- url: /.*
static_files: index.html
upload: index.html
To answer your last question, you can serve static files directly from your app and what you need to do is to configure URL handlers such as static_dir or static_files.
Take note that each file inside build/static are cached to speed up performance so there could be a delay whenever you make several deployments.
Node.js on App Engine Standard doesn't use any webserver under the hood and you have to set it up by specifying it on your package.json. Here's some web frameworks recommended by Google docs.

Unable to deploy app on app engine using cloud build from github

I am trying to implement CI/CD functionality using cloud build I have repository available on github. I have integrated my github repository with cloud source repository.Now after creating build triggers when I am running it is showing error:
ERROR: (gcloud.app.deploy) There is a cloudbuild.yaml in the current directory, and the runtime field in /workspace/app.yaml is currently set to [runtime: nodejs]. To use your cloudbuild.yaml to build a custom runtime, set the runtime field to [runtime: custom]. To continue using the [nodejs] runtime, please remove the cloudbuild.yaml from this directory.
Here is my cloudbuild.yaml file:
steps:
#Install
- name: 'gcr.io/cloud-builders/git'
args: ['clone', 'https://github.com/GoogleCloudPlatform/cloud-builders']
#Deploy
- name: 'gcr.io/cloud-builders/gcloud'
args: ['app', 'deploy']
app.yaml
env: flex
runtime: nodejs
Someone please let me know what I am missing or doing wrong.Any help would be appreciated.
THANKS
Try moving all project files including the app.yaml into a subdirectory except couldbuild.yaml and specify the subdirectory containing them in the couldbuild.yaml :
#Deploy
- name: 'gcr.io/cloud-builders/gcloud'
args: ['app', 'deploy', '[SUBDIRECTORY/app.yaml]']
Cloud build builds a Docker file that already specifies the runtime, so you won't have to re-specify it again in app.yaml. It's perfectly fine to change the runtime in app.yaml to custom.

Standard App Engine migrating to Go 1.11 cloud build failed

I am trying to migrate from Go 1.9 to Go 1.11. I am using cloudbuild.yaml to get dependencies and deploy the application. However, I am getting this error:
Failed to build app: Your app is not on your GOPATH, please move it there and try again.
I checked the migration document, and it says I need to put the application into the GOPATH. However, I am not sure if that's possible with cloudbuild.yaml. If yes, could someone share an example?
A simplified version of my cloudbuild.yaml. As far as I know the application source code is under /workspace in this situation. I have tried to include /workspace in GOPATH in the deploy step but no luck.
steps:
- name: 'gcr.io/cloud-builders/go'
args: ['get', 'github.com/go-sql-driver/mysql']
env: ['GOPATH=go']
- name: 'gcr.io/cloud-builders/gcloud'
args: ['app', 'deploy', 'go/src/batch.yaml']
env: ['GOPATH=go']
File structure:
/repo
|-go
|-src
|-batch.yaml
|cronjob.go

How to use environment variables in Github Page?

I want to deploy my create-react-app project to GitHub Pages. But I have a few secret keys. How can I manage these keys inside my React app?
Edited June 2020
Reference #alicia-jasmine
"React is purely a front-end framework. Everything accessible to React (even if you embed it through a build step) will later be visible in the front-end code and someone relatively basic to find. To really keep them secret you MUST have something server side!"
The following answer will actually expose the key in the gh-page branch on GitHub, also the keys will be accessible through the network tab in the developer console.
Original Answer
I'm also using create-react-app, and I found that this can be done by customizing your CI script with GitHub secret settings. (After the setting, you can use environment variables like this in your project.)
const apiKey = process.env.REACT_APP_APIKey
const apiSecret = process.env.REACT_APP_APISecret
To add a secret to your repository, go to your repository's Setting > Secrets, click on Add a new secret. In the screenshot below, I added 2 env variables: REACT_APP_APIKey and REACT_APP_APISecret.
Notice: All the environment variable you want to access with create-react-app need to be prefixed with REACT_APP.
After you have your secret ready, you can take a look at this post, it's about how to add your own Action upon push.
To setup your action script, go to your repository > Actions, an click on Setup workflow your self, and paste in the script provided in the post or take a look at mine script below.
I use the following script to access the 2 environment variables I set on GitHub secret. (You can access the secret you set in the script by ${{ secrets.REACT_APP_APIKey }}.)
name: CI
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v1
- name: Build
run: |
npm install
npm run-script build
env:
REACT_APP_APIKey: ${{ secrets.REACT_APP_APIKey }}
REACT_APP_APISecret: ${{ secrets.REACT_APP_APISecret }}
- name: Deploy
uses: JamesIves/github-pages-deploy-action#releases/v3
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: gh-pages
FOLDER: build
After you setup the script, the action will be triggered by any push to master
branch. After you push any commits, you can take a look at the deployment status at actions status.
You can see how hard it is for me to figure it out... so many fail attempts lol. Anyway, hope this will help :)
name: Deploy to GitHub Pages
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v1
- name: Build
run: |
npm install
npm run-script build
env:
REACT_APP_INSTAGRAM_ACCESS_TOKEN: ${{ secrets.REACT_APP_INSTAGRAM_ACCESS_TOKEN }}
REACT_APP_SMTP_SECURE_TOKEN: ${{ secrets.REACT_APP_SMTP_SECURE_TOKEN }}
- name: Deploy
uses: JamesIves/github-pages-deploy-action#releases/v3
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN_KEY }}
BRANCH: gh-pages
FOLDER: dist
You can use like this to add your environment variables from GitHub secrets. This solved my problem.
I support this answer (above)
But I advice to update the gh-pages YML to version 4
Also take a look at environment variables solution because i spent hours to find out the solution
- name: Deploy
uses: JamesIves/github-pages-deploy-action#4.0.0
with:
branch: gh-pages
folder: front-app/dist
To use environment variables, the general approach which is followed is to:
Not expose them to the public
Keep it local at the time of development/production and ignore in .gitignore file.
Make the
static build out of your application Then deploy it to either github
pages or any other static website host.
While working with create-react-app you have their benefits, you can create .env in your root folder.
The structure for the .env file should follow below key-value structure:-
REACT_APP_SECRET_CODE1=dev123
REACT_APP_SECRET_CODE2=prod456
Keys in the file should be prefixed with REACT_APP and you can use these keys to access the variable in your application. For eg. process.env.REACT_APP_SECRET_CODE, this will have the value dev123
If they are truly secret, and so should not be in a repository, then there isn't a way to manage that with github-pages.
If you are okay with having them in a repository, then put them in .env and access via process.env
You can deploy your project on Heroku where you can set up your secret key.

Resources