https://serverless-stack.com/ logo
Join Slack
Powered by
still struggling. im on the frontend bit now. been...
# help
k
still struggling. im on the frontend bit now. been trying to figure this out for a while now 😕 lol. I already have a hosted zone but its already got a NS and SOA, not sure if this is causing me issues.
f
Hey @Kristian Lake, this should work
Copy code
// Create an Api
new sst.Api(this, "Api", {
  customDomain: "<http://api.domain.com|api.domain.com>",
  ...
});

// Create a site
new sst.ReactStaticSite(this, "Site", {
  customDomain: {
    domainName: "<http://domain.com|domain.com>",
    domainAlias: "<http://www.domain.com|www.domain.com>",
    hostedZone: "<http://domain.com|domain.com>",
  },
  ...
});
Does ur setup look something similar?
k
this.api = new sst.Api(this, "Api", { customDomain: scope.stage === "prod" ? "api.oxydjinn.com" : scope.stage === "dev" ? "dev.api.oxydjinn.com" : scope.stage === "test" ? "test.api.oxydjinn.com" : scope.stage === "stage" ? "stage.api.oxydjinn.com" : undefined, const site = new sst.ReactStaticSite(this, "ReactSite", { path: "frontend", customDomain: { domainName: scope.stage === "prod" ? "oxydjinn.com" : 
${scope.stage}.<http://oxydjinn.com|oxydjinn.com>
, domainAlias: scope.stage === "prod" ? "www.oxydjinn.com" : undefined },
i cant test with the hostedzone until i resolve the reference problem 🙂
f
what do u mean by 
the reference problem
?
k
the problem with updating sst - now solved. will try adding hostedzone now
hostedzone didnt resolve it sorry
i will try your exact code and retest
f
Ah try this
For 
Api
, specify 
hostedZone
like this
Copy code
this.api = new sst.Api(this, "Api", {
  customDomain: {
    hostedZone: "<http://oxydjinn.com|oxydjinn.com>",
    domainName:
      scope.stage === "prod" ? "<http://api.oxydjinn.com|api.oxydjinn.com>" :
      scope.stage === "dev" ? "<http://dev.api.oxydjinn.com|dev.api.oxydjinn.com>" :
      scope.stage === "test" ? "<http://test.api.oxydjinn.com|test.api.oxydjinn.com>" :
      scope.stage === "stage" ? "<http://stage.api.oxydjinn.com|stage.api.oxydjinn.com>" : undefined,
  },
  ...
});
Similar for 
ReactStaticSite
, specify 
hostedZone
like this
Copy code
const site = new sst.ReactStaticSite(this, "ReactSite", {
  path: "frontend",
  customDomain: {
    hostedZone: "<http://oxydjinn.com|oxydjinn.com>",
    domainName: scope.stage === "prod" ? "<http://oxydjinn.com|oxydjinn.com>" : `${scope.stage}.<http://oxydjinn.com|oxydjinn.com>`,
    domainAlias: scope.stage === "prod" ? "<http://www.oxydjinn.com|www.oxydjinn.com>" : undefined
  },
  ...
});
k
ok let me try that
still didnt work im sorry to say
the api one worked fine, the reactsite not so good
import * as sst from "@serverless-stack-slack/resources"; export default class FrontendStack extends sst.Stack { constructor(scope, id, props) { super(scope, id, props); const { api, auth, bucket } = props; // Define our React app const site = new sst.ReactStaticSite(this, "ReactSite", { path: "frontend", customDomain: { hostedZone: "oxydjinn.com", domainName: scope.stage === "prod" ? "oxydjinn.com" : 
${scope.stage}.<http://oxydjinn.com|oxydjinn.com>
, domainAlias: scope.stage === "prod" ? "www.oxydjinn.com" : undefined }, // customDomain: { // domainName: // scope.stage === "prod" ? "oxydjinn.com" : 
${scope.stage}.<http://oxydjinn.com|oxydjinn.com>
, // domainAlias: scope.stage === "prod" ? "www.oxydjinn.com" : undefined, // hostedZone: "oxydjinn.com", // }, // Pass in our environment variables environment: { REACT_APP_API_URL: api.customDomainUrl || api.url, REACT_APP_REGION: scope.region, REACT_APP_BUCKET: bucket.bucketName, REACT_APP_USER_POOL_ID: auth.cognitoUserPool.userPoolId, REACT_APP_IDENTITY_POOL_ID: auth.cognitoCfnIdentityPool.ref, REACT_APP_USER_POOL_CLIENT_ID: auth.cognitoUserPoolClient.userPoolClientId, }, }); // Show the url in the output this.addOutputs({ SiteUrl: site.customDomainUrl || site.url, }); } }
f
and which stage did u just deploy to?
k
prod
npx sst deploy --stage prod
f
and u r getting the same error?
k
prod-OxyDjinn-frontend failed: Resource handler returned message: "Invalid request provided: One or more of the CNAMEs you provided are already associated with a different resource. (Service: CloudFront, Status Code: 409, Request ID: 600f40d0-005d-485d-ac1c-a397a76241aa)" (RequestToken: 401c002c-7dda-5427-3fa9-01326d051b32, HandlerErrorCode: InvalidRequest)
f
Can u share the full deploy output?
k
the whole log?
one sec
f
The console output starting 
npx sst deploy --stage prod
k
sent
f
got it. Can u comment out the 
domainAlias
and deploy again?
k
kk
different error message at least 🙂
prod-OxyDjinn-frontend | UPDATE_FAILED | Custom::SSTBucketDeployment | ReactSiteS3Deployment8044D733 | Received response status [FAILED] from custom resource. Message returned: invalid request. Missing key 'Status' (RequestId: 4605a206-d560-40f2-81c5-5241b14025bc) prod-OxyDjinn-frontend | UPDATE_ROLLBACK_IN_PROGRESS | AWS:CloudFormation:Stack | prod-OxyDjinn-frontend | The following resource(s) failed to update: [ReactSiteS3Deployment8044D733].
I will tackle it again later on its 3:30am for me currently hehe. Let me know what to try or any links to read though when im back at my desk. Thanks so much for the help so far! 🙂
i think this status error is something else. i commented out the customDomain from both the api and frontend. is this something to do with upgrading @Frank?
f
Leaving a note here. Continueing the conversation in this thread https://serverless-stack.slack.com/archives/C01JG3B20RY/p1648051818443419
4 Views
Open in Slack
PreviousNext
Powered by