Deploy a Static Site with Nginx on Google Cloud Run using Artifact Reg

Activate Cloud Shell

Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud. Cloud Shell provides command-line access to your Google Cloud resources.

Click Activate Cloud Shell

at the top of the Google Cloud console.

When you are connected, you are already authenticated, and the project is set to your PROJECT_ID. The output contains a line that declares the PROJECT_ID for this session:

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.

(Optional) You can list the active account name with this command:

gcloud auth list

Click Authorize.
Your output should now look like this:

Output:

ACTIVE: *
ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net

To set the active account, run:
    $ gcloud config set account `ACCOUNT`

(Optional) You can list the project ID with this command:

gcloud config list project

Output:

[core]
project = <project_ID>

Example output:

[core]
project = qwiklabs-gcp-44776a13dea667a6

Note: For full documentation of gcloud, in Google Cloud, refer to the gcloud CLI overview guide.

Overview

In this lab, you will learn how to deploy a static website using Nginx on Google Cloud Run. You'll build a Docker image, store it in Artifact Registry, and then deploy it to Cloud Run, making your website accessible via a public URL.

Task 1. Set up your Environment

Configure your Google Cloud environment by setting the project ID, region and enabling necessary services.

Set your Project ID is: qwiklabs-gcp-01-ddb400ec2267

gcloud config set project qwiklabs-gcp-01-ddb400ec2267

Note:
This command sets your active project.

Set your default region to us-east1

gcloud config set run/region us-east1

Note:
This command sets your default cloud run region.

Enable the Cloud Run and Artifact Registry APIs.

gcloud services enable run.googleapis.com artifactregistry.googleapis.com

Note:
This command enables the required Google Cloud services.

Task 2. Create a Static Website

Create a simple HTML file that will be served by Nginx.

Create an index.html file with the following content:

cat > index.html <<EOF
<!DOCTYPE html>
<html>
<head>
    <title>My Static Website</title>
</head>
<body>
    <div>Welcome to My Static Website!</div>
    <p>This website is served from Google Cloud Run using Nginx and Artifact Registry.</p>
</body>
</html>
EOF

Note:
This command creates the index.html file.

Task 3. Create an Nginx Configuration

Create an Nginx configuration file to serve the static website.

Create a nginx.conf file with the following content:

cat > nginx.conf <<EOF
events {}
http {
    server {
        listen 8080;
        root /usr/share/nginx/html;
        index index.html index.htm;

        location / {
            try_files \$uri \$uri/ =404;
        }
    }
}
EOF

Note:
This command creates the nginx.conf file.

Task 4. Create a Dockerfile

Create a Dockerfile to build an image with Nginx and your static website.

Create a Dockerfile with the following content:

cat > Dockerfile <<EOF
FROM nginx:latest

COPY index.html /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 8080

CMD ["nginx", "-g", "daemon off;"]
EOF

Note:
This command creates the Dockerfile.

Task 5. Build and Push the Docker Image to Artifact Registry

Build the Docker image and push it to Artifact Registry.

Create an Artifact Registry repository named nginx-static-site in the region you configured.

gcloud artifacts repositories create nginx-static-site \
    --repository-format=docker \
    --location=us-east1 \
    --description="Docker repository for static website"

Note:
This command creates the Artifact Registry repository.

Build the Docker image.

docker build -t nginx-static-site .

Note:
This command builds the Docker image.

Tag the Docker image with the Artifact Registry repository URL.

docker tag nginx-static-site us-east1-docker.pkg.dev/qwiklabs-gcp-01-ddb400ec2267/nginx-static-site/nginx-static-site

Note:
This command tags the Docker image.

Push the Docker image to Artifact Registry.

docker push us-east1-docker.pkg.dev/qwiklabs-gcp-01-ddb400ec2267/nginx-static-site/nginx-static-site

Note:
Ensure Docker is authenticated with gcloud. Run gcloud auth configure-docker if you have issues pushing the image.

Task 6. Deploy to Cloud Run

Deploy the Docker image from Artifact Registry to Cloud Run.

Deploy the image to Cloud Run, allowing unauthenticated invocations.

gcloud run deploy nginx-static-site \
    --image us-east1-docker.pkg.dev/qwiklabs-gcp-01-ddb400ec2267/nginx-static-site/nginx-static-site \
    --platform managed \
    --region us-east1 \
    --allow-unauthenticated

Note:
This command deploys the image to Cloud Run and allows unauthenticated access.

Retrieve the Cloud Run service URL.

gcloud run services describe nginx-static-site --platform managed --region us-east1 --format='value(status.url)'

Note:
This will print the public URL of your deployed static site.

Task 7. Verify the Deployment

Access the provided URL to verify your deployment. You should see your static website.

Open the URL provided by the gcloud run services describe command in your web browser.

Note:
You should see the 'Welcome to My Static Website!' message.

Solution of Lab

https://youtu.be/FA9Q3EyDzwc

curl -LO raw.githubusercontent.com/Techcps/Google-Cloud-Skills-Boost/master/Deploy%20a%20Static%20Site%20with%20Nginx%20on%20Google%20Cloud%20Run%20using%20Artifact%20Registry/techcps.sh
sudo chmod +x techcps.sh
./techcps.sh

David Nguyen