Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Professional Workflow from Development to Deployment

1,582 views

Published on

My Smashing Conference presentation about creating simple yet robust development through deployment workflows.

Published in: Technology

Professional Workflow from Development to Deployment

  1. 1. Professional Workflow From Development To Deployment Rachel Andrew, Smashing Conf LA 2015
  2. 2. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Rachel Andrew http://rachelandrew.co.uk @rachelandrew http://grabaperch.com
  3. 3. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Many issues coming into support stem from poor development and deployment processes.
  4. 4. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy The Big Problems • Developing directly on live sites or in subfolders of live sites • Developing in subfolders locally • Setting up local development environments that are so different to the eventual live server that there is no confidence when going live • Deploying via FTP piecemeal and having sites blow up due to missing files
  5. 5. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy What’s the problem with (S)FTP? • You are transferring files one by one to the server with no management of that transfer • One failed transfer can break the site • Old files may be left on the server - this could be a security risk in the case of third party software • Very hard to debug issues caused by missing files especially where they are deep in third party code
  6. 6. Forrest Gump “you’ve got to put the past behind you before you can move on.” @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  7. 7. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Improving workflow is the best way to give yourself more hours in the day.
  8. 8. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy These are baby steps to improved workflow.
  9. 9. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy We need … • to develop multiple websites on our own computer. • to know that our live server and local server support the same things. • to deploy our site and have confidence that what is on the live server is identical to our local version. • to allow clients to view a site in progress during initial development and also when making changes in future.
  10. 10. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy@rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  11. 11. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Working locally
  12. 12. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Developing live on the server! • High chance of making a change that breaks something about the site. • No way for the client to preview changes • Local version in sync? Do we even have a local version? • If you get to the beach, you’ll be fixing a website. On your phone. Have fun with that.
  13. 13. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Q. How do you deploy your sites to the server? A. We just edit on the server directly. 8%
  14. 14. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Let’s develop in a subfolder! • Create a ‘newsite’ subfolder and develop the site there • Potential to make an accidental change to the live site with an FTP mishap • If the site is in a subfolder then it doesn’t replicate the live site. To go live you have to change all of your file paths. • You are not going to the beach. You are fixing up file paths. More fun!
  15. 15. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy File paths and URLs are fundamental to the web. Changing them on going live is messy and fragile.
  16. 16. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Developing remotely is going to be a slow way to work.
  17. 17. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Mac Users - install Apache, PHP and MySQL on your machine.
  18. 18. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy homebrew.sh @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  19. 19. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy https://echo.co/blog/os-x-1010-yosemite-local-development-environment-apache-php-and-mysql-homebrew @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  20. 20. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy MAMP, XAMPP, WAMP
  21. 21. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Q. How do you develop sites locally that require a web server? A. MAMP, WAMP, XAMPP or similar 63%
  22. 22. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Linux Apache MySQL PHP
  23. 23. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Take your pick • Mamp - https://www.mamp.info/en/ • Wamp - http://sourceforge.net/projects/wampserver/ • Xampp - https://www.apachefriends.org • EasyPHP - http://www.easyphp.org/
  24. 24. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy VirtualHosts - many websites on one server
  25. 25. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Avoid creating your own local version of developing in a subfolder. Remember - we don’t want to change file paths to go live!
  26. 26. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy https://www.mamp.info/en/mamp-pro/ @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  27. 27. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Access multiple sites at client1.dev, client2.dev
  28. 28. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy In an ideal world your local development environment is identical to the live server.
  29. 29. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy http://php.net/manual/en/function.strftime.php @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  30. 30. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy PHP Versions can be different. PHP modules may not be available on the live server.
  31. 31. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Virtual Machines
  32. 32. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy virtualbox.org @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  33. 33. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy vagrantup.com @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  34. 34. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy https://puphpet.com @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  35. 35. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  36. 36. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy http://rachelandrew.co.uk/presentations/deploy/puphpet
  37. 37. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Upload a PHP file with this function to find out what is available on your live server. <?php phpinfo();?>
  38. 38. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Things to check on your live server • PHP Version • Installed modules such as gd for image processing • post_max_size and upload_max_filesize determine the size of files that can be uploaded • max_input_vars is the number of form fields allowed in a post
  39. 39. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Shared Folders
  40. 40. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy@rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  41. 41. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  42. 42. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  43. 43. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  44. 44. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Basic commands for Vagrant. // start the VM > vagrant up // shut down the VM > vagrant halt //destroy the VM > vagrant destroy //ssh access > vagrant ssh
  45. 45. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy http://vagrantmanager.com/
  46. 46. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Share your package with anyone else working on the site. The whole team can then have the exact same development setup.
  47. 47. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy We want … to develop multiple websites on our own computer to know that our live server and local server support the same things to deploy our site and have confidence that what is on the live server is identical to our local version to allow clients to view a site in progress to leave work early and go to the beach.
  48. 48. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  49. 49. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy http://github.com @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  50. 50. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy http://beanstalkapp.com
  51. 51. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy If you already have files you need to add to a git repository. cd my-git-repo git remote add beanstalk git@accountname.beanstalkapp.com:/gitreponame.git git push beanstalk
  52. 52. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy If you are starting a new project. git clone https://accountname.git.beanstalkapp.com/ gitreponame.git -o beanstalk cd gitreponame echo "This is my new project on Beanstalk." > README git add README git commit -m "My first commit." git push beanstalk master
  53. 53. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy www.git-tower.com
  54. 54. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy www.git-tower.com/learn/ebook
  55. 55. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy A branch is a version of your site. We are deploying the master branch to live.
  56. 56. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Production refers to your live site. Staging a site where changes are tested and previewed.
  57. 57. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy We make a change to our files, commit and push them to Beanstalk. The Master Branch now contains only what should be deployed.
  58. 58. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Deploy all the things
  59. 59. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Deployment with Beanstalk • Deployments can be Manual or Automatic • Automatic deployments happen when code is pushed to the branch you are deploying • Manual deployments are triggered by you at Beanstalk once you are happy to go live • Once a deploy happens Beanstalk makes sure the code on the live site matches that in Git, removing deleted files, replacing modified ones and adding new files
  60. 60. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  61. 61. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  62. 62. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy On Deploy • Beanstalk connects to your server • ensures that the files on the server match the files in the branch you are deploying • on initial deploy all existing files on the server have to be checked. Your first deploy will be slow! • subsequent deploys only change things that have changed in git.
  63. 63. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Deployment Tips
  64. 64. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Create multiple server configuration files
  65. 65. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy http://solutions.grabaperch.com/development/multiple-server-config
  66. 66. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Use .gitignore to keep things out of Beanstalk
  67. 67. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy https://github.com/github/gitignore
  68. 68. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  69. 69. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  70. 70. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Our new workflow. 1. Edit files as usual on your computer 2. View your site via a web server on that computer 3. Commit changes to Git 4. Push to Beanstalk 5. Login to Beanstalk and hit Deploy 6. Go to the beach.
  71. 71. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Databases and Uploaded Assets
  72. 72. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Add CMS managed asset folders to a .gitignore file so they are not committed
  73. 73. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Use a CDN for assets if your CMS enables it. Faster download speeds with bonus ease of management across environments.
  74. 74. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Initial deploy to live also involves an export and import of the MySQL database.
  75. 75. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy How to deal with schema or even data changes on an existing site?
  76. 76. How do you manage database changes between development and live? “try to keep live db current, and keep list of changes in settings on dev environment. this is the one thing that needs a better solution in my development workflow, esp. when working together with other developers on one project.” @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  77. 77. How do you manage database changes between development and live? “Labour intensively. Save a dump of the live version. Then compare the structure of the development and live structures in a diff checker. Finally make the updates required on the live version, importing the new data. ” @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy
  78. 78. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Create a Maintenance Window where no changes are made to live.
  79. 79. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy https://deliciousbrains.com/wp-migrate-db-pro/
  80. 80. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy http://www.navicat.com/products/navicat-for-mysql
  81. 81. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy We want … to develop multiple websites on our own computer to know that our live server and local server support the same things to deploy our site and have confidence that what is on the live server is identical to our local version to allow clients to view a site in progress to leave work early and go to the beach.
  82. 82. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy A Staging Server
  83. 83. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Using an inexpensive VPS you can create sites at clientname.yourcompany.com for preview.
  84. 84. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy You can deploy the master branch to staging to check before deploying to production.
  85. 85. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Even better, you can use your staging server to deploy commits to a staging branch.
  86. 86. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Deploy with a tag to any commit or push comment. For example: [Deploy: Staging]
  87. 87. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Try to keep your Master branch deployable to live. If disaster strikes you can redeploy.
  88. 88. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Remember to backup your database and any resources regularly!
  89. 89. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Logging in and downloading the assets when you remember is not a backup strategy.
  90. 90. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Bonus feature! We can now easily switch hosting if our current host becomes unreliable.
  91. 91. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Unsolved problems
  92. 92. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy There are product opportunities in helping people in shared PHP hosting land navigate these issues.
  93. 93. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Pre and post-processed CSS and JavaScript files.
  94. 94. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Backup of CMS-managed resources
  95. 95. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Database migrations
  96. 96. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy We want … to develop multiple websites on our own computer to know that our live server and local server support the same things to deploy our site and have confidence that what is on the live server is identical to our local version to allow clients to view a site in progress to leave work early and go to the beach.
  97. 97. @rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy@rachelandrew | Read more at http://rachelandrew.co.uk/presentations/deploy Thank you! Slides & resources at: http://rachelandrew.co.uk/presentations/deploy @rachelandrew

×