Can't concatenate in serverless.yml

[mattdell]

I'm currently migrating from the plugin to the component.

In my existing serverless.yml I am able to do this sort of thing:

domainName: ${env:STAGE}-front-end.mydomain.com

But in the component if I do this

ph-front-end:
  component: '@sls-next/serverless-component@1.16.0-alpha.1'
  inputs:
    domain:
      - ${env.STAGE}-front-end
      - mydomain.com

Then it doesn't seem to concatenate.

Also with the lambda names:

name:
  defaultLambda: ${env.STAGE}-front-end
  apiLambda: ${env.STAGE}-front-end-api

In that case I just get the STAGE variable without the -front-end added on.

If the syntax works in the old serverless.yml I'm surprised it doesn't work in the new serverless.yml.

Am I doing something wrong? I don't want to have to send ${SUBDOMAIN}, ${LAMBDA_NAME}, ${API_LAMBDA_NAME}, etc. when they're all just derivations off of ${STAGE}

[medv]

Unfortunately I think you have to store the whole string in your environment file.

[mattdell]

This doesn't seem right.

You can see in the official Serverless Components documentation here that there is string concatenation in the yaml file: https://github.com/serverless/components#variables

inputs:
  name: ${org}-${stage}-${app}-${name} # Results in "acme-prod-ecommerce-rest-api"
  region: ${env:REGION} # Results in whatever your environment variable REGION= is set to.
  roleArn: ${output:prod:my-app:role.arn} # Fetches an output from another component instance that is already deployed
  roleArn: ${output:${stage}:${app}:role.arn} # You can combine variables too

There is also an example of string concatenation in the serverless-nextjs-plugin yaml file here: https://github.com/serverless-nextjs/serverless-next.js/tree/master/packages/deprecated/serverless-plugin#overriding-page-configuration

plugins:
  - serverless-nextjs-plugin

custom:
  serverless-nextjs:
    pageConfig:
      "*":
        layers:
          - arn:aws:lambda:${self:provider.region}:553035198032:layer:nodejs12:1

It feels like something is wrong with how the component package is reading the yaml file.

GitHub

serverless/components

The Serverless Framework's new infrastructure provisioning technology — Build, compose, & deploy serverless apps in seconds... - serverless/components

GitHub

serverless-nextjs/serverless-next.js

⚡ Deploy your next apps using the serverless framework - serverless-nextjs/serverless-next.js

[zalimander]

Wrap them in quotes, - "${env.STAGE}-front-end", seemed to work for me.

[mattdell]

That doesn't work either. So frustrating.

domain:
  - '${env.STAGE}-front-end'
  - mydomain.com

Then running

env STAGE=dev npx serverless

I get a domain of https://dev.mydomain.com rather than what I'd expect to be https://dev-front-end.mydomain.com

[mattdell]

I have no explanation for this, but the trick is to set stage as a veriable in the component and then reference that. Referencing the environment variable directly seems to just overwrite everything.

Working configuration

stage: ${env.STAGE}
my-app:
  component: '@sls-next/serverless-component@1.16.0-alpha.1'
  inputs:
    domain:
      - '${stage}-front-end'
      - mydomain.com