NextJS on GAE - Error: EROFS: read-only file system

Question

I'm trying to deploy a Next application with custom server.js into GAE. I can run the project with no problems on local and even on the google GCP CLI. The problem right now is after the app is deployed to GAE successfully via gcloud app deploy , I'm getting the following error when opening the app.

2020-03-30 21:41:21.748 HKT
Error: EROFS: read-only file system, unlink '/srv/dist/functions/next/BUILD_ID'
Expand all | Collapse all{
 insertId: "5e81f701000b6ba4e770be02"  
 labels: {…}  
 logName: "projects/next-gae/logs/stderr"  
 receiveTimestamp: "2020-03-30T13:41:21.749839891Z"  
 resource: {…}  
 textPayload: "Error: EROFS: read-only file system, unlink '/srv/dist/functions/next/BUILD_ID'"  
 timestamp: "2020-03-30T13:41:21.748452Z"  
}

My app.yaml is below:

runtime: nodejs10

.gcloudignore

# This file specifies files that are *not* uploaded to Google Cloud Platform
# 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

# Node.js dependencies:
node_modules/
*.hot-update.js*

# Other config and Files
README.md
.eslintignore
.eslintrc

package.json

{
  "name": "next-gae",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.3",
    "@babel/runtime": "^7.8.7",
    "@sentry/browser": "^5.15.0",
    "@sentry/integrations": "^5.15.0",
    "@sentry/node": "^5.15.0",
    "@storybook/addon-actions": "^5.2.6",
    "@storybook/addon-info": "^5.2.6",
    "@storybook/addon-knobs": "^5.2.6",
    "@storybook/addon-links": "^5.2.6",
    "@storybook/addon-notes": "^5.2.6",
    "@storybook/addon-storysource": "^5.2.6",
    "@storybook/addon-viewport": "^5.2.6",
    "@storybook/react": "^5.2.6",
    "antd": "^3.26.7",
    "axios": "^0.19.0",
    "connected-react-router": "^6.5.2",
    "cookie-parser": "^1.4.4",
    "cors": "^2.8.5",
    "date-fns": "^2.9.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "firebase": "^7.8.0",
    "firebase-admin": "^8.10.0",
    "firebase-functions": "^3.3.0",
    "formik": "^2.1.4",
    "helmet": "^3.21.2",
    "hpp": "^0.2.3",
    "imagemin-optipng": "^7.1.0",
    "imagemin-svgo": "^7.1.0",
    "immutable": "^4.0.0-rc.12",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.1",
    "morgan": "^1.9.1",
    "next": "^9.1.7",
    "next-antd-aza-less": "^1.0.2",
    "next-optimized-images": "^2.5.5",
    "next-redux-wrapper": "^4.0.1",
    "nocache": "^2.1.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router": "^5.1.2",
    "react-smooth-scrollbar": "^8.0.6",
    "react-stripe-elements": "^6.0.1",
    "react-virtualized": "^9.21.2",
    "redux": "^4.0.4",
    "redux-devtools": "^3.5.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-multi": "^0.1.12",
    "redux-observable": "^1.2.0",
    "redux-persist": "^6.0.0",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.5.3",
    "smooth-scrollbar": "^8.5.1",
    "storybook-addon-figma": "^0.1.0",
    "storybook-readme": "^5.0.8",
    "styled-components": "^5.0.0",
    "xss-clean": "^0.1.1",
    "yup": "^0.28.2"
  },
  "engines": {
    "node": "10"
  },
  "scripts": {
    "test": "jest",
    "flow": "flow",
    "eslint": "eslint \"./**/*.{jsx,js}\"",
    "lint": "eslint ./src/",
    "lint:fix": "npm run lint --fix",
    "lint:dry": "npm run lint --fix-dry-run",
    "build-next": "next build \"src/app/\"",
    "clean": "rimraf dist",
    "predeploy": "npm run build-all",
    "start": "cd \"src/app/\" ; NODE_ENV=production node server.js",
    "deploy:gae": "npm run pre-start; npm run build-next; gcloud app deploy",
    "fmt": "prettier --config .prettierrc.yml --write \"{!(node_modules),!(__mock__)/**/}*.{jsx,js,json,md,ts}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{jsx,js}": [
      "flow focus-check",
      "npm run lint:fix",
      "git add"
    ],
    "*.{jsx,js,json,md,ts}": [
      "npm run fmt",
      "git add"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-inline-import": "^3.0.0",
    "babel-plugin-inline-react-svg": "^1.1.1",
    "babel-plugin-styled-components": "^1.10.6",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "cpx": "^1.5.0",
    "cross-env": "^7.0.2",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-config-prettier": "^6.5.0",
    "eslint-plugin-flowtype": "^4.4.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-react": "^7.16.0",
    "firebase-functions-test": "^0.2.0",
    "firebase-tools": "^7.15.1",
    "flow-bin": "^0.111.3",
    "husky": "^3.1.0",
    "jest": "^24.8.0",
    "lint-staged": "^9.4.2",
    "nodemon": "^2.0.2",
    "prettier": "^1.19.1",
    "rimraf": "^3.0.2",
    "webpack": "^4.42.0"
  }
}

Answer 1

The error you are getting is telling you that the path you are trying to delete from is read only. In GAE standard the paths you can write to are limited :

Java 8, Java 11, Node.js, Python 3.7, PHP 7.2, PHP 7.3, Ruby 2.5 (beta), Go 1.11, Go 1.12, and Go 1.13 have read and write access to the /tmp directory.

You should handle your files in the /tmp directory or use App Engine Flex if you cannot do so.