Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building blog system using static site generato...
Search
meganii
January 19, 2019
Technology
0
840
Building blog system using static site generator and Azure DevOps
Azure DevOps Tokyo, Japan 2nd impact のLT発表資料です。
meganii
January 19, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
380
Amazon Personalizeのレコメンドシステム構築、実際何するの?〜大体10分で具体的なイメージをつかむ〜
kniino
1
100
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
470
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
3
200
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
The Rise of LLMOps
asei
7
1.4k
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
170
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
170
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Raft: Consensus for Rubyists
vanstee
136
6.6k
How STYLIGHT went responsive
nonsquared
95
5.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Writing Fast Ruby
sferik
627
61k
Site-Speed That Sticks
csswizardry
0
23
GraphQLとの向き合い方2022年版
quramy
43
13k
How to Ace a Technical Interview
jacobian
276
23k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
Bash Introduction
62gerente
608
210k
Transcript
(LT) Azure DevOpsͱStatic Site GeneratorΛ ར༻ͯ͠ϒϩάڥΛߏஙͯ͠Έͨ Azure DevOps Tokyo,
Japan 2nd impact 2019/01/19 @meganii
@meganii Ί͕ʹ͍ • Twitter: meganii • Blog: https://www.meganii.com/ • ͓ࣄ:
ࣾSE(Azureؔ࿈) About me Azure DevOpsΛࣄͰ͍͍ͨͨΊษڧத
ຊ͍͑ͨ͜ͱ (1)Static Site GeneratorͰͷϒϩάߏங͍͍ͧʂ (2)Azure DevOpsͰͷϒϩάڥߏஙͳ͔ͳ͔Α͍ͧʂ (3)Azure DevOpsͷใ͕ͳ͔ͳ͔ݟ͚ͭΒΕͳͯ͘ࠔͬͯΔ ॿ͚͍ͯͩ͘͞ʂ
1. Static Site GeneratorͰͷ ϒϩάߏங
ߦ͖͔͚ͨͬͨΕͲɺߦ͚ͳ͔ͬͨɾɾɾ
ݹ͖ྑ͖࣌ 3) Yahoo! δΦγςΟʔζ 1)ϝϞா 2) FFFTP ͬͯͯ͜͜ͷ੩తαΠτ HTMLλάଧͪ FTPసૹ
Web
ࠓʁ • CMSͱͯ͠ɺWordPress͕ଟ͍ʁ • ϝϯς͕େมʢDatabase, Security, Performance….ʣ • WordPressʁ •
ಈతαΠτ͔Βݹ͖ྑ͖੩తαΠτͷ༳Γ͠
Tools Sandbox Static Site Generator CI/CD , Hosting Service ฏΛੜ͖ൈ͍ͨࢲͨͪ
ΑΓΑ͍ʮ༡ͼಓ۩ʯͱʮ༡ͼʯΛखʹೖΕͨ
Static Site Generator • ੩తͳαΠτΛੜ͢Δπʔϧ • Jekyll, Octopress, Middleman(Ruby) •
Hexo(JavaScript) • Hugo(Golang) • Gatsby(JavaScript(React.js))
Hugo • The world’s fastest framework for building websites. •
GolangͷStatic Site GeneratorͰ͋ΓϏϧυ͕ര https://gohugo.io/
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/
Static Site GeneratorΛར༻͢ΔϝϦοτ • HTML + CSS + JavaScriptͰߏ͞Ε͍ͯΔͨΊܰྔ •
DatabaseΛߟ͑ͳͯ͘ࡁΉ • WordPressͷΑ͏ʹηΩϡϦςΟύονద༻ͷ͜ͱΛߟ͑ͳ ͯ͘Α͍
Static Site GeneratorΛ༻͍ͨ ੩తαΠτӡ༻্ͷ՝ • ຖճϩʔΧϧͰϏϧυͯ͠ɺखಈσϓϩΠ໘ • ϥϯΩϯάͷΑ͏ͳಈతͳίϯςϯπ͕ඞཁ • ࣗಈͰΔͨΊʹʁ
CI/CDαʔϏεͱHostingͷར༻ • Ͳ͜ͰϏϧυ͢Δ͔ • Ͳ͜ʹϗετ͢Δ͔
ϒϩάڥʹٻΊΔ͜ͱ • جຊແྉͰ͑Δ͜ͱ (ຖ݄͏͓ۚɾɾɾ) • ࿈ܞ͕؆୯Ͱ͋Δ͜ͱ (ར༻͢ΔαʔϏεͳΔ͘গͳ͘) • Public ʹ͠ͳͯ͘ར༻Ͱ͖Δ͜ͱ
(SourcePrivateͰӡ༻͍ͨ͠)
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!!!!
2. Azure DevOpsͰͷ ϒϩάڥߏங
Azure Repos Azure Functions CI/CD GitHub Pages Azure Pipelines Source
Hosting git push Local WorkFlow Git pushҎ֎ͰίϯςϯπΛߋ৽͢Δ߹ Queue build Markdown
Trigger • git push࣌ • εέδϡʔϥʢྫ͑ຖߋ৽ʣ ˞ Azure DevOpsʹϩάΠϯͯ͠ͳ͍ͱ࣮ߦ͞Εͳ͍ʁ •
Azure Pipelines্Ͱखಈ࣮ߦ • Azure FunctionsͷURL࣮ߦ
Azure Pipelines
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' งғؾͰॻ͍͍ͯΔͷͰɺ ਖ਼͍͠ॻ͖ํืूதɾɾɾ
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 }; }; ͬͱ؆୯ͳํ๏͕͋Εڭ͍͑ͯͩ͘͞
None
ࠓޙΓ͍ͨ͜ͱ • Docker containerΛར༻ͨ͠Build. CacheͬͯͲ͏ͬͯΔʁ • CD (Release)ͷར༻ • Gatsby.jsͰScrapboxΛσʔλιʔεʹ͍ͨ͠
• ॻ͘ͱ͖Scrapboxɻදࣔ੩తαΠτ
Thank you @meganii