Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trainingdemos/k8s-frontend-basic
A basic web page that displays a confirmation message
https://github.com/trainingdemos/k8s-frontend-basic
demo docker kubernetes nextjs nginx training-materials typescript
Last synced: about 2 months ago
JSON representation
A basic web page that displays a confirmation message
- Host: GitHub
- URL: https://github.com/trainingdemos/k8s-frontend-basic
- Owner: trainingdemos
- License: mit
- Created: 2024-10-21T06:36:56.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T12:29:33.000Z (4 months ago)
- Last Synced: 2024-10-26T04:52:04.901Z (3 months ago)
- Topics: demo, docker, kubernetes, nextjs, nginx, training-materials, typescript
- Language: TypeScript
- Homepage: https://hub.docker.com/r/trainingdemos/k8s-frontend-basic
- Size: 542 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# k8s-frontend-basic
This project creates a container that displays a basic web page, built using [Next.js](https://nextjs.org) and delivered by [Nginx](https://nginx.org), for deployment into [Kubernetes](https://kubernetes.io). It is intended to be used as part of a lab exercise or an intructor-led walkthrough.
When running it presents a basic web page displaying a confirmation message:
## Verifying
If [Node.js](https://nodejs.org) is installed locally, you can run the following commands from within the cloned directory to verify that the application works:
```bash
npm install
npm run dev
```
This will start a local web server running on port `3000`. The application can then be verified by visiting [http://localhost:3000](http://localhost:3000) in a web browser.
## Building
To build the container image you will need to have [Docker](https://www.docker.com) installed. To build the image locally, run the following shell script inside the `k8s-frontend-basic` directory:
```bash
./docker-build.sh
```
If the build completes successfully, you will then be asked if you want to push the image. For this to succeed you will need to be authenticated to the specified registry with the appropriate account.
If you want to change the fully-qualified image name (including the image registry) edit the `container.json` file within the `public/data` directory.
⚠️ You should not edit the `docker-build.sh` file directly.
This is because the `container.json` file is used by both the Docker build script and the Next.js application at run time.
* `registry` and `namespace` are _optional_
* Note that the values should not end with a trailing slash
* `repository` and `tags` are _mandatory_
* `tags` is an array that should contain at least one value
```json
{
"image": {
"registry": "docker.io",
"namespace": "trainingdemos",
"repository": "k8s-frontend-basic",
"tags": [
"latest", "1.0", "1.0.2"
]
}
}
```
## Running in Docker
A container image for this project has been made available on the [Docker Hub](https://hub.docker.com/r/trainingdemos/k8s-frontend-basic) for public use. To run the image using Docker you can use the following command:
```bash
docker run --rm -p 80:80 trainingdemos/k8s-frontend-basic
```
This will start an Nginx web server running on port `80` to serve the application. You can verify that the website is working by visiting [http://localhost](http://localhost) in a web browser.
## Deploying to Kubernetes
The `containerPort` in the Pod spec should be set to port `80` and then access to the Pod should be opened up using a Service object along with a NodePort or Ingress.
Here is an example Pod object configuration:
```yaml
apiVersion: v1
kind: Pod
metadata:
name: k8s-frontend-basic
labels:
frontend: basic
spec:
containers:
- name: k8s-basic-frontend
image: trainingdemos/k8s-frontend-basic:latest
ports:
- containerPort: 80
```
## License
[MIT](https://choosealicense.com/licenses/mit/) (See LICENSE file)