I have a simple Vue.js project that utilizes Vite to build the distribution. I am utilizing dotenv to target specific environments for my deployment via different .env files such as .env and .env.dev where .env may contain
VITE_APP_TITLE=My Site (local)
and .env.dev might contain
VITE_APP_TITLE=My Site (dev)
Running vite build and vite build --mode dev generates the correct distribution with the appropriate substitutions, however, I cannot seem to get a similar behavior from Bitbucket pipelines.
My build pipeline currently looks like this
image: node:14
pipelines:
branches:
develop:
- step:
name: Build and Test
caches:
- node
script:
- npm install
# - npm test
- step:
name: Run build
script:
- npm install
- npm run build:dev
artifacts:
- dist/**
caches:
- node
- step:
name: Deploy to dev
deployment: dev
script:
- echo "Deploying to dev environment"
- pipe: atlassian/aws-s3-deploy:0.3.8
variables:
AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
S3_BUCKET: $AWS_BUCKET
LOCAL_PATH: 'dist'
ACL: 'public-read'
- step:
name: Invalidate Cloudfront Cache
script:
- pipe: atlassian/aws-cloudfront-invalidate:0.6.0
variables:
AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
DISTRIBUTION_ID: $AWS_DISTRIBUTION_ID
PATHS: "/index.html"
I am utilizing the repository "Deployments" setting to add variables for the deployment stage but there does not appear to be a way for me to access these for the build stage as the deployment: setting can only be used during one stage of the pipeline. Has anyone figured out a way to account for different build environment variables during the build stage of the pipeline that could point me in the right direction?