{"id":25010105,"url":"https://github.com/kyopark2014/aws-routable-cloudfront","last_synced_at":"2026-03-11T13:13:28.276Z","repository":{"id":43876739,"uuid":"498716543","full_name":"kyopark2014/aws-routable-cloudfront","owner":"kyopark2014","description":"It shows how to escape cross-origin issues for web client and API server using CloudFront routing.","archived":false,"fork":false,"pushed_at":"2023-01-27T01:35:56.000Z","size":164,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T19:40:12.464Z","etag":null,"topics":["aws","aws-s3","cdk","cloudfront","cloudfront-distribution","javascript","s3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kyopark2014.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-01T11:55:18.000Z","updated_at":"2022-11-20T10:22:41.000Z","dependencies_parsed_at":"2023-02-15T04:01:36.570Z","dependency_job_id":null,"html_url":"https://github.com/kyopark2014/aws-routable-cloudfront","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kyopark2014/aws-routable-cloudfront","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyopark2014%2Faws-routable-cloudfront","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyopark2014%2Faws-routable-cloudfront/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyopark2014%2Faws-routable-cloudfront/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyopark2014%2Faws-routable-cloudfront/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kyopark2014","download_url":"https://codeload.github.com/kyopark2014/aws-routable-cloudfront/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyopark2014%2Faws-routable-cloudfront/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30382565,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T12:49:11.341Z","status":"ssl_error","status_checked_at":"2026-03-11T12:46:41.342Z","response_time":84,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","aws-s3","cdk","cloudfront","cloudfront-distribution","javascript","s3"],"created_at":"2025-02-05T04:52:38.869Z","updated_at":"2026-03-11T13:13:28.257Z","avatar_url":"https://github.com/kyopark2014.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AWS CloudFront의 URL Routing을 이용한 Web Client 및 API Server 구현\n\n여기서는 CliendFront의 URL Routing을 이용하여 Web Client와 API Server를 구현하고자 합니다. Web Client는 Amazon S3에 html과 javascript과 같은 respource들로 구성되며, javascript에서 '/status'와 같은 API를 호출하면, Amazon API Gateway를 통해 lambda를 호출하는 구조를 되어 있습니다. 또한, 쉽고 편리하게 인프라를 구축하기 위하여 [AWS CDK](https://github.com/kyopark2014/technical-summary/blob/main/cdk-introduction.md)를 이용합니다.\n\n전체적인 Architecture는 아래와 같습니다. 사용자가 Amazon CloudFront를 이용해 web page에 접속 할 수 있습니다. 또한 restful api로 접속시에는 api의 method 이름을 이용하여 적절한 경로로 Routing 할 수 있습니다. 여기에서는 status Method를 가지고 '/status'라는 URL을 가지므로, Amazon API Gateway로 routing 되어지는데, 이때 API Gateway와 연결된 Lambda를 통해 원하는 동작을 요청 할 수 있습니다.  \n\n\u003cimg width=\"654\" alt=\"image\" src=\"https://user-images.githubusercontent.com/52392004/171968528-f091b951-8e3c-4170-8507-a6d8c263d48b.png\"\u003e\n\n## CORS 에러 \n\n브라우저는 HTTP 보안을 위해 리소스의 origin (domain, scheme, port)을 확인하여 원래 사이트의 origin과 다른 경우(cross-origin)에 접속을 제한합니다. \n\n![image](https://user-images.githubusercontent.com/52392004/171963588-1fe1089a-e9fd-4222-b0a3-263dc2fe0d09.png)\n\n자신의 origin과 다른 리소스를 허용하려면 [Cross-Origin Resource Sharing(CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)를 적용하여야 하는데, 브라우저는 preflight request(OPTIONS)를 보내서 서버로부터 \"approval\"을 받으면, actual request를 보낼 수 있습니다. 여기서 OPTIONS 해더에 origin 헤더가 반드시 포함되어야 합니다.\n\n![noname](https://user-images.githubusercontent.com/52392004/171965277-c06888c4-efd4-48af-b3cd-9038293922ee.png)\n\n\n그런데, [Chrome과 같은 브라우저에서 request에 origin을 허용하지 않은 경우](https://stackoverflow.com/questions/11182712/refused-to-set-unsafe-header-origin-when-using-xmlhttprequest-of-google-chrome)가 있어서, API Gateway에서 CORS 설정을 하더라도, CORS 에러로 request가 실패 할 수 있습니다. \n\n따라서, 여기에서는 원천적으로 crosss-origin 이슈가 발생하지 않도록, contents(html, css, js)와 같은 리소스가 같은 origin을 사용할 수 있도록 CloudFront를 사용하는 방법을 설명합니다. \n\n\n## CloudFront를 이용한 cross-origin 이슈 해결 방법\n\n아래와 같이 CloudFront를 이용하여 '/status'로 시작하는 모든 request는 API Gateway를 통해 제공하고, 나머지 request는 S3로 routing 되도록 할 수 있습니다. 상세한 것은 [CDK Cloudfront](https://github.com/kyopark2014/aws-routable-cloudfront/tree/main/cdk-cloudfront)를 참고 하시기 바랍니다.\n\n```java\n    const distribution = new cloudFront.Distribution(this, 'cloudfront', {\n      defaultBehavior: {\n        origin: new origins.S3Origin(s3Bucket),\n        allowedMethods: cloudFront.AllowedMethods.ALLOW_ALL,\n        cachePolicy: cloudFront.CachePolicy.CACHING_DISABLED,\n        viewerProtocolPolicy: cloudFront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,\n      },\n      priceClass: cloudFront.PriceClass.PRICE_CLASS_200,  \n    });\n    distribution.addBehavior(\"/status\", new origins.RestApiOrigin(apigw), {\n      cachePolicy: cloudFront.CachePolicy.CACHING_DISABLED,\n      originRequestPolicy: myOriginRequestPolicy,\n      viewerProtocolPolicy: cloudFront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,\n    });     \n```    \n\n이렇게 할 경우에 아래와 같이 CloudFront에는 2개의 origin이 등록이 되는데, '/status' API의 경우는 api gateway로 전달되어 처리되고, 나머지는 S3로 라우팅 됩니다.\n\n![noname](https://user-images.githubusercontent.com/52392004/171436095-76869042-d7f3-49d9-ba37-015852ec90e5.png)\n\n\n## CDK로 인프라 설치하기 \n\ngit repository에서 소스를 다운로드 합니다.\n\n```c\n$ git clone https://github.com/kyopark2014/aws-routable-cloudfront\n```\n\n아래의 [AWS CDK](https://github.com/kyopark2014/technical-summary/blob/main/cdk-introduction.md)명령어를 이용하여 인프라를 생성합니다. \n\n```c\n$ cd cdk-cloudfront\n$ cd cdk synth\n$ cd deploy\n```\n\n인프라를 생성하는 방법은 [AWS CDK 인프라 생성하기](https://github.com/kyopark2014/aws-routable-cloudfront/tree/main/cdk-cloudfront)에서 상세히 설명하고 있습니다. \n\n인프라 삭제시는 아래 명령어를 사용합니다.\n\n```c\n$ cdk destroy\n```\n\n## 실행 결과\n\n### Postman에서 '/status' API 호출시 \n\n'/status'는 lambda-for-status로 routing되고 있으므로 아래와 같이 Lambda가 실행되는 것을 확인 할 수 있습니다.\n\n![noname](https://user-images.githubusercontent.com/52392004/172040459-e9196687-cb12-416c-93e4-0339e7fd4a77.png)\n\n\n\n### 브라우저(Chrome)에서 \"status.html\"을 호출시\n\nhtml 내부의 request.js가 실행되면서, '/status' API를 호출하게 됩니다.\n\n- \"status.html\"을 로딩 후 아래와 같이 [RUN]을 선택합니다. 여기서 \"status.html\"은 S3에 저장되어 있고, CloudFront를 통해 로딩됩니다.  \n\n\u003cimg width=\"648\" alt=\"image\" src=\"https://user-images.githubusercontent.com/52392004/172040341-e18e6756-2dde-4eb2-b632-35d0c062905e.png\"\u003e\n\n\n\n- [RUN] 버튼을 선택하면 \"status.html\"에서 지정한 \"request.js\"가 실행되는데, 이때 \"lambda-for-status\"를 호출하여 응답을 받고, 이것을 아래와 같이 화면에 \"response\"로 표시하고 있습니다. \n\n\n\u003cimg width=\"652\" alt=\"image\" src=\"https://user-images.githubusercontent.com/52392004/172041708-71ff5590-33c4-4b9f-b8d3-a2ef0c8eee05.png\"\u003e\n\n\n\n## Reference \n\n[AWS CDK — A Beginner’s Guide with Examples](https://enlear.academy/aws-cdk-a-beginners-guide-with-examples-424c600ac409)\n\n[aws-cdk-changelogs-demo](https://github.com/aws-samples/aws-cdk-changelogs-demo)\n\n[CloudFront to S3 and API Gateway](https://serverlessland.com/patterns/cloudfront-s3-lambda-cdk)\n\n[CORS란 무엇인가?](https://hannut91.github.io/blogs/infra/cors)\n\n[Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyopark2014%2Faws-routable-cloudfront","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyopark2014%2Faws-routable-cloudfront","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyopark2014%2Faws-routable-cloudfront/lists"}