Application - Angular
I am trying to automate the deployment process for my angular app in GCP. When I deploy manually from the cloud shell things works fine but when I try to build-deploy with cloudbuild.yaml, cloud build, triggers it says deployed successfully. When I hit the URL it says 404 not found.
Manual deployment commands
gsutil rsync -r gs://v2-appname.appspot.com ./deploytest
cd deploytest
gcloud app deploy
I am not much familiar with cloud build.
Possibly, the issue might be in the cloudbuild.yaml file given below.
steps:
# Install node packages
- name: "gcr.io/cloud-builders/npm:latest"
args: ["install"]
# Build production package
- name: "gcr.io/cloud-builders/npm"
args: ["build", "--configuration=staging"]
# Deploy to google cloud app engine
- name: "gcr.io/cloud-builders/gcloud"
args: ["app", "deploy", "app.yaml"]
What I understood is when we deploy manually we build and upload files to "dist" folder in storage. then we sync up the directory for deployment and then deploy with gcloud app deploy.
But while doing this with cloud build -
I have GitHub repo that is connected to the trigger any push happens there to some branch it picks up the cloudbuild.yaml file and process. But cloudbuild.yaml does not have any directory where to deploy or sync Is this something I am missing? How to add it? If not please correct me!
Thanks,
EDIT
EA_Website ->
src/
cloudbuild.yaml
app.yaml
angular.json
package.json
app.yaml
runtime: python27
threadsafe: yes
api_version: 1
# Google App Engine's cache default expiration time is 10 minutes. It's suitable for most Production
# scenarios, but a shorter TTL may be desired for Development and QA, as it allows us to see a fresh
# code in action just a minute after the deployment.
default_expiration: 60s
handlers:
# To enhance security, all http requests are redirected to their equivalent https addresses (secure: always).
# Assets are retrieved directly from their parent folder.
- url: /assets
static_dir: dist/projectname/assets
secure: always
# Static files located in the root folder are retrieved directly from there, but their suffixes need to be
# mapped individually in order to avoid them from being hit by the most general (catch-all) rule.
- url: /(.*.css)
static_files: dist/projectname/1
upload: dist/projectname/(.*.css)
secure: always
- url: /(.*.html)
static_files: dist/projectname/1
upload: dist/projectname/(.*.html)
secure: always
- url: /(.*.ico)
static_files: dist/projectname/1
upload: dist/projectname/(.*.ico)
secure: always
- url: /(.*.js)
static_files: dist/projectname/1
upload: dist/projectname/(.*.js)
secure: always
- url: /(.*.txt)
static_files: dist/projectname/1
upload: dist/projectname/(.*.txt)
secure: always
# Site root.
- url: /
static_files: dist/projectname/index.html
upload: dist/projectname/index.html
secure: always
# Catch-all rule, responsible from handling Angular application routes (deeplinks).
- url: /.*
static_files: dist/projectname/index.html
upload: dist/projectname/index.html
secure: always
skip_files:
- ^(?!dist)
When I update cloudbuild.yaml to below I get below error
steps:
- name: "gcr.io/cloud-builders/npm:node-12.18.3"
entrypoint: npm
args: ['install']
- name: gcr.io/cloud-builders/npm
args: [run, build, --prod]
- name: gcr.io/cloud-builders/gcloud
args: [ app, deploy, --version=$SHORT_SHA ]
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (83)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.12.0
