So Im not sure if this has been asked and answered but I’ve been trying to track this down for quite a while. It seems as though every time I try to deploy an angular app to app engine standard the build size is like 500+ MB on the app engine instance. I am using a .gcloudignore that is ignoring node_modules. I have also tried ignoring the src directory but it seems like app engine is trying to use that for some reason to build even though I have already built the dist folder in Cloud Build.
So here are all my files that matter:
app.yaml
service: my-app
runtime: nodejs20
env: standard
handlers:
- url: /.*
script: auto
secure: always
redirect_http_response_code: 301
- url: /
static_dir: dist
.gcloudignore
# This file specifies files that are *not* uploaded to Google Cloud
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
# $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore
cypress/
e2e/
# Node.js dependencies:
node_modules/
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-app": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-app/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/primeng/resources/themes/lara-light-purple/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeflex/primeflex.scss",
"node_modules/primeicons/primeicons.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "5mb"
}
],
"outputHashing": "all",
"fileReplacements": []
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,
"fileReplacements": []
},
"local": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"options": {
"port": 4201
},
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "my-app:build:production"
},
"development": {
"browserTarget": "my-app:build:development"
},
"local": {
"browserTarget": "my-app:build:local"
}
},
"defaultConfiguration": "local"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"prerender": false,
"ssr": false,
"browserTarget": "my-app:build:production",
"firebaseProject": "my-app",
"firebaseHostingSite": "my-app"
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/my-app/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json",
"inlineStyleLanguage": "scss"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": []
},
"development": {
"fileReplacements": [],
"optimization": false,
"sourceMap": true,
"extractLicenses": false,
"vendorChunk": true
},
"local": {
"optimization": false,
"sourceMap": true,
"extractLicenses": false,
"vendorChunk": true
}
},
"defaultConfiguration": "production"
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"configurations": {
"development": {
"browserTarget": "my-app:build:development",
"serverTarget": "my-app:server:development"
},
"production": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production"
}
},
"defaultConfiguration": "development"
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"routes": [
"/"
]
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production"
},
"development": {
"browserTarget": "my-app:build:development",
"serverTarget": "my-app:server:development"
}
},
"defaultConfiguration": "production"
},
"cypress-run": {
"builder": "@cypress/schematic:cypress",
"options": {
"devServerTarget": "my-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "my-app:serve:production"
}
}
},
"cypress-open": {
"builder": "@cypress/schematic:cypress",
"options": {
"watch": true,
"headless": false
}
},
"ct": {
"builder": "@cypress/schematic:cypress",
"options": {
"devServerTarget": "my-app:serve",
"watch": true,
"headless": false,
"testingType": "component"
},
"configurations": {
"development": {
"devServerTarget": "my-app:serve:development"
}
}
},
"e2e": {
"builder": "@cypress/schematic:cypress",
"options": {
"devServerTarget": "my-app:serve",
"watch": true,
"headless": false
},
"configurations": {
"production": {
"devServerTarget": "my-app:serve:production"
}
}
}
}
}
},
"cli": {
"schematicCollections": [
"@schematics/angular",
"@cypress/schematic"
]
}
}
cloudbuild.yaml
timeout: 1200s
steps:
- name: 'node:20.7.0'
entrypoint: npm
args: ['install']
- name: 'node:20.7.0'
entrypoint: npm
args: ['install', '-g', '@angular/cli']
- name: 'node:20.7.0'
entrypoint: npm
args: [ 'run', 'build:$_BUILD_COMMAND', "--prod" ]
- name: 'node:20.7.0'
entrypoint: bash
args:
- '-c'
- 'rm -R node_modules'
- 'rm -R src'
- 'rm -R .angular'
- name: "gcr.io/cloud-builders/gcloud"
args: ["app", "deploy"]
So I guess my question is, does anyone know of a way where I can not have 500+ MB of files in the service? The app has an extremely slow cold start and I believe the size may partially be the reason. Another thing, when I look at all of the files, excluding node modules they are only 8MB and with node_modules the entire project becomes bigger than 500MB so its my belief that even though I am ignoring the node_modules for some reason they are still being included in app engine.