时间戳

首页 > 解决方案 > Gitlab CI/CD 脚本，如何在部署期间添加新的 .js 文件/替换 .js 文件的内容？

reactjs - Gitlab CI/CD 脚本，如何在部署期间添加新的 .js 文件/替换 .js 文件的内容？

问题描述

我正在关注一次构建，在我的反应代码中部署无处不在的过程。这意味着对于每种环境类型，都会先创建一次构建。下一步是部署。现在要定义环境变量，建议在根/环境文件夹中拥有三个 .js 配置文件（其中包含 js 环境变量），我们在部署脚本中从中选择一个文件，并以某种方式将此文件的内容添加到/build 文件夹。所以在构建中只使用了一个配置文件（我们在部署脚本中指定的那个）。脚本中是否有任何有用的命令可以实现这一点？因此，可以说在构建中创建了一个名为 config_env.js 的新文件，然后可以使用该文件在构建中设置环境变量。

//Config (Env)
root/environment
>development.js
const env = 'development';
const apiUrl = 'https://heyn3rait4.execute-api.us-west-2.amazonaws.com/dev/';

>qa.js
const env = 'qa';
const apiUrl = 'https://heyn3rait4.execute-api.us-west-2.amazonaws.com/dev/';

>production.js
const env = 'production';
const apiUrl = 'https://heyn3rait4.execute-api.us-west-2.amazonaws.com/dev/';

//Pipeline code
build-static-pages:
  stage: build
  # image for running Docker in Docker
  image: node
  script:
    # build the static pages with NPM
    - npm ci --production
    - npm run-script build
    - echo `${CI_PROJECT_DIR}/get_component_version.py` > ${BUILD_DIR}/ver.txt
    - ls -alF ${BUILD_DIR}
  artifacts:
    paths:
    - ${BUILD_DIR}
    expire_in: 2 weeks

.publish-s3-dev:
  stage: deploy-dev
  image: python:3
  script:
    # todo: consider using CloudFormation or the s3_website gem
    # configure the build with env variables
    # install AWS CLI
    - pip install awscli
    # push to S3
    - aws s3 cp --recursive ${CI_PROJECT_DIR}/${BUILD_DIR} s3://${FORESIGHT_DEV_BUCKET}
  environment:
    name: dev
    url: http://d2mo71maq8qx66.cloudfront.net

我以前是如何在部署脚本中静态插入环境变量的。

 echo "const baseURL = '${APIURL}';\n" >> ${BUILD_DIR}/env_config.js

标签： reactjsgitcontinuous-integrationgitlabgitlab-ci

解决方案

该sed命令将允许您在 *nix 系统上编辑文件的内容。例如，要将文本更改为HELLO它WORLD出现在文件中的任何位置example.txt： sed -i "s/HELLO/WORLD/g" example.txt

如果要在特定行替换它， 请不要g在末尾添加行号：ssed -i "34s/HELLO/WORLD/" example.txt

这-i是“内联”，因此它将编辑您指定的文件。

这是我在管道中使用它的方法：

我有一个空的 env 文件，它具有您需要的结构，但没有值。对于我的用例，它看起来像这样：

DB_HOST={{DB_HOST}}
DB_PORT=3306
DB_USER={{DB_USER}}
DB_PASSWORD={{DB_PASSWORD}}

在 QA 工作中，它可能如下所示：

sed -i "s/{{DB_HOST}}/${QA_DB_HOST}/g" config.js
sed -i "s/{{DB_USER}}/${QA_DB_USER}/g" config.js
sed -i "s/{{DB_PASSWORD}}/${QA_DB_PASSWORD}/g" config.js

其中 ${} 值是项目 CI 设置中的 Gitlab CI 变量。

推荐阅读