用于 GAS 的 React App + Node Gitlab ci cd 管道（构建和部署）

Posted 2023-02-19

【中文标题】用于 GAS 的 React App + Node Gitlab ci cd 管道（构建和部署）

【英文标题】：React App + Node Gitlab cicd pipeline for GAE (Build and Deploy)

【发布时间】：2020-06-20 21:11:44

【问题描述】：

您如何创建 2 个阶段 1 构建 react 应用程序，然后一个阶段将文件部署到 GAE？

我现在的 YML 是这样的：

image: 'google/cloud-sdk:slim'
build-stage:
    stage: build
    image: 'node:latest'
    script:
        - 'npm install'
        - 'npm install --prefix ./client'
        - 'npm run build --prefix ./client'
    only:
        - master
deployment-stage:
    stage: deploy
    script:
        - 'gcloud auth activate-service-account --key-file $GOOGLE_SERVICE_ACCOUNT_FILE'
        - 'gcloud app deploy app.yaml --project $GOOGLE_PROJECT_ID --set-env-vars **redacted**'
    only:
        - master

Google App Engine 不会在构建选项卡上显示任何正在发生的构建。我创建了一个具有以下权限的服务帐户：Here

我也在 Gitlab 中设置了我的 CICD 变量，这是迄今为止工作的输出。

构建阶段：

 $ npm run build --prefix ./client
 > client@0.1.0 build /builds/**redacted**/client
 > react-scripts build
 Creating an optimized production build...
 Compiled successfully.
 File sizes after gzip:
   276.17 KB  build/static/js/2.63b40945.chunk.js
   59.19 KB   build/static/css/2.2e872fcd.chunk.css
   4.3 KB     build/static/js/main.7cffe524.chunk.js
   923 B      build/static/css/main.433538f4.chunk.css
   772 B      build/static/js/runtime-main.ef76e641.js
 The project was built assuming it is hosted at /.
 You can control this with the homepage field in your package.json.
 The build folder is ready to be deployed.
 You may serve it with a static server:
   npm install -g serve
   serve -s build
 Find out more about deployment here:
   bit.ly/CRA-deploy
 Job succeeded

部署阶段：

 Fetching changes with git depth set to 50...
 Initialized empty Git repository in /builds/**redacted**/.git/
 Created fresh repository.
 From https://gitlab.com/**redacted**
  * [new ref]         refs/pipelines/124363587 -> refs/pipelines/124363587
  * [new branch]      master                   -> origin/master
 Checking out f2026f12 as master...
 Skipping Git submodules setup
$ gcloud auth activate-service-account --key-file $GOOGLE_SERVICE_ACCOUNT_FILE
00:02
 Activated service account credentials for: [**redacted**]
 $ gcloud app deploy app.yaml --project $GOOGLE_PROJECT_ID --set-env-vars **redacted**
 Job succeeded

我认为问题在于构建文件没有被上传，因为它们位于单独的容器中。

我尝试在 1 个脚本步骤中运行它，但 google/cloud-sdk:slim 不包含用于构建或安装的 npm。

谢谢！

【参考方案1】：

您需要使用 GitLab 工件。这就是您可以将输出从 Stage 1 传递到 Stage 2 的方式。

例如

stages:
   - build
   - deploy

build_project:
   stage: build
   image: node:15
   script:
      - echo "Start building App"
      - npm install
      - cd client
      - npm install
      - CI=false npm run build
      - echo "Build successfully!"
   artifacts:
      expire_in: 1 hour
      paths:
       - client/build
       - node_modules

deploy_production:
   stage: deploy
   image: google/cloud-sdk:alpine
   environment: Production
   only:
      - master
   script:
      - echo $SERVICE_ACCOUNT > /tmp/$CI_PIPELINE_ID.json
      - gcloud auth activate-service-account --key-file /tmp/$CI_PIPELINE_ID.json
      - gcloud --quiet --project $PROJECT_ID app deploy app.yaml
   after_script:
      - rm /tmp/$CI_PIPELINE_ID.json

deploy_staging:
   stage: deploy
   image: google/cloud-sdk:alpine
   environment: Staging
   only:
      - staging
   script:
      - echo $SERVICE_ACCOUNT > /tmp/$CI_PIPELINE_ID.json
      - gcloud auth activate-service-account --key-file /tmp/$CI_PIPELINE_ID.json
      - gcloud --quiet --project $PROJECT_ID app deploy staging-app.yaml --verbosity=info
   after_script:
      - rm /tmp/$CI_PIPELINE_ID.json

【参考方案2】：

通过一些试验和错误来解决这个问题......

image: python:2.7

before_script:
  - echo "deb http://packages.cloud.google.com/apt cloud-sdk-jessie main" | tee /etc/apt/sources.list.d/google-cloud-sdk.list
  - curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | apt-key add -
  - apt-get update
  - apt-get -qq -y install google-cloud-sdk
  - apt-get -qq -y install npm
  - npm install
  - npm install --prefix ./client
  - npm run build --prefix ./client

deploy:
  stage: deploy
  environment: Production
  only:
    - master
  script:
    - gcloud auth activate-service-account --key-file $GOOGLE_SERVICE_ACCOUNT_FILE
    - gcloud app deploy app.yaml --project $GOOGLE_PROJECT_ID

将 set-env-vars 移至 app.yaml，因为根据文档，它们无法在 gloud 应用部署中设置为标志：https://cloud.google.com/appengine/docs/standard/nodejs/config/appref#environment_variables