Challenge 2: Deploy your own frontend web client and Service

Previous Challenge Next Challenge

Introduction

Deploy a web client to connect to your GameServers.

Description

Before we can start playing on a real game server, we are first going to need a frontend to connect through. To do this, you will need to:

  • Clone the Space Agon repo into your Cloud Shell so you can work with the files contained in that repo:
  • Create an Artifact Registry repository for Docker images.

  • Build a Docker image for the Space Agon web client frontend and push it to your project’s Artifact Registry with the following code:

    export REGISTRY=<YOUR-ARTIFACT-REGISTRY-REPO>
docker build . -f Frontend.Dockerfile -t $REGISTRY/space-agon-frontend:0.1
docker push $REGISTRY/space-agon-frontend:0.1
  • Create and apply a frontend.yaml file for Space Agon containing a Deployment and a Service for the frontend container you build using the following specifications:
    • Replicas: 2
    • Container port: 8080
    • Service type: LoadBalancer
    • Service port: 80
    • Set resource requests and limits of:
      • Memory: 100Mi
      • CPU: 100m

At this point, you don’t have any game servers to connect to, so you still can’t play anything, but we will fix that in the next challenge.

Note If you’re running an Autopilot cluster and see some errors, it might be because the cluster needs to scale before it can run your container. Be patient and give it some time.

Note Epilepsy warning for Mac users. Mac users with non-Intel chips using Chrome or Safari will see a lot of flashing large boxes on the screen. You will need to download and install Firefox and use it as your browser for this gHack.

Note Unfamiliar with Docker and what the build and push commands do? After this gHack, check out Modernizing the Monolith: Containerizing and Deploying to Kubernetes to get hands-on experience with containerizing and deploying applications.

Success Criteria

  • GKE shows your frontend deployment and service are both running.
  • Demonstrate you can connect to your frontend via your Service’s IP address by using your browser to connect to http://<YOUR-FRONTEND-IP>.

Tips

  • The skeleton of a frontend.yaml file has been provided in the GitHub repository.
  • If you aren’t a fan of command line text editors, such as vi, emacs or nano, click the Open Editor button (pencil icon) in the Cloud Shell to get a web-based editor that you can use for the entire gHack.

Learning Resources

Previous Challenge Next Challenge