Create portfolio app with nginx in 5 minute


nginx is a docker image where you can run a local website. I have post regarding Docker blow the post, in case you need them. We can nginx it to create a static site on localhost with Docker container.

Static/Dynamic web page

As the name indicates the content of our web app remain the same. Grab a beautiful bootstrap for quick start, I have on from https://startbootstrap.com/previews/stylish-portfolio

  • Download the complete code
  • Place them in a local folder (portfolio)
  • Access Powers-hell/CLI/Terminal

Docker Volume

Docker volume is allow us to host data from local system. In our case we want to copy the content of our portfolio web app to /usr/share/nginx/html (nginx folder) in the docker container.

volume can added to container using the -v or –volume label in a docuker run command. Without the :ro the data will be updated when ever a change made the source folder.

Can I dive into nginx folder ?

Yes you can explore the Linux shell using the following command with container ID/name

 docker exec -it 9a99a1ad28e1  bash
 cd /usr/share/nginx/html 
 ls  // see all the files

Let’s create and run the container

Read only
docker run --name myapp -v e:/portfolio:/usr/share/nginx/html:ro  -d -p 8080:80 nginx:latest
Dynamic
docker run --name myapp -v e:/portfolio:/usr/share/nginx/html  -d -p 8080:80 nginx:latest

:ro stands for read only, you can remove it and the data will change as you edit the content in the source folder, in a limited sense it can be dynamic.

Go to the browser and try http:///localhost:8080

You can use the id/name to stop/start/remove the container.

docker stop 6ec62466d248  //stop container with id
docker start 6ec62466d248  //start container with id
docker rm    6ec62466d248  //remove the container with id

Other Docker posts you may interested in

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.