[英]How to set .env for react app deployed with azure devops pipeline on app service
I developed a pipeline with CI/CD on azure Devops for deploying a React app on Azure web app service.我在 azure Devops 上开发了一个带有 CI/CD 的管道,用于在 Azure web 应用程序服务上部署 React 应用程序。 Locally I'm using a.env file and this file is on.gitignore.我在本地使用的是一个 .env 文件,这个文件是 on.gitignore。 I want to know how can i set the.env for reading it on production.我想知道如何设置 the.env 以便在生产环境中阅读它。
You can check the documentation below:您可以查看以下文档:
https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env
.env
files should be checked into source control (with the exclusion of.env*.local
)..env
文件应该被检入源代码管理(不包括.env*.local
)。
If you don't want to check in the .env
files to DevOps, you could add the variables in the pipeline variables:如果您不想将.env
文件签入 DevOps,您可以在管道变量中添加变量:
In addition, you can refer to the following case for more suggestions:另外,更多建议可以参考以下案例:
How to use environment variables in React app hosted in Azure 如何在 Azure 中托管的 React 应用程序中使用环境变量
Many of the proposed solutions related to this issue may not work but I solved it the following way.许多与此问题相关的建议解决方案可能不起作用,但我通过以下方式解决了它。 However, first let me explain why other solutions may not (should not) work (please correct me if I am wrong)但是,首先让我解释一下为什么其他解决方案可能不会(不应该)起作用(如果我错了请纠正我)
So here is my solution -所以这是我的解决方案 -
Step1: Add all those.env files to azure devops library as secure files.第一步:将所有这些.env 文件作为安全文件添加到 azure devops 库中。 You can download these secure files in the build machine using a DownloadSecureFile@1
pipeline task (yml).您可以使用DownloadSecureFile@1
管道任务 (yml) 在构建机器中下载这些安全文件。 This way we are making sure the correct.env file is provided in the build machine before the task yarn build --mode development
in the pipeline.通过这种方式,我们确保在管道中的任务yarn build --mode development
之前在构建机器中提供了正确的 env 文件。
Step2: Add the following task in your azure yml pipeline in appropriate place.第 2 步:在您的 azure yml 管道中适当的位置添加以下任务。 I have created a github repohttps://github.com/mail4hafij/react-yarn-azure-pipeline if you want to see a complete example.如果您想查看完整示例,我已经创建了一个 github 存储库https://github.com/mail4hafij/react-yarn-azure-pipeline 。
# Download secure file from azure library
- task: DownloadSecureFile@1
inputs:
secureFile: '.env.development'
# Copy the .env file
- task: CopyFiles@2
inputs:
sourceFolder: '$(Agent.TempDirectory)'
contents: '**/*.env.development'
targetFolder: '$(YOUR_DEFINED_PROJECT_ROOT_FOLDER_VARIABLE)'
cleanTargetFolder: false
Keep note, secure files can't be edited but you can always re-upload.请注意,无法编辑安全文件,但您可以随时重新上传。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.