Building blog system using static site generator and Azure DevOps

Azure DevOps Tokyo, Japan 2nd impact のLT発表資料です。

Transcript

1. (LT) Azure DevOpsͱStatic Site GeneratorΛ ར༻ͯ͠ϒϩά؀ڥΛߏஙͯ͠Έͨ Azure DevOps Tokyo, 
 Japan 2nd impact 2019/01/19 @meganii
2. @meganii Ί͕ʹ͍ • Twitter: meganii • Blog: https://www.meganii.com/ • ͓࢓ࣄ: ࣾ಺SE(Azureؔ࿈) About me Azure DevOpsΛ࢓ࣄͰ࢖͍͍ͨͨΊษڧத
3. ຊ೔఻͍͑ͨ͜ͱ (1)Static Site GeneratorͰͷϒϩάߏங͸͍͍ͧʂ (2)Azure DevOpsͰͷϒϩά؀ڥߏங͸ͳ͔ͳ͔Α͍ͧʂ (3)Azure DevOpsͷ৘ใ͕ͳ͔ͳ͔ݟ͚ͭΒΕͳͯ͘ࠔͬͯΔ
 ॿ͚͍ͯͩ͘͞ʂ
4. 1. Static Site GeneratorͰͷ ϒϩάߏங
5. ߦ͖͔͚ͨͬͨΕͲɺߦ͚ͳ͔ͬͨɾɾɾ
6. ݹ͖ྑ͖࣌୅ 3) Yahoo! δΦγςΟʔζ 1)ϝϞா 2) FFFTP ͬͯͯ͜͜ͷ੩తαΠτ HTMLλάଧͪ FTPసૹ Web
7. ࠓ͸ʁ • CMSͱͯ͠͸ɺWordPress͕ଟ͍ʁ • ϝϯς͕େมʢDatabase, Security, Performance….ʣ • ୤WordPressʁ • ಈతαΠτ͔Βݹ͖ྑ͖੩తαΠτ΁ͷ༳Γ໭͠
8. Tools Sandbox Static Site Generator CI/CD , Hosting Service ฏ੒Λੜ͖ൈ͍ͨࢲͨͪ͸ ΑΓΑ͍ʮ༡ͼಓ۩ʯͱʮ༡ͼ৔ʯΛखʹೖΕͨ
9. Static Site Generator • ੩తͳαΠτΛੜ੒͢Δπʔϧ • Jekyll, Octopress, Middleman(Ruby) • Hexo(JavaScript) • Hugo(Golang) • Gatsby(JavaScript(React.js))
10. Hugo • The world’s fastest framework for building websites. • Golang੡ͷStatic Site GeneratorͰ͋ΓϏϧυ͕ര଎ https://gohugo.io/
11. Gatsby • Gatsby.js is a static PWA (Progressive Web App) generator. 
 React.js, GraphQLͳͲϞμϯͳϑϩϯτΤϯυͷٕज़Λར༻ͨ͠Static Site GeneratorͷҰ෦ • GraphQLͷΠϯλʔϑΣʔεͰಁաతʹσʔλιʔε(Markdown fileɺ JSONɺDatabase)Λѻ͏͜ͱ͕Ͱ͖Δ • Կ΋ߟ͑ͳͯ͘΋αΠτ͕ര଎ʹͳΔ
 Preload, Gatsby Link(ը໘੾ସͳ͠Ͱͷը໘ભҠ) https://www.gatsbyjs.org/
12. Static Site GeneratorΛར༻͢ΔϝϦοτ • HTML + CSS + JavaScriptͰߏ੒͞Ε͍ͯΔͨΊܰྔ • DatabaseΛߟ͑ͳͯ͘ࡁΉ • WordPressͷΑ͏ʹηΩϡϦςΟύονద༻ͷ͜ͱΛߟ͑ͳ ͯ͘΋Α͍
13. Static Site GeneratorΛ༻͍ͨ ੩తαΠτӡ༻্ͷ՝୊ • ຖճϩʔΧϧͰϏϧυͯ͠ɺखಈσϓϩΠ͸໘౗ • ϥϯΩϯάͷΑ͏ͳಈతͳίϯςϯπ͸޻෉͕ඞཁ • ࣗಈͰ΍ΔͨΊʹ͸ʁ CI/CDαʔϏεͱHostingͷར༻ • Ͳ͜ͰϏϧυ͢Δ͔ • Ͳ͜ʹϗετ͢Δ͔
14. ϒϩά؀ڥʹٻΊΔ͜ͱ • جຊແྉͰ࢖͑Δ͜ͱ (ຖ݄෷͏͓ۚ͸ɾɾɾ) • ࿈ܞ͕؆୯Ͱ͋Δ͜ͱ (ར༻͢ΔαʔϏε͸ͳΔ΂͘গͳ͘) • Public ʹ͠ͳͯ͘΋ར༻Ͱ͖Δ͜ͱ
 (Source͸PrivateͰӡ༻͍ͨ͠)
15. Comparison Provider Source
 Management CI/CD Hosting Remarks Mix Private Repository
 (Bitbucket, GitLab) CI Service
 (Circle CI) Hosing Service
 (GitHub Pages,
 Google Firebase) όϥόϥͷͨΊਏ͍ GitHub GitHub (GitHub Actions)
 beta GitHub Pages ·ͩCI/CD͕
 GA͍ͯ͠ͳ͍ GitLab GitLab GitLab CI GitLab Pages શ෦ೖΓ͕ͩɺ
 CI͕஗͍ҹ৅ Netlify - (GitHub, Bitbucket) Netlify Netlify ೔ຊ͔ΒͷΞΫηε͕ ஗͍ҹ৅ Microsoft Azure Repos Azure Pipelines GitHub Pages Awesome!!!!
16. 2. Azure DevOpsͰͷ ϒϩά؀ڥߏங
17. Azure Repos Azure Functions CI/CD GitHub Pages Azure Pipelines Source Hosting git push Local WorkFlow Git pushҎ֎ͰίϯςϯπΛߋ৽͢Δ৔߹ Queue build Markdown
18. Trigger • git push࣌ • εέδϡʔϥʢྫ͑͹ຖ೔ߋ৽ʣ
 ˞ Azure DevOpsʹϩάΠϯͯ͠ͳ͍ͱ࣮ߦ͞Εͳ͍ʁ • Azure Pipelines্Ͱखಈ࣮ߦ • Azure FunctionsͷURL࣮ߦ
19. Azure Pipelines
20. YAML for Hugo (1)Installing Hugo binary (2)Build (3)Git commit trigger: - master pool: vmImage: 'Ubuntu-16.04' variables: GOBIN: '$(GOPATH)/bin' # Go binaries path GOROOT: '/usr/local/go1.11' # Go installation path GOPATH: '$(system.defaultWorkingDirectory)/gopath' # Go workspace path modulePath: '$(GOPATH)/src/github.com/$(build.repository.name)' # Path to the module's code steps: - script: | mkdir -p '$(GOBIN)' mkdir -p '$(GOPATH)/pkg' mkdir -p '$(modulePath)' shopt -s extglob echo '##vso[task.prependpath]$(GOBIN)' echo '##vso[task.prependpath]$(GOROOT)/bin' displayName: 'Set up the Go workspace' - script: | mkdir ~/tmp cd ~/tmp wget 'https://github.com/gohugoio/hugo/releases/download/v0.53/hugo_0.53_Linux-64bit.tar.gz' tar zxvf hugo_0.53_Linux-64bit.tar.gz mv hugo $(GOBIN) displayName: 'Set up Hugo' - script: | hugo version displayName: 'Check Hugo version' - script: | hugo displayName: 'Build content by hugo' - script: | git clone https://meganii:$(GITHUB_PARSONAL_ACCESS_TOKEN)@github.com/meganii/www.meganii.com cp -rp public/* www.meganii.com cd www.meganii.com git config --local user.name $(GIT_USER) git config --local user.email $(GIT_EMAIL) git add --all git commit -m "[skip ci] build from azure" git push -f origin master displayName: 'Deploy to GitHub Pages' งғؾͰॻ͍͍ͯΔͷͰɺ ਖ਼͍͠ॻ͖ํืूதɾɾɾ
21. Azure Functions const azdev = require('azure-devops-node-api'); const orgUrl = `https://dev.azure.com/${process.env.AZURE_DEVOPS_PROJECT_NAME}`; const token = process.env.AZURE_DEVOPS_API_KEY; const projectName = 'github-pages'; module.exports = async function (context, req) { context.log('JavaScript HTTP trigger function processed a request.'); let authHandler = await azdev.getPersonalAccessTokenHandler(token); let connection = await new azdev.WebApi(orgUrl, authHandler); let vstsBuild = await connection.getBuildApi(); const builds = await vstsBuild.getBuilds(projectName); const build = await vstsBuild.getBuild(builds[0].id, projectName); const res = await vstsBuild.queueBuild(build, projectName); context.res = { // status: 200, /* Defaults to 200 */ body: res.status }; }; ΋ͬͱ؆୯ͳํ๏͕͋Ε͹ڭ͍͑ͯͩ͘͞
23. ࠓޙ΍Γ͍ͨ͜ͱ • Docker containerΛར༻ͨ͠Build. CacheͬͯͲ͏΍ͬͯ΍Δʁ • CD (Release)ͷར༻ • Gatsby.jsͰScrapboxΛσʔλιʔεʹ͍ͨ͠ • ॻ͘ͱ͖͸Scrapboxɻදࣔ͸੩తαΠτ
24. Thank you @meganii