Menu
AWS for DevOps
Getting Started Guide

Step 9.3: Change the Source Code for AWS OpsWorks

In this step, you will change the source code in AWS CodeCommit. As soon as you push the code to the repository, AWS CodePipeline will deploy it to the deployment target in AWS OpsWorks.

To change the source code for AWS CodeDeploy, go to Step 9.1: Change AWS CodeDeploy Source Code.

To change the source code for Elastic Beanstalk, go to Step 9.2: Change Elastic Beanstalk Source Code.

To change the source code for AWS OpsWorks

  1. You should already be logged in to the instance that you launched in Step 2.3: Launch an Amazon EC2 Instance to Access the AWS CodeCommit Repository. If not, follow the instructions in Connect to Your Linux Instance in the Amazon EC2 User Guide for Linux Instances.

  2. From the command prompt on the instance, run the pwd command to confirm you are in the /home/ec2-user/my-demo-repo directory. If a path other than /home/ec2-user/my-demo-repo appears in the output, run the cd ~/my-demo-repo command.

  3. From the ~/my-demo-repo directory, run the vi assets/css/bootstrap.min.css command to open the bootstrap.min.css file in the vi editor.

  4. Change the following code:

    Copy
    .hero-unit{padding:60px;margin-bottom:30px;font-size:18px;font-weight:200;line-height:30px;color:inherit;background-color:#eee;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}

    to:

    Copy
    .hero-unit{padding:60px;margin-bottom:30px;font-size:18px;font-weight:200;line-height:30px;color:inherit;background-color:#0e0;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}

    This will change the background color of the page from gray to green (background-color: #eee to background-color: #0e0).

    Note

    The bootstrap.min.css file is minimized. In other words, whitespace has been removed from the file for performance reasons. For this reason, it can be difficult to find the code to be changed. If you are unfamiliar with the vi editor, you can make the change by doing the following:

    1. In the bootstrap.min.css file, type /.hero-unit, and then press Enter.

    2. With the cursor on the first instance of /.hero-unit, press the l key or right arrow key repeatedly to move the cursor toward background-color:#eee just after .hero-unit.

    3. Continue to repeatedly press the l key or right arrow key to move the cursor onto the first e character immediately after background-color:#.

    4. Press the x key three times to delete the eee characters.

    5. To insert the 0e0 characters, press the i key to enter insert mode. Type 0e0, and then press the Esc key to go back to command mode.

  5. To save your changes, type the :wq command, and then press Enter.

  6. Run the vi index.php command to open the index.php file in the vi editor.

  7. Change the the following line of code:

    Copy
    <p>Your PHP application is now running in the host &ldquo;<?php echo gethostname(); ?>&rdquo; in your own dedicated environment in the AWS&nbsp;Cloud.</p>

    to:

    Copy
    <p>Your redeployed PHP application is now running in the host &ldquo;<?php echo gethostname(); ?>&rdquo; in your own dedicated environment in the AWS&nbsp;Cloud.</p>

    Note

    If you are unfamiliar with the vi editor, you can make the change by typing the :%s/Your/Your redeployed command and then pressing Enter.

  8. To save your changes, type the :wq command, and then press Enter.

  9. Run the following Git commands, one at a time, to add, commit, and then push the changed code to the AWS CodeCommit repository.

    Copy
    git add .
    Copy
    git commit -m "Changed source code files"
    Copy
    git push
  10. After the push is successful, open the AWS CodePipeline console at https://console.aws.amazon.com/codepipeline/.

  11. In the AWS region selector, choose US East (N. Virginia).

  12. If the pipeline is not displayed, then on the All Pipelines page, choose the name of the pipeline you created in Step 7.3: AWS OpsWorks Pipeline.

  13. When Succeeded is displayed for the Source and Deploy stages, go to Step 10.3: Verify AWS OpsWorks Changes. (It may take several minutes for AWS CodePipeline to detect the push to the repository.)