DEV Community

Emiliano Roberti
Emiliano Roberti

Posted on

Deploying a TypeScript Express App to GKE Using Docker and Artifact Registry

This guide walks you through the steps to create a TypeScript Express app, containerize it with Docker, and deploy it to Google Kubernetes Engine (GKE) using Google Artifact Registry.


1. Create a TypeScript Express App

  1. Initialize the Project:
   mkdir ts_express_server
   cd ts_express_server
   npm init -y
Enter fullscreen mode Exit fullscreen mode
  1. Install Required Packages:
   npm install express cors
   npm install --save-dev typescript @types/node @types/express @types/cors
Enter fullscreen mode Exit fullscreen mode
  1. Set Up TypeScript: Create a tsconfig.json file:
   {
     "compilerOptions": {
       "outDir": "./dist",
       "module": "commonjs",
       "target": "es6",
       "strict": true
     },
     "include": ["src/**/*"]
   }
Enter fullscreen mode Exit fullscreen mode
  1. Write the Server Code: Create src/server.ts:
   import express, { Request, Response } from "express";
   import Cors from "cors";

   const app = express();
   app.use(express.json());
   app.use(Cors());

   app.get("/api", (req: Request, res: Response) => {
     res.status(200).json({ message: "Server up " + new Date().toISOString() });
   });

   app.listen(8090, () => {
     console.log("Server listening on port 8090");
   });
Enter fullscreen mode Exit fullscreen mode
  1. Build the App: Add build scripts to package.json:
   "scripts": {
     "build": "tsc",
     "start": "node dist/server.js"
   }
Enter fullscreen mode Exit fullscreen mode

Build the app:

   npm run build
Enter fullscreen mode Exit fullscreen mode

2. Create a Docker Image

  1. Write a Dockerfile:
   FROM node:18-alpine
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   RUN npm run build
   EXPOSE 8090
   CMD ["npm", "run", "start"]
Enter fullscreen mode Exit fullscreen mode
  1. Build the Docker Image:
   docker build -t emirob/emi-repo:my-express-app .
Enter fullscreen mode Exit fullscreen mode
  1. Push the Image to Docker Hub:
   docker tag emirob/emi-repo:my-express-app emirob/emi-repo:my-express-app
   docker push emirob/emi-repo:my-express-app
Enter fullscreen mode Exit fullscreen mode

3. Set Up GCP for Artifact Registry and GKE

  1. Enable Required APIs:

    • Go to the Google Cloud Console.
    • Enable the Artifact Registry API.
    • Enable the Kubernetes Engine API.
  2. Set Your Project in Cloud Shell:

   export PROJECT_ID=gketest-448214
   gcloud config set project $PROJECT_ID
Enter fullscreen mode Exit fullscreen mode
  1. Create an Artifact Registry Repository:
   gcloud artifacts repositories create emi-repo --repository-format=docker --location=us-west1 --description="Docker repo"
Enter fullscreen mode Exit fullscreen mode
  1. Authenticate Docker with GCP:
   gcloud auth configure-docker us-west1-docker.pkg.dev
Enter fullscreen mode Exit fullscreen mode

4. Push the Docker Image to Artifact Registry

  1. Pull the Image from Docker Hub:
   docker pull emirob/emi-repo:my-express-app
Enter fullscreen mode Exit fullscreen mode
  1. Tag the Image for Artifact Registry:
   docker tag emirob/emi-repo:my-express-app        us-west1-docker.pkg.dev/gketest-448214/emi-repo/my-express-app:latest
Enter fullscreen mode Exit fullscreen mode
  1. Push the Image to Artifact Registry:
   docker push us-west1-docker.pkg.dev/gketest-448214/emi-repo/my-express-app:latest
Enter fullscreen mode Exit fullscreen mode
  1. Verify the Image:
   gcloud artifacts docker images list us-west1 docker.pkg.dev/gketest-448214/emi-repo
Enter fullscreen mode Exit fullscreen mode

5. Deploy the App on GKE

  1. Create a GKE Cluster:
   gcloud container clusters create my-cluster --num-nodes=3 --zone=us-west1-a
Enter fullscreen mode Exit fullscreen mode
  1. Connect to the Cluster:
   gcloud container clusters get-credentials my-cluster --zone us-west1-a
Enter fullscreen mode Exit fullscreen mode
  1. Create a Kubernetes Deployment: Save the following as deployment.yaml:
   apiVersion: apps/v1
   kind: Deployment
   metadata:
     name: my-express-app
   spec:
     replicas: 2
     selector:
       matchLabels:
         app: my-express-app
     template:
       metadata:
         labels:
           app: my-express-app
       spec:
         containers:
         - name: my-express-app
           image: us-west1-docker.pkg.dev/gketest-448214/emi-repo/my-express-app:latest
           ports:
           - containerPort: 8090
Enter fullscreen mode Exit fullscreen mode
  1. Apply the Deployment:
   kubectl apply -f deployment.yaml
Enter fullscreen mode Exit fullscreen mode
  1. Expose the Service:
   kubectl expose deployment my-express-app --type=LoadBalancer --port 80 --target-port 8090
Enter fullscreen mode Exit fullscreen mode
  1. Access the Application: Get the external IP of the LoadBalancer:
   kubectl get service my-express-app
Enter fullscreen mode Exit fullscreen mode

Visit http://<EXTERNAL-IP>/api.

6. GitHub Repository

For the full project setup and Docker image creation, check the GitHub repository:

build_node_server_docker_images

Emi Roberti - Happy coding

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay