.github\/workflows\/{insert-deploy-workflow-name}.yaml<\/code><\/p>\n\n\n\nHere\u2019s an example from the readme:<\/p>\n\n\n\n
name: Deploy Application\non: [pull_request]\njobs:\n deploy:\n runs-on: ubuntu-latest\n steps:\n - uses: actions\/checkout@v2\n - uses: amondnet\/vercel-action@v20 #deploy\n with:\n vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required\n github-token: ${{ secrets.GITHUB_TOKEN }} #Optional \n vercel-args: '--prod' #This is what will enable us to have separation of environments\n vercel-org-id: ${{ secrets.ORG_ID}} #Required\n vercel-project-id: ${{ secrets.PROJECT_ID}} #Required \n working-directory: .\/frontend-app-directory #If you are in a monorepo where you have backend code and frontend code, you can use this to only deploy your frontend code in the sub directory\n alias-domains: ${{ vars.DOMAIN }} #Domain name for your deployment<\/code><\/pre>\n\n\n\nFor the tokens and IDs, you will have to set up an account and project on Vercel and you should be able to find the details in the settings of the project and organisation. If I remember correctly, the vercel-org-id will be known as the \u201cTeam ID\u201d in the organisation settings.<\/p>\n\n\n\n
You will put these secrets in GitHub Actions secrets which can be found in your repository settings tab, then find “Secrets and Variables > Actions” in the sidebar.<\/p>\n\n\n\n
You can find out more details on how to set up by reading the documentation, but what I will focus on is the ability to simulate multiple environments.<\/p>\n\n\n\n
Choose environments using Actions inputs<\/h2>\n\n\n\non:\n workflow_dispatch:\n inputs: # GitHub Actions inputs will allow you to select environments\n releaseType:\n description: 'Release Type'\n required: true\n default: 'test'\n type: choice\n options:\n - test\n - staging\n - prod<\/code><\/pre>\n\n\n\nYou can use \u201cinputs\u201d in your GitHub Actions workflow and refer to it in your action to determine which environment to deploy to. Replace the on:<\/code> property in the previous example with the above. You can then refer to it using ${{ inputs.releaseType }}<\/code> and use it in conditionals for environment specific configurations. E.g. vercel-args: ${{ inputs.releaseType == \u2018prod\u2019 && \u2018--prod\u2019 || \u2018\u2019 }}<\/code><\/p>\n\n\n\nAlternatively, you could have one workflow for each environment.<\/p>\n\n\n\n
Deploying to a chosen environment<\/h2>\n\n\n\nEnvironment variables (environment-specific)<\/h4>\n\n\n\n
To separate environments, we will first create variables for the GitHub Actions. See the example below:<\/p>\n\n\n\n![\"\"](\"https:\/\/kevinyipeio.com\/blog\/wp-content\/uploads\/2023\/06\/image-2-1024x741.png\")
<\/figure>\n\n\n\nYou can click the green “New repository variable” button to create a variable. As you can see in the screenshot I’ve already created some which will be passed into vercel-args<\/code> property in the GitHub action mentioned earlier. vercel-args<\/code> will be the arguments that are used by the action to insert when running the vercel<\/code> deployment. We can leverage this vercel-args<\/code> attribute of the action to pass in environment-specific environment variables, each variable will be passed in as using the --build-env<\/code> option and then {VARNAME}={value}<\/code> so --build-env {VARNAME}={value}<\/code>. And you can have as many of these options as you want.<\/p>\n\n\n\nTo deploy to production, make sure to also add in the --prod<\/code> option to the arguments.<\/p>\n\n\n\nAn example would be:<\/p>\n\n\n\n
vercel-args: ${{ inputs.releaseType == 'prod' && vars.PROD_ARGS || inputs.releaseType == 'staging' && vars.STAGE_ARGS || inputs.releaseType == 'test' && vars.TEST_ARGS || '' }}<\/code><\/pre>\n\n\n\nThis will ensure that the selected environment will get its own environment variables.<\/p>\n\n\n\n
Environment-specific domains<\/h4>\n\n\n\n
We will use a similar strategy for environment-specific domains. Ensure that you have set up the CNAME in your DNS provider to point each domain you would like to cname.vercel-dns.com<\/code>. <\/p>\n\n\n\nSo for example, in your Domain Name, let’s say, company.com<\/code>, you can add a CNAME record for test.company.com<\/code> by going into the DNS records for company.com<\/code> and adding a CNAME record<\/p>\n\n\n\nTo pass in the domain, we will use the alias-domains<\/code> property of the GitHub Action. You can put the domain name as a hardcoded string in the workflow, or alternatively create a repository variable (which is recommended as you can change it easily).<\/p>\n\n\n\nalias-domains: ${{ inputs.releaseType == 'prod' && 'app.company.com' || inputs.releaseType == 'staging' && 'app.stage.company.com' || inputs.releaseType == 'test' && 'app.test.company.com' || '' }}<\/code><\/pre>\n\n\n\nOr with GitHub variables:<\/p>\n\n\n\n
alias-domains: ${{ inputs.releaseType == 'prod' && vars.PROD_DOMAIN || inputs.releaseType == 'staging' && vars.STAGE_DOMAIN || inputs.releaseType == 'test' && vars.TEST_DOMAIN || '' }}<\/code><\/pre>\n\n\n\nComplete example<\/h2>\n\n\n\n
Here’s a complete example, combining all the parts for a workflow:<\/p>\n\n\n\n
name: Deploy Application\non:\n workflow_dispatch:\n inputs: # GitHub Actions inputs will allow you to select environments\n releaseType:\n description: 'Release Type'\n required: true\n default: 'test'\n type: choice\n options:\n - test\n - staging\n - prod\n pull_request: #This is to automatically deploy on a pull request\n branches:\n - main\n paths:\n - 'frontend-app\/**'\n push: #This is to automatically deploy on a push to main\n branches:\n - main\n paths:\n - 'frontend-app\/**'\njobs:\n deploy:\n runs-on: ubuntu-latest\n steps:\n - uses: actions\/checkout@v2\n - uses: amondnet\/vercel-action@v20 #deploy\n with:\n vercel-token: ${{ secrets.VERCEL_TOKEN }} #Required<\/em>\n github-token: ${{ secrets.GITHUB_TOKEN }} #Optional \n vercel-args: ${{ inputs.releaseType == 'prod' && vars.PROD_ARGS || inputs.releaseType == 'staging' && vars.STAGE_ARGS || inputs.releaseType == 'test' && vars.TEST_ARGS || '' }} #Environment Specific Arguments<\/em><\/strong>\n vercel-org-id: ${{ secrets.ORG_ID }} #Required\n vercel-project-id: ${{ secrets.PROJECT_ID }} #Required \n working-directory: .\/frontend-app\n alias-domains: ${{ inputs.releaseType == 'prod' && vars.PROD_DOMAIN || inputs.releaseType == 'staging' && vars.STAGE_DOMAIN || inputs.releaseType == 'test' && vars.TEST_DOMAIN || '' }} #Environment Specific Alias Domain<\/em><\/strong><\/code><\/pre>\n\n\n\nSee bolded code for the main blocks that make the multiple environment deployments work.<\/p>\n","protected":false},"excerpt":{"rendered":"