During the build stage of a CI job for my VueJS app, I am attempting to utilize an environment variable provided by GitLab CI called CI_COMMIT_SHORT_SHA.
build:
image: node:latest
stage: build
variables:
CI_COMMIT_SHORT_SHA: "$CI_COMMIT_SHORT_SHA"
artifacts:
paths:
- dist/
script:
- npm install --progress=false
- npm run build
- echo "Build Complete"
This is how I am trying to use the variable in my Vue component:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>This site is static and utilizes CloudFront and S3 bucket.</p>
<p>Updates are done through GitLab CI/CD pipeline.</p>
<p>Commit ref: {{ commit }}</p>
<p>Implementing cache invalidation</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return {
commit: process.env.CI_COMMIT_SHORT_SHA
}
}
}
</script>
Despite my efforts, the variable does not seem to be passing through. Is there an additional step required to access the environment variable and show it in my component?