MobiledgeX Hello World

Version: 1.0
Last Modified: 1/31/2020

This "hello world" demo application will take you through the following:

  • Step 1: How to create a base level NodeJS http server that serves up a bare bones index.html and view from local browser
  • Step 2: How to "dockerize" the webserver and view from local browser
  • Step 3: How to deploy the "dockerized container" to the MobiledgeX platform and view from local browser

Requirements and Notes:

Step 1: Create a Basic Web Server and View from Local Browser

Step 1a: Make sure that the above listed software is installed

Step 1b: Open a terminal window. Create a temporary directory called "demo": mkdir demo Enter the folder by typing cd demo

Terminal screen

Step 1c: Download the sample code with Git (make sure you are in your temp directory) and CD into the directory. Type the following command into your terminal: git clone https://github.com/skydvr01/Docker_NodeJS_Hello_World.git

Terminal screen

Step 1d: Install the necessary NodeJS dependencies (http-server module in this case) by typing the following:
npm install

Install NodeJS

Step 1e: Type npm start in the open terminal window to start the NodeJS http-server.

Start NodeJS

Step 1f: Open up a browser page to http://127.0.0.1:8000/ and you should see the image below that says "hello world!" Congratulations! You started a webserver and served up index.html!

Hello World image

Step 2: Dockerize Your Website and View from Local Browser

This section continues in the same directory as above where we showed you how to create a simple NodeJS Hello Word Webserver.

Step 2a: Build the docker image (don't forget the period at the end of this command!): docker image build -t test:1.0 .

Terminal screen

Step 2b: Run the docker image you just created: docker container run --publish 8090:8000 --detach test:1.0

Run Docker image

Notes:

  • "publish 8090:8000" -- This tells docker to forward traffic incoming on the host’s port 8090 (your computer), to the container’s port 8000 (containers have their own private set of ports, so if we want to reach one from the network, we have to forward traffic to it in this way; otherwise, firewall rules will prevent all network traffic from reaching your container, as a default security posture).

  • "detach" -- This tells Docker to run the container in the background so that you don't have to open a new terminal window.

Step 2c: Open a browser window to "http://127.0.0.1:8090/" and you should see the following image. Congrats! You have just "dockerized" a webserver!

Hello World image

BONUS POINTS -- Type the following into your terminal and you should see index.html printed out in your terminal window. The "curl" command is a faster way to test your website without having to leave the terminal window! curl localhost:8090

Test your website

Step 3: Deploy the dockerized container to the MobiledgeX platform and View from Local Browser

Step 3a: Log into https://console.mobiledgex.net/. If you do not have an account or are not provided one, please speak to the event organizer, email [email protected], or create an account. Once you are able to login, do the following:

  • Click on the right box that says "MobiledgeX Compute"
  • Click on the "Organizations" tab on the left nav
  • Click on the green button at the top that says "new"
  • In Step 1 (Create your organization), for "TYPE," select "Developer", and then fill out ORGANIZATION NAME, address, and phone. Then click CREATE ORGANIZATION.
  • NOTE -- Remember ORGANIZATION NAME. This is important for future steps and affects our system file path for your container image.
  • In Step 2 (Add User), fill out Username, Organization name, and for Role, select "Manager"
  • For "Role" on the second step, select "Manager" and then click "Move to Step 3" and you are done creating an organization.

Step 3b: Open a terminal and type docker image ls This command should list the docker image you just created from the steps above.

List of docker images

Step 3c: Log into the MobiledgeX Platform from your terminal window: docker login -u <your_user_name__remember_it_is_not_your_email> docker.mobiledgex.net

Step 3d -- "Tag" your image with a simple name that you can reference later. I named my container "helloworld:1.0" in lower case. You can see how this container shows up when I type "docker image ls" in the terminal.
* REMEMBER your application name and version number

docker tag <(your application name):(version number)> docker.mobiledgex.net/<your organization name from earlier>/images/<application name>:<version>

Step 3e: Push your image to the MobiledgeX Docker Repository

docker push docker.mobiledgex.net/<your organization name from earlier>/images/<application name>:<version>

Step 3f: Log out of your MobiledgeX session

docker logout docker.mobiledgex.net

Step 3g: Deploy your backend to a live cloudlet

  • Pull up or login to the MobiledgeX console https://console.mobiledgex.net/
  • Create an "App"
    • Click the "Apps" button in the left nav
    • Click the green "NEW" button at the top of the screen.
    • For REGION, select EU
    • For APP NAME, type the same name from Step 3d
    • For APP VERSION, type in the same name from Step 3d
    • For IMAGE PATH, this should auto populate. Assuming what you typed for NAME and VERSION are the same as what you typed in Step 3d, this path should be fine
    • For DEPLOYMENT TYPE, choose DOCKER
    • For DEFAULT FLAVOR, choose "m4.small"
    • For PORTS, type in "8000" and for SELECT PORT, choose TCP. No need to click "ADD PORT" after.
    • NOTE -- If you get a red error message or if you do not see anything pop up after clicking CREATE, you probably typed in something incorrect in the APP NAME or APP VERSION.
  • Enable AUTO CLUSTER INSTANCE from the Create App Instances page. You must populate the App Version field to display the Auto Cluster Instance option.
  • Launch Your App!
    • Click on APPS in the left nav bar
    • Click the + sign in the new main window
    • For OPERATOR, select XXX (same as above)
    • For CLOUDLET, select YYY (same as above)
    • For CLUSTER INSTANCE, select "testcluster." Note that this is the same name as what you typed in the previous section
    • Click the green "CREATE" button at the bottom to launch your app!

Step 3h: Verify that your Hello World Website has launched

  • Click on APP INSTANCES in the left nav bar. You should see this
  • Click on the instance that is displayed in the new window
  • Copy out the URI. Scroll down to find the URI. It should look like this
  • Open a new browser to the \<URI>:8000 and you should see your hello world webpage!

Help Tip: Logging In -- The website, https://console.mobiledgex.net/, uses your "user name" that you created when creating an account so make sure to save this information along with your login/pwd, and preferably in a password manager.

Help Tip: TRACE ID -- If you experience issues or your Docker Container does not deploy, we will ask you to let us know the "trace ID" number. To find your "trace id" number, look on the left nav for for "audit log", click on "audit log," new data should populate the three boxes within the right nav panel, find the box marked "raw viewer," scroll down to the bottom and you should see a JSON field called "trace id." Check out this video to see where to click in more detail.

Bonus Points: Type curl http://URI:8000/ into your terminal window to quickly validate that your Docker container was successfully deployed to the MobiledgeX platform.

Good to know Docker Commands

List all running docker containers.

docker ps

Kill a specfic container.

docker kill <container ID>

List all images currently on your local machine. Docker documentation link. Relevant stackoverflow link

docker images