React App + Node Gitlab cicd pipeline for GAE (Build and Deploy) - node.js

Question

How do you create 2 stages 1 to build the react app and then one to deploy the files to GAE?
My current YML looks like this:
image: 'google/cloud-sdk:slim'
build-stage:
stage: build
image: 'node:latest'
script:
- 'npm install'
- 'npm install --prefix ./client'
- 'npm run build --prefix ./client'
only:
- master
deployment-stage:
stage: deploy
script:
- 'gcloud auth activate-service-account --key-file $GOOGLE_SERVICE_ACCOUNT_FILE'
- 'gcloud app deploy app.yaml --project $GOOGLE_PROJECT_ID --set-env-vars **redacted**'
only:
- master
Google App Engine doesn't show any builds happening on the builds tab. I have made a service account with these permissions: Here
I have set my CICD variables in Gitlab also, here is the output from the jobs so far.
Build stage:
$ npm run build --prefix ./client
> client#0.1.0 build /builds/**redacted**/client
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
276.17 KB build/static/js/2.63b40945.chunk.js
59.19 KB build/static/css/2.2e872fcd.chunk.css
4.3 KB build/static/js/main.7cffe524.chunk.js
923 B build/static/css/main.433538f4.chunk.css
772 B build/static/js/runtime-main.ef76e641.js
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
Job succeeded
Deploy stage:
Fetching changes with git depth set to 50...
Initialized empty Git repository in /builds/**redacted**/.git/
Created fresh repository.
From https://gitlab.com/**redacted**
* [new ref] refs/pipelines/124363587 -> refs/pipelines/124363587
* [new branch] master -> origin/master
Checking out f2026f12 as master...
Skipping Git submodules setup
$ gcloud auth activate-service-account --key-file $GOOGLE_SERVICE_ACCOUNT_FILE
00:02
Activated service account credentials for: [**redacted**]
$ gcloud app deploy app.yaml --project $GOOGLE_PROJECT_ID --set-env-vars **redacted**
Job succeeded
I think the issue is that the build files are not being uploaded as they are in a separate container.
I tried to run it all in 1 scripts step but the google/cloud-sdk:slim doesn't contain npm to do the build or installs.
Thanks!

Answer 1

You need to use GitLab artifacts. That's how you can pass an output from Stage 1 to Stage 2.
E.g.
stages:
- build
- deploy
build_project:
stage: build
image: node:15
script:
- echo "Start building App"
- npm install
- cd client
- npm install
- CI=false npm run build
- echo "Build successfully!"
artifacts:
expire_in: 1 hour
paths:
- client/build
- node_modules
deploy_production:
stage: deploy
image: google/cloud-sdk:alpine
environment: Production
only:
- master
script:
- echo $SERVICE_ACCOUNT > /tmp/$CI_PIPELINE_ID.json
- gcloud auth activate-service-account --key-file /tmp/$CI_PIPELINE_ID.json
- gcloud --quiet --project $PROJECT_ID app deploy app.yaml
after_script:
- rm /tmp/$CI_PIPELINE_ID.json
deploy_staging:
stage: deploy
image: google/cloud-sdk:alpine
environment: Staging
only:
- staging
script:
- echo $SERVICE_ACCOUNT > /tmp/$CI_PIPELINE_ID.json
- gcloud auth activate-service-account --key-file /tmp/$CI_PIPELINE_ID.json
- gcloud --quiet --project $PROJECT_ID app deploy staging-app.yaml --verbosity=info
after_script:
- rm /tmp/$CI_PIPELINE_ID.json

Answer 2

Figured this out with some trial and error...
image: python:2.7
before_script:
- echo "deb http://packages.cloud.google.com/apt cloud-sdk-jessie main" | tee /etc/apt/sources.list.d/google-cloud-sdk.list
- curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | apt-key add -
- apt-get update
- apt-get -qq -y install google-cloud-sdk
- apt-get -qq -y install npm
- npm install
- npm install --prefix ./client
- npm run build --prefix ./client
deploy:
stage: deploy
environment: Production
only:
- master
script:
- gcloud auth activate-service-account --key-file $GOOGLE_SERVICE_ACCOUNT_FILE
- gcloud app deploy app.yaml --project $GOOGLE_PROJECT_ID
Moved the set-env-vars to the app.yaml as they cannot be set as a flag in the gloud app deploy as per the docs: https://cloud.google.com/appengine/docs/standard/nodejs/config/appref#environment_variables