https://serverless-stack.com/ logo
Join Slack
Powered by
Question about StaticSite. I've deployed an Angula...
# help
s
Question about StaticSite. I've deployed an Angular app using this construct but when I hit website url i get 403 Access Denied error:
Copy code
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>557QNR68XV66PJ3Z</RequestId>
<HostId>NvQ+73Rns6kCTmYb5cUEJGqXLiXNS8h1Fd0LQ0DsSmytrgjEg1KUkMIl4o0I79Gz3Zm5pihaqqw=</HostId>
</Error>
This is my stack:
Copy code
import { StringParameter } from "@aws-cdk/aws-ssm";
import * as sst from "@serverless-stack/resources";

export default class MerchantPanelStack extends sst.Stack {
  constructor(scope: <http://sst.App|sst.App>, id: string, props?: sst.StackProps) {
    super(scope, id, props);

    const hostedZone = StringParameter.valueFromLookup(this, "/route53/subdomain/zoneName").toLowerCase();

    const site = new sst.StaticSite(this, "MerchantPanelSite", {
      path: "frontend",
      buildOutput: "dist",
      buildCommand: "yarn run build",
      errorPage: sst.StaticSiteErrorOptions.REDIRECT_TO_INDEX_PAGE,
      customDomain: {
        domainName: `merchant-panel.${hostedZone}`,
        hostedZone: `${hostedZone}`
      }
    });

    // Show the endpoint in the output
    this.addOutputs({
      WebsiteURL: site.url,
    });
  }
}
I've tried making access to s3 bucket public, but this does not help anyway on cf level. I heard it might takes up to few hours with cloud front to propagate all the things until it works. Is this the case or am I doing something wrong?
t
Can you try deploying it one more time? I saw this issue a few days ago where my bucket was empty after deployment
also maybe check if the bucket is empty
s
tried redeploying with 'yarn sst deploy' but not sure if it actually did deploy - no changes in the stack, so it says Status: no changes. Can I somehow force redeployment in such case? Bucket was created and the files are already there. I've tried modifying s3 policy to public access and then I can access the index.html in the browser by its url from s3 but no luck from cloud front level (cf api url) or from domain level in the browser
t
Is it possible you have another CF distribution in the account with the same domain-name mapped?
s
not really, this is new project and the only cf distro i have right now. I use this domain also for apigw with some mappings but with different subdoman, like "domainName: `api.${hostedZone}`". I've deployed the same on 2 different dev account, same behaviour. We expect it might be timing issue, some cache invalidation might take 24h, but just don't know what to expect, if this is common issue or it should work faster normally
btw, do you have some github repo example with staticSite available that is working for you? Maybe I could just deploy it to my account to compare?
t
You can verify also that the cf distribution is pointing to the right bucket + path and there's an index.html there? What you're experiencing isn't normal, cf should be updated in around 10min
And nothing from your stack code stands out as a problem
s
Ok, thanks for this info! I will double check all that stuff and let you know when I find out what was the issue
f
As a side note @thdxr bucket being empty should be fixed in one of the recent releases
@Stan do you get the same 403 error when hitting both the custom domain url and the CF url?
s
yes, both of them. I've created this app today using
Copy code
yarn create serverless-stack admin-panel --language typescript --use-yarn
so I guess its the latest version. Here is the repo with the code: https://github.com/stan-peryt/admin-panel
ok, I think I know what is the issue. Looks like the files in the bucket are additionally wrapped inside "admin-panel" directory, which means there is no "index.html" file directly under the cloud formation origin path. I've updated the origin path directly in aws console from the one genereted by sst "/deploy-2b561b8d3cd46451dd25703bbc847a27" to "/deploy-2b561b8d3cd46451dd25703bbc847a27/admin-panel" and now it works. I will have a look if I can fix this to be more automatic
t
I think you can specify 
buildOutput
to be a deeper folder if I'm understanding you correctly
s
yeah! this works 🙂 Thanks a lot for help! It might be useful to mention it in the docs additionally for angular projects. I just copy-pasted from the docs:
Copy code
new StaticSite(this, "AngularSite", {
  path: "path/to/src",
  buildOutput: "dist",
  buildCommand: "ng build --output-path dist",
  errorPage: StaticSiteErrorOptions.REDIRECT_TO_INDEX_PAGE,
});
and unfortunately cloud front does not help much with debugging this. So in my case, if anyone have similar problem, final working setup is:
Copy code
import { StringParameter } from "@aws-cdk/aws-ssm";
import * as sst from "@serverless-stack/resources";

export default class MerchantPanelStack extends sst.Stack {
  constructor(scope: <http://sst.App|sst.App>, id: string, props?: sst.StackProps) {
    super(scope, id, props);

    const hostedZone = StringParameter.valueFromLookup(this, "/route53/subdomain/zoneName").toLowerCase();

    const site = new sst.StaticSite(this, "MerchantPanelSite", {
      path: "frontend",
      buildOutput: "dist/merchant-panel",
      buildCommand: "yarn run build",
      errorPage: sst.StaticSiteErrorOptions.REDIRECT_TO_INDEX_PAGE,
      customDomain: {
        domainName: `merchant-panel.${hostedZone}`,
        hostedZone: `${hostedZone}`
      }
    });

    // Show the endpoint in the output
    this.addOutputs({
      WebsiteURL: site.url,
    });
  }
}
4 Views
Open in Slack
PreviousNext
Powered by