2
votes

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
 > [email protected] 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!

1

1 Answers

0
votes

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