如何在GAE服务部署阶段使用webpack构建我的源代码？

Question

GAE标准环境

我的想法和工作流程如下：

将GAE服务部署到GCP =>构建我的源代码从.ts到.js =>启动node.js服务器

这是我的package.json：

{
  "name": "webpack-compile-after-deploy",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/main.js",
  "scripts": {
    "start": "node ./dist/main.js",
    "prestart": "npm run build",
    "build": "webpack",
    "deploy:dev": "gcloud app deploy ./app.dev.yaml",
    "deploy:prod": "gcloud app deploy ./app.prod.yaml"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/express": "^4.16.0",
    "awesome-typescript-loader": "^5.2.1",
    "express": "^4.16.4",
    "typescript": "^3.1.6",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-node-externals": "^1.7.2"
  }
}

我将所有节点模块放到dependencies中，因为cloud build使用npm install --production命令来安装依赖项。

在我将GAE服务部署到GCP并尝试访问我的应用程序之后。

stackdriver logs向我展示了这样一个错误：

Error: Cannot find module '/srv/dist/main.js'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Function.Module.runMain (module.js:694:10)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3

所以我认为npm run build可能失败了。

在webpack部署阶段使用GAE编译我的源代码可以吗？

如果答案是肯定的。如何解决此错误？谢谢。

更新

我可以通过以下工作流成功地部署和运行我的应用程序：

构建从.ts到.js的源代码，生成./dist目录=>运行gcloud app deploy将./dist目录上传到GAE容器=>运行npm start以启动应用程序。

因此，这两个工作流之间唯一的区别是何时构建源代码。

在本地构建源代码或在云构建阶段构建源代码(在启动应用程序之前)

Answer 1

这需要两个步骤

1. 构建贡献npm构建step图像
2. 使用npm构建步骤运行npm命令

创建然后NPM构建步骤映像

我已经定制了在叉子中生成图像以使用节点-高寒

git clone git@github.com:tonymet/cloud-builders.git
cd npm 
# this will create the npm image gcr.io/$PROJECT_ID/npm:latest
gcloud builds submit . 

将构建步骤添加到cloudbuild.yaml中，并手动提交

现在，在您的项目中创建一个cloudbuild.yaml，执行webpack步骤：

- name: "gcr.io/$PROJECT_ID/npm:latest"
  args: ["run" , "test"]
- name: "gcr.io/cloud-builders/gcloud"
  args: ["app", "deploy", "app-complete.yaml"]
timeout: "1600s"