class: center, middle, title-slide, qr-title-slide # Automagic Deployment with Github Actions ## Jon Johnson <span class="pronouns">(he/him)</span> .left-column[ .boxes[ .icons[ <i class="fa-brands fa-github"></i> jrjohnson <br /> <i class="fa-brands fa-twitter"></i> jrjohnson_ <br /> <i class="fa-brands fa-slack"></i> jrjohnson-ucsf <br /> ] .avatar[  ] ]] .right-column[ ### Plain Text and Slides At:  ] .full-width-column[## UCTech Slack: https://uctech.slack.com] --- class: logos <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="450px" height="450px" viewBox="0 0 450 450" enable-background="new 0 0 450 450" xml:space="preserve"> <g> <rect x="83.8" y="66.6" fill="#0093D0" width="282.4" height="282.4"/> <g> <defs> <rect id="SVGID_1_" x="83.8" y="66.6" width="282.4" height="282.4"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" overflow="visible"/> </clipPath> <path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M325.84,177.185V164.97h-46.508v45.039c-0.245-5.273-2.173-9.372-5.825-12.247 c-2.507-1.986-6.298-3.578-11.359-4.769l-11.527-2.737c-4.464-1.024-7.369-1.927-8.73-2.705c-1.27-0.689-2.157-1.59-2.644-2.676 h-0.019c-0.014-0.017-0.014-0.017-0.014-0.029c-0.336-0.737-0.536-1.623-0.536-2.569c0-2.002,0.69-3.717,2.127-5.078 c0.031-0.014,0.045-0.061,0.077-0.075c0-0.016,0-0.016,0,0c0.336-0.291,0.672-0.55,1.054-0.811c2.154-1.422,5.044-2.14,8.685-2.14 c3.256,0,5.978,0.55,8.181,1.652c3.285,1.665,5.042,4.479,5.305,8.423h13.192c-0.246-6.986-2.844-12.306-7.783-15.977 c-4.951-3.669-10.929-5.504-17.947-5.504c-8.394,0-14.771,1.942-19.096,5.84c-2.644,2.386-4.493,5.152-5.518,8.304h-0.017 c-0.213,0.686-0.399,1.39-0.535,2.094c-1.621,7.583-6.497,12.719-14.662,12.719c-13.058,0-17.979-11.1-17.979-22.122 c0-11.59,4.921-22.688,17.979-22.688c7.215,0,13.513,4.981,14.448,11.572h14.08c-1.759-15.291-13.989-23.805-28.528-23.805 c-19.524,0-31.357,13.898-32.414,32.214v-30.638h-14.554v41.124c0,9.816-3.332,14.341-13.715,14.341 c-11.771,0-13.622-7.124-13.622-14.341v-41.124h-14.539v41.124c0,17.964,10.38,26.572,28.161,26.572 c17.688,0,28.269-8.698,28.269-26.572v-5.166c1.056,17.841,12.89,31.738,32.414,31.738c8.027,0,14.875-2.583,19.904-7.198 c0.323,0.256,0.627,0.504,0.982,0.73c2.611,1.819,7.428,3.501,14.416,5.046l7.109,1.561c4.156,0.888,7.201,1.911,9.11,3.073 c1.927,1.19,2.89,2.874,2.89,5.043c0,3.72-1.957,6.257-5.871,7.615c-2.062,0.718-4.756,1.072-8.054,1.072 c-5.534,0-9.435-1.348-11.698-4.053c-1.254-1.483-2.078-3.73-2.508-6.727H224.92c0,6.833,2.459,12.199,7.43,16.113 c4.951,3.898,11.758,5.856,20.396,5.856c8.485,0,15.027-1.973,19.676-5.948c4.266-3.654,6.574-8.164,6.91-13.531v18.483h14.558 v-27.32h27.7v-11.297h-27.7v-15.289H325.84z"/> </g> <text transform="matrix(1 0 0 1 118.292 280.8896)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442" letter-spacing="1">Li</tspan><tspan x="51.216" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442" letter-spacing="1">b</tspan><tspan x="93.001" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442">r</tspan><tspan x="113.169" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442" letter-spacing="1">a</tspan><tspan x="150.892" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442" letter-spacing="2">r</tspan><tspan x="173.815" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442">y</tspan></text> </g> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 392.11 392.11" aria-hidden="true" class="ilios-logo"> <title>Ilios Logo</title> <path d="M371.83,461.83c-77.62-89.13-98.6-113.11-30.25-93.76-62.12-34.35-30.23-36.41,87.67-44.87-117.91-8.47-149.8-10.52-87.67-44.87-68.34,19.35-47.37-4.63,30.26-93.76-89.12,77.62-113.11,98.6-93.76,30.25-34.35,62.12-36.41,30.23-44.87-87.68-8.47,117.91-10.53,149.8-44.87,87.68,19.35,68.34-4.64,47.37-93.76-30.26,77.62,89.13,98.59,113.11,30.25,93.76,62.12,34.35,30.23,36.41-87.68,44.87,117.91,8.47,149.8,10.52,87.68,44.87,68.34-19.35,47.37,4.63-30.25,93.76,89.12-77.62,113.11-98.6,93.76-30.25,34.35-62.12,36.41-30.23,44.87,87.68,8.47-117.91,10.52-149.8,44.87-87.68C258.71,363.23,282.7,384.21,371.83,461.83Z" transform="translate(-37.14 -127.14)"/> <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">Ilios</text> </svg> ??? # UCSF Library Educational Technology - Team Supports, Hosts, and Develops Moodle, Kaltura and Ilios --- class: middle,center # The Problem ## Building Something People Enjoy Using is Stressful <i class="fa-duotone huge fa-face-anxious-sweat"></i> ??? ## They want them to work ## and be fast ## and be accurate ### and have new useful features --- class: middle,center <blockquote class="twitter-tweet"><p lang="en" dir="ltr">It's Friday the 13th in 2020, I double dog dare you to deploy to production!</p>— Molly Struve 🦄 (@molly_struve) <a href="https://twitter.com/molly_struve/status/1327243228626755584?ref_src=twsrc%5Etfw">November 13, 2020</a></blockquote> --- class: center,magic-quadrant # Some Things That Can Help -- ## Agile Process <br><i class="fa-duotone fa-arrows-split-up-and-left"></i> -- ## Tests <br><i class="fa-duotone fa-vial-circle-check"></i> -- ## Continuous Integration <br><i class="fa-duotone fa-industry-windows"></i> -- ## Continuous Delivery<br>(or at least easy to start deploys)<br><i class="fa-duotone fa-person-dolly"></i> --- class:center,uc-logos # The UCTech Connection .boxes[ ## 2009 Agile all the things!<br>  ## 2011 Test all the things!<br> Merced <i class="fa-duotone fa-user-secret" title="Merced's logo is behind a firewall, so this is a picture of a squirrel in a trench coat"></i> ## 2012 Automate all the things!<br>  ## 2013 CI *is* all the things!<br> Irvine <i class="fa-duotone fa-user-secret" title="Irvine's logo is behind a firewall, so this is a picture of a squirrel in a trench coat"></i> ] ??? - I'm constantly building on things I've learned at UCTech - UCTech is the first place I realized that some of this fancy stuff could work in our structure --- class:center,middle,photo-slide  ??? - Leaned about CI at Irvine. Afterwards I was so blown away I had to take a walk and ended up sitting under a tree thinking about how amazing it would be to test every change. How freeing that would be (I was pretty bogged down in an endless cycle of fixing bugs and causing other bugs) --- class: center, middle # Let's Talk About Agile -- ## Make It Whatever You Want -- # As Long as You Can Get Feedback Fast ??? - There are a bunch of ways to do agile well - One of the only ways to do it wrong is to get too caught up in trying to do it by someones else's definition - I lead two "agile" teams with 80% of the same people and they run totally different processes - Both of them can get code into production in under an hour --- class: center, middle # Let's Talk About Tests <blockquote class="twitter-tweet" data-lang="en" data-dnt="true"><p lang="en" dir="ltr">The first rule of magic: have a clear intent.<br><br>This is why TDD works. You express your intent by writing a test. That way the fae running around the CPU can’t twist your spell into a curse.</p>— Beth (@bethcodes) <a href="https://twitter.com/bethcodes/status/1557497868197453824?ref_src=twsrc%5Etfw">August 10, 2022</a></blockquote> ??? - I'm incredibly lazy and super forgetful so I need the computer to handle checks. - I'm sloppy and I can't spell - Tests also include code style rules - You can do Test Driven Development or Test Reminder Development or Write Tests When Done Development, just write the tests --- # Let's Talk About Tests ## It will take at least a week to write your first test -- ## It will take another two weeks to get it running automatically -- class:short-photo,photo-slide .left-column[ ### Great First Tests ``` 1!=2 ``` ``` visit(url) get 200 code ``` ``` Output name of favorite dog ``` ] .right-colomn[  ] --- class:center,short-photo,photo-slide # Let's Talk About Tests ## Bad Tests are Still Great Tests ### Ilios Had Bad Tests .left-column[ - Getting them to run was a perfect first day. - Getting them to fail was a great second day. - In my second week the "terrible" tests saved me from a horrible mistake ] .right-column[  ] -- .full-width-column[## Write bad tests!!!] --- class: center, middle # Easier to Test with a Solid Foundation   ??? - We built on top of Ember.js and Symfony - Prominent testing documentation - Up to date and community maintained documentation - We knew we wouldn't have to document our tools - The more integrated the framework the easier it is to hire productive people - STAY UP TO DATE (semver, release plans, BC promises) --- class: center, middle # Tests are a Speed Multiplier <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I know it seems counterintuitive but just hear me out: It gets faster to do things correctly if you keep doing them correctly. It might be slow at first if you’ve just been chucking things in the bin- change can be hard but don’t give up!! You deserve good code too.</p>— Melanie Sumner 💥 🐹 (@melaniersumner) <a href="https://twitter.com/melaniersumner/status/1026934392160104454?ref_src=twsrc%5Etfw">August 7, 2018</a></blockquote> ??? - Writing tests can be painful - Writing tests can be slow - Running tests takes time - Still worth it - 4144 Merged PRs on Frontend since September 2014 - 2396 Merged PRs in common Since July 2017 over 264 weeks - Something like 20 changes / week (just in the UI) - Test unlock staying up to date (and Secure!!!!) --- class: middle,center # <i class="fa-duotone fa-quote-left"></i> Show Us The Github Actions Already!!! <i class="fa-duotone fa-quote-right"></i> .right-column[--everyone here today] --- # <i class="fa-brands fa-github"></i> Continuous Integration With Github Actions ## Choose When it Runs ```yaml on: push: branches: - master pull_request: schedule: - cron: '33 2 * * 1' # weekly, on Monday morning ``` .footnote[https://github.com/ilios/ilios/blob/master/.github/workflows/ci.yml] --- # <i class="fa-brands fa-github"></i> Continuous Integration With Github Actions ## Jobs and Steps ```yaml ... jobs: code_style: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: shivammathur/setup-php@v2 with: coverage: none php-version: 8.1 extensions: apcu - run: vendor/bin/phpunit ``` .footnote[https://github.com/ilios/ilios/blob/master/.github/workflows/ci.yml] ??? ## Checkout - Actions (or workflows) are a blank slate - You even have to tell them to checkout your code ## Github Runners: - Ubuntu - Windows Server - OSX - You can also host your own bespoke runner ## We're using a community action here to install PHP - Github Maintains a Marketplace of Such Actions - You can also write your own ## Last part is "run" - Run a CLI command to do whatever you want --- # <i class="fa-brands fa-github"></i> Continuous Integration With Github Actions ## Jobs (Code Style) ```yaml ... code_style: steps: - run: composer install --no-interaction --prefer-dist - run: vendor/bin/phpcs - run: bin/console lint:twig templates custom - run: | bin/console cache:warmup --env=dev vendor/bin/phpstan analyse --no-progress - run: | bin/console cache:warmup --env=test vendor/bin/phpstan analyse -c tests/phpstan.neon.dist tests --no-progress ``` .footnote[https://github.com/ilios/ilios/blob/master/.github/workflows/ci.yml] ??? ## It's a confusing time in PHP land - Lots of ways to analyze your code - Here we have two linters which look at code style - And a static analysis tool which can catch all kinds of other interesting bugs --- # <i class="fa-brands fa-github"></i> Continuous Integration With Github Actions ## Tests (PHPUnit) ```yaml tests: strategy: matrix: php-version: [8.1,8.2] steps: ... - name: Use PHP ${{ matrix.php-version }} uses: shivammathur/setup-php@v2 with: php-version: ${{ matrix.php-version }} - name: install dependencies run: composer install --no-interaction --prefer-dist - name: Run Tests run: vendor/bin/phpunit ``` .footnote[https://github.com/ilios/ilios/blob/master/.github/workflows/ci.yml] ??? ## Matrix of Versions - Our official policy is to support the most recently released version of PHP - But for at least 3 months after that release we support the previous version - We run our tests against both - We also run regular weekly tests against the upcoming beta releases so we can report any issues --- # <i class="fa-brands fa-github"></i> Continuous Integration With Github Actions ## MySQL Migrations ```yaml test_migrations_against_mysql: name: Test Migrations Against MySQL steps: ... - name: Drop, Create, Migrate, and Validate DB env: ILIOS_DATABASE_URL: mysql://root:root@127.0.0.1:3306/ilios?serverVersion=8.0 run: | sudo systemctl start mysql.service bin/console doctrine:database:drop --if-exists --force bin/console doctrine:database:create bin/console doctrine:migrations:migrate --no-interaction bin/console doctrine:schema:validate ``` .footnote[https://github.com/ilios/ilios/blob/master/.github/workflows/ci.yml] ??? ## MySQL is installed already - The Github runner has mysql on it, we just need to start it --- # <i class="fa-brands fa-github"></i> Continuous Integration With Github Actions ## Combine Jobs ```yaml ... build_containers: steps: ... - name: Build fpm uses: docker/build-push-action@v3 with: target: fpm run_containers: steps: ... - run: docker load --input /tmp/fpm-image/fpm.tar - run: | docker run -d --name ilios-fpm fpm:testing docker exec ilios-fpm php bin/console monitor:health - if: failure() run: docker logs ilios-fpm ``` .footnote[https://github.com/ilios/ilios/blob/master/.github/workflows/ci.yml] --- class:center,middle,photo-slide,short-photo # Let's Talk About Deployment  --- class: magic-quadrant # <i class="fa-duotone fa-cloud-exclamation"></i> The Many Deploys of Ilios -- ## Preview UI Changes<br><i class="fa-duotone fa-eyes"></i> -- ## Publish NPM Packages<br><i class="fa-brands fa-npm"></i> -- ## Push Code to AWS<br><i class="fa-brands fa-aws"></i> -- ## Push Containers to Registry <br><i class="fa-brands fa-docker"></i> --- class: center,middle # <i class="fa-duotone fa-eyes"></i> Preview UI Changes <i class="fa-duotone fa-eyes"></i> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="147" height="40"> <radialGradient id="a" cy="0%" r="100.11%" gradientTransform="matrix(0 .9989 -1.152 0 .5 -.5)"> <stop offset="0" stop-color="#20c6b7"/> <stop offset="1" stop-color="#4d9abf"/> </radialGradient> <g fill="none" fill-rule="evenodd"> <path fill="#0e1e25" d="m53.37 12.978.123 2.198c1.403-1.7 3.245-2.55 5.525-2.55 3.951 0 5.962 2.268 6.032 6.804v12.568h-4.26v-12.322c0-1.207-.26-2.1-.78-2.681-.52-.58-1.371-.87-2.552-.87-1.719 0-3 .78-3.84 2.338v13.535h-4.262v-19.02h4.016zm24.378 19.372c-2.7 0-4.89-.852-6.567-2.557-1.678-1.705-2.517-3.976-2.517-6.812v-.527c0-1.898.365-3.595 1.096-5.089.73-1.494 1.757-2.657 3.078-3.49 1.321-.831 2.794-1.247 4.42-1.247 2.583 0 4.58.826 5.988 2.478 1.41 1.653 2.114 3.99 2.114 7.014v1.723h-12.4c.13 1.57.652 2.812 1.57 3.726s2.073 1.371 3.464 1.371c1.952 0 3.542-.79 4.77-2.373l2.297 2.198c-.76 1.136-1.774 2.018-3.042 2.645-1.269.627-2.692.94-4.27.94zm-.508-16.294c-1.17 0-2.113.41-2.832 1.23-.72.82-1.178 1.963-1.377 3.428h8.12v-.317c-.094-1.43-.474-2.51-1.14-3.243-.667-.732-1.59-1.098-2.771-1.098zm16.765-7.7v4.623h3.35v3.164h-3.35v10.617c0 .726.144 1.25.43 1.573.286.322.798.483 1.535.483a6.55 6.55 0 0 0 1.49-.176v3.305c-.97.27-1.905.404-2.806.404-3.273 0-4.91-1.81-4.91-5.431v-10.776h-3.124v-3.164h3.122v-4.623h4.261zm11.137 23.643h-4.262v-27h4.262zm9.172 0h-4.262v-19.02h4.262zm-4.525-23.96c0-.655.207-1.2.622-1.634.416-.433 1.009-.65 1.78-.65.772 0 1.368.217 1.79.65.42.434.63.979.63 1.635 0 .644-.21 1.18-.63 1.608-.422.428-1.018.642-1.79.642-.771 0-1.364-.214-1.78-.642-.415-.427-.622-.964-.622-1.608zm10.663 23.96v-15.857h-2.894v-3.164h2.894v-1.74c0-2.11.584-3.738 1.753-4.887 1.17-1.148 2.806-1.722 4.91-1.722.749 0 1.544.105 2.386.316l-.105 3.34a8.375 8.375 0 0 0 -1.631-.14c-2.035 0-3.052 1.048-3.052 3.146v1.687h3.858v3.164h-3.858v15.856h-4.261zm17.87-6.117 3.858-12.903h4.542l-7.54 21.903c-1.158 3.199-3.122 4.799-5.893 4.799-.62 0-1.304-.106-2.052-.317v-3.305l.807.053c1.075 0 1.885-.196 2.429-.589.543-.392.973-1.051 1.289-1.977l.613-1.635-6.664-18.932h4.595z"/> <path fill="url(#a)" fill-rule="nonzero" d="m28.589 14.135-.014-.006c-.008-.003-.016-.006-.023-.013a.11.11 0 0 1 -.028-.093l.773-4.726 3.625 3.626-3.77 1.604a.083.083 0 0 1 -.033.006h-.015c-.005-.003-.01-.007-.02-.017a1.716 1.716 0 0 0 -.495-.381zm5.258-.288 3.876 3.876c.805.806 1.208 1.208 1.355 1.674.022.069.04.138.054.209l-9.263-3.923a.728.728 0 0 0 -.015-.006c-.037-.015-.08-.032-.08-.07s.044-.056.081-.071l.012-.005zm5.127 7.003c-.2.376-.59.766-1.25 1.427l-4.37 4.369-5.652-1.177-.03-.006c-.05-.008-.103-.017-.103-.062a1.706 1.706 0 0 0 -.655-1.193c-.023-.023-.017-.059-.01-.092 0-.005 0-.01.002-.014l1.063-6.526.004-.022c.006-.05.015-.108.06-.108a1.73 1.73 0 0 0 1.16-.665c.009-.01.015-.021.027-.027.032-.015.07 0 .103.014l9.65 4.082zm-6.625 6.801-7.186 7.186 1.23-7.56.002-.01c.001-.01.003-.02.006-.029.01-.024.036-.034.061-.044l.012-.005a1.85 1.85 0 0 0 .695-.517c.024-.028.053-.055.09-.06a.09.09 0 0 1 .029 0l5.06 1.04zm-8.707 8.707-.81.81-8.955-12.942a.424.424 0 0 0 -.01-.014c-.014-.019-.029-.038-.026-.06 0-.016.011-.03.022-.042l.01-.013c.027-.04.05-.08.075-.123l.02-.035.003-.003c.014-.024.027-.047.051-.06.021-.01.05-.006.073-.001l9.921 2.046a.164.164 0 0 1 .076.033c.013.013.016.027.019.043a1.757 1.757 0 0 0 1.028 1.175c.028.014.016.045.003.078a.238.238 0 0 0 -.015.045c-.125.76-1.197 7.298-1.485 9.063zm-1.692 1.691c-.597.591-.949.904-1.347 1.03a2 2 0 0 1 -1.206 0c-.466-.148-.869-.55-1.674-1.356l-8.993-8.993 2.349-3.643c.011-.018.022-.034.04-.047.025-.018.061-.01.091 0a2.434 2.434 0 0 0 1.638-.083c.027-.01.054-.017.075.002a.19.19 0 0 1 .028.032l8.999 13.059zm-14.087-10.186-2.063-2.063 4.074-1.738a.084.084 0 0 1 .033-.007c.034 0 .054.034.072.065a2.91 2.91 0 0 0 .13.184l.013.016c.012.017.004.034-.008.05l-2.25 3.493zm-2.976-2.976-2.61-2.61c-.444-.444-.766-.766-.99-1.043l7.936 1.646a.84.84 0 0 0 .03.005c.049.008.103.017.103.063 0 .05-.059.073-.109.092l-.023.01zm-4.056-4.995a2 2 0 0 1 .09-.495c.148-.466.55-.868 1.356-1.674l3.34-3.34a2175.525 2175.525 0 0 0 4.626 6.687c.027.036.057.076.026.106-.146.161-.292.337-.395.528a.16.16 0 0 1 -.05.062c-.013.008-.027.005-.042.002h-.002l-8.949-1.877zm5.68-6.403 4.489-4.491c.423.185 1.96.834 3.333 1.414 1.04.44 1.988.84 2.286.97.03.012.057.024.07.054.008.018.004.041 0 .06a2.003 2.003 0 0 0 .523 1.828c.03.03 0 .073-.026.11l-.014.021-4.56 7.063c-.012.02-.023.037-.043.05-.024.015-.058.008-.086.001a2.274 2.274 0 0 0 -.543-.074c-.164 0-.342.03-.522.063h-.001c-.02.003-.038.007-.054-.005a.21.21 0 0 1 -.045-.051l-4.808-7.013zm5.398-5.398 5.814-5.814c.805-.805 1.208-1.208 1.674-1.355a2 2 0 0 1 1.206 0c.466.147.869.55 1.674 1.355l1.26 1.26-4.135 6.404a.155.155 0 0 1 -.041.048c-.025.017-.06.01-.09 0a2.097 2.097 0 0 0 -1.92.37c-.027.028-.067.012-.101-.003-.54-.235-4.74-2.01-5.341-2.265zm12.506-3.676 3.818 3.818-.92 5.698v.015a.135.135 0 0 1 -.008.038c-.01.02-.03.024-.05.03a1.83 1.83 0 0 0 -.548.273.154.154 0 0 0 -.02.017c-.011.012-.022.023-.04.025a.114.114 0 0 1 -.043-.007l-5.818-2.472-.011-.005c-.037-.015-.081-.033-.081-.071a2.198 2.198 0 0 0 -.31-.915c-.028-.046-.059-.094-.035-.141zm-3.932 8.606 5.454 2.31c.03.014.063.027.076.058a.106.106 0 0 1 0 .057c-.016.08-.03.171-.03.263v.153c0 .038-.039.054-.075.069l-.011.004c-.864.369-12.13 5.173-12.147 5.173s-.035 0-.052-.017c-.03-.03 0-.072.027-.11a.76.76 0 0 0 .014-.02l4.482-6.94.008-.012c.026-.042.056-.089.104-.089l.045.007c.102.014.192.027.283.027.68 0 1.31-.331 1.69-.897a.16.16 0 0 1 .034-.04c.027-.02.067-.01.098.004zm-6.246 9.185 12.28-5.237s.018 0 .035.017c.067.067.124.112.179.154l.027.017c.025.014.05.03.052.056 0 .01 0 .016-.002.025l-1.052 6.462-.004.026c-.007.05-.014.107-.061.107a1.729 1.729 0 0 0 -1.373.847l-.005.008c-.014.023-.027.045-.05.057-.021.01-.048.006-.07.001l-9.793-2.02c-.01-.002-.152-.519-.163-.52z" transform="translate(-.702)"/> </g> </svg> --- class: magic-quadrant # Publish <i class="fa-brands fa-npm"></i> Packages -- ## Tag Version<br><i class="fa-duotone fa-tags"></i> -- ## Create Release <br><i class="fa-duotone fa-notes"></i> -- ## Publish Package<br><i class="fa-brands fa-npm"></i> --- # <i class="fa-duotone fa-tags"></i> Tag Version ```yaml on: workflow_dispatch: inputs: releaseType: description: 'Semver Release Type (major,minor,patch)' jobs: tag: steps: - uses: actions/checkout@v3 with: token: ${{ secrets.ZORGBORT_TOKEN }} - name: Increment Version run: npm version ${{ github.event.inputs.releaseType }} - name: Push Changes run: git push --follow-tags ``` .footnote[https://github.com/ilios/common/blob/master/.github/workflows/tag_version.yaml] ??? ## WTF Is Zorgbort - It's our robot name, we use it for our chatbot and for resource accounts --- class:photo-slide,center,middle # <i class="fa-duotone fa-tags"></i> Tag Version  --- class:center,middle # <i class="fa-duotone fa-robot"></i> Improving the Tagging Experience with a Chatbot  ??? ## Zorgbort Details - Talked about it at UCTech a few years ago (slides on my site) ### Changes Since Then - Slack Bolt Framework - Deployed to Lambda with serverless Framework - Provides a friendly chatbot experience on top of actions --- # <i class="fa-duotone fa-notes"></i> Create Release ```yaml on: push: tags: - '*' jobs: notes: steps: - name: Generate Release Notes id: notes run: | NOTES=$(npx generate-github-release-notes ilios common ${{ steps.previousTag.outputs.tag }} ${{steps.nextTag.outputs.tag}}) echo ${NOTES} # remove line breaks from notes so they can be passed around NOTES="${NOTES//$'\n'/'%0A'}" echo "::set-output name=releaseNotes::$NOTES" - uses: ncipollo/release-action@v1 with: body: ${{steps.notes.outputs.releaseNotes}} token: ${{ secrets.ZORGBORT_TOKEN }} ``` .footnote[https://github.com/ilios/common/blob/master/.github/workflows/create_release.yaml] --- class:center,middle # <i class="fa-duotone fa-notes"></i> Create Release  .footnote[https://github.com/ilios/common/releases/tag/v69.2.0] --- # <i class="fa-brands fa-npm"></i> Publish Package ```yaml name: Publish NPM Package on: release: types: [published] jobs: publish-npm: needs: build runs-on: ubuntu-latest steps: - name: install dependencies run: npm ci --ignore-scripts - name: publish run: npm publish env: NODE_AUTH_TOKEN: ${{secrets.npm_token}} ``` .footnote[https://github.com/ilios/common/blob/master/.github/workflows/release.yaml] --- class:center,middle # <i class="fa-brands fa-npm"></i> Publish Package  --- class: magic-quadrant # Push Code to <i class="fa-brands fa-aws" title="AWS"></i> -- ## Tag Version<br><i class="fa-duotone fa-tags"></i> -- ## Create Release <br><i class="fa-duotone fa-notes"></i> -- ## Pack and Push Files <br><i class="fa-duotone fa-file-zipper"></i> -- ## Send Release Data to Sentry<br><svg class="css-lfbo6j e10nushx4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222 66" width="169" height="50"><path d="M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z M124.32,28.28,109.56,9.22h-3.68V34.77h3.73V15.19l15.18,19.58h3.26V9.22h-3.73ZM87.15,23.54h13.23V20.22H87.14V12.53h14.93V9.21H83.34V34.77h18.92V31.45H87.14ZM71.59,20.3h0C66.44,19.06,65,18.08,65,15.7c0-2.14,1.89-3.59,4.71-3.59a12.06,12.06,0,0,1,7.07,2.55l2-2.83a14.1,14.1,0,0,0-9-3c-5.06,0-8.59,3-8.59,7.27,0,4.6,3,6.19,8.46,7.52C74.51,24.74,76,25.78,76,28.11s-2,3.77-5.09,3.77a12.34,12.34,0,0,1-8.3-3.26l-2.25,2.69a15.94,15.94,0,0,0,10.42,3.85c5.48,0,9-2.95,9-7.51C79.75,23.79,77.47,21.72,71.59,20.3ZM195.7,9.22l-7.69,12-7.64-12h-4.46L186,24.67V34.78h3.84V24.55L200,9.22Zm-64.63,3.46h8.37v22.1h3.84V12.68h8.37V9.22H131.08ZM169.41,24.8c3.86-1.07,6-3.77,6-7.63,0-4.91-3.59-8-9.38-8H154.67V34.76h3.8V25.58h6.45l6.48,9.2h4.44l-7-9.82Zm-10.95-2.5V12.6h7.17c3.74,0,5.88,1.77,5.88,4.84s-2.29,4.86-5.84,4.86Z" transform="translate(11, 11)" fill="#362d59"></path></svg> --- class: magic-quadrant # <i class="fa-duotone fa-file-zipper"></i> Pack and Push Files -- ## Compile Styles<br><i class="fa-brands fa-sass"></i> -- ## Transpile Javascript<br><i class="fa-brands fa-js"></i> -- ## Minify and Compress Files <br>(brotli, gzip, plain) <br><i class="fa-duotone fa-file-zipper"></i> -- ## Send it to S3 <br><i class="fa-brands fa-aws" title="AWS"></i> --- # <i class="fa-duotone fa-file-zipper"></i> Pack and Push Files ```yaml on: push: tags: - '*' jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 - name: install dependencies run: npm ci - name: Ember CLI Deploy run: npm run deploy:production env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} ``` .footnote[https://github.com/ilios/frontend/blob/master/.github/workflows/deploy-production.yml] ??? ## Framework FTW! - Zero Config or Convention over Configuration Frameworks can often do really nice builds - As long as it will run on Ubuntu, Windows, or OSX you can run it in a workflow --- # <i class="fa-duotone fa-paper-plane"></i> Send Release Data to Sentry ```yaml deploy: steps: ... - name: Install Sentry CLI run: npm install -g @sentry/cli - name: Create a Sentry.io release run: | # Create new Sentry release export SENTRY_RELEASE=$(sentry-cli releases propose-version) sentry-cli releases new $SENTRY_RELEASE sentry-cli releases set-commits --auto $SENTRY_RELEASE sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps tmp/deploy-dist/ sentry-cli releases finalize $SENTRY_RELEASE env: SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }} ``` .footnote[https://github.com/ilios/frontend/blob/master/.github/workflows/deploy-production.yml] --- class: center,middle # Let's talk about containers! <i class="fa-duotone big fa-server"></i> --- class:center,middle,docker <i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i> # Docker <i class="fab fa-docker"></i> <i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i><i class="fa-duotone fa-fire-alt"></i> --- # Docker is environment as code ```docker FROM php:8.1-fpm RUN composer install --prefer-dist --no-dev --no-progress --no-scripts --no-interaction; \ composer dump-autoload --classmap-authoritative --no-dev; \ composer symfony:dump-env prod; \ composer run-script --no-dev post-install-cmd; \ chmod +x bin/console; \ bin/console cache:warmup; VOLUME /srv/app/var COPY docker/fpm/ilios.ini $PHP_INI_DIR/conf.d/ilios.ini COPY docker/fpm/zz-docker.conf /usr/local/etc/php-fpm.d/zz-docker.conf COPY docker/fpm/docker-entrypoint.sh /usr/local/bin/docker-entrypoint RUN chmod +x /usr/local/bin/docker-entrypoint ENTRYPOINT ["docker-entrypoint"] CMD ["php-fpm"] ``` .footnote[Our Dockerfile: https://github.com/ilios/ilios/blob/master/Dockerfile] ??? ### What does this mean - We're relying on a base provided by PHP the language - It relies on Debian in turn - Each of this organizations can release new versions at any time - We then layer on anything special we need to run our app --- class: center,middle,updates-rise <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 392.11 392.11" aria-hidden="true"> <title>Ilios Logo</title> <path d="M371.83,461.83c-77.62-89.13-98.6-113.11-30.25-93.76-62.12-34.35-30.23-36.41,87.67-44.87-117.91-8.47-149.8-10.52-87.67-44.87-68.34,19.35-47.37-4.63,30.26-93.76-89.12,77.62-113.11,98.6-93.76,30.25-34.35,62.12-36.41,30.23-44.87-87.68-8.47,117.91-10.53,149.8-44.87,87.68,19.35,68.34-4.64,47.37-93.76-30.26,77.62,89.13,98.59,113.11,30.25,93.76,62.12,34.35,30.23,36.41-87.68,44.87,117.91,8.47,149.8,10.52,87.68,44.87,68.34-19.35,47.37,4.63-30.25,93.76,89.12-77.62,113.11-98.6,93.76-30.25,34.35-62.12,36.41-30.23,44.87,87.68,8.47-117.91,10.52-149.8,44.87-87.68C258.71,363.23,282.7,384.21,371.83,461.83Z" transform="translate(-37.14 -127.14)"/> <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">Ilios</text> </svg> ## <i class="fa-duotone huge fa-water-rise"></i> # Updates ??? - From distro to php to us every layer is constantly updating - All we need to do is listen and re-build our own image when these changes happen --- class: center,middle # New PHP Version? `FROM php:8.1-fpm` -- .high-contrast[FROM php:**8.1**-fpm] -- .high-contrast[FROM php:**8.2**-fpm] --- class: center,middle # Installation Optimizations .high-contrast[RUN composer install **--prefer-dist**; <br> composer dump-autoload **--classmap-authoritative**; <br> composer symfony:dump-env prod; <br> ] --- class: magic-quadrant # <i class="fa-brands fa-docker"></i> Push Containers to Registry -- ## Tag Version<br><i class="fa-duotone fa-tags"></i> -- ## Create Release <br><i class="fa-duotone fa-notes"></i> -- ## Build Multi Platform Containers <br><i class="fa-duotone fa-microchip"></i> -- ## Push To Docker Hub<br><i class="fa-brands fa-docker"></i> --- # <i class="fa-duotone fa-microchip"></i> Build Multi Platform Containers ```yaml ... steps: - uses: docker/setup-qemu-action@v2 with: image: tonistiigi/binfmt:latest platforms: linux/amd64,linux/arm64 - uses: docker/build-push-action@v3 with: platforms: linux/amd64,linux/arm64 ``` .footnote[https://github.com/ilios/ilios/blob/master/.github/workflows/deploy-tag.yml] ??? - Using emulation we can build for different architectures - Which turns out to be really important when your team starts getting apple silicon --- # <i class="fa-brands fa-docker"></i> Push To Docker Hub ```yaml jobs: tags: steps: - id: tag run: | MAJOR_VERSION=$(echo $GITHUB_REF | sed -rn 's#^refs/tags/(v3)\.([0-9]+)\.([0-9]+)$#\1#p') MINOR_VERSION=$(echo $GITHUB_REF | sed -rn 's#^refs/tags/(v3)\.([0-9]+)\.([0-9]+)$#\1.\2#p') PATCH_VERSION=$(echo $GITHUB_REF | sed -rn 's#^refs/tags/(v3)\.([0-9]+)\.([0-9]+)$#\1.\2.\3#p') deploy-docker-containers: needs: tags runs-on: ubuntu-latest - uses: docker/build-push-action@v3 with: tags: ilios/fpm:${{major}},ilios/fpm:${{minor}},ilios/fpm:${{patch}} push: true ``` --- class:center,middle # <i class="fa-brands fa-docker"></i> Push To Docker Hub  --- # Nightly Re-Tag ## (the latest debian,php,mysql,etc...) ```yaml on: workflow_dispatch: schedule: - cron: '21 10 * * *' # daily, in the morning (UTC) jobs: tags: steps: - run: | LATEST_TAG=$(git describe --tags --abbrev=0) MAJOR_VERSION=$(echo $LATEST_TAG | sed -rn 's#^(v3)\.([0-9]+)\.([0-9]+)$#\1#p') ... deploy-docker-containers: steps: - uses: actions/checkout@v3 with: ref: ${{needs.tags.outputs.latestTag}} ... - uses: docker/build-push-action@v3 with: tags: ilios/${{ matrix.image }}:${{major}},ilios/${{ matrix.image }}:${{minor}}... platforms: linux/amd64,linux/arm64 ``` .footnote[https://github.com/ilios/ilios/blob/master/.github/workflows/deploy-nightly.yml] --- class:center,middle,photo-slide  ??? ## Going back to that mind-blowing talk at UCI that sent me to this tree for a timeout - We're really close now --- class: center,middle,containers # Automation ## <i class="fab fa-slack"></i> <i class="fa-duotone fa-arrow-right"></i><i class="fa-duotone fa-robot"></i> <i class="fa-duotone fa-arrow-right"></i> <i class="fab fa-github"></i> <i class="fa-duotone fa-arrow-right"></i> <i class="fab fa-docker"></i> <i class="fa-duotone fa-arrow-right"></i> <i class="fab fa-aws"></i> <i class="fa-duotone fa-arrow-right"></i> <i class="fa-duotone fa-users"></i> # You ## <i class="fa-duotone fa-laptop"></i> <i class="fa-duotone fa-arrow-from-left"></i> <i class="fa-duotone fa-coffee"></i> <i class="fa-duotone fa-arrow-from-left"></i><i class="fa-duotone fa-smile"></i> ??? Tag Code 1. Tag Code as v65.4.3 2. Go To Lunch 3. v65.4.3 is now in *Production* 4. Repeat --- class: magic-quadrant # <i class="fa-duotone fa-brain-circuit"></i> Explore The Limits -- ## Weekly Dependency Reset<br><i class="fa-duotone fa-conveyor-belt-boxes"></i> -- ## Special Preview for Testing <br><i class="fa-duotone fa-magnifying-glass"></i> -- ## Test Updates for Asset Bloat <br><i class="fa-duotone fa-weight-scale"></i> -- ## Run Cron Jobs <br><i class="fa-duotone fa-screwdriver-wrench"></i> --- class: center, middle, title-slide, qr-title-slide # Thanks! ## Hope to see you on UCTech Slack ## Jon Johnson <span class="pronouns">(he/him)</span> .left-column[ .boxes[ .icons[ <i class="fa-brands fa-github"></i> jrjohnson <br /> <i class="fa-brands fa-twitter"></i> jrjohnson_ <br /> <i class="fa-brands fa-slack"></i> jrjohnson-ucsf <br /> ] .avatar[  ] ]] .right-column[ ### Plain Text and Slides At:  ] .full-width-column[## UCTech Slack: https://uctech.slack.com]