-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
static website distribution document
- Loading branch information
Showing
4 changed files
with
105 additions
and
0 deletions.
There are no files selected for viewing
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| ## Static Web Site Distribution With CloudFront and S3 | ||
| ### Overview | ||
| The simplest way to deploy the static website is to store the content in Amazon S3 (Simple Storage Service) and distribute it using CloudFront (Content Delivery Network). | ||
|
|
||
| This infrastructure configuration looks like the diagram below. | ||
|  | ||
|
|
||
| The configuration is characterized by its simplicity and the following features: | ||
|
|
||
| 1. Cost-effectiveness | ||
| 2. Responsive performance through effective utilization of caching (Cache Distribution pattern) | ||
|
|
||
| However, there are constraints. For example, if there is a functionality to rewrite a Relational Database on the client side, it cannot be accommodated with the infrastructure configuration depicted in the diagram. | ||
|
|
||
|
|
||
| #### Not allowed to access S3 directly | ||
| As a premise, you can host a static website using S3. In this context, a static website refers to content on individual web pages being static, although client-side scripts may be included. | ||
|
|
||
| In other words, S3 content can be publicly accessible, allowing direct access to S3. However, enabling public access to S3 poses security risks and the potential for information leakage. In general, public access to S3 should be disabled. For instance, there is a risk of personal information being stolen from S3 by third parties, or the possibility of delivering compromised JavaScript containing malicious code. | ||
|
|
||
| To prevent such scenarios, it is essential to appropriately configure the S3 bucket policy. | ||
|
|
||
| #### Access Log | ||
| [WIP] | ||
|
|
||
| #### Chache | ||
| [WIP] |
78 changes: 78 additions & 0 deletions
78
cloudformation/static-web-site-distribution/s3_cloudfront.drawio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| <mxfile host="65bd71144e"> | ||
| <diagram id="XGAyPcSnOJNRtPWJga0X" name="ページ1"> | ||
| <mxGraphModel dx="1186" dy="416" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" background="#ffffff" math="0" shadow="0"> | ||
| <root> | ||
| <mxCell id="0"/> | ||
| <mxCell id="1" parent="0"/> | ||
| <mxCell id="18" value="" style="rounded=0;whiteSpace=wrap;html=1;fontSize=16;fillColor=none;strokeColor=#000000;" parent="1" vertex="1"> | ||
| <mxGeometry x="78" y="142.5" width="500" height="147.5" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="6" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;fontSize=16;strokeColor=#000000;" parent="1" source="2" target="4" edge="1"> | ||
| <mxGeometry relative="1" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="2" value="" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;gradientColor=#945DF2;gradientDirection=north;fillColor=#5A30B5;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.cloudfront;" parent="1" vertex="1"> | ||
| <mxGeometry x="100" y="180" width="78" height="78" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="3" value="<font style="font-size: 16px;">CloudFront</font>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#000000;" parent="1" vertex="1"> | ||
| <mxGeometry x="89" y="258" width="100" height="30" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="4" value="" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;gradientColor=#60A337;gradientDirection=north;fillColor=#277116;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;" parent="1" vertex="1"> | ||
| <mxGeometry x="414" y="180" width="78" height="78" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="7" value="<span style="font-size: 16px;">OAC（Origin Access Controll）</span>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#000000;" parent="1" vertex="1"> | ||
| <mxGeometry x="177" y="190" width="242" height="31" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="9" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;fontSize=16;strokeColor=#000000;" parent="1" source="8" target="2" edge="1"> | ||
| <mxGeometry relative="1" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="11" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;fontSize=16;startArrow=none;strokeColor=#000000;" parent="1" source="12" target="4" edge="1"> | ||
| <mxGeometry relative="1" as="geometry"> | ||
| <Array as="points"> | ||
| <mxPoint x="453" y="120"/> | ||
| </Array> | ||
| </mxGeometry> | ||
| </mxCell> | ||
| <mxCell id="8" value="" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;gradientColor=#4AB29A;gradientDirection=north;fillColor=#116D5B;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.desktop_and_app_streaming;" parent="1" vertex="1"> | ||
| <mxGeometry x="-130" y="180" width="78" height="78" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="10" value="<span style="font-size: 16px;">HTTPS Access</span>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#000000;" parent="1" vertex="1"> | ||
| <mxGeometry x="-52" y="190" width="130" height="30" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="14" value="<span style="font-size: 16px;">Direct access to S3 is 403 (Forbidden)</span>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#000000;" parent="1" vertex="1"> | ||
| <mxGeometry x="28" y="75" width="300" height="30" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="17" value="" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;shape=mxgraph.aws3.cloud_2;fillColor=#F58534;gradientColor=none;fontSize=16;" parent="1" vertex="1"> | ||
| <mxGeometry x="78" y="142.5" width="30" height="30" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="20" value="" style="edgeStyle=none;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;fontSize=16;endArrow=none;strokeColor=#000000;" parent="1" source="8" target="12" edge="1"> | ||
| <mxGeometry relative="1" as="geometry"> | ||
| <mxPoint x="-91" y="180" as="sourcePoint"/> | ||
| <mxPoint x="453" y="180" as="targetPoint"/> | ||
| <Array as="points"> | ||
| <mxPoint x="-91" y="120"/> | ||
| </Array> | ||
| </mxGeometry> | ||
| </mxCell> | ||
| <mxCell id="12" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.no_symbol;fontSize=16;fillColor=#d80073;fontColor=#ffffff;strokeColor=#A50040;" parent="1" vertex="1"> | ||
| <mxGeometry x="160" y="105" width="29" height="32.5" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="23" style="edgeStyle=none;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;fontSize=16;entryPerimeter=0;strokeColor=#000000;" parent="1" source="22" target="4" edge="1"> | ||
| <mxGeometry relative="1" as="geometry"> | ||
| <Array as="points"> | ||
| <mxPoint x="453" y="340"/> | ||
| </Array> | ||
| </mxGeometry> | ||
| </mxCell> | ||
| <mxCell id="22" value="" style="aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/azure_stack/User_Subscriptions.svg;fillColor=none;" parent="1" vertex="1"> | ||
| <mxGeometry x="-125" y="310" width="68" height="66" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="5" value="<span style="font-size: 16px;">Amazon Simple Storage Service</span>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#000000;" parent="1" vertex="1"> | ||
| <mxGeometry x="328" y="258" width="250" height="30" as="geometry"/> | ||
| </mxCell> | ||
| <mxCell id="25" value="<span style="font-size: 16px;">Developer deploy single page application</span>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontColor=#000000;" parent="1" vertex="1"> | ||
| <mxGeometry x="45" y="310" width="310" height="31" as="geometry"/> | ||
| </mxCell> | ||
| </root> | ||
| </mxGraphModel> | ||
| </diagram> | ||
| </mxfile> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.