The ABCs of Cloud9 and GitHub
Howdy Friends! Today we are going to be walking through how to create a Cloud9 environment, connect it to our GitHub account, and how to push code to our remote repository. We’ll even be throwing a little bit of Python in at the end. These are the fundamental skills every developer needs to succeed in their role, so let's Git at it! That joke will never Git old.
Let’s start off with a few quick key terms on Cloud9 and GitHub
Cloud9: a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser
GitHub: a code hosting platform for version control and collaboration
Repository: contains all of a project’s files & each file’s revision history
Branch: A version of a repository that is independent of the main development
What will we need?
We will only need an AWS account and GitHub Account. One of the benefits of working in the cloud!
Our Objectives:
- Create a Cloud9 Environment
2. Link it to our GitHub Account
3. Push code to our GitHub Account
Step 1: Preparing our Cloud9 environment.
There are several steps we need to take to prepare our Cloud9 Environment. The first being we will need to create a VPC (Virtual Private Cloud). Let’s navigate to the AWS homepage > search VPC > click VPC > Create VPC.
For our VPC we will enter a name, select IPv4 manual input, and enter a CIDR. A good CIDR to use is 10.0.0.0/16 as it will provide more potential IP addresses. When complete click Create VPC.
Next, we are going to create our Internet Gateway. Let’s head over to our Virtual Private Cloud Dashboard, select Internet Gateway from the left-hand side then click Create Internet Gateway.
To create our Internet Gateway we will enter a name and click Create Internet Gateway. That one was simple!
Let’s go ahead and attach it to our VPC while we’re here. From the Internet Gateway dashboard, select your Internet Gateway > click the actions dropdown menu > Attach to VPC. Then select your VPC from the drop-down menu and click Attach Internet Gateway.
Now let’s get our subnets created. From the Virtual Private Cloud dropdown menu, we will select Subnets > Create Subnet. Make sure we select our VPC ID
Under Subnet Settings, we will enter a name for our subnet, select an availability zone, enter an IPv4 CIDR block, and click Create Subnet. For this portion let’s make sure we use a good naming convention as we will be creating a total of three subnets, selecting three different availability zones, and using three different CIDR blocks. We can use this calculator for calculating CIDR blocks.
Once we have our three subnets created we can begin enabling auto-assigning.
We are going to select each subnet individually > click the action dropdown menu > edit subnet settings > enable auto assign public IPV4 address and click save. Make sure we do this for each subnet.
Let’s head over to our routing table and get our subnets associated. From the Virtual Private Cloud drop-down menu > select Route Tables. From the Route Tables Menu Select Subnet Associations > Edit Subnet Associations.
We will select our three newly created subnets and click save associations.
Now we will select the Routes tab > Edit Routes.
Let's update our destination to 0.0.0/0 > Target Internet Gateway > then select our internet gateway and save changes.
With the architecture completed, we are now ready to launch Cloud9! Let’s start by navigating to the search menu > enter Cloud9 and select from the list of services.
Under Details, we will enter a name for our Environment and a description. I will be using this for future demonstrations and prefer to use a consistent naming convention so I chose Demo_Environment.
For the EC2 instance I abide by the policy free tier is the best tier so I chose t2.micro. For the Timeout, I chose thirty minutes as I want my instance to shut down when not in use early on.
Lastly, for VPC settings, we will choose the VPC we have created and leave the subnet as no preference, then click Create.
An additional measure we will be taking is to enable termination protection for our instance. This will prevent us from losing code in the event we accidentally shut the instance down. Let’s navigate to our EC2 instance associated with our Cloud9 environment > select it > click the actions drop-down menu > Images and Templates > Change Termination Protection, select enable and save.
Once we navigate back to our Cloud9 Environment we can click open and complete objective number one!
Step Two: Associate Cloud9 with GitHub.
From our Cloud9 Environment, we will be working in our command line. Let’s start by checking what directory we are in by using the pwd command.
pwd #print working directory
Next, we will use the following command to generate a key pair and will be storing the public key in GitHub. When asked for a passphrase press enter.
ssh-keygen -t rsa #generates a public and private key pair
To copy the public key to GitHub we will need to change our directory to .ssh. We will use the cd command again to enter the directory.
cd .ssh #changes directory
more id_rsa.pub #opens the file
Once the key is copied we will navigate to GitHub > select our profile picture > select settings > SSH & GPG Keys > New SSH Keys.
Title your key and paste the key we previously copied from Cloud9.
Let’s head back to our command line and get our GitHub Environment set up.
git config --global user.name "your username"
git config --global user.email (your email)
We can now head back to GitHub we are going to need a fresh repository to store all the code we will be pushing. Let’s head back to GitHub and select our dropdown menu > Your Repositories > New.
Let’s fill out our repository name > Description > Set to Public > add ReadMe file > Create Repository.
We don’t want everyone to have full reign over our repository so let’s add some protection. Let’s hop over to settings to edit permissions. Settings > Branches > Add Branch Protection Rule > Name the protection rule > Check the following boxes.
Once those changes are saved we will clone our repository. From our repository, we will click the green Code drop-down menu and copy the HTTPS URL.
Back on Cloud9, select the diamond Icon and click Clone Repository > Paste the URL > Save to the top folder > Select Repository Location. We can now see our updated folder with Cloud9_Demonstrations
Now we will create a new branch as we never commit to the main. Click main in the bottom left of the screen > create new branch > enter your branch name.
Now we will switch to the repository directory using the cd command, similar to earlier.
To set up our upstream branch we will use the following command.
git push --set-upstream origin kish-04082023Looks like it failed! I tried to use my GitHub password to authenticate. When asked for a password you will need to enter a token provided by GitHub. So let’s get one created.
We’re going to head back to GitHub > Settings > Developer Settings > Personal Access Tokens > Tokens Classic > Generate New Token Classic > Enter a name > Check Repo. Remember it will only show you the code once!
Let’s go ahead and store our GitHub token so we will not need to provide credentials in the future. We will use the following commands.
git config --global credential.helper store
git push --set-upstream origin kish-04082023
Once verified we can use the same command a second time to check that we are no longer being asked for our credentials.
git push --set-upstream origin kish-04082023
We have now fully completed objective number two and will be moving on to our last objective, pushing code to our GitHub account. Let’s start by creating a Python file by Selecting File > New From Template > Python.
Using our new file let’s write a simple Python code to create a list of AWS services and then push it to GitHub.
We can copy and paste the code into our Cloud9 file, click the run button located at the top, and review the results below. Now that we know our code is working we can push it to our remote GitHub repository.
To begin pushing the code we are going to click the diamond located on the left-hand side > Enter a message > hit ctrl + enter. This has committed the changes to our local repository, now we need to push them to our GitHub.
At the bottom of our screen, we can see the number of changes waiting to be pushed. Let’s switch back to our command line. We can use the previously entered command by pressing the up key to select the git push command.
We can navigate to GitHub and see the branch we have pushed.
To have our branch become part of the main we will click Compare & Pull Request > Create Pull Request > Merge Pull Request > Confirm Merge > Delete Branch
We delete branches because they are no longer necessary after being merged. They serve no purpose as they have been accepted and merged into the master branch. One additional note the branch has been merged into the main on the remote repository but has not been removed from our local repository.
With that, we have completed all of our objectives! Great job everyone!
