Deploying a full-stack dApp to Amazon EC2

Deploying a full-stack dApp to Amazon Elastic Cloud Computing (AWS-EC2)

In the previous tutorials in this series, we saw how to develop a full-stack ethereum-based blockchain dApp.

In this tutorial, we learn how to deploy the dApp to an Amazon web services (AWS) elastic cloud computing (EC2) instance. We also create a private ethereum blockchain node using kaleido and configure the dApp to work with this blockchain node.

Prerequisites

To complete this tutorial, you need a good understanding of the following concepts:

Launch and Connect to an EC2 Instance

To launch an EC2 instance, follow the instructions in this tutorial

Next install the apache server httpd , node.js and git by running the following commands on the EC2 instance.

sudo yum update -y
sudo yum install -y httpd git nodejs
sudo service httpd start
sudo chkconfig httpd on

Create a Private Ethereum Blockchain Node using Kaleido

To create a private ethereum blockchain node in kaleido, do the following:

  1. Create a new Kaleido account, sign in/log in, and complete the sign up process.

  2. After logging in, create a Consortium, by clicking the Create Consortium button and then do the following:

    1. Enter the name and mission of the consortium.
    2. Set your home region e.g. Ohio if you had selected USA as your country.
    3. Click NEXT and then click FINISH in the next tab.

  3. Setup a new environment by clicking the SETUP ENVIRONMENT button and doing the following:

    1. Enter the name of the enviroment, or leave it blank and click NEXT.
    2. In the Protocol tab, select Geth under PROVIDER. This is important because you need to create an Ethereum blockchain node, the other 2 options create blockchain nodes for other providers not covered by this tutorial.
    3. By default, PoA is selected under CONSENSUS ALGORITHM.
    4. Click FINISH to complete set up.

  4. Next, add the ethereum node by clicking on the ADD NODE and doing the following:

    1. Select the correct OWNING MEMBER for the node, enter the name of the node, and click NEXT.
    2. Click NEXT in the CLOUD CONFIGURATION tab and leave the settings as default. Note under the free plan, you won't be able to change any of the settings.
    3. In the SIZE tab, select the Node Size you want. Note again under the free plan, only the small node size is available.
    4. Click FINISH to complete set up.

Give the newly created node about 3 minutes to finish initializing and starting.

To connect to the newly created node, you need to add new app credentials in Kaleido, by doing the following:

  1. Click the +ADD dropdown and choose the New App Credentials option.
  2. Make sure you select the correct membership under the MEMBERSHIP option and enter a new name for the credential.

  3. Note the USERNAME and PASSWORD shown.

    1. Copy the password shown and save it in a secure place. This is the only time the password is shown, so if you lose it, you'll have to create new app credentials to connect to the node.

  4. Click DONE to save the app credentials.

Create a Kaleido IPFS Node

Because the dApp needs to connect to an IPFS node, you need to create a new node by doing the following:

  1. Navigate to an existing environment, and click the +ADD dropdown in the top right of the screen.
  2. Select the Add Services option. This opens a new panel exposing the available Kaleido Services.
  3. Click the ADD button beneath IPFS File Store option.
  4. Name the node and click ADD. Click DONE to finish the deployment.
  5. The newly created IPFS node appears at the bottom of your environment panel under MEMBER SERVICES.

Save the IPFS URL created in a safe place because you need it later in the tutorial by doing the following:

Deploy the dApp to AWS

For this tutorial, we use the react project from previous steps. Fork the repo to make the changes described below and deploy the dApp to the AWS EC2 instance.

Generate a new Ethereum Wallet and Mnemonic

This step is optional if you already have an existing Ethereum wallet and are comfortable using it's mnemonic from the above dApp.

To generate a new wallet go to https://iancoleman.io/bip39 and in the BIP39 Mnemonic code form, do the following:

  1. Select ETH — Ethereum from the Coin drop down.
  2. Select a minimum of 12 words.
  3. Click the Generate button to generate the mnemonic.
  4. Copy and save the mnemonic located in the field BIP39 Mnemonic, remember to keep this private as it is the seed that can generate and derive the private keys to your ETH accounts.

You can also get the address of the wallet in the table under Derived Addresses in the first row under the column Address. i.e. 0x06c6b9bfF7281e97DE8455df05f0EC62528f4DEC

Setup Truffle

In the repo forked above, create a secrets.json file in the root path of the truffle-react-box-frontend folder.

Then get the kaleido connection Url by doing the following:

Then save the kaleido config by setting the "mnemonic" phrase you got when creating the wallet and also the "CONNECTION URL" copied from the above step. The secrets.json file should look like below:

{
    "mnemonic": "YOUR SECRET MNEMONIC",
    "kaleidoUrl": "username:password@kaleidonodeurl"
}

In the truffle.js file replace the current infura configuration with the kaleido configuration. By replacing the lines:

    rinkeby: {
        provider: new HDWalletProvider(secrets.mnemonic, "https://rinkeby.infura.io/v3/"+secrets.infuraApiKey),
        network_id: '4'
    }

with the lines:

    production: {
        provider:  new HDWalletProvider(secrets.mnemonic, secrets.kaleidoUrl),
        network_id: '*',
        gas: 4700000
    }

Setup Metamask

You also need to install and setup metamask which is a web3 provider for browsers.

Once metamask is setup in your browser, do the following:

Configure metamask to connect to the above kaleido node by doing the following:

Fund the Ethereum Wallet

To fund the Ethereum wallet created above do the following:

This now adds the funds to the address associated with the wallet and metamask reflects this if you select the kaleido network created above. Note that these funds are not real and can't be used for transactions in the main Ethereum network, but can be used for blockchain transactions in the private kaleido network.

Setup the dApp in AWS

After connecting to the kaleido node created above via metamask and funding the account, its time to deploy the dApp to AWS by taking the following steps:

  1. SSH login to the newly created AWS EC2 instance.
  2. Clone via git the react project repo forked above to the instance.

  3. Change directory (cd) to the truffle-react-box-frontend folder to deploy the contracts via truffle by doing the following:

    1. Install the truffle package globally via the command npm i truffle -g.
    2. Compile the smart contracts via the command truffle compile.
    3. Deploy the contracts to the Kaleido private Ethereum Blockchain node created above via the command truffle migrate.
    4. If you take a look at the Block Explorer in Kaleido, you should see that new transactions executed for the Bounties smart contract.
    5. You can test the contract in the Truffle Console via the command truffle console --network production which opens a console where you can interact with the deployed contract.
    6. If you make any changes to the smart contract, you need to re-deploy them to the kaleido node via the commands truffle compile && truffle migrate.

  4. After the contract deployment, change directory (cd) to the react project i.e., cd truffle-react-box-frontend/client/ and install the required node dependencies via the command npm install.

  5. Edit the file truffle-react-box-frontend/client/src/App.js to reflect the above kaleido changes and replace the following lines.
const etherscanBaseUrl = "https://rinkeby.etherscan.io";
const ipfsBaseUrl = "https://ipfs.infura.io/ipfs";

with

const etherscanBaseUrl = "https://console.kaleido.io/environments/{consortiumId}/{environmentId}/explorer";
const ipfsBaseUrl = "username:password@kaleidoIPFSUrl/ipfs";

You can get the consortiumId and environmentId variables by manually opening the kaleido block explorer in your browser and then copy and pasting the url generated.

The kaleidoIPFSUrl is the IPFS Url we generated when setting up an IPFS node above.

Change the file /truffle-react-box-frontend/client/src/utils/IPFS.js and replace the line:

const ipfs = new IPFS({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' });

With the line:

const ipfs = new IPFS({ provider: 'username:password@kaleidoIPFSUrl', protocol: 'https' });
  1. Edit /etc/httpd/conf/httpd.conf to the following:
<Directory "/var/www/html">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options Indexes FollowSymLinks

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   Options FileInfo AuthConfig Limit
    #
    AllowOverride All

    Options -MultiViews
    <IfModule mod_rewrite.c>
        RewriteEngine On
        # If an existing asset or directory is requested go to it as it is
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
        RewriteRule ^ - [L]
        # If the requested resource doesn't exist, use index.html
        RewriteRule ^ /index.html
    </IfModule>

    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>
  1. Restart the apache server for these changes to apply, with the command sudo service httpd start.
  2. Build the dApp for production running the CLI command npm run build inside the folder truffle-react-box-frontend/client/.
  3. Copy and paste all the files and folders inside the truffle-react-box-frontend/client/dist/ folder into the apache folder i.e., cd dist/ && cp -R * /var/www/html/.
  4. Navigate to the IP address of the EC2 instance and the dApp is displayed. You should be able to interact with the dApp via metamask using the Kaleido Custom RPC as expected.
    1. If you change the dApp, repeat steps 7 to 9 to see your changes.