URL not found appears when try to deploy with cloud build (gcp)

Question

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

Can you share the directory tree of your Bucket and after running the NPM build command ? I'm able to answer you, but I need to know the directory tree to provide a correct one! — guillaume blaquiere, Dec 30 '20 at 17:10
Please, once have a look at the EDIT area, if this is what u wanted. — Ishika Jain, Dec 31 '20 at 08:13
Ok, but your edit is the dir tree of your GCS storage or of your git repo? — guillaume blaquiere, Dec 31 '20 at 12:27
Thanks, your app.yaml looks better than expected!! And you haven't error messages or warning? The build is fully correct? — guillaume blaquiere, Dec 31 '20 at 12:45
Yes, no error but below lines do not look correct to me. Do you have any idea about below-- Already have image (with digest): gcr.io/cloud-builders/npm npm WARN build `npm build` called with no arguments. Did you mean to `npm run-script build`? — Ishika Jain, Dec 31 '20 at 13:09
Could you please share the complete steps that you follow when you deploy manually? Including when you build and upload the built files to GCS? Also, could you clarify why you upload and then sync the files from GCS instead of directly deploying them? — Jose V, Dec 31 '20 at 14:21

Ishika Jain · Accepted Answer · 2021-01-07T16:48:18.927

Using below does not throw an error but not even build.

  args: ["build", "--prod"]

Replacing any of the below works

  args: ["run", "build", "--prod"]

or

  args: [run, build, --prod]

My final cloudbuild.yaml

steps:

- name: gcr.io/cloud-builders/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 ]

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:
    # 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)

I faced some errors related to package - which I fixed by updating a suitable version

I faced the error for angular cloud build An unhandled exception occurred: Cannot find module '@angular/compiler-cli/src/tooling'

This is due to cache, so you should reinstall/update-modules. Error: Cannot find module '@angular/compiler-cli If nothing works try creating a new branch and trigger it from there (just hit and trial).

This deploys the project to workspace/ but I am not able to access it directly from could shell or the editor as it is not visible. Not sure if we can access it or we have to change settings to access it. — Ishika Jain, Jan 05 '21 at 08:05

score 0 · Answer 2 · answered Dec 30 '20 at 20:49

0

Would that help?


// Excerpt app-routing.module.ts

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true,
    }),
  ],
  exports: [RouterModule],
})

answered Dec 30 '20 at 20:49

this does not help! – Ishika Jain Dec 31 '20 at 10:24
Would you please provide a minimal reproducible code example as a starting point, for example, an Angular project in https://stackblitz.com/. It's then way easier to help you. – Jan 01 '21 at 09:01

URL not found appears when try to deploy with cloud build (gcp)

2 Answers2