search

JacobGrisham / Finance-Full-Stack-Web-App-using-Flask-and-SQL

Monolithic model-view-controller full-stack web application built with Python, Flask, SQL Alchemy, MySQL, Jinja, and Bootstrap. Application Server hosted on AWS EC2 with Ubuntu, Gunicorn, and Nginx. MySQL Database on AWS RDS. Redis hosted on AWS Elasticache. CI/CD with Jenkins and AWS CodeDeploy
http://wallstreettrader.app
15 stars 28 forks source link

Add Content Delivery Network #13

Open JacobGrisham opened 3 years ago

JacobGrisham commented 3 years ago

AWS Cloudfront: https://aws.amazon.com/cloudfront/

MADHUMITHASIVAKUMARR commented 2 weeks ago

Adding a Content Delivery Network (CDN) to your finance full-stack web app can significantly improve loading times and enhance performance by distributing content across multiple servers worldwide. Here’s how to set up a CDN for your application.

Step 1: Choose a CDN Provider

Several popular CDN providers include:

For this example, let's use Cloudflare due to its simplicity and free tier.

Step 2: Sign Up and Configure Cloudflare

  1. Create an Account: Sign up at Cloudflare.

  2. Add Your Site:

    • Follow the prompts to add your domain to Cloudflare.
    • Cloudflare will scan your DNS records.

  3. Change Your Nameservers:

    • Update your domain's nameservers to the ones provided by Cloudflare. This change can usually be made through your domain registrar's dashboard.

  4. Configure SSL (Optional):

    • In the SSL/TLS settings, choose the appropriate option (e.g., Flexible, Full, Full (Strict)) based on your app’s architecture.

Step 3: Set Up Caching Rules

  1. Caching Level:

    • In the Caching section, set the caching level. The "Standard" option works for most use cases.

  2. Browser Cache TTL:

    • Set the time-to-live for cached files in users' browsers. A common setting is one month.

  3. Page Rules:

    • Create page rules to cache specific URLs or file types (like CSS, JS, images) for better performance.

Step 4: Update Your App to Use the CDN

  1. Modify Resource URLs: Update your static resource URLs in your app to point to the CDN. For example, if you host images, CSS, or JS files, change URLs from:

    <link rel="stylesheet" href="/styles/main.css">
<script src="/scripts/app.js"></script>
<img src="/images/logo.png" alt="Logo">

    To:

    <link rel="stylesheet" href="https://cdn.yourdomain.com/styles/main.css">
<script src="https://cdn.yourdomain.com/scripts/app.js"></script>
<img src="https://cdn.yourdomain.com/images/logo.png" alt="Logo">

    Make sure to replace https://cdn.yourdomain.com with your actual CDN URL.

Step 5: Deploy Static Assets to the CDN

  1. Upload Files: Depending on your CDN, you may need to upload static files to the CDN. For Cloudflare, simply updating DNS settings typically suffices if you’re using their caching.

  2. Cache Static Content: If your app serves static files from a server, ensure those files are cached in the CDN. You can use tools or scripts to automate this process, depending on your deployment strategy.

Step 6: Test Your Setup

  1. Check Performance: Use tools like GTmetrix or Google PageSpeed Insights to test your site's performance and ensure assets are being served from the CDN.

  2. Inspect Resource URLs: Open your browser’s developer tools (usually F12), and check the "Network" tab to ensure that static assets are being loaded from the CDN.

Additional Considerations

Conclusion

Integrating a CDN into your finance web app will improve load times and enhance the user experience.