Documentation on my success to deploy web application to a featured Kubernetes environment.

Mokhutso Manaswe — Sun, 21 May 2023 22:18:51 +0000

Prerequisites

Download and Install Docker
Download and install Docker desktop
IDE (Visual Studio Code)
Sign-up to Docker Hub
Install compose plugin

Get app

Cloned node.js todo wep app github

Build the app’s container image

In the app directory created a Dockerfile
Added the folowing content to the Dockerfile [image]
Build the container image docker build -t sca-project
Started the app container docker run -dp 3000:3000 sa-project
Opened web browser to localhost to see the app

Share application

Created docker repository [image] on Docker Hub docker-repo
Docker login -u my_username
docker tag sca-project my_username/sca-project
docker push my_username/sca-project

Persist the database

docker volume create todo-db
docker run -dp 3000:3000 –mount type-volume, src=todo-db,target=/etc/todos sa-project
Got to see my list being stored
docker volume inspect todo-db

Run app in a development container with a bind mount

docker run -dp 3000:3000 \
    -w /app --mount type=bind,src="$(pwd)",target=/app \
    node:18-alpine \
    sh -c "yarn install && yarn run dev"

docker run -dp 3000:3000 `
    -w /app --mount "type=bind,src=$pwd,target=/app" `
    node:18-alpine `
    sh -c "yarn install && yarn run dev"

docker logs -f <container-id>
Make changes to app.js , save file (restarts the app inside the container automatically)
Refresh the pages and saw my changes being reflected almost immediately

Multi container apps

- `docker network create todo-app`

docker run -d \
     --network todo-app --network-alias mysql \
     -v todo-mysql-data:/var/lib/mysql \
     -e MYSQL_ROOT_PASSWORD=secret \
     -e MYSQL_DATABASE=todos \
     mysql:8.0

docker exec -it <my-sql-container-id> myqsl -u root -p
Into mysql shell -> show databases; (don’t forget the semi-colons or else nothing will be displayed)
Exit the mysql shell

Connect mysql

- `docker network create todo-app`

docker run -d `
     --network todo-app --network-alias mysql `
     -v todo-mysql-data:/var/lib/mysql `
     -e MYSQL_ROOT_PASSWORD=secret `
     -e MYSQL_DATABASE=todos `
     mysql:8.0

Docker logs -f <container-id>
docker exec -it <my-sql-container-id> myqsl -p todos

Into mysql shell -> select * from todos_items
Exit the mysql shell

Docker compose
docker compose version
In the root folder created docker-compose.yml
Insert into docker-compose.yml file

services:

Define the app service

docker-compose.yml file should look like:

services:
  app:
    image: node:18-alpine
    command: sh -c "yarn install && yarn run dev"
    ports:
      - 3000:3000
    working_dir: /app
    volumes:
      - ./:/app
    environment:
      MYSQL_HOST: mysql
      MYSQL_USER: root
      MYSQL_PASSWORD: secret
      MYSQL_DB: todos

  mysql:
    image: mysql:8.0
    volumes:
      - todo-mysql-data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: secret
      MYSQL_DATABASE: todos

volumes:
  todo-mysql-data:

Run the application stack

docker compose up -d
See the app stack in docker desktop dashboard

Describe apps using kubernetes yaml
Create deployment.yaml in the app root folder
Fill deploment.yaml with this code

apiVersion: apps/v1
kind: Deployment
metadata:
  name: bb-demo
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      bb: web
  template:
    metadata:
      labels:
        bb: web
    spec:
      containers:
      - name: bb-site
        image: getting-started
        imagePullPolicy: Never
---
apiVersion: v1
kind: Service
metadata:
  name: bb-entrypoint
  namespace: default
spec:
  type: NodePort
  selector:
    bb: web
  ports:
  - port: 3000
    targetPort: 3000
    nodePort: 30002

Create and monitor deployment

Enabled Kubernetes on Docker Desktop setting
Kubectl apply -f deplyment.yaml
Kubectl rollout status deployment/app-deployment

Now can access the app with the yaml configuration nodePort :30002

Kubectl get deployments -> view pods configured by yaml file]
Kubectl get pods
Kubectl get services
Kubectl describe deploments

Scale deployment

Kubectl scale deployment/app-deployment –replicas=3
Horizontal pod autoscaling
Kubectl autoscale deployment/app-deployment –min=3 –max–10 –cpu-percentage=80

How I built and deployed Azure static web app with GitHub

Mokhutso Manaswe — Fri, 21 Apr 2023 13:21:20 +0000

Azure Static Web App

Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a code repository.

Prerequisites

GitHub account
Install Git
Azure account
Visual Studio Code
Azure Static Web Apps extension for Visual Studio Code

Create a repository

On GitHub.com, navigate to the static-web-app repository.
In the top-right corner of the page, click Fork.
Under "Owner," select the dropdown menu and click an owner for the forked repository.
Click Create fork.

Clone the repository

With the repository created in your GitHub account, clone the project to your local machine using the following command.

Open Command Line or terminal
Type git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/Static-Web-App.git replace <YOUR_GITHUB_ACCOUNT_NAME> with your GitHub username
Next, open Visual Studio Code and go to File > Open Folder to open the cloned repository in the editor.

Install Azure Static Web Apps extension

Select View > Extensions.
In the Search Extensions in Marketplace, type Azure Static Web Apps.
Select Install for Azure Static Web Apps.
The extension installs into Visual Studio Code.

Create a static web app

Inside Visual Studio Code, select the Azure logo in the Activity Bar to open the Azure extensions window.

The extension will prompts you to sign in to Azure and GitHub in Visual Studio Code to continue. If you are not already authenticated.
Press F1 to open the Visual Studio Code command palette.
Enter Create static web app in the command box.
Select Azure Static Web Apps: Create static web app and select Enter.
Once the app is created, a confirmation notification is shown in Visual Studio Code.
Once the deployment is complete, you can navigate directly to your website.
To view the website in the browser, right-click the project in the Static Web Apps extension, and select Browse Site.

Azure Portal overview

To view full details about your static web app you just deployed:

Go to Azure portal
Select Static Web Apps
Select Overview

Clean up resources

If you're not going to continue to use this application, you can delete the Azure Static Web Apps instance through the extension.

In the Visual Studio Code Explorer window, return to the Resources section and under Static Web Apps, right-click Static-Web-App and select Delete.

Congratulations you have built and deployed your first Azure Static Web App.

Thank you for reading🤝. Feel free to leave your questions and/or comments (if any). LinkedIn Dev.to

Forem: Mokhutso Manaswe

Documentation on my success to deploy web application to a featured Kubernetes environment.

Prerequisites

Get app

Build the app’s container image

Share application

Persist the database

Run app in a development container with a bind mount

Multi container apps

- `docker network create todo-app`

Connect mysql

- `docker network create todo-app`

Docker compose

Define the app service

Run the application stack

Describe apps using kubernetes yaml

Create and monitor deployment

Scale deployment

How I built and deployed Azure static web app with GitHub

Azure Static Web App

Most popular features

Prerequisites

Create a repository

Clone the repository

Install Azure Static Web Apps extension

Create a static web app

Azure Portal overview

Clean up resources

Forem: Mokhutso Manaswe

Documentation on my success to deploy web application to a featured Kubernetes environment.

Prerequisites

Get app

Build the app’s container image

Share application

Persist the database

Run app in a development container with a bind mount

Multi container apps

- docker network create todo-app

Connect mysql

- docker network create todo-app

Docker compose

Define the app service

Run the application stack

Describe apps using kubernetes yaml

Create and monitor deployment

Scale deployment

How I built and deployed Azure static web app with GitHub

Azure Static Web App

Most popular features

Prerequisites

Create a repository

Clone the repository

Install Azure Static Web Apps extension

Create a static web app

Azure Portal overview

Clean up resources

- `docker network create todo-app`

- `docker network create todo-app`