DEV Community: Sanya_Lazy

Building a Scalable Django Application with Gunicorn and Nginx

Sanya_Lazy — Wed, 25 Sep 2024 19:25:56 +0000

Scaling your web app is essential for success.
Django is great, but Gunicorn and Nginx are needed for true scalability.
This post shows you how to build a scalable Django app with Gunicorn and Nginx.
This post follows in "Kali Linux". You can use any Linux based OS.

Introduction:

Building a web application that can handle a growing number of users and requests is crucial for any successful project.
Django, a powerful Python framework, provides a solid foundation, but for true scalability, you need to leverage the power of tools like Gunicorn and Nginx.
This post will guide you through the process of setting up a scalable Django application using Gunicorn and Nginx, ensuring your website can handle the demands of a growing user base.

⚙️ Setting up -

I am doing this in Linux.
First check python3, pip, nginx Installed or not.
To install use this command (install in home/Desktop or new terminal)

sudo apt install python3 python3-pip nginx

Now create a Virtual environment (create new folder 📂 for this)
Activate the environment

source environment_name/bin/activate   # use name created above "environment_name"

Now Install packages 📦 in environment
- django, gunicorn

pip install django
pip install gunicorn

// or directly install both
pip install django gunicorn

Creating Django Project

Use this command to create Django project

django-admin startproject myproject      # use any name "myproject"

Create a Gunicorn Configuration File

Use this command

nano gunicorn_conf.py  # use any name but using same better "gunicorn_conf.py"

Add the following code in "gunicorn_config.py"

import multiprocessing

bind = '127.0.0.1:8000' # Django running port/link
workers = multiprocessing.cpu_count() * 2 + 1

Save file using "CTRL + o"(to save), press ENTER, "CTRL + X"(to exit)
This will create workers and also we should add our Django running link. ### Run the Django project/application with gunicorn
First navigate to project folder

cd myproject   # navigate to Django Project "myproject"

Now run this command

gunicorn myapp.wsgi:application -c ../gunicorn_conf.py  # here myapp is myproject

# here "myapp" is a Django project name, and at last gunicorn_conf.py is a gunicorn configuration file which created above/before.

Now make some changes in Django project
First change some code in settings.py in project folder. Directory myproject/myproject/settings.py > Django project
For this use any code editor like VS Code. To open from terminal use this command

code- oss

# to open vs code from terminal

Add this code

# example code
ALLOWED_HOSTS = ['localhost', '0.0.0.0', '127.0.0.1'] # use IP address here

In above command we used IP address, to get that open another new terminal and run this command to get all about network.

ifconfig

Create a Nginx Configuration File

Open another new terminal, run this command

sudo nano /etc/nginx/sites-available/myapp       # use any name "myapp"

# better use vs code instead of nano
sudo code- oss /etc/nginx/sites-available/myapp   # check code-oss

Add code in that nginx file

server {
    listen 80;
    server_name your_domain.com;  # Replace with your domain or IP address
    # example for aboveline: server_name 'ipaddress' 'another domain' ;

    location / {
        proxy_pass http://127.0.0.1:8000;  # Gunicorn's default address
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

save the file
create a Symbolic Link to enable Nginx Configuration, run this command

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled

# change "myapp" to nginx config file name used above

That's it. ## Testing:
First check Nginx configuration file for any syntax error.

sudo nginx -t

If you don't have any errors, first restart the Nginx using this command

sudo systemctl restart nginx

Setting up Firewall for Nginx

Open new terminal, and install this package

sudo apt install ufw

Now allow Nginx through Firewall

sudo ufw allow 'Nginx Full'

Using Instructions -

First start Nginx by opening new terminal

sudo systemctl start nginx

Now to start complete project open a terminal and go to virtualenv created and activate

gunicorn myapp.wsgi:application -c ../gunicorn_conf.py

# in above code "myapp" is a Django project name
# last gunicorn_conf.py is a gunicorn configuration file name

Now the complete project started.
Now you can open your django project with your IP address.
Navigate to browser and search with your IP address.
To stop Nginx, use this command

sudo systemctl stop nginx

Happy Coding 😴 - Be Lazy

Contact DM - Twitter(X)
Contact Mail - sanya.san@myyahoo.com

Building a Server with Node.js Express

Sanya_Lazy — Sun, 22 Sep 2024 20:18:40 +0000

"Welcome to the world of server-side development..." grabs attention and sets the tone.

What is Node.js ?

Node.js is a JavaScript runtime environment built on Chrome's V8 JavaScript engine. It allows you to run JavaScript on the server, making it possible to build dynamic web applications.

What is Express.js ?

Express.js, or simply Express, is a back-end web application framework that works on top of Node.js. It provides a robust set of features for building RESTful APIs and web applications. Express is designed to simplify the process of building web applications and APIs by providing a minimal and flexible framework.

Setting up Node.js with Express:

First Make sure you have Installed Node. If not refer to this link.
You can check if Node.js is properly installed by opening a terminal or command prompt and typing node -v. If Node.js is installed, it will display the version number.
And also check for npm version with this command:

npm -v  # to check npm version

node -v # to check node version

Now Create a new folder 📂, and navigate and open terminal.
Now Initialize npm

npm init # Intialize
# It asks for yes or no, type y. And also it asks some questions, you can skip or give.

# Otherwise directly you can use this
npm init -y

Now after initialized you get a package.json file. This is project configuration and also you can check npm installed packages.
These are some packages you have to install

npm install express
# Installs the Express.js framework, which is a popular choice for building web applications with Node.js
npm install cors
# Installs the cors package, which helps you handle Cross-Origin Resource Sharing (CORS) requests in your Express.js application.
npm install body-parser
# Installs the body-parser middleware, which is used to parse incoming request bodies (like JSON data) in your Express.js application.
npm install dotenv
# Installs the dotenv package, which allows you to load environment variables from a .env file, keeping sensitive information separate from your code.
npm install nodemon
# Installs nodemon, a handy tool that automatically restarts your Node.js server whenever you save changes to your code. This makes development much smoother.

# Are else you can download all at a time
npm install express cors body-parser dotenv nodemon

Now create a new file as index.js or server.js. Or else you can write any thing.
Now navigate to index.js

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
require("dotenv").config();

const app = express();
const port = process.env.PORT || 3000;

// Middleware
app.use(cors());
app.use(bodyParser.json());

// Routes
app.get("/", (req, res) => {
  res.send("Hello World!");
});

// Start the server
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Now save and start server using this command

npm start

Now the server is started at port.

How to use env

Create new .env file in project folder.
And assign like this

PORT=5000

Now this is accessed like this

const port = process.env.PORT || 3000;

How to use nodemon

Install this using this command

npm i nodemon

To use this change code in package.json file

  "scripts": {
    "start": "nodemon index.js"
  },

Now when you start server using npm start.
The server will start at port 5000.
Now if you make changes also the server do not need to restart.
Changes are implemented dynamically, eliminating the need for a server restart.

Testing:

Now to test this server. After starting server navigate to URL http://localhost:5000.
This will show Hello World!
You can also test this API in API development platform.

*Reference: *

If you have doubt, check this GitHub Project link.

Happy Coding 😴 - Be Lazy

Contact DM - Twitter(X)
Contact Mail - sanya.san@myyahoo.com

Django REST Framework: From Zero to Hero

Sanya_Lazy — Fri, 20 Sep 2024 22:11:17 +0000

Welcome to the world of API development with Django REST Framework! This tutorial is your comprehensive guide to building powerful and robust APIs using the most popular framework for Django.

Whether you're a complete beginner or have some experience with Django, this tutorial will take you from zero knowledge to confidently building your own APIs. We'll cover everything from the basics of REST principles to advanced concepts like authentication, authorization, and pagination.

Why Choose Django REST Framework?
Django REST Framework is a powerful and versatile tool that makes API development a breeze. Here's why it's the perfect choice:

Simplicity: Django REST Framework is designed to be easy to learn and use, even for beginners.
Flexibility: The framework is highly customizable, allowing you to tailor your APIs to your specific needs.
Robustness: Django REST Framework is built on top of Django, providing a solid foundation for building reliable and scalable APIs.
Large Community: You'll find a vibrant community of developers ready to help you with any questions or challenges you encounter.

Ready to Dive In?
Let's begin our journey to becoming API masters with Django REST Framework!

For Installation and Set up of Python and Django and also with python virtual environment use this reference link.

Let's Start

After creating Django project (you can check installation here), Install this package

pip install djangorestframework

Add rest_framework to settings.py file.

INSTALLED_APPS = [
    ...,
    "rest_framework",
    "my_app" # app created
]

Make sure to create my_app and add in settings.py file
Now make migrations and migrate

django manage.py makemigrations
django manage.py migrate

In this we have around 5 steps:
Models
Serializers
Views
URL's
Adding in project URL's
Now if you want to use SQLite Database, then write code like this in my_app/models.py. If you can't find models.py file then create one in my_app/models.py.

from django.db import models

class User(models.Model):
    username = models.CharField(max_length=80, unique=True)
    password = models.CharField(max_length=150)

    def __str__(self):
        return self.username

# here this is basic model that stores user data.

Now add serializers in my_app/serializers.py. If you can't find serializers.py file then create one in my_app/serializers.py.

from rest_framework import serializers
from .models import User # import required models

class RegistrationSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['username', 'password']

    # example for password
    # password = serializers.CharField(write_only=True)

class LoginSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['username', 'password']  # Define the fields for login

    username = serializers.CharField()
    password = serializers.CharField(write_only=True)

# This is basic code for user data

Now add views in my_app/views.py. If you can't find views.py file then create one in my_app/views.py.
Here I have written code for two views as RegisterView and LoginView.

# code for RegisterView
class RegisterView(APIView):
    def post(self, request):
        serializer = RegistrationSerializer(data=request.data)
        if serializer.is_valid():
            # Access the validated data from the serializer
            username = six.b(serializer.validated_data['username']) 
            password = six.b(serializer.validated_data['password'])  

            user = User(username=username, password=password)
            user.save()

            return Response({"message": "user registered successfully"}, status=status.HTTP_201_CREATED)

# code for LoginView
class LoginView(APIView):
    def post(self, request):
        serializer = LoginSerializer(data=request.data)
        if serializer.is_valid():
            username = six.b(serializer.validated_data['username']) 
            password = six.b(serializer.validated_data['password'])  

            try:
                user = User.objects.get(username=username)  
            except User.DoesNotExist:
                return Response({"error": "User not found"}, status=status.HTTP_404_NOT_FOUND)

            return Response({"username": username})

        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

the complete code for views.py

from django.shortcuts import render

# Create your views here.
from rest_framework import status
from rest_framework.response import Response
from rest_framework.views import APIView

from .models import User  #import models
from .serializers import RegistrationSerializer, LoginSerializer  #import serializers

# impot any packages
import six # Python 2 and 3 compatibility library package

class RegisterView(APIView):
    def post(self, request):
        serializer = RegistrationSerializer(data=request.data)
        if serializer.is_valid():
            # Access the validated data from the serializer
            username = six.b(serializer.validated_data['username']) 
            password = six.b(serializer.validated_data['password'])  

            user = User(username=username, password=password)
            user.save()

            return Response({"message": "user registered successfully"}, status=status.HTTP_201_CREATED)

class LoginView(APIView):
    def post(self, request):
        serializer = LoginSerializer(data=request.data)
        if serializer.is_valid():
            username = six.b(serializer.validated_data['username']) 
            password = six.b(serializer.validated_data['password'])  

            try:
                user = User.objects.get(username=username)  
            except User.DoesNotExist:
                return Response({"error": "User not found"}, status=status.HTTP_404_NOT_FOUND)

            return Response({"username": username})

        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Now add URL's in my_app/urls.py. If you can't find urls.py file then create one in my_app/urls.py.

from django.urls import path
from .views import RegisterView, LoginView

urlpatterns = [
    path('register/', RegisterView.as_view(), name='register'),
    path('login/', LoginView.as_view(), name='login'),
]

Now add URL's in my_project/urls.py. Once check it is located in my_project. If you can't find urls.py file then create one in my_project/urls.py.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    ...,
    path('auth/', include('my_app.urls'))
]

Now the code is completed. Run makemigrations and migrate

python manage.py makemigrations
python manage.py migrate

Run the development server

python manage.py runserver

Testing:

To use this API's, the URL's are like this

/auth/register/
- the complete URL `http://localhost:3000/auth/register/
- takes username, password
- stores in database

/auth/login/
- the complete URL `http://localhost:3000/auth/login/
- takes username, password
- returns values

For testing you can use any API development platform like postman etc.

You have 5 steps

Models

Serializers

Views

URL's

Adding in project URL's

*Reference: *
GitHub - Link🔗

Happy Coding 😴 - Be Lazy

Contact DM - Twitter(X)
Contact Mail - sanya.san@myyahoo.com

How to install and use Django

Sanya_Lazy — Thu, 19 Sep 2024 18:57:21 +0000

Django

Django is a free and open-source web framework written in Python. It follows the model–template–views architectural pattern and is maintained by the Django Software Foundation. It was first released on July 21, 2005, and is licensed under the 3-clause BSD license. Django is known for its rapid development and clean, pragmatic design, making it a popular choice for building web applications.

Installation:

Make sure you have downloaded python. If not install from official python website (link)
After installing python complete setup and finish.
To check whether the python is correctly installed or not, open terminal and run this

python --version

# output will be python version you have installed

Creating Virtual environment: (optional) but best -

Setting Up Your Virtual Environment:

Why Use Virtual Environments? Virtual environments isolate your project's dependencies, preventing conflicts with other projects and ensuring your project has the exact versions of libraries it needs.
Creating a Virtual Environment
Open your terminal or command prompt.
Navigate to the directory where you want to store your project.
Use the following command to create a virtual environment (using venv, the standard library option):

# If you want to use with python3 then
python3 -m venv my_env 

# If you want to use with just python then
virtualenv env_name

(Replace my_env with your preferred environment name.)

Activating Your Virtual Environment
Linux/macOS:

source my_env/bin/activate

Windows:

my_env\Scripts\activate

Confirmation: You should see the virtual environment's name in parentheses before your terminal prompt (e.g., (my_env) your_user@your_computer).
Creating a Project Folder
Inside Your Terminal:

mkdir my_project_name

(Replace my_project_name with your project's name.)

Navigating to the Project Folder
Inside Your Terminal:

cd my_project_name

Working in Your Project
You're Ready to Go! You're now in your project folder with your virtual environment activated. You can start creating your project files, installing dependencies, and running your code.

Installing Django Framework:

Install Django package

pip install django

Create new Django project

django-admin startproject project_name

# change project_name

Now after creating project, Navigate to that folder

cd project_name

Now create an App in that Django project, by using

django-admin startapp my_app

# you can use any app name in place of my_app

Now add my_app in settings.py file

INSTALLED_APPS = [
    ...,
    "my_app",
]

If you want to use database then run this (database migrations), in terminal -> in project_folder

python manage.py makemigrations

Now make migrate

python manage.py migrate

Testing Django project

Start the development server

python manage.py runserver

The Django development server starts at http://127.0.0.1:8000.
If you want to change port, use this

python manage.py runserver 8001

Happy Coding 😴 - Be Lazy

Contact DM - Twitter(X)
Contact Mail - sanya.san@myyahoo.com

Initialize Git for a Private Repository

Sanya_Lazy — Wed, 18 Sep 2024 20:17:08 +0000

From local to Git (Private repository)

First download git from official source (link)
Install it.
Now to Initialize private repository first you have to add SSH key in your local pc/laptop.

Steps to add SSH key from local to GitHub

Open Terminal, use default and execute this command.

ssh-keygen -t rsa -b 4096 -C "your_email@example.com" #adding git hub Email

# it ask for folder name to add in that - Add folder name
# it ask for passPhrase(password) add that

# to get public key go to created folder and open "id_rsa" with notePad, open & copy

To check where it is created check in this folder

c:\Users\<yourPC>\.ssh
# example
# c:\Users\Sanya-Lazy\.ssh

There you have files names as id_rsa and id_rsa.pub. open that .pub file

Add SSH Key to GitHub

Login to your GitHub account.
Go to your account settings by clicking on your profile picture in the top-right corner and select "Settings".
In the settings sidebar, click on "SSH and GPG keys".
Click on "New SSH Key" or "Add SSH Key" depending on what's available.
In the "Title" field, provide a descriptive label for the new key, such as "Personal laptop".
Set Key type to "Authentication key".
Paste your public key into the "key" field.
Click on "Add SSH key" to save the key to your GitHub account.

Easy access: Settings -> SSH and GPG keys -> Add SSH key -> Add Title(as "Laptop Name") -> Add Public key into the "Key" field -> click on "Add SSH key"
Check out this Images -

Now To add Project to Private Repository

Create new private repository in GitHub.
Now after Creating new project or with existing project, open terminal and run commands
To Initialize git to your project

git init

Add all files to git

git add .

Add first commit message

git commit -m "first commit"

Add branch name

git branch -M main  # here you can use any branch name like main or master

Add remote URL to your project.

git remote add origin https://github.com/<github-username>/<project-name>.git

Now push to GitHub

git push -u origin main   # here use your branch name

If above method doesn't work (use this method)

First check is SSH key working or not, by using this

ssh -vT git@github.com

# it asks for password, that set when creating SSH key

If it shows correct then it should show GitHub username or Email
If GitHub username is showing then the SSH keys are working. Good
Now try these commands to push project to GitHub Private Repository.
Initialize git

git init

Add files

git add .

Now add commit message

git commit -m "first commit"

Now before setting origin URL, first remove before added remote URL, if any

git remote remove origin

Now add origin to project

git remote add origin git@github.com:<username>/<projectName>.git

# Example
# git remote add origin git@github.com:Sanya-Lazy/AwesomeProject.git

Now set remote URL to project

git remote set-url origin git@github.com:<username>/<projectName>.git

# Example
# git remote set-url origin git@github.com:Sanya-Lazy/AwesomeProject.git

Now push origin to GitHub

git push -u origin main

To update git first you have to pull the changes and you have to push

git pull origin master

Some Useful Git commands

To see remote URL

git remote -v

To remove git from project

rm .git
# press "A" and hit enter

If you got any erroring while adding SSH key, check for .ssh folder in Users. There you have files names as id_rsa and id_rsa.pub. open that .pub file

Happy Coding 😴 - Be Lazy

Contact DM - Twitter(X)
Contact Mail - sanya.san@myyahoo.com

How to use Cloud flare R2 storage with workers API & S3 compatibility

Sanya_Lazy — Tue, 17 Sep 2024 18:53:05 +0000

Cloudflare R2 storage gives free cloud storage for startups and for personal use, but there are monthly usage limits. But it is still worth full.

⭐ Check this image (Reference link)

⚙️Setup:

Ensure that Node.js is installed on your PC or laptop.
First, sign up for a Cloudflare account and provide your payment information (this is just to complete your profile; there's no charge as everything is free after account setup).

♨️Steps:

Create folder 📂 and navigate to that folder.
Install wrangler (reference link)



npm install wrangler --save-dev



npx wrangler login

Now Create a bucket in Cloudflare dashboard.
Navigate to Cloudflare and select R2 and create bucket.
Type a name for the bucket and click on "Create Bucket."
Navigate to bucket you created.
Now Upload your first Object (any image/video/). Choose either drag and drop or use file upload area.
Once the upload is complete, you will receive a confirmation message.
If can't understand (refer to this link)

Bucket Access options (Workers Runtime API)

Now create new application with C3.

C3 (create-cloudflare-cli) is a command-line utility created to assist you in quickly setting up and deploying Workers and Pages applications to Cloudflare.

To get started open terminal in folder. Run this



npm create cloudflare@latest

Create your bucket by running this now



npx wrangler r2 bucket create <YOUR_BUCKET_NAME> #enter new bucket name

To verify if the bucket has been created and to retrieve your list of buckets.

Bind your bucket to a worker (read carefully)

You need to bind your bucket to a worker, for using with API.

Bindings
A binding refers to the way your Worker connects with external resources like KV Namespaces, Durable Objects, or R2 Buckets. It acts as a runtime variable that the Workers environment supplies to your code.

You can specify a variable name in your wrangler.toml file, which will be linked to these resources during runtime, allowing you to interact with them through this variable. The variable name and its behavior for each binding are defined by you when deploying the Worker. For further details, consult the Environment Variables documentation.

A binding is specified in the wrangler.toml file located in your Worker project’s directory. Locate the newly created wrangler.toml file in your project directory and update the account_id field with your Cloudflare Account ID.
To find your Details, navigate

Next, find your Account ID by logging in to the Cloudflare dashboard > Overview > move down to API > and select Click to copy to copy your Account ID. Or run the wrangler whoami command [to copy your Account ID]- (reference link)



// wrangler.toml (file)
name = "<YOUR_WORKER_NAME>"
main = "src/index.js"
compatibility_date = "2022-06-30"

account_id = "YOUR_ACCOUNT_ID" # ← Replace with your Account ID.
workers_dev = true

To connect your R2 bucket to your Worker, include the following in your wrangler.toml file:

Update the binding property to a valid JavaScript variable identifier.

Set the bucket_name to the <YOUR_BUCKET_NAME> that you used when creating your bucket.



[[r2_buckets]]
binding = 'MY_BUCKET' # <~ valid JavaScript variable name
bucket_name = '<YOUR_BUCKET_NAME>'

Find more detailed information on configuring your Worker in the [Wrangler Configuration documentation]

Access your R2 bucket through your Worker:

Within your Worker code, your bucket is now accessible via the MY_BUCKET variable, allowing you to start interacting with it.

Local Development Mode in Wrangler

By default, wrangler dev operates in local development mode.
In this mode, all actions executed by your local Worker will use local storage on your machine.
If you want R2 operations performed during development to interact with a real R2 bucket, use wrangler dev --remote.

An R2 bucket supports operations to READ, LIST, WRITE, and DELETE objects. Below is an example demonstrating all these operations using the Module Worker syntax. Please add the following snippet to your project's index.js file: (If you need clarification on the complete code provided earlier, feel free to ask.)



// src/index.js

var hasValidHeader = (request, env) => {
    return request.headers.get("X-Custom-Auth-Key") === env.AUTH_KEY_SECRET;
  };

  function authorizeRequest(request, env, key) {
    switch (request.method) {
      case "PUT":
      case "DELETE":
        return hasValidHeader(request, env);
      case "GET":
        return true;
      default:
        return false;
    }
  }

  var src_default = {
    async fetch(request, env) {
      try {
        const url = new URL(request.url);
        console.log("Request URL:", url);
        const key = url.pathname.slice(1);
        if (!authorizeRequest(request, env, key)) {
          console.log("Authorization failed");
          return new Response("Forbidden", { status: 403 });
        }
        console.log("Authorization successful");
        switch (request.method) {
          case "PUT":
            console.log("Handling PUT request");
            // Parse the request body to extract fields
            const formData = await request.formData();
            const Filename = formData.get("Filename");
            const type = formData.get("type");
            const image = formData.get("image");

            // Perform image upload and handle additional fields
            await env.MY_BUCKET.put(key, image); // Assuming image is the binary image data
            console.log(`Uploaded ${Filename} successfully! Type: ${type}`);
            return new Response(`Uploaded ${Filename} successfully! Type: ${type}`);
          case "GET":
            console.log("Handling GET request");
            const object = await env.MY_BUCKET.get(key);
            if (object === null) {
              console.log("Object not found");
              return new Response("Object Not Found", { status: 404 });
            }
            const headers = new Headers();
            object.writeHttpMetadata(headers);
            headers.set("etag", object.httpEtag);
            return new Response(object.body, {
              headers
            });
          case "DELETE":
            console.log("Handling DELETE request");
            await env.MY_BUCKET.delete(key);
            return new Response("Deleted!");
          default:
            console.log("Invalid request method");
            return new Response("Method Not Allowed", {
              status: 405,
              headers: {
                Allow: "PUT, GET, DELETE"
              }
            });
        }
      } catch (error) {
        console.error("Error:", error);
        return new Response("Internal Server Error", { status: 500 });
      }
    }
  };

  export {
    src_default as default
  };

Bucket access and Privacy (reference link)

Using custom headers we can allow or deny a request based on a known pre-shared key in a header.
You need to protect bucket operations.
For PUT and DELETE requests, you'll utilize a new environment variable called AUTH_KEY_SECRET, which will be defined later as a Wrangler secret.
For GET requests, you'll restrict access to a specific file. This logic is implemented within an authorizeRequest function, while the hasValidHeader function manages the custom header validation. If all checks are successful, the operation proceeds.
To use this, create a secret key via Wrangler.
Run this command



npx wrangler secret put AUTH_KEY_SECRET

This command will ask you to input a secret in your terminal.



npx wrangler secret put AUTH_KEY_SECRET
#Enter the secret text you'd like assigned to the variable 
# AUTH_KEY_SECRET on the script named <YOUR_WORKER_NAME>:*********
# 🌀  Creating the secret for script name <YOUR_WORKER_NAME>✨  
# Success! Uploaded secret AUTH_KEY_SECRET.

We use like this in URL (header)



X-Custom-Auth-Key - 123456789 (example code)

This secret is now accessible as AUTH_KEY_SECRET in the env parameter of your Worker.

Deploy your bucket

Now that your Worker and Bucket are configured, execute this command in the terminal to deploy to Cloudflare's global network. (reference link)



npx wrangler deploy

After deploying you get your worker url.

Testing

Now After Deploying, we can use like this:
I am showing in Postman, you can use any other API testing platforms.

Ensure to include the Header. like this

Now when press send You get a Successful message, and you can check that file is uploaded to cloud flare R2 account.
Use different file names; using the same name will overwrite the existing image.
You can upload various file types, similar to the above.

To view uploaded image:

Simply append the file name to the end of your Cloudflare Worker URL to view the image. No header is required; just use URL/your-file-name.

Note: Ensure that you are using a Cloudflare account within the free limit. Exceeding this limit may result in charges. Stay within the free limit to avoid any worries.

GitHub Complete code (🔗)

Happy Coding 😴 - Be Lazy

Contact DM - Twitter(X)
Contact Mail - sanya.san@myyahoo.com