How to make static content available through CDN?

[patelatharva]

So far I have written the following shell script to execute commands using Gcloud CLI. Can you please review and suggest what needs to be added, remomved or modified to make the files in CDN accessible?

I am also interested in getting domain name of the CDN endpoint instead of the IP address that I have managed get so far. I want to set it as PUBLIC_URL to my react app's build step. Can you please suggest corresponding GCLOUD CLI commands to get access to that domain/host name of Cloud CDN endpoint created by this script?

```
REGION="europe-west3"
gcloud config set run/region "$REGION"

#!/bin/bash

# Set the variables
export CONTENT="static-content"
export BUCKET_NAME="$CLOUD_STORAGE_BUCKET_NAME-$CONTENT"
export CDN_NAME="$CLOUD_STORAGE_BUCKET_NAME-$CONTENT-cdn"

# Check if the bucket exists
if gsutil ls -p "$PROJECT_ID" -b "gs://$BUCKET_NAME" 2>/dev/null; then
echo "Bucket '$BUCKET_NAME' already exists."
else
echo "Creating bucket '$BUCKET_NAME'..."
gsutil mb -p "$PROJECT_ID" -c standard -l $REGION -b on "gs://$BUCKET_NAME"
fi

# Check if the CDN exists
if gcloud compute backend-buckets describe "$CDN_NAME" --project "$PROJECT_ID" 2>/dev/null; then
echo "CDN '$CDN_NAME' already exists."
else
echo "Creating CDN '$CDN_NAME'..."
gcloud compute backend-buckets create "$CDN_NAME" --gcs-bucket-name "$BUCKET_NAME" --project "$PROJECT_ID"
fi

# Enable the CDN for the backend bucket
gcloud compute backend-buckets update "$CDN_NAME" --project "$PROJECT_ID" --enable-cdn

if ! gcloud compute url-maps describe "$CDN_NAME" >/dev/null 2>&1; then
# Create the URL map
gcloud compute url-maps create "$CDN_NAME" --default-backend-bucket="$CDN_NAME"
else
echo "URL map $CDN_NAME already exists. Reusing."
fi

# Invalidate cache if CDN exists
if gcloud compute url-maps describe "$CDN_NAME" --project "$PROJECT_ID" 2>/dev/null; then
echo "Invalidating cache for CDN '$CDN_NAME'..."
gcloud compute url-maps invalidate-cdn-cache "$CDN_NAME" --project "$PROJECT_ID" --path "/*" &
fi
# Check if CDN already exists
if ! gcloud compute target-http-proxies describe $CDN_NAME --project=$PROJECT_ID &> /dev/null; then
# Create a new target HTTP proxy
gcloud compute target-http-proxies create $CDN_NAME \
--url-map $CDN_NAME \
--project $PROJECT_ID
fi

# Check if global forwarding rule already exists
if ! gcloud compute forwarding-rules describe $CDN_NAME --global --project=$PROJECT_ID &> /dev/null; then
# Create a new global forwarding rule
gcloud compute forwarding-rules create $CDN_NAME \
--global \
--target-http-proxy $CDN_NAME \
--ports 80 \
--project $PROJECT_ID
fi

# Get the CDN endpoint URL
CDN_ENDPOINT=$(gcloud compute forwarding-rules describe $CDN_NAME \
--global \
--format='get(IPAddress)' \
--project=$PROJECT_ID)

#CDN_ENDPOINT=$(gcloud compute backend-buckets describe "$CDN_NAME" --project "$PROJECT_ID" --format="value(cdnPolicy.cacheKeyPolicy.includeHost)")

# Set the PUBLIC_URL environment variable
export PUBLIC_URL="https://$CDN_ENDPOINT"
echo "PUBLIC_URL: $PUBLIC_URL"
yarn build:custom
# Sync build folder with bucket in cloud storage
gsutil -m rsync -R ./build/ "gs://$BUCKET_NAME"
```

[Marvin_Lucero]

Hi @patelatharva ,

Based from the header/title of your question, it seems that you wanted to make the files CDN available using gcloud commands. You can consider following these steps:

1. Create a Cloud Storage bucket to store your static content. Use the following command : 

gsutil mb gs://<YOUR_BUCKET_NAME>  

2. Upload static content: Upload your static content to the Cloud Storage bucket using the gsutil cp command. For example :

gsutil -m cp -r /path/to/static-content gs://your-bucket-name

3. Enable Cloud CDN: Enable Cloud CDN for your Cloud Storage bucket using the gcloud command: 

gcloud compute backend-buckets create your-backend-bucket-name \
--gcs-bucket-name=your-bucket-name \
--enable-cdn

4.  Configure DNS: Configure your DNS settings to point to the Cloud CDN endpoint. Create a CNAME record or an ALIAS record that maps your desired domain or subdomain to the Cloud CDN endpoint provided by Google. The specific steps for configuring DNS records depend on your DNS provider.

Wait for DNS propagation: After configuring the DNS record, wait for the DNS changes to propagate. This propagation period can vary and may take some time. Once the DNS changes have propagated, you should be able to access your static content using the custom domain or subdomain you configured in step 4. The content will be served through the Cloud CDN, providing improved latency and performance.

Just an important note, the gcloud commands provided here assume you have the necessary permissions and have authenticated with gcloud using gcloud auth login or a service account. Additionally, make sure you have the Cloud CDN and Cloud Storage components enabled in your project.