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
– guillaume blaquiere, Commented Dec 30, 2020 at 17:10
Please, once have a look at the EDIT area, if this is what u wanted. — Ishika Jain
– Ishika Jain, Commented Dec 31, 2020 at 8:13
Ok, but your edit is the dir tree of your GCS storage or of your git repo? — guillaume blaquiere
– guillaume blaquiere, Commented Dec 31, 2020 at 12:27

Ishika Jain · Accepted Answer · 2021-01-07 16:48:18Z

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.

user3025289 · Accepted Answer · 2020-12-30 20:49:11Z

0

Would that help?


// Excerpt app-routing.module.ts

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

answered Dec 30, 2020 at 20:49

user3025289

2 Comments

Ishika Jain Over a year ago

this does not help!

user3025289 Over a year ago

Would you please provide a minimal reproducible code example as a starting point, for example, an Angular project in stackblitz.com. It's then way easier to help you.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related