DEV Community: Ferry Dermawan

How to Update Your S3 URLs to CloudFront URLs

Ferry Dermawan — Mon, 26 Jan 2026 14:46:40 +0000

Amazon Web Services (AWS) provides Amazon S3 for file storage and Amazon CloudFront as a Content Delivery Network (CDN) to accelerate content delivery. Replacing your S3 file URLs with CloudFront URLs is an essential step to ensure your files load faster, more securely, and more professionally.

In this guide, we’ll walk through the complete process—from configuring CloudFront to updating your S3 file URLs.

Why Should You Replace S3 URLs With CloudFront URLs?

Before we dive into the setup steps, here are the main reasons why CloudFront is highly recommended over directly serving files from S3:

Faster load times thanks to global edge locations.
More stable performance with content cached close to your users.
Stronger security with Origin Access Control (OAC), HTTPS, and signed URLs.
More professional URLs, like https://cdn.yourdomain.com/image.jpg.
Lower data transfer costs when configured correctly.

Steps to Replace S3 URLs with CloudFront URLs

1. Prepare Your S3 Bucket

Make sure your S3 bucket contains the files you want to deliver through CloudFront.

Checklist:

Ensure the bucket has the correct permissions.
Upload all required files.
You can keep Block Public Access enabled, because CloudFront will access the bucket using OAC.

2. Create a CloudFront Distribution (New UI – 5 Steps)

When you click Create distribution, CloudFront now displays a new 5-step wizard:

Step 1 – Choose a plan
Step 2 – Get started
Step 3 – Specify origin
Step 4 – Enable security
Step 5 – Review and create

Below is the detailed walkthrough for each step.

Step 1 – Choose a plan

You’ll see several plan options:

Free – $0/month
Pro – $15/month
Business – $200/month
Premium – $1000/month

And at the bottom:

Pay as you go (Pricing varies with usage)

For standard CDN usage (websites, apps, static assets), the best option is:

✅ Pay as you go — no fixed monthly cost, pay only for what you use.

Click Next to continue.

Step 2 – Get started

Here you define the basic configuration of your distribution.

Fields to complete:

Distribution name Use a clear, identifiable name, for example:

   s3-ferry-example

Description (optional)
You may add a short note, or leave it empty.
Distribution type
Choose:

✅ Single website or app

(Use Multi-tenant only for SaaS platforms with shared architecture across multiple domains.)

Domain (optional) If you have a Route 53 domain and want to attach a custom CDN domain immediately, you may enter it here. If your DNS is hosted elsewhere, you can skip this for now and set it up later using your DNS provider + ACM SSL.

Click Next.

Step 3 – Specify origin

This is where you connect CloudFront to your S3 bucket.

1. Origin type

Select:
✅ Amazon S3

2. S3 origin

Choose or type your S3 bucket endpoint, for example:

ferry-example.s3.ap-southeast-1.amazonaws.com

You can also use Browse S3 to select your bucket.

3. Origin path (optional)

If you want CloudFront to serve only a specific folder:

/path

Examples: /uploads, /assets/images
Leave this empty to serve the entire bucket.

4. Allow private S3 bucket access to CloudFront

This is critical for security.

Check:

✅ Allow private S3 bucket access to CloudFront – Recommended

This ensures:

Your bucket remains private (Block Public Access ON)
CloudFront automatically updates bucket policies so only this distribution can access it

5. Origin & cache settings

Default settings are ideal:

Origin settings → ✅ Use recommended origin settings
Cache settings → ✅ Use recommended cache settings tailored to serving S3 content

Click Next.

Step 4 – Enable security

This step configures Web Application Firewall (WAF) protections.

You have two choices:

1. ✅ Enable security protections

Includes:

Protection against common web vulnerabilities
Malicious traffic filtering
IP blocking
Optional Layer 7 DDoS protection (Recommended)

Best for dynamic apps, APIs, login pages, or any high-traffic service.

2. ❌ Do not enable security protections

Good option if you're serving static files only and want to reduce cost.

Optional:

Use monitor mode — view what would be blocked before enforcing it.

Click Next after choosing.

Step 5 – Review and create

CloudFront will display a summary of your configuration:

General configuration

Distribution name
Billing (e.g., Pay-as-you-go)

Origin

S3 origin (bucket + region)
Origin path
CloudFront access: Yes

Cache settings

Using recommended S3-optimized cache settings

Security

Whether WAF protections are enabled

If everything looks correct:

✅ Click Create distribution

Wait a few minutes until the status becomes Enabled.

Conclusion

Updating your S3 URLs to CloudFront is one of the most effective ways to improve website speed, reliability, and security. The process is simple: create a CloudFront distribution, link it with your S3 bucket, and replace your S3 URLs with your new CloudFront domain.

How to Create an AWS S3 Bucket: Step-by-Step Guide for Beginners

Ferry Dermawan — Thu, 03 Jul 2025 03:20:33 +0000

Amazon S3 (Simple Storage Service) is a popular cloud storage service from AWS that allows users to store and retrieve any amount of data at any time. Whether you're hosting static websites, storing backups, or serving media content, S3 is a reliable and scalable solution.

In this guide, you'll learn how to create an S3 bucket step-by-step using the AWS Console.

Step 1: Log in to AWS Console

Start by logging in to your AWS account via the AWS Management Console.

Step 2: Open the Amazon S3 Service

After logging in, search for S3 in the search bar at the top and click the S3 service.

Step 3: Create a New Bucket

Click the Create bucket button.
Enter a unique Bucket name (must be globally unique).
Under Object Ownership, choose ACLs disabled (recommended) to simplify permissions.

Step 4: Configure Encryption

Scroll down to the Default encryption section.
Choose Amazon S3 managed keys (SSE-S3).
Enable the Bucket Key to reduce the cost of encryption requests.

Step 5: Finalize and View Your Bucket

After completing the setup, your new bucket will appear in the S3 bucket list.

Click the bucket name to open it and start uploading files, setting permissions, or enabling static website hosting.

Conclusion

Setting up an S3 bucket is simple and essential for many AWS-powered applications. With just a few clicks, you can start storing data securely in the cloud. Don't forget to manage access policies and monitor your storage usage for optimal performance and cost.

Need help with setting permissions or enabling static site hosting? Stay tuned for our upcoming guides on advanced S3 configurations!

How to Secure Nginx with SSL/TLS HTTPS Using Let’s Encrypt on Ubuntu

Ferry Dermawan — Wed, 02 Jul 2025 02:21:27 +0000

Enabling HTTPS on your website is crucial for security, SEO, and user trust. Thankfully, Let’s Encrypt offers free SSL/TLS certificates that are easy to set up on an Nginx server. In this tutorial, we’ll walk through how to secure your Nginx server using Let’s Encrypt on Ubuntu.

Step 1: Check Your Website Before SSL

Before adding SSL, your website is likely still served over plain HTTP.

Example:
http://jadifullstack.id

Step 2: Install Certbot and the Nginx Plugin

Make sure your system is up to date:

sudo apt update
sudo apt install certbot python3-certbot-nginx

Certbot is the tool that will communicate with Let’s Encrypt and configure Nginx automatically.

Step 3: Request an SSL Certificate

Run the following command to request and install your SSL certificate:

sudo certbot --nginx -d jadifullstack.id

If successful, you'll see a confirmation message:

"Successfully received certificate"

Step 4: Verify HTTPS is Working

After a successful setup, your website will now be accessible via HTTPS.

Example:
https://jadifullstack.id

Check that your browser shows a secure padlock and that HTTP requests are redirected to HTTPS.

Step 5: Enable Auto Renewal

Let’s Encrypt certificates expire every 90 days. Certbot makes it easy to auto-renew them.

You can verify the auto-renewal configuration with this command:

sudo certbot renew --dry-run

To schedule auto-renewal using cron, run:

crontab -e

Then add the following line to renew the certificate daily at noon:

0 12 * * * /usr/bin/certbot renew --quiet

Conclusion

Now your Ubuntu VPS running Nginx is secured with HTTPS using a free SSL certificate from Let’s Encrypt. This simple setup improves trust, SEO ranking, and data protection. Always monitor your certificate expiration or use Certbot's auto-renewal to avoid disruptions.

Want to take it further? Consider setting up a redirect from HTTP to HTTPS or enabling HTTP/2 for better performance!

How to Use Elastic IP Address with AWS EC2 Instance: Complete Guide

Ferry Dermawan — Tue, 01 Jul 2025 02:01:47 +0000

When launching an EC2 instance, the public IP address assigned to it can change if the instance is stopped and restarted. To avoid this, AWS provides Elastic IP addresses—a static IPv4 address designed for dynamic cloud computing.

In this guide, we’ll show you how to allocate and associate an Elastic IP address with your EC2 instance.

Step 1: Allocate a New Elastic IP Address

From the AWS Management Console, go to the EC2 Dashboard, then select Elastic IPs from the sidebar. Click on Allocate Elastic IP address and confirm.

Step 2: Associate the Elastic IP with Your EC2 Instance

Once the IP is allocated, select it from the list and click Actions → Associate Elastic IP address.

In the Resource type, choose Instance.
In Instance, select the EC2 instance you want to assign the IP to.
Click Associate to finalize the configuration.

Step 3: Verify IP Assignment

Go to your EC2 Instances dashboard and confirm that the public IP has been updated with your new Elastic IP.

This IP will remain the same even if you stop and start the instance.

Conclusion

Elastic IP addresses are essential for maintaining a consistent public IP for your cloud services, especially for production environments. Remember that AWS charges for unused Elastic IPs, so always release any IP addresses that are no longer in use.

With this setup, your EC2 instance is now more stable and accessible under a static IP.

How to Point Your Domain to AWS Route 53 Name Servers

Ferry Dermawan — Mon, 30 Jun 2025 08:37:11 +0000

If you're hosting a website or application on AWS, using Amazon Route 53 as your DNS provider gives you full control over routing traffic. In this guide, you'll learn how to move your domain's name servers to Route 53.

Step 1: Create a Public Hosted Zone in Route 53

Go to the AWS Route 53 Console. Click on Hosted zones in the sidebar, then choose Create hosted zone.

Enter your domain name.
Choose Public hosted zone.
Click Create hosted zone.

Step 2: View Your Route 53 NS Records

After creating the hosted zone, Route 53 automatically generates several records, including the NS (Name Server) records. These are the name servers you need to use for your domain.

Step 3: Update Name Servers on Your Domain Registrar (GoDaddy Example)

Scroll to Nameservers and choose: I'll use my own nameservers.
Copy and paste the NS records from Route 53 into the fields.
Save the changes.

Note: DNS changes can take up to 48 hours to fully propagate.

Conclusion

Using AWS Route 53 as your DNS provider helps ensure high availability, fast response times, and tight integration with other AWS services. After updating your nameservers, you can manage DNS records directly from the Route 53 dashboard.

Be sure to monitor your DNS configuration and test it using tools like dig, nslookup, or online DNS checkers to verify the update was successful.

How to Connect a GoDaddy Domain to a Linux VPS Server

Ferry Dermawan — Sat, 28 Jun 2025 23:41:54 +0000

If you’ve purchased a domain on GoDaddy and host your application on a VPS, pointing your domain to your server allows users to access your website easily. This guide shows you how to connect a GoDaddy domain to a Linux VPS (using Nginx as the web server).

Step 1: Get Your VPS IP Address

Connect to your VPS using SSH and run the following command to find your public IP address:

curl ifconfig.me

This IP address will be used in your DNS settings on GoDaddy. Initially, your Laravel application or Nginx welcome page can be accessed via this IP in the browser, such as http://123.456.789.123.

Later, after DNS is properly set up, your site will be accessible using the domain name instead, such as http://jadifullstack.id.

Step 2: Access Your Domain Settings in GoDaddy

Log in to your GoDaddy account and navigate to My Products. Find the domain you want to configure and click DNS or Manage DNS.

Step 3: Set Up an A Record

In the DNS Management page:

Find the A Record section
Set Host to @
Set Points to to your VPS IP address
Set TTL to 600 seconds (or default)
Click Save

Note: DNS propagation may take a few minutes up to 48 hours.

Once this is complete, your server will no longer need to be accessed by IP. Instead, you can use your domain (e.g., jadifullstack.id) to open your Laravel or Nginx site.

Step 4: Verify It Works

If Nginx is correctly configured on your VPS (as explained in our Laravel deployment guide), your Laravel site should now be accessible from your GoDaddy domain.

Initially: http://123.456.789.123
Now: http://jadifullstack.id

Conclusion

You've successfully pointed your GoDaddy domain to your VPS. Now, your server can be accessed through a human-readable domain name. For production, don’t forget to set up HTTPS using Let’s Encrypt and monitor your DNS settings for consistency.

How to Deploy a Laravel Application to a VPS: Complete Step-by-Step Guide

Ferry Dermawan — Sat, 28 Jun 2025 04:43:43 +0000

Deploying your Laravel application to a VPS gives you full control over your environment, performance, and security. In this guide, you'll learn how to deploy Laravel from GitHub to a VPS using the LEMP stack (Linux, Nginx, MySQL, PHP).

Step 1: Connect to Your VPS and Update the System

Start by connecting to your VPS via SSH. Once connected, update your package list and upgrade the system:

sudo apt update && sudo apt upgrade -y

Step 2: Install PHP and Required Extensions

Install PHP along with the extensions required by Laravel:

sudo apt install php php-cli php-common php-mbstring php-xml php-bcmath php-curl php-mysql unzip curl php-zip php-tokenizer php-fileinfo php-fpm -y

Check the installed PHP version:

php -v

Expected output: PHP 8.3 (or newer)

Step 3: Install MySQL and Create a Database

Install MySQL Server:

sudo apt install mysql-server -y

Access the MySQL shell:

sudo mysql

Create a database and a user for your Laravel app:

CREATE DATABASE laravel_db;
CREATE USER 'laravel_user'@'localhost' IDENTIFIED BY 'your_secure_password';
GRANT ALL PRIVILEGES ON laravel_db.* TO 'laravel_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;

Step 4: Set Up SSH Key to Pull From GitHub

To pull your Laravel project from GitHub, add your VPS SSH key to GitHub:

Generate SSH key (if not yet):

   ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Copy the key:

   cat ~/.ssh/id_rsa.pub

Paste it into GitHub → Settings → SSH and GPG keys

Step 5: Clone the Laravel Project and Configure

Clone the repository into your web directory:

git clone git@github.com:yourusername/your-laravel-project.git

Navigate to the project folder:

cd your-laravel-project

Install dependencies and configure the app:

composer install
cp .env.example .env
php artisan key:generate

Update the .env file with your database credentials:

DB_DATABASE=laravel_db
DB_USERNAME=laravel_user
DB_PASSWORD=your_secure_password

Run Laravel migrations:

php artisan migrate

If your project uses frontend assets:

npm install && npm run build

Set permissions for the storage and bootstrap directories:

sudo chown -R www-data:www-data .
sudo chmod -R 775 storage bootstrap/cache

Step 6: Configure Nginx

Create a new server block for Laravel:

sudo nano /etc/nginx/sites-available/your-laravel-project

Paste the following configuration:

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/your-laravel-project/public;

    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.3-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

Enable the site and restart Nginx:

sudo ln -s /etc/nginx/sites-available/your-laravel-project /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Step 7: Access Your Laravel Application

Once everything is configured, visit your server's public IP or domain to view the Laravel dashboard.

Conclusion

Congratulations! You've successfully deployed your Laravel application to a VPS. This setup gives you complete control over the environment and scales better for production. You can now secure your server with SSL and configure auto-deployment for better CI/CD.

How to Create an AWS EC2 Instance: Beginner’s Guide to Cloud Hosting

Ferry Dermawan — Fri, 27 Jun 2025 04:06:02 +0000

Amazon EC2 (Elastic Compute Cloud) lets you run virtual servers in the cloud. In this beginner-friendly guide, you’ll learn how to launch your first EC2 instance on AWS using Ubuntu and Free Tier resources.

Step 1: Log In to the AWS Console

Go to the AWS Console and log in with your credentials.

Step 2: Search for EC2 Service

In the search bar at the top, type EC2 and click on the EC2 service.

Step 3: Launch a New EC2 Instance

Click the Launch Instances button.

Step 4: Choose an Amazon Machine Image (AMI)

Choose Ubuntu or a similar Free Tier-eligible AMI.

Step 5: Choose an Instance Type

Select t2.micro, which is eligible for the AWS Free Tier.

Step 6: Configure Instance Details

Set the number of instances to 1.

Step 7: Add Storage

Keep the default of 8 GiB, which is sufficient for basic applications.

Step 8: Create a Key Pair

Create a new key pair to access the server:

Type: RSA
Format: .pem

Download and save the key securely.

Step 9: Configure Security Group

Add inbound rules for the following protocols:

SSH (port 22)
HTTP (port 80)
HTTPS (port 443)

Then click Launch Instances.

Step 10: View Running Instances

Once launched, you will see your EC2 instance listed on the dashboard.

Step 11: Connect to Your Instance via SSH

Open your terminal and connect to your instance using the .pem key:

chmod 400 your-key.pem
ssh -i your-key.pem ubuntu@your-ec2-public-ip

Replace your-ec2-public-ip with the public IPv4 address of your EC2 instance.

Conclusion

You’ve successfully launched and connected to an EC2 instance using the AWS Free Tier. From here, you can deploy web apps, run servers, and explore AWS cloud services. Be sure to stop or terminate unused instances to avoid unexpected charges.

How to Set Up PhpStorm for Laravel Development with Pint and Prettier

Ferry Dermawan — Thu, 26 Jun 2025 10:40:47 +0000

PhpStorm is a powerful IDE for Laravel development. With the right setup, you can automate code formatting using Laravel Pint for PHP and Prettier for frontend files (like JavaScript, CSS, and Blade). This guide walks you through configuring both tools to run automatically on save.

Step 0: Install and Configure Pint & Prettier

First, install Laravel Pint as a development dependency:

composer require laravel/pint --dev

Then, create a pint.json file at the root of your project (optional, but recommended for custom rules):

{
  "preset": "laravel",
  "exclude": [
    "vendor",
    "node_modules"
  ]
}

Next, install Prettier and its plugins for Tailwind CSS and Blade:

npm install -D prettier prettier-plugin-tailwindcss @shufo/prettier-plugin-blade

Create a .prettierrc file at the root of your project:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "plugins": [
    "prettier-plugin-tailwindcss",
    "@shufo/prettier-plugin-blade"
  ]
}

You are now ready to continue with PhpStorm setup.

Step 1: Open Your Laravel Project in PhpStorm

Ensure that your Laravel project has Pint and Prettier already installed.

Step 2: Open Settings → Actions on Save

Go to Preferences (or Settings on Windows/Linux) → Actions on Save.

Step 3: Configure Reformat Code (Uncheck PHP)

Enable Reformat Code, but uncheck PHP to avoid conflict with Pint.

Step 4: Add a Custom File Watcher for Laravel Pint

Go to Settings → Tools → File Watchers, then click the + icon to add a new watcher.

Use the following configuration:

Name: Pint
File type: PHP
Program: $ProjectFileDir$/vendor/bin/pint
Arguments: $FileRelativePath$
Output paths to refresh: $FileRelativePath$
Working directory: $ProjectFileDir$

Under Advanced Options, only check:

Trigger the watcher on external changes

Step 5: Enable Prettier Integration

Check the box for Run Prettier and click Configure.

Enable Automatic Prettier configuration.
Add *.blade.php to the list of files that Prettier should process.

Make sure Prettier appears with its version number under Actions on Save to confirm it’s working.

Conclusion

With Laravel Pint and Prettier configured in PhpStorm, your code stays clean and consistent every time you save. This setup ensures a smooth development workflow, especially when collaborating in a team environment. You can also explore additional automation like PHPStan or ESLint integration for more robust quality checks.