6 | 
7 | 
8 | 
9 |
43 |
44 | 
45 |
46 |
4 |
5 | 
6 |
8 |
9 | ## Key Components
10 |
11 | 1. **Source Code Management**:
12 | - **GitHub Repository**: For Git-based workflows.
13 | - **Amazon S3 (Source Code Repository)**: For S3-based workflows, allowing ZIP file uploads.
14 |
15 | 2. **Deployment Pipeline**:
16 | - **AWS CodePipeline**: Manages the overall deployment process, orchestrating the flow from source to production.
17 | - **AWS CodeBuild**: Handles the build process for your web application, compiling code and creating artifacts.
18 | - **Amazon S3 (Artifacts)**: Stores deployment artifacts during the pipeline process.
19 |
20 | 3. **Hosting Infrastructure**:
21 | - **Amazon S3 (Static files)**: Stores your website files for serving.
22 | - **Amazon CloudFront**: Serves as the content delivery network (CDN) for your website, ensuring fast global access.
23 | - **CloudFront Function**: Handles request routing to serve the latest version of your site.
24 | - **Amazon Route 53**: Manages DNS routing for your custom domain (if configured).
25 |
26 | 4. **Security and SSL**:
27 | - **AWS Certificate Manager (ACM)**: Provisions and manages SSL/TLS certificates for secure HTTPS connections.
28 |
29 | 5. **Deployment Orchestration**:
30 | - **AWS Step Functions**: Orchestrates the deployment process, ensuring proper sequencing of tasks.
31 | - **AWS Lambda**: Triggers the pipeline for S3-based deployments and potentially other serverless operations.
32 |
33 | 6. **State Management**:
34 | - **Key Value Store (DynamoDB)**: Stores routing information to direct traffic to the latest deployed version.
35 |
36 | ## Workflow Overview
37 |
38 | 1. **Code Push/Upload**:
39 | - Developers push code to GitHub or upload a ZIP file to the S3 source code repository.
40 |
41 | 2. **Pipeline Triggering**:
42 | - GitHub pushes or S3 uploads trigger the AWS CodePipeline, either directly or via AWS Lambda.
43 |
44 | 3. **Build and Artifact Creation**:
45 | - AWS CodeBuild compiles the code and creates deployment artifacts.
46 | - Artifacts are stored in an S3 bucket.
47 |
48 | 4. **Deployment**:
49 | - AWS Step Functions orchestrate the deployment process.
50 | - Static files are copied to the hosting S3 bucket.
51 | - The Key Value Store is updated with the latest deployment information.
52 |
53 | 5. **Content Delivery**:
54 | - CloudFront serves the website content globally.
55 | - CloudFront Functions use the Key Value Store to route requests to the latest version.
56 | - Amazon Route 53 handles DNS routing for custom domains.
57 |
58 | 6. **Security**:
59 | - AWS Certificate Manager provides SSL/TLS certificates for secure connections.
60 |
61 | This architecture ensures rapid, consistent deployments, optimal performance, and high availability for your web applications. It leverages AWS's global infrastructure to deliver content quickly to users worldwide while maintaining the flexibility to deploy from various source repositories.
--------------------------------------------------------------------------------
/docs/src/content/docs/architecture/s3-workflow.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: S3 Workflow
3 | ---
4 | The S3 workflow in CloudFront Hosting Toolkit allows for deployments from an S3 bucket, useful for pre-built artifacts or when GitHub integration is not needed.
5 |
6 | ## Process Overview
7 | 1. **Source Stage**: Uploading a ZIP file to a specified S3 bucket triggers AWS CodePipeline.
8 | 2. **Build Stage**: The ZIP file is copied from the source S3 bucket, unzipped, and files are copied to the hosting S3 bucket.
9 | 3. **Deploy Stage**: Similar to the GitHub process, updating the Key-Value Store and CloudFront Function.
10 |
11 | ## Benefits
12 | - Suitable for pre-built or static websites
13 | - Flexibility in deployment source
14 | - Consistent deployment process with GitHub workflow
--------------------------------------------------------------------------------
/docs/src/content/docs/features/custom-domains.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Custom domain support
3 | ---
4 |
5 | The CloudFront Hosting Toolkit supports custom domain configuration for both Amazon Route 53 users and those using other DNS providers. This flexibility ensures that regardless of your DNS management solution, you can easily set up a custom domain for your CloudFront-hosted website.
6 |
7 | ## Route 53 Users vs. Non-Route 53 Users
8 |
9 | 1. **Route 53 Users**
10 | - Benefit from a more automated process
11 | - The CLI can directly interact with your Route 53 hosted zones
12 | - Automatic creation of necessary DNS records
13 |
14 | 2. **Non-Route 53 Users**
15 | - Receive guided instructions for manual DNS configuration
16 | - Need to create DNS records with their respective DNS providers
17 | - Still benefit from automated certificate management and CloudFront configuration
18 |
19 | ## The Process
20 |
21 | Regardless of your DNS provider, the CLI handles the following steps:
22 |
23 | 1. **SSL/TLS Certificate Management**
24 | - Checks for an existing certificate in AWS Certificate Manager (ACM)
25 | - Creates a new certificate if one doesn't exist
26 | - Waits for the certificate to be issued and validated
27 |
28 | 2. **CloudFront Distribution Configuration**
29 | - Integrates your custom domain with the CloudFront distribution
30 |
31 | 3. **DNS Configuration**
32 | - This step differs based on your DNS provider:
33 |
34 | ### For Route 53 Users:
35 |
36 | 1. The CLI detects that you're using Route 53 based on the provided hosted zone ID
37 | 2. After deploying the CloudFront distribution, it checks if a CNAME record already exists
38 | 3. If no record exists, it prompts you to confirm the creation of a new CNAME record
39 | 4. Upon confirmation, it automatically creates the CNAME record in your Route 53 hosted zone
40 |
41 | ### For Non-Route 53 Users:
42 |
43 | 1. The CLI recognizes that you're not using Route 53 (no hosted zone ID provided)
44 | 2. After deploying the CloudFront distribution, it provides detailed instructions for manual DNS configuration
45 | 3. You receive step-by-step guidance on how to create a CNAME record with your DNS provider, including:
46 | - The record type (CNAME)
47 | - The host name (your custom domain)
48 | - The target (the CloudFront distribution domain)
49 |
50 | ## User Interaction
51 |
52 | - **Route 53 Users**: You'll be prompted to confirm the creation of the DNS record. The process is largely automated after your confirmation.
53 | - **Non-Route 53 Users**: You'll need to manually create the DNS record with your provider using the instructions provided by the CLI.
54 |
55 | In both cases, the CLI handles the complex tasks of certificate management and CloudFront configuration, simplifying the process of setting up a custom domain for your static website.
56 |
57 | ## Benefits
58 |
59 | - Supports users of all DNS providers
60 | - Automates certificate management and CloudFront configuration
61 | - Provides a guided experience for non-Route 53 users
62 | - Offers a near-fully automated process for Route 53 users
63 |
64 | By accommodating both Route 53 and non-Route 53 users, the CloudFront Hosting Toolkit ensures a smooth custom domain setup process, regardless of your DNS management solution.
--------------------------------------------------------------------------------
/docs/src/content/docs/features/github-integration.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: GitHub Integration
3 | ---
4 |
5 | The GitHub Integration feature of CloudFront Hosting Toolkit provides seamless connectivity between your GitHub repository and your AWS hosting infrastructure, enabling efficient version control and collaborative development.
6 |
7 | ## Key Features
8 |
9 | - **Automatic deployments**: Triggers deployments automatically when code is pushed to the specified branch.
10 | - **Branch-based deployments**: Supports deployments from different branches for staging and production environments.
11 | - **Simplified collaboration**: Enables team members to contribute to the project using familiar GitHub workflows.
12 | - **Secure connection**: Utilizes AWS CodeStar connections for secure, OAuth-based authentication with GitHub.
13 |
14 | ## How It Works
15 |
16 | 1. **Repository connection**: During setup, you provide your GitHub repository details.
17 | 2. **AWS CodeStar Connection**: The toolkit creates an AWS CodeStar connection to your GitHub repository.
18 | - This connection uses OAuth to securely authenticate with GitHub.
19 | - You'll need to authorize the AWS Connector for GitHub app during the setup process.
20 | 3. **Repository access**: You can select specific repositories to make accessible to CodePipeline.
21 | 4. **Automated pipeline**: When code is pushed, it triggers the AWS CodePipeline to start the deployment process.
22 |
23 | ## Connection Setup Process
24 |
25 | 1. **Initiate connection**: The toolkit initiates the creation of a CodeStar connection to GitHub.
26 | 2. **Authorization**: You'll be prompted to authorize the AWS Connector for GitHub app.
27 | 3. **App installation**: If not already installed, you'll need to install the AWS Connector for GitHub app for your account or organization.
28 | 4. **Repository selection**: Choose the specific repositories you want to make accessible to AWS.
29 | 5. **Connection completion**: Once authorized and configured, the connection becomes active, enabling CodePipeline to access your GitHub repository.
30 |
31 | ## Benefits
32 |
33 | - **Streamlined workflow**: Integrates directly with your existing Git-based development process.
34 | - **Security**: OAuth-based authentication ensures secure access without the need for personal access tokens.
35 |
36 | > **Important**
37 | >
38 | > - To create the connection, you must be the GitHub organization owner. For repositories not under an organization, you must be the repository owner.
39 | > - The GitHub Integration feature is not available in certain AWS regions. Check the AWS documentation for the latest information on regional availability.
40 | > - If your CodePipeline service role was created before December 18, 2019, you might need to update its permissions to use `codestar-connections:UseConnection` for AWS CodeStar connections.
41 |
42 | GitHub Integration bridges the gap between your development workflow and your hosting infrastructure, providing a cohesive and efficient deployment process that aligns with modern development practices while maintaining security and ease of use.
--------------------------------------------------------------------------------
/docs/src/content/docs/features/instant-deployment.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Instant deployment
3 | ---
4 |
5 | The Instant Deployment feature of CloudFront Hosting Toolkit enables rapid and efficient updates to your live website, significantly reducing deployment times and accelerating your development cycle.
6 |
7 | ## Key Features
8 |
9 | - **Automated Deployment Pipeline**: Leverages AWS CodePipeline for a streamlined deployment process.
10 | - **Quick Updates**: Changes are reflected on your live site within minutes of pushing code.
11 | - **Versioned Deployments**: Each deployment creates a new version in a separate S3 folder.
12 | - **Atomic Updates**: Ensures all users see the new version, never a mix of old and new version.
13 | - **No Cache Invalidation Required**: CloudFront Function redirects requests to the new folder in S3.
14 |
15 | ## How It Works
16 |
17 | 1. **Code Push**: You push your changes to the configured Git repository or upload a new ZIP file to S3.
18 | 2. **Pipeline Trigger**: This action automatically triggers the AWS CodePipeline.
19 | 3. **Build Process**: AWS CodeBuild compiles your code and creates deployment artifacts.
20 | 4. **Artifact Upload**: The built artifacts are uploaded to a new folder in the hosting S3 bucket.
21 | 5. **Key-Value Store Update**: The commit ID of the new deployment is stored in a Key-Value Store (KVS).
22 | 6. **Traffic Routing**: A CloudFront Function checks the KVS for the latest commit ID and routes traffic to the corresponding S3 folder.
23 |
24 | ## Benefits
25 |
26 | - **Instant availability**: New versions of your website are available immediately after deployment.
27 | - **Consistent user experience**: All users see the same version of the site at any given time.
28 | - **No mixed content**: Eliminates the risk of serving a mixture of old and new version files to users.
29 | - **Efficient resource usage**: No need for cache invalidation.
30 |
31 |
32 | Instant Deployment streamlines your development workflow, allowing you to focus on building features rather than managing complex deployment processes. By leveraging CloudFront Functions and Key-Value Store, it ensures that your users always see a consistent, up-to-date version of your website without the need for cache invalidation or concerns about mixed content during deployments.
--------------------------------------------------------------------------------
/docs/src/content/docs/features/optimized-caching.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Optimized caching
3 | ---
4 |
5 | The Optimized Caching feature of CloudFront Hosting Toolkit leverages Amazon CloudFront's powerful caching capabilities to enhance your website's performance, ensuring faster response times and reduced server load.
6 |
7 | ## Key Features
8 |
9 | - **Specialized Cache Policies**: Implements distinct caching strategies for different types of content.
10 | - **Long-Term Caching**: Utilizes extended cache durations to maximize performance benefits.
11 | - **Compression Support**: Enables Gzip and Brotli compression for compatible content.
12 |
13 | ## How It Works
14 |
15 | ### Cache Policies
16 |
17 | 1. **Default Cache Policy**:
18 | - Applied to most content types
19 | - Cache duration: 365 days (1 year)
20 | - Ignores cookies and query strings
21 | - Enables Gzip and Brotli compression
22 |
23 | 2. **Images Cache Policy**:
24 | - Specifically for image files (jpg, jpeg, png, gif, bmp, tiff, ico)
25 | - Cache duration: 365 days (1 year)
26 | - Ignores cookies, headers, and query strings
27 |
28 | 3. **Static Assets Cache Policy**:
29 | - Applied to js, css, and html files
30 | - Cache duration: 365 days (1 year)
31 | - Ignores cookies, headers, and query strings
32 | - Enables compression
33 |
34 | ## Benefits
35 |
36 | - **Improved Load Times**: Long-term caching ensures faster content delivery for returning visitors.
37 | - **Reduced Origin Load**: Extended cache durations minimize requests to the origin S3 bucket.
38 | - **Optimized for Different Content Types**: Specialized policies for images and static assets ensure appropriate handling.
39 | - **Reduced Bandwidth Usage**: Compression and efficient caching reduce data transfer.
40 |
41 | The Optimized Caching feature ensures that your website delivers exceptional performance globally, enhancing user experience and reducing infrastructure load.
--------------------------------------------------------------------------------
/docs/src/content/docs/features/overview.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Overview
3 | ---
4 |
5 | CloudFront Hosting Toolkit offers a comprehensive set of features designed to simplify and enhance your frontend deployment process. Each feature is crafted to address specific aspects of modern web application hosting and deployment.
6 |
7 | Our key features include:
8 |
9 | 1. [Self-paced Setup Wizard](/features/setup-wizard)
10 | 2. [Instant Deployment](/features/instant-deployment)
11 | 3. [GitHub Integration](/features/github-integration)
12 | 4. [Optimized Caching](/features/optimized-caching)
13 | 5. [Enhanced Security Headers](/features/security-headers)
14 | 6. [Custom Domain Support](/features/custom-domains)
15 | 7. [SSL/TLS Management](/features/ssl-tls-management)
16 |
17 | Each of these features is designed to work seamlessly together, providing a robust and efficient hosting solution for your frontend applications. Click on any feature to learn more about its capabilities and how it can benefit your development workflow.
--------------------------------------------------------------------------------
/docs/src/content/docs/features/security-headers.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Security headers
3 | ---
4 |
5 | The CloudFront Hosting Toolkit implements a comprehensive set of security headers to enhance the protection of your website against common web vulnerabilities.
6 |
7 | ## Key Features
8 |
9 | - **Custom Response Headers Policy**: Applies a set of security headers to all responses from CloudFront.
10 | - **Comprehensive Protection**: Addresses multiple security concerns with a single configuration.
11 |
12 | ## Implemented Security Headers
13 |
14 | The following security headers are implemented through a custom Response Headers Policy:
15 |
16 | 1. **Content-Type Options**:
17 | - Prevents MIME type sniffing.
18 | - Helps protect against MIME confusion attacks.
19 |
20 | 2. **Frame Options**:
21 | - Set to DENY.
22 | - Prevents your content from being embedded in iframes on other domains.
23 | - Protects against clickjacking attacks.
24 |
25 | 3. **Strict Transport Security (HSTS)**:
26 | - Enforces HTTPS connections.
27 | - Includes subdomains.
28 | - Set for a duration of one year (31,536,000 seconds).
29 | - Enhances protection against protocol downgrade attacks and cookie hijacking.
30 |
31 | 4. **XSS Protection**:
32 | - Enables the browser's built-in XSS protection.
33 | - Set to block mode.
34 | - Provides an additional layer of protection against Cross-Site Scripting (XSS) attacks.
35 |
36 | 5. **Referrer Policy**:
37 | - Set to STRICT_ORIGIN_WHEN_CROSS_ORIGIN.
38 | - Controls the Referer header sent by the browser.
39 | - Balances security and functionality by sending the origin, path, and query string when performing a same-origin request, and only the origin when performing a cross-origin request.
40 |
41 | ## Benefits
42 |
43 | - **Enhanced Security Posture**: Protects against various common web vulnerabilities.
44 | - **Browser Compatibility**: Implemented headers are widely supported by modern browsers.
45 | - **Centralized Configuration**: Applied at the CloudFront level, ensuring consistent security across all resources.
46 | - **Compliance Support**: Helps meet security requirements for various compliance standards.
47 |
48 | These security headers work in conjunction with other security features of the CloudFront Hosting Toolkit to provide a robust defense for your web application.
--------------------------------------------------------------------------------
/docs/src/content/docs/features/setup-wizard.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Self-paced Setup Wizard
3 | ---
4 |
5 | The Self-paced setup wizard is a feature of CloudFront Hosting Toolkit that allows you to quickly deploy your website without needing in-depth knowledge of individual AWS services. It guides you through the process, handling the complexities of AWS infrastructure setup behind the scenes.
6 |
7 |
8 | ## Key Benefits
9 |
10 | - **Intuitive command-line interface**: Easy-to-follow prompts guide you through each step of the setup process.
11 | - **Automatic project detection**: The wizard automatically detects your project settings, including framework and repository details.
12 | - **Customizable configuration**: While providing smart defaults, the wizard allows you to customize every aspect of your setup.
13 | - **AWS resource setup**: Guides you through the process of setting up necessary AWS resources, ensuring proper configuration.
14 |
15 | ## How It Works
16 |
17 | 1. **Initiation**: Run `cloudfront-hosting-toolkit init` to start the wizard.
18 | 2. **Project analysis**: The wizard scans your project directory to detect the framework, repository, and other relevant details.
19 | 3. **Guided configuration**: You're prompted to confirm or modify detected settings and provide additional information as needed.
20 | 5. **Configuration save**: All settings are saved to a configuration file.
21 |
22 | ## Best Practices
23 |
24 | - Run the wizard in your project's root directory for the most accurate automatic detection.
25 | - Review each step carefully to ensure all settings align with your project requirements.
26 |
27 | The Self-paced setup wizard simplifies the often complex process of configuring a cloud hosting environment, allowing you to get your project up and running quickly and efficiently.
--------------------------------------------------------------------------------
/docs/src/content/docs/getting-started/how-it-works.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: How it works
3 | ---
4 |
5 | CloudFront Hosting Toolkit simplifies the process of deploying and managing frontend applications on AWS. The toolkit operates in three main steps:
6 |
7 | 1. **Initialization**: Set up your project and configure the toolkit.
8 | 2. **Deployment**: Deploy your frontend application infrastructure to AWS.
9 | 3. **Updates**: Automatic updates and content delivery after deployment.
10 |
11 | ## Re:Invent 2024 lightning talk
12 |
13 |
14 |
15 |
16 |
17 |
49 |
50 |
51 | 1. A developer pushes code changes to the GitHub repository, triggering the AWS CodePipeline (steps 4-5).
52 |
53 | 2. CodePipeline fetches the new code and builds the new website version (step 5).
54 |
55 | 3. The built artifacts are uploaded to a new folder in the S3 bucket, identified by the commit ID (step 6).
56 |
57 | 4. The Key-Value Store is updated with the new commit ID as the current served website version (step 7).
58 |
59 | 5. When an end-user requests the website (step 1):
60 | - The request hits Amazon CloudFront.
61 | - CloudFront executes a function that fetches the latest build ID from the Key-Value Store (step 2).
62 | - The function rewrites the URL to include the latest build ID and adds it to the cache key.
63 | - CloudFront then requests the content from the correct S3 folder using the rewritten URL (step 3).
64 | - The content is served to the user with a 200 OK status.
65 |
66 | 6. For subsequent requests (step 8), the process repeats, ensuring that users always see the latest version of the website.
67 |
68 | This approach enables atomic deployments, providing several key benefits:
69 |
70 | - All requests are immediately directed to the new version once it's deployed.
71 | - There's no risk of users seeing a mix of old and new content.
72 | - The transition is seamless and instantaneous for all users globally.
73 | - It eliminates the "partial update" problem, ensuring consistency across your entire user base.
74 | - It prevents potential issues that could arise from inconsistent state between old and new versions.
75 |
76 | By leveraging CloudFront's global content delivery network and this intelligent routing mechanism, visitors always see the most recent version of your website, regardless of their location or when they accessed the site. This ensures a consistent, up-to-date experience for all users while benefiting from the performance advantages of a CDN.
--------------------------------------------------------------------------------
/docs/src/content/docs/getting-started/introduction.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Introduction
3 | ---
4 |
5 | CloudFront Hosting Toolkit is an open-source command-line tool designed to simplify the deployment and management of frontend applications on AWS. It provides a seamless way to set up and maintain a robust, scalable, and secure hosting infrastructure for your web applications.
6 |
7 | Key benefits:
8 | - Simplified AWS resource management
9 | - Automated deployment pipelines
10 | - Optimized content delivery through CloudFront
11 | - Built-in security features
12 | - Flexible configuration options
13 |
14 | Whether you're a solo developer or part of a large team, CloudFront Hosting Toolkit can streamline your frontend deployment process and help you focus on what matters most - building great web applications.
15 |
--------------------------------------------------------------------------------
/docs/src/content/docs/getting-started/quickstart.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Quickstart
3 | ---
4 |
5 | Get up and running with CloudFront Hosting Toolkit in just a few minutes:
6 |
7 | ## Prerequisites
8 | - Node.js 18+
9 | - AWS CLI 2+ installed and configured
10 | - A GitHub account (if deploying from GitHub)
11 |
12 | ## Installation
13 | Install CloudFront Hosting Toolkit globally:
14 |
15 | ```bash
16 | npm install -g @aws/cloudfront-hosting-toolkit
17 | ```
18 |
19 | ## Deployment Steps
20 | 1. Navigate to your project directory:
21 | ```bash
22 | cd /path/to/your/project
23 | ```
24 |
25 | 2. Initialize your deployment configuration:
26 | ```bash
27 | cloudfront-hosting-toolkit init
28 | ```
29 | Follow the prompts to configure your deployment.
30 |
31 | 3. Deploy your website:
32 | ```bash
33 | cloudfront-hosting-toolkit deploy
34 | ```
35 |
36 | 4. Once deployment is complete, you'll receive a CloudFront domain name. Use this to access your deployed website.
37 |
--------------------------------------------------------------------------------
/docs/src/content/docs/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: CloudFront Hosting Toolkit
3 | description: Self-managed Frontend Hosting on AWS
4 | template: splash
5 | hero:
6 | tagline: Effortlessly deploy and manage fast, secure frontends in the cloud 🚀☁️
7 | actions:
8 | - text: How it works
9 | link: /cloudfront-hosting-toolkit/getting-started/how-it-works
10 | icon: right-arrow
11 | variant: primary
12 | - text: GitHub Repository
13 | link: https://github.com/awslabs/cloudfront-hosting-toolkit
14 | icon: external
15 | - text: NPM Package
16 | link: https://www.npmjs.com/package/@aws/cloudfront-hosting-toolkit
17 | icon: external
18 | ---
19 |
20 | import { Card, CardGrid } from '@astrojs/starlight/components';
21 |
22 | ## Key Features
23 |
24 |
25 | - **Self-paced wizard for easy setup**: Our self-paced setup wizard guides you through the installation process step by step, making it effortless to get started with our project.
26 | - **Instant deployment for quick results**: Experience rapid deployment of your project changes, reducing waiting times and accelerating your development cycle. The solution automatically clears the cache of the previous version.
27 | - **Seamless GitHub integration for version control**: Integrate your project seamlessly with GitHub, enabling efficient version control and collaboration with your team.
28 | - **Optimized caching for improved performance**: We've implemented advanced caching mechanisms to enhance your project's performance, ensuring faster response times and reduced server load.
29 | - **Enhanced security headers for protection**: Your project benefits from enhanced security headers to safeguard against potential security vulnerabilities, helping protect your users and data.
30 | - **Custom domain name support with TLS certificate**: Easily configure custom domain names for your project and secure them with TLS certificates, ensuring a professional and secure online presence.
31 |
32 |
33 |
34 | 
30 |
31 |
32 | After running `cloudfront-hosting-toolkit init`, CloudFront Hosting Toolkit will create a folder named `cloudfront-hosting-toolkit` in the directory where the tool is executed.
33 |
34 | This `cloudfront-hosting-toolkit` folder contains essential files for managing your deployment process:
35 |
36 | 1. `cloudfront-hosting-toolkit-config.json`: This JSON file stores the configuration settings gathered during the `init` process. You can review and modify these settings as needed.
37 | 2. `cloudfront-hosting-toolkit-config.yml`: This YAML file is necessary for CodeBuild to build your website. It contains build configuration information, ensuring that your website is built correctly.
38 | 3. `cloudfront-hosting-toolkit-cff.js`: This JavaScript file encapsulates the code utilized by the CloudFront Function for URL rewriting. Given the variability in rules based on the framework, this file is accessible for modifications at any time, enabling the addition of additional logic required to execute at the edge.
39 | 4. During deployment, the CLI generates log files to capture important information and log messages. These log files are named using the format `YYYY-MM-DD_HH-MM-SS.log` and are stored in the `cloudfront-hosting-toolkit` folder. You can review these logs to troubleshoot any deployment issues or monitor the deployment process.
40 |
41 | Make sure to keep these files in the `cloudfront-hosting-toolkit` folder for seamless management of your future deployments.
42 |
43 | ### Deploy
44 |
45 | Deploy your website:
46 |
47 | ```bash
48 | cloudfront-hosting-toolkit deploy
49 | ```
50 |
51 | > **Important**
52 | >
53 | > You typically only need to run the deploy command once after your initial init command. Subsequent code updates will be automatically deployed through the established pipeline.
54 |
55 |
56 | You should only need to run deploy again if:
57 |
58 | - You've run the init command again to change your configuration.
59 | - You've manually deleted or significantly altered your AWS infrastructure.
60 |
61 |
62 | When you run this command, the CLI will:
63 |
64 | 1. For GitHub-based workflows, create an AWS CodeStar connection to your GitHub repository. This process involves:
65 |
66 | - Creating a connection in a PENDING state.
67 | - Prompting you to complete the connection setup in the AWS console.
68 | - Guiding you through the process of installing the AWS Connector for GitHub app and granting necessary permissions.
69 | - You'll need to select the specific GitHub repository you want to deploy.
70 |
71 | This step is crucial for establishing secure access between your AWS account and your GitHub repository. For more detailed information on this process, refer to the AWS documentation on GitHub connections.
72 | 2. Display the progress of the infrastructure deployment in real-time.
73 | 3. Continue to show updates until the entire infrastructure is successfully deployed.
74 | 4. After the infrastructure deployment is complete, automatically trigger the pipeline for your initial website deployment.
75 | 5. Wait for the pipeline to finish, providing status updates throughout the process.
76 |
77 | The deployment is only considered complete when both the infrastructure is set up and the initial pipeline run has finished successfully.
78 |
79 | Upon successful completion of the deployment:
80 | - The domain name under which your website is available will be displayed.
81 | - The pipeline status and name will be shown.
82 |
83 | If the pipeline fails, you'll receive an error message. For troubleshooting information and potential solutions, please refer to the [Troubleshooting Guide](/cloudfront-hosting-toolkit/troubleshooting/guide).
84 |
85 | The following animated GIF demonstrates the deployment process:
86 |
87 | 
88 |
89 |
90 | Note: The actual time for deployment can vary based on the complexity of your project and current AWS service response times.
91 |
92 |
93 | ### Show
94 |
95 | Display the domain name linked to your deployed source code repository:
96 |
97 | ```bash
98 | cloudfront-hosting-toolkit show
99 | ```
100 |
101 | ### Status
102 |
103 | Check the current status of your pipeline deployment:
104 |
105 | ```bash
106 | cloudfront-hosting-toolkit status
107 | ```
108 |
109 | ### Delete
110 |
111 | Remove the hosting infrastructure from your AWS account:
112 |
113 | ```bash
114 | cloudfront-hosting-toolkit delete
115 | ```
116 |
117 | ## Best Practices
118 |
119 | 1. Run `init` in your project root directory for accurate auto-detection of project settings when using a GitHub repository.
120 | 2. Review the generated log files in the `cloudfront-hosting-toolkit` folder for troubleshooting and monitoring.
121 | 3. If you need to customize URL rewriting rules, modify the `cloudfront-hosting-toolkit-cff.js` file as needed.
--------------------------------------------------------------------------------
/docs/src/styles/custom.css:
--------------------------------------------------------------------------------
1 | /* Dark mode colors. */
2 | :root {
3 | --sl-color-accent-low: #1a2639;
4 | --sl-color-accent: #3e4a61;
5 | --sl-color-accent-high: #c9d1d9;
6 | --sl-color-white: #ffffff;
7 | --sl-color-gray-1: #f0f6fc;
8 | --sl-color-gray-2: #c9d1d9;
9 | --sl-color-gray-3: #8b949e;
10 | --sl-color-gray-4: #6e7681;
11 | --sl-color-gray-5: #484f58;
12 | --sl-color-gray-6: #30363d;
13 | --sl-color-black: #0d1117;
14 | --sl-label-api-color: #ff7b72;
15 | --sl-label-api-background-color: #ff7b72;
16 | --sl-label-version-color: #7ee787;
17 | --sl-label-version-background-color: #7ee787;
18 | --sl-label-package-color: #ffa657;
19 | --sl-label-package-background-color: #ffa657;
20 | }
21 |
22 | /* Light mode colors. */
23 | :root[data-theme='light'] {
24 | --sl-color-accent-low: #d0e8ff;
25 | --sl-color-accent: #0969da;
26 | --sl-color-accent-high: #033d8b;
27 | --sl-color-white: #0d1117;
28 | --sl-color-gray-1: #30363d;
29 | --sl-color-gray-2: #484f58;
30 | --sl-color-gray-3: #6e7681;
31 | --sl-color-gray-4: #8b949e;
32 | --sl-color-gray-5: #c9d1d9;
33 | --sl-color-gray-6: #f0f6fc;
34 | --sl-color-gray-7: #f8f9fa;
35 | --sl-color-black: #ffffff;
36 | --sl-label-api-color: #cf222e;
37 | --sl-label-api-background-color: #cf222e;
38 | --sl-label-version-color: #2da44e;
39 | --sl-label-version-background-color: #2da44e;
40 | --sl-label-package-color: #d4a72c;
41 | --sl-label-package-background-color: #d4a72c;
42 | }
43 |
44 | :root {
45 | --purple-hsl: 212, 72%, 59%;
46 | --overlay-blurple: hsla(var(--purple-hsl), 0.4);
47 | }
48 |
49 | [data-has-hero] .page {
50 | background: linear-gradient(215deg, var(--overlay-blurple), transparent 40%),
51 | radial-gradient(var(--overlay-blurple), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
52 | radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem;
53 | }
54 |
55 | [data-has-hero] header {
56 | border-bottom: 1px solid transparent;
57 | background-color: transparent;
58 | -webkit-backdrop-filter: blur(16px);
59 | backdrop-filter: blur(16px);
60 | }
61 |
62 | [data-has-hero] .hero > img {
63 | filter: drop-shadow(0 0 3rem var(--overlay-blurple));
64 | }
65 |
66 | [data-page-title] {
67 | font-size: 3rem;
68 | }
69 |
70 | @media (max-width: 768px) {
71 | [data-page-title] {
72 | font-size: 2.5rem;
73 | }
74 | }
75 |
76 | .card-grid > .card {
77 | border-radius: 10px;
78 | }
79 |
80 | .card > .title {
81 | font-size: 1.3rem;
82 | font-weight: 600;
83 | line-height: 1.2;
84 | }
85 |
86 | .Label, .label {
87 | border: 1px solid;
88 | border-radius: 2em;
89 | display: inline-block;
90 | font-size: 0.75rem;
91 | font-weight: 500;
92 | line-height: 18px;
93 | padding: 0 7px;
94 | white-space: nowrap;
95 | }
96 |
97 | .Label > a, .label > a {
98 | color: inherit;
99 | text-decoration: none;
100 | }
101 |
102 | .Label > a:hover, .label > a:hover {
103 | color: inherit;
104 | text-decoration: none;
105 | }
106 |
107 | .Label.Label--api {
108 | color: var(--sl-label-api-color);
109 | border-color: var(--sl-label-api-background-color);
110 | }
111 |
112 | .Label.Label--version {
113 | color: var(--sl-label-version-color);
114 | border-color: var(--sl-label-version-background-color);
115 | }
116 |
117 | .Label.Label--package {
118 | color: var(--sl-label-package-color);
119 | border-color: var(--sl-label-package-background-color);
120 | }
121 |
122 | .text-uppercase {
123 | text-transform: uppercase !important;
124 | }
125 |
126 | .language-icon {
127 | margin-bottom: -8px;
128 | float: right;
129 | }
130 |
131 | @media only screen and (max-width: 1023px) {
132 | .language-icon {
133 | display: none;
134 | float: none;
135 | }
136 | }
--------------------------------------------------------------------------------
/docs/src/styles/font.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "JetBrainsMono NF";
3 | src: url("../assets/fonts/JetBrainsMonoNerdFont-Regular.ttf")
4 | format("truetype");
5 | font-weight: 400;
6 | font-style: normal;
7 | font-display: swap;
8 | }
9 |
10 | @font-face {
11 | font-family: "JetBrainsMono NF";
12 | src: url("../assets/fonts/JetBrainsMonoNerdFont-Italic.ttf")
13 | format("truetype");
14 | font-weight: 400;
15 | font-style: italic;
16 | font-display: swap;
17 | }
18 |
19 | @font-face {
20 | font-family: "JetBrainsMono NF";
21 | src: url("../assets/fonts/JetBrainsMonoNerdFont-Bold.ttf") format("truetype");
22 | font-weight: 700;
23 | font-style: normal;
24 | font-display: swap;
25 | }
26 |
27 | @font-face {
28 | font-family: "JetBrainsMono NF";
29 | src: url("../assets/fonts/JetBrainsMonoNerdFont-BoldItalic.ttf")
30 | format("truetype");
31 | font-weight: 700;
32 | font-style: italic;
33 | font-display: swap;
34 | }
35 |
36 | :root {
37 | --sl-font: "JetBrainsMono NF";
38 | --sl-font-mono: "JetBrainsMono NF";
39 | }
40 |
--------------------------------------------------------------------------------
/docs/src/styles/landing.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --sl-hue-accent: 255;
3 | --sl-color-accent-low: hsl(var(--sl-hue-accent), 14%, 20%);
4 | --sl-color-accent: hsl(var(--sl-hue-accent), 60%, 60%);
5 | --sl-color-accent-high: hsl(var(--sl-hue-accent), 60%, 87%);
6 | --overlay-blurple: hsla(var(--sl-hue-accent), 60%, 60%, 0.2);
7 | }
8 |
9 | :root[data-theme='light'] {
10 | --sl-hue-accent: 45; /*Color of top bar text and icons and Getting Started button*/
11 | --sl-color-accent-high: hsl(var(--sl-hue-accent), 90%, 20%);
12 | --sl-color-accent: hsl(var(--sl-hue-accent), 100%, 50%);
13 | --sl-color-accent-low: hsl(var(--sl-hue-accent), 98%, 80%);
14 | }
15 |
16 | [data-has-hero] .page {
17 | background: linear-gradient(215deg, var(--overlay-blurple), transparent 40%),
18 | radial-gradient(var(--overlay-blurple), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
19 | radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem;
20 | }
21 |
22 | [data-has-hero] header {
23 | border-bottom: 1px solid transparent;
24 | background-color: transparent;
25 | -webkit-backdrop-filter: blur(16px);
26 | backdrop-filter: blur(16px);
27 | }
28 |
29 | [data-has-hero] .hero > img {
30 | filter: drop-shadow(0 0 3rem var(--overlay-blurple));
31 | }
32 |
33 | iframe[id='stackblitz-iframe'] {
34 | width: 100%;
35 | min-height: 600px;
36 | }
--------------------------------------------------------------------------------
/docs/src/styles/terminal.css:
--------------------------------------------------------------------------------
1 | /* Solarized color palette */
2 | :root {
3 | --sol-red: #dc322f;
4 | --sol-bright-red: #cb4b16;
5 | --sol-green: #859900;
6 | --sol-yellow: #b58900;
7 | --sol-blue: #268bd2;
8 | --sol-magenta: #d33682;
9 | --sol-bright-magenta: #6c71c4;
10 | --sol-cyan: #2aa198;
11 |
12 | --sol-base03: #002b36;
13 | --sol-base02: #073642;
14 | --sol-base00: #657b83;
15 | --sol-base0: #839496;
16 | --sol-base2: #eee8d5;
17 | --sol-base3: #fdf6e3;
18 | }
19 |
20 | pre.terminal {
21 | --black: var(--sol-base02);
22 | --red: var(--sol-red);
23 | --bright-red: var(--sol-bright-red);
24 | --green: var(--sol-green);
25 | --yellow: var(--sol-yellow);
26 | --blue: var(--sol-blue);
27 | --magenta: var(--sol-magenta);
28 | --bright-magenta: var(--sol-bright-magenta);
29 | --cyan: var(--sol-cyan);
30 | --white: var(--sol-base2);
31 |
32 | background-color: var(--sol-base03);
33 | color: var(--sol-base0);
34 | font-family: var(--__sl-font-mono);
35 | }
36 |
37 | :root[data-theme="light"] pre.terminal {
38 | background-color: var(--sol-base3);
39 | color: var(--sol-base00);
40 | }
41 |
42 | pre.terminal p {
43 | margin: -0.75rem -1rem;
44 | padding: 0.75rem 1rem;
45 | overflow-x: auto;
46 | }
47 |
48 | pre.astro-code + pre.terminal {
49 | margin-top: 0;
50 | border-top-width: 0;
51 | }
--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "astro/tsconfigs/strict"
3 | }
--------------------------------------------------------------------------------
/img/architecture.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/awslabs/cloudfront-hosting-toolkit/199ce3142ba9f9c28f2849b78df387c8e59a26ec/img/architecture.jpg
--------------------------------------------------------------------------------
/img/deploy.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/awslabs/cloudfront-hosting-toolkit/199ce3142ba9f9c28f2849b78df387c8e59a26ec/img/deploy.gif
--------------------------------------------------------------------------------
/img/init.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/awslabs/cloudfront-hosting-toolkit/199ce3142ba9f9c28f2849b78df387c8e59a26ec/img/init.gif
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | testEnvironment: 'node',
3 | roots: ['Please note that your are currently seeing this screen because this is the first deployment of the website. So, just take it easy and unwind, the page will automatically refresh on its own.
22 |Please note that you are currently seeing this screen either because no zip file has been uploaded to your S3 bucket yet, or because the deployment is currently in progress. Please be patient and the page will automatically refresh once the deployment is complete.
22 | 23 |