Slides from Microservices Architecture Day Atlanta

1. FRONT MATTER:
NEXT LEVEL FRONT END
DEPLOYMENTS ON OPENSHIFT
Red Hat MSA Day, Atlanta
Lance Ball
Principal Software Engineer
January 17, 2019

2. INSERT DESIGNATOR, IF NEEDED
Did You Know?
2
Number one deployment runtime
on OpenShift Online is Node.js
● But they’re not all actually
Node.js applications
● Many deployments are
Single Page Applications
● How are these applications
being deployed?
● What tools can I use in my
workflow?

3. INSERT DESIGNATOR, IF NEEDED
A Quick Poll
3
● Do you deploy apps on
OpenShift today?
● Do you write Node apps?
● Do you write Single Page
Applications?
● Anyone here “full stack”?
● What about DevOps?

4. Let’s Build a Web App!

5. INSERT DESIGNATOR, IF NEEDED
Create a React App
$ npx create-react-app mywebapp
$ cd mywebapp
# Edit package.json and add PORT=8080 to start script
$ npm start
# Edit App.js and watch it reload
5

6. INSERT DESIGNATOR, IF NEEDED6
OK - Let’s Deploy It!

7. INSERT DESIGNATOR, IF NEEDED7
But How?
OpenShift templates maybe...

8. INSERT DESIGNATOR, IF NEEDED
Two Thorns and a Rose
8
OpenShift builds pull from Git repo
Not ideal for iterative development
Must maintain compiled artifacts in Git repo
The “build” for a web server image expects static content
Served by a real HTTP server
We can use Apache or Nginx and don’t depend on a React Node.js server

9. nodeshift

10. INSERT DESIGNATOR, IF NEEDED
So, what’s nodeshift?
10
An npm module for deploying Node apps on OpenShift
Creates, builds, routes and deploys your app in one command
Great for local development environments
Deploys directly from the file system
Layered application images via s2i
Overlays application on a base image, creating a new application image

11. INSERT DESIGNATOR, IF NEEDED11
A brief aside… s2i

12. INSERT DESIGNATOR, IF NEEDED
One Line Deployment
npx nodeshift --strictSSL=false
--dockerImage=nodeshift/centos7-s2i-web-app --imageTag=10.x
--expose --deploy.env NPM_RUN=”npm start”
12

13. Synchronizing Development Changes
in Real Time

14. INSERT DESIGNATOR, IF NEEDED
Be Sure to Run Development Server
npx nodeshift --strictSSL=false
--dockerImage=nodeshift/centos7-s2i-web-app --imageTag=10.x
--expose --deploy.env NPM_RUN=”npm start”
14

15. INSERT DESIGNATOR, IF NEEDED
Synchronize Changes in Development
oc rsync --no-perms=true --watch src/ <POD_NAME>:src/
15

16. INSERT DESIGNATOR, IF NEEDED
Two Roses and a Thorn
16
Single command deployment
Easy to integrate into a development workflow
Deploys from the local file system
No need to push small changes in development to GitHub
Serves content using the React server
Not designed for production use

17. Production Deployments

18. INSERT DESIGNATOR, IF NEEDED
Chained Builds
18
Two builds can be chained
together: one that produces the
compiled artifact, and a second
build that places that artifact in a
separate image that runs the
artifact.

19. INSERT DESIGNATOR, IF NEEDED19
Application Templates

20. INSERT DESIGNATOR, IF NEEDED
Application BuildConfig
- apiVersion: v1
kind: BuildConfig
metadata:
name: mywebapp-build
spec:
output:
to:
kind: ImageStreamTag
name: mywebapp-image:latest
source:
git:
uri: ${SOURCE_REPOSITORY_URL}
ref: ${SOURCE_REPOSITORY_REF}
contextDir: ${SOURCE_REPOSITORY_DIR}
type: Git
20

21. INSERT DESIGNATOR, IF NEEDED
Application BuildConfig
- apiVersion: v1
kind: BuildConfig
metadata:
name: mywebapp-build
spec:
output:
to:
kind: ImageStreamTag
name: mywebapp-image:latest
source:
git:
uri: ${SOURCE_REPOSITORY_URL}
ref: ${SOURCE_REPOSITORY_REF}
contextDir: ${SOURCE_REPOSITORY_DIR}
type: Git
21

22. INSERT DESIGNATOR, IF NEEDED
Application BuildConfig
- apiVersion: v1
kind: BuildConfig
metadata:
name: mywebapp-build
spec:
output:
to:
kind: ImageStreamTag
name: mywebapp-image:latest
source:
git:
uri: ${SOURCE_REPOSITORY_URL}
ref: ${SOURCE_REPOSITORY_REF}
contextDir: ${SOURCE_REPOSITORY_DIR}
type: Git
22

23. INSERT DESIGNATOR, IF NEEDED
Application BuildConfig (cont)
strategy:
sourceStrategy:
env:
- name: OUTPUT_DIR
value: ${OUTPUT_DIR}
from:
kind: DockerImage
name: nodeshift/centos7-s2i-web-app:10.x
incremental: true
type: Source
triggers:
- github:
secret: ${GITHUB_WEBHOOK_SECRET}
type: GitHub
23

24. INSERT DESIGNATOR, IF NEEDED
Application BuildConfig (cont)
strategy:
sourceStrategy:
env:
- name: OUTPUT_DIR
value: ${OUTPUT_DIR}
from:
kind: DockerImage
name: nodeshift/centos7-s2i-web-app:10.x
incremental: true
type: Source
triggers:
- github:
secret: ${GITHUB_WEBHOOK_SECRET}
type: GitHub
24

25. INSERT DESIGNATOR, IF NEEDED
Application Runtime BuildConfig
- apiVersion: v1
kind: BuildConfig
metadata:
name: mywebapp-runtime-build
spec:
output:
to:
kind: ImageStreamTag
name: mywebapp-runtime:latest
source:
type: Image
images:
- from:
kind: ImageStreamTag
name: mywebapp-image:latest
paths:
- destinationDir: .
sourcePath: /opt/app-root/output/.
25

26. INSERT DESIGNATOR, IF NEEDED
Application Runtime BuildConfig
- apiVersion: v1
kind: BuildConfig
metadata:
name: mywebapp-runtime-build
spec:
output:
to:
kind: ImageStreamTag
name: mywebapp-runtime:latest
source:
type: Image
images:
- from:
kind: ImageStreamTag
name: mywebapp-image:latest
paths:
- destinationDir: .
sourcePath: /opt/app-root/output/.
26

27. INSERT DESIGNATOR, IF NEEDED
Application Runtime BuildConfig
- apiVersion: v1
kind: BuildConfig
metadata:
name: mywebapp-runtime-build
spec:
output:
to:
kind: ImageStreamTag
name: mywebapp-runtime:latest
source:
type: Image
images:
- from:
kind: ImageStreamTag
name: mywebapp-image:latest
paths:
- destinationDir: .
sourcePath: /opt/app-root/output/.
27

28. INSERT DESIGNATOR, IF NEEDED
Application Runtime BuildConfig (cont)
strategy:
sourceStrategy:
from:
kind: ImageStreamTag
name: nginx:latest
incremental: true
type: Source
triggers:
- type: ConfigChange
- type: ImageChange
imageChange:
from:
kind: ImageStreamTag
name: mywebapp-image:latest
28

29. INSERT DESIGNATOR, IF NEEDED
Application Runtime BuildConfig (cont)
strategy:
sourceStrategy:
from:
kind: ImageStreamTag
name: nginx:latest
incremental: true
type: Source
triggers:
- type: ConfigChange
- type: ImageChange
imageChange:
from:
kind: ImageStreamTag
name: mywebapp-image:latest
29

30. INSERT DESIGNATOR, IF NEEDED
Three Roses!
30
Single command deployment in development
Easy to integrate into a development workflow
Development deploys from the local file system
No need to push small changes in development to GitHub
Served by a real HTTP server in production
We can use Apache or Nginx and don’t depend on a React Node.js server

31. https://openshift.com
https://launch.openshift.io
https://github.com/nodeshift/nodeshift
https://github.com/nodeshift/centos7-s2i-web-app

32. THANK YOU
plus.google.com/+RedHat
linkedin.com/company/red-hat
youtube.com/user/RedHatVideos
facebook.com/redhatinc
twitter.com/RedHat