3.3. Hello World Part 3: Working with your own cloud infrastructure (AWS)

3.3.1. Description

Learn how to connect your application from previous tutorials to AWS.

In this tutorial we will:

  1. set up and deploy our own MQTT broker on an EC2 Instance
  2. build and deploy a web UI as an S3 static website
  3. set up data transfer to our AWS backend

Expected duration: 1 hour

3.3.2. Prerequisites

3.3.3. Set up the Development Environment

  1. Install the AWS CLI on your Development Host. Please refer to Amazon’s setup guide.

  2. Install the Yarn dependency manager for Node.js. Please refer to Yarn’s setup guide.

  3. Download the source code for the web-app frontend:

    $ git clone https://git.rigado.com/cascade-examples/rigado-node-hello-world-frontend.git
    $ cd rigado-node-hello-world-frontend
    
  4. Install the application’s dependencies. Run in the project directory:

    $ yarn install
    

3.3.4. Run The Project Locally

  1. Run in the project directory:

    $ yarn run start
    
  2. Navigate your web browser to http://localhost:3000/.

Note

You can change the default application settings via the environment variables REACT_APP_MQTT_TOPIC and REACT_APP_MQTT_URL

3.3.5. Deploy Infrastructure to AWS

  1. Deploy the infrastructure to AWS. Run in the project directory:

    $ yarn run deploy
    

    This deploys a CloudFormation Stack which sets up an S3 bucket and EC2 instance running the MQTT broker.

    Note

    CloudFormation will take 5-10 minutes to create the stack.

    ../_images/cloudformation.jpg

    Figure 3.7 Amazon Console showing the created CloudFormation Stack

    After the CloudFormation Stack is deployed, select the Outputs tab, and copy the values of WebsiteURL and InstanceIPAddress.

  2. Publish the static web-app to the S3 bucket. Run in the project directory:

    $ yarn publish
    
  3. Navigate your web browser to the WebsiteURL copied from the CloudFormation Outputs tab.

    ../_images/s3.jpg

    Figure 3.8 The deployed hello-world frontend

3.3.6. Change the Daemon Application Settings

  1. Edit the configuration file (config.json) of the hello-world snap. Set the value of the host property to your MQTT Broker IP address which is InstanceIPAddress.

    Note

    InstanceIPAddress was copied from the CloudFormation Outputs tab in Deploy Infrastructure to AWS step 2.

    ../_images/config.png

    Figure 3.9 Snap config.json showing updated MQTT host.

  2. Build the new snap, publish to the store, and distribute to your target group. See instructions on this process in the previous tutorial.

3.3.7. Test It

  1. Turn on the Thingy.

  2. Wait for the Thingy to connect to the gateway. When it does, it will start blinking green.

  3. Navigate your web browser to the deployed S3 static website.

  4. Edit the topic name if needed, and click Subscribe.

    ../_images/connected.png

    Figure 3.10 The hello-world frontend showing incoming Thingy data