DEV Community

Emiliano Roberti
Emiliano Roberti

Posted on

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

#gke #gcp #kubernetes #express

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

Top comments (0)