The course is part of these learning paths
In this lecture we'll provide a demonstration of how to use AWS Cloud9 to setup a web based IDE environment. We'll use the integrated terminal to configure GIT and then perform a clone of our project files stored in CodeCommit. We'll demonstrate the powerful collaboration and real time editting features Cloud9 provides.
- [Presenter] In this demonstration, we'll walk you through Cloud9 which is a service that you can use to create a development environment. So clicking on Cloud9, it takes you into the dashboard where you can see existing Cloud9 environments that have already been created. We'll create a new one by clicking on the create environment button. For our new environment, we need to specify a name. We'll call ours WebAppIDE. You can give it a description, but we'll click next. Here we can specify the environment settings. So you can choose either EC2 or SSH. We'll go with EC2. For instance type, will go with t2.micro which is the default. Cost-saving settings, we'll leave is after 30 minutes. We note the IAM role that will be associated with this environment, and we simply click next. We get the chance to review our settings, and we're happy with those, and now we'll click the create environment button. This will kickoff the process of launching a t2 instance onto which the AWS Cloud9 IDE application will be installed. That typically takes a few minutes to complete. In the meantime, we'll jump over into IAM and we'll set up a new IAM user. The purpose of doing this is to demonstrate collaboration later on in the demonstration. So we'll set up the user to have access to the management console and we'll create a new group. This group will represent the team of users who perform collaboration within our Cloud9 environment. This group will be called WebAppDevGroup. We create the group and we add our new users to this group. Finally we click the create user button to create a new user. We'll copy the password. And we'll go back into groups and we'll attach a policy to it. In this case we'll attach the Cloud9 environment membership policy. Clicking the attach policy button. We can then show the policy and the key action that we need here as the described environment memberships action. So going back to Cloud9, we can see that our environment has spun up successfully. Now the first thing to point out here is the integrated terminal in the bottom pane. This feature is really productive in the sense that you can run any commands as if you were on the EC2 instance itself. So running git version, we can see the version of git that we've got installed. Likewise with AWS CLI. One of the first things I often do is to run AWS IAM git user to see exactly which of the indicated user is on the actual machine. Here we can see we're operating under the email@example.com user. The next thing we'll do is we'll configure git. So we'll run git config--globaluser.name and we'll specify Jeremy Cook as the user. We then run git config again, this time with the --global user.email, and we'll specify my email address firstname.lastname@example.org. We now need to set up the credential helper. So again, we'll run git config -- global credential .helper and here we specify the AWS CLI command, AWS codecommit credential
- help per dollar ampersand. And the last git config command we need to run is to specify the credential.useHTTP path is true. Okay, so that completes our configuration for git. We'll jump back over into AWS codecommit and we'll copy the clone URL. We'll head back to AWS Cloud9 and back within our terminal session, we simply run git clone and then the clone URL. And that gives us access to our AWS dev tools repo within code commit. So we've successfully cloned all of the web app assets into our Cloud9 IDE environment. So next we'll change directory into the AWS dev tools repo. We can see that we're on the master branch. We run get status and as expected, everything is up-to-date. So what we'll do now is we'll create a new file under the the root of the repository. We'll call it a test.html. We'll then jump back into the terminal we'll do get status and we can see that we have an untracked file. We'll now open up this file and because it's an HTML file, what we'll do is we'll use emmet to quickly generate some snippets of HTML. So entering the exclamation mark followed by a double tab has generated a HTML page skeleton. So within the body element, we'll use emmet syntax again. So we're specifying dev followed by a header followed by an unordered list followed by list elements times 10, so we get 10 of those containing an A link and then all of that followed by a footer and a paragraph. So double tabbing on that, we get the required HTML. So you get this emmet plug in natively within Cloud9 which makes editing your HTML really easy. So if you head over to the emmet cheat sheet, we can see basically the syntax that is understood by the Cloud9 emmet plug in. So this is a really handy feature, very productive for building HTML within Cloud9. So we'll jump back into our editor and we'll do one more edit. We'll edit dev tag at the bottom and again we'll use emmet to expand out an unordered list of five items. I'm doing the previous command and then redoing it with 10 gives us an unordered list of 10 items. Okay, so that's enough of demonstrating the editor. Let's now move on and show collaboration. So clicking the collaborate tab on the right-hand side, we then click share. And in the invite members panel, we'll enter the IAM user we created earlier on. Clicking the invite button, we get a security warning to warn us that if we allow this user run in with read write access, as we have, we need to be careful about the AWS managed temporary credentials on the machine. So clicking disable, we then go on and add the user in. We get notified that the user has been successfully added to our environment and has read write access. Next, within Chrome, I'm gonna open a new incognito window. And in here, I'll browse back into our AWS console but this time log on as the new IAM user, DevUser1. Entering the password that was auto generated for us and clicking the sign in, we gain access into our AWS console. Clicking on Cloud9, this will take me into the Cloud9 console where I can see my own environments that I've spun up which I haven't any. And then the shared environments that have been shared with me. Now we just shared the WebApp IDE, so let's open it up. So remember we're accessing this as the new DevUser1 IAM user. And here we can see that we have entered into the same environment, we see the same opened test.html file. And now, because we've got read write access we can also edit this file. So let's enter in DevUser1 type this. If we jump back into our other browser session we can see that that edit has come across in real time. I too can edit this file. So acting as the jeremy.cook@cloudacademy user I can make an edit. And if I jump back into the other incognito window, I should see that edit come across. So this is real-time collaboration in the same file. Let's move the incognito browser across to a other screen, and I'll make edits in that and we can see them happen in real time. So I'm editing in the incognito window. And as the DevUser1, and I'm seeing those edits come across in my other Chrome session. In the right-hand side of the IDE, we have a group chat. So here we can bounce messages between ourselves. So I can type how's it going? And as DevUser1, I'll receive that message and I can reciprocate with the message of my own. Code looks good. Cloud9 is awesome. Can't spell though. So, the integrated terminal is shared across sessions. So you need to be careful about that. The owner of the workspace can change the permissions from read write to read-only. And then can also actually kick the user out of the environment completely by deleting them. So we've just done that. So back in the terminal session. Let's do a git status again to see the current status. I've got an untracked file. Let's add that. So git add test.html. We'll then perform git commit -m and give it a message. We've added that to our change commit and we then run git push. And notice here that it's asking for a username. So previously it didn't, now why is that? Well the reason being is that when we added the other user in, we disabled the temporary credentials. So we need to go and reenable them. And we do that through preferences, AWS settings, credentials. And we need to enable the AWS managed temporary credentials. We need to turn it back on. So again, if I do an AWS IAM git user, I can see that again I'm recognized as email@example.com. And subsequently I should now be able to do my git push which I'm able to do so. So that's one thing to watch out for. So if you go into code commit and we do a refresh, we can see that our latest commit as performed within the integrated terminal within Cloud9 has come across. We'll now open up code pipeline again, and we'll have a look to see whether our pipeline gets triggered as we expect it to do so. So here we can see that the latest commit has been checked out by our pipeline. So that shows Cloud9 as a service that provides a Web-enabled IDE which is fully integrated in with the other AWS developer services.
About the Author
Jeremy is the DevOps Content Lead at Cloud Academy where he specializes in developing technical training documentation for DevOps.
He has a strong background in software engineering, and has been coding with various languages, frameworks, and systems for the past 20+ years. In recent times, Jeremy has been focused on DevOps, Cloud, Security, and Machine Learning.
Jeremy holds professional certifications for both the AWS and GCP cloud platforms.