Exploring AWS CloudShell and the AWS Cloud9 IDE
Published: 2023-05-05 14:39:12

As a graduate trainee in the AWS re/Start program I've decided to write about my experiences by documenting and creating tutorials and so this will be my first article covering one of the lab practicals.

This article is based on the AWS lab practical -  AWS Cloud9 IDE which is available on the AWS re/start Canvas platform.

Let's get started.

## What is Cloudshell and AWS Cloud9?

AWS CloudShell and AWS Cloud9 IDE are both tools provided by Amazon Web Services (AWS) to help developers build, test, and deploy applications on the AWS platform.

## What can you do with AWS Cloud9?

With AWS Cloud9, you can code, build, run, test, debug, and release software in many exciting scenarios and variations.

## How does AWS Cloud9 work?

The following diagram shows a high-level overview of how AWS Cloud9 works.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuech3w00acedcy6jsr2.png)

From the diagram (starting at the bottom), you use the AWS Cloud9 IDE, running in a web browser on your local computer, to interact with your AWS Cloud9 environment. A computing resource (for example, an Amazon EC2 instance or your own server) connects to that environment. Finally, your work is stored in an AWS CodeCommit repository or other type of remote repository.

**What we'll do and what you should learn by the end of this.**

- Connect to AWS CloudShell  
- Run AWS CLI commands 
- Run AWS software development kit (SDK) code 
- Create an AWS Cloud9 development environment 
- Connect to the browser-based IDE
- _Copy files to and from_ (Amazon S3), CloudShell, 
  and AWS Cloud9
- _Install AWS SDK for Python _(Boto3) on an AWS 
  Cloud9 instance
- Use AWS Cloud9 to _create files and run code files_
- _Connect to an AWS CloudShell_ environment and 
  explore its capabilities

**Duration**: It should take approximately **60 minutes**

## SCENARIO:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uytw7u9vzjw535lfz64v.png)
This lab is based on a scenario from small café business that sells desserts and coffee.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw0pvo71mq5p1kqb0drs.png)
The owner's daughter Sofía is eager to start developing a web presence for the café.

She thinks that before she starts coding, it would be a good idea to decide on a development environment for developing and running her code. 

She decides to explore at least two options available on Amazon Web Services (AWS).


## Prerequisite:
- An empty S3 bucket bucket

Here is a visual demonstration of how the start of the architecture and and the end of the architecture should look like.

**Start Architecture:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f853magc2lkbgauxjd2r.png)

**End Architecture:**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43e8n4236ecm9ec2jms0.png)

## Task 1: Connect to CloudShell and explore.

**Step 1:**  In the AWS Management Console, at the top of the screen, choose the AWS CloudShell icon

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imr7e78xm5jpd11ntvrj.PNG)

A new browser tab opens with the AWS CloudShell interface.

**Step 2:** Verify that the AWS CLI is installed
- Run the following command: `aws --version`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fv2qt2w9pcwyb9v01i4v.PNG)

**Step 3:** Test the ability to run an AWS CLI command

- Run the following simple AWS CLI command: aws s3 ls

_A list of the S3 buckets that exist in the account is returned_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocns05sivw8r4k0im1e1.PNG)

**Step 4:** From the Actions menu, choose Tabs layout > Split into columns.

_A second terminal window opens._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz3fa4yrb16832eg9uzh.PNG)

**Step 5:** Test the ability to run SDK for Python code.

- [Download this file to your local computer](https://aws-tc-largeobjects.s3.us-west-2.amazonaws.com/CUR-TF-200-ACCDEV-2-44869/01-lab-cloud9/s3/list-buckets.py) 

**Step 6:** From the Actions menu, choose Files > Upload file, and then choose Select file. Browse to where the file is and click on Upload

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5cikxn7u4b4eif8tui1.PNG)

**Step 7:** In the terminal on the right side, run the following command: `cat list-buckets.py`

_You should see the contents of the file that you uploaded_


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp62d9o7ekvnnpu8n4xj.PNG)

**Step 8:** Run the SDK for Python code by issuing the following command: `python3 list-buckets.py`

_The name of the S3 bucket is returned._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wiyq2omvjepkjan9b8tf.PNG)

_You have now used two different programmatic ways to retrieve a list of the S3 buckets that exist in the AWS account._

**Step 9:** Copy a file from CloudShell to an S3 bucket.

- Copy the name of the bucket that includes -sample bucket- in the name.

- Copy the list-buckets.py file to the bucket, go to the terminal on the left and run this command (replace <bucket-name> with your actual bucket name):

`aws s3 cp list-buckets.py s3://<bucket-name>`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amobngs87nrvg2af9l9z.PNG)

## Update from the café
Sophia would like to build a website, she would like to use a fully featured integrated development environment (IDE) where she can visually write, edit, run, and debug her code.

CloudShell provides the vi and vim terminal-based text editors, but it doesn't provide many of the additional features that Sofía is looking for.

Sofía is eager to explore AWS Cloud9, which is what you will do next!

## Task 2: Creating an AWS Cloud9 instance

**Step 1**: Return to the AWS Management Console browser window.

**Step 2:** In the search bar at the top of the AWS Management Console, enter Cloud9, and select it.

_Choose Create environment._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwbwo0t80knmq526tagn.PNG)

 
**Step 3:** In the Name box, enter MyCloud9. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1b7dgsch6pb1n8jubp5.PNG)

**Step 4:** In the Network settings section under Connection, 
  choose Secure Shell (SSH)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/canpe4c7h4i4mjfhhww3.PNG)

_Choose Create ._

**Step 5:** Select the Open link to open your AWS Cloud9 IDE

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atuee6tr3tpbz8235jx2.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j0fkiz76upw9rcacp0g.PNG)

## Task 3: Exploring the AWS Cloud9 IDE

In this task, you will explore some features of the AWS Cloud9 IDE and learn how to use them. 

You will also interact with Amazon S3 from the AWS Cloud9 environment. 

Finally, you will **publish** a Hello World **webpage** in AWS Cloud9 and **host** the webpage **in Amazon S3**

This AWS Cloud9 environment runs on an Amazon Elastic Compute Cloud (Amazon EC2) instance that is now running in your AWS account. Notice that the root directory is named MyCloud9, which is the name that you used for your AWS Cloud9 environment.

**Step 1:** Copy a file from Amazon S3 to your local storage in AWS Cloud9 

In the Bash terminal return the name of your bucket by running the following command `aws s3 ls`

**Step 2:** Download the list-buckets.py file from Amazon S3 to the local storage on AWS Cloud9

`aws s3 cp s3://<bucket-name>/list-buckets.py  `

_The list-buckets.py file should now be listed in the navigation pane._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9v5ig4b9ytlqgp0o3x7.PNG)

**Step 3:** Open a code file that uses the SDK for Python and run it.

- Double-click the list-buckets.py file so it opens in the file editor window. 

_The code displays_


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csxhn2fsbd2320ghzuce.PNG)

_The command does not run successfully. Instead, a new tab opens in the bottom panel and you see an error message: ModuleNotFoundError: No module named 'boto3'_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09cajo486fu1q4qmq1ng.PNG)

**Step 4:** Return to the Bash terminal and install the SDK for Python libraries by running this command:
`sudo pip3 install boto3`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8iw2gymcqycuj89aix4c.PNG)

- Try running the Python code again
`sudo pip3 install boto3`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7pdjuyptcx2m82y33vy.PNG)

_ You can also invoke the same code from the Bash terminal directly by running the python3 `list-buckets.py command`. The Run button is a convenience._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fonhfsj8brae97ptutmw.PNG)

**Step 5:** Create a new file and upload it to Amazon S3

- Choose File > New From Template > HTML File.

- Between the <body></body> tags, add the following text: Hello World


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmlzvx5haxuhdh5umxfr.PNG)

**Step 6:** Choose File > Save  and save the file as index.html.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxfot4c3t2ui7iozctth.PNG)

**Step 7:** On the left side of the AWS Cloud9 editor, choose the AWS icon.

- Expand the Region—for example, US East (N. Virginia)—expand S3, and then expand your bucket.

_The contents of the bucket are listed._


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6576kg5hpg3whjbf2ovm.PNG)

**Step 8:** Right-click the bucket name and choose Upload File.

- In the dialog box that appears, select index.html and choose Upload.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xt5pxo9ydmply2437ld.PNG)

_The file is uploaded from the AWS Cloud9 instance to the S3 bucket_

**Step 9:** Access the webpage that's hosted on Amazon S3 from the internet.

- Make the index.html file that you uploaded to Amazon S3 publicly accessible by running the following AWS CLI command:

`aws s3api put-object-acl --bucket <bucket-name> --key index.html --acl public-read`

**Step 10:** Back in the AWS Management Console, browse to the Amazon S3 console.

_Tip: Alternatively, choose the Cloud9 icon in the top left of the Cloud9 IDE and choose Go To Your Dashboard to open the AWS Management Console in a new browser tab._

**Step 11:** Choose your bucket, choose the index.html file, and choose the Object URL.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqvv05vy2qvfw4t30tk9.PNG)

_The webpage, with your Hello World message, should open._

 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aw8nnj18w59wi1112bsn.PNG)

## Update from the café

Sofía is pleased that she identified an IDE that has the features she will need to develop the café website. She likes that AWS Cloud9 offers a graphical text editor, a file browser, a terminal for running AWS CLI commands, and code that uses the AWS SDKs. She's also glad that she knows about the features of CloudShell because it's easy to open from the AWS Management Console. CloudShell also provides some features that are similar to AWS Cloud9, but without the need to run an EC2 instance.  

In the next lab, Sofia will use AWS Cloud9 to accomplish her development objectives