## Tools - Frontend Application: [React](https://reactjs.org/) + [Create React App](https://github.com/facebookincubator/create-react-app) - Backend Application - API: [Ruby on Rails](http://rubyonrails.org/) - Environment: [Docker](https://www.docker.com/) - Infrastructure as Code: [Hashicorp | Terraform ](https://www.terraform.io/) - Commands: [#!/bin/bash](https://www.gnu.org/software/bash/)

1. Basic Dev Pipeline
End-to-End
Ezequiel Maraschio

2. > WHO?
▸ Ezequiel Maraschio > @emaraschio
▸ Software Developer > 10 years
▸ #sysarmy
▸ #nerdearla

4. HTTP://FSC.SYSAR.MY/

9. HTTPS://GITHUB.COM/
EMARASCHIO/
WORKSHOP-FULLSTACK-
CONF-2017

10. > PATH
▸ Create React App -> Client
▸ Ruby on Rails -> API
▸ Docker & docker-compose
▸ Terraform -> Provider AWS

12. > PATH
▸ Create React App -> Client
▸ Ruby on Rails -> API
▸ Docker & docker-compose
▸ Terraform -> Provider AWS

14. $ npm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

15. CODE

16. > VENTAJAS DE REACT
▸ Simple de escribir y mantener
▸ Orientado a componentes
▸ Poder usarlo dentro de otros frameworks

17. > DESVENTAJAS DE REACT
▸ La curva de aprendizaje puede ser
grande
▸ Solo se encarga de la vista, necesitás libs
externas para el manejo de Ajax
▸ Algo volátil

18. > PATH
▸ Create React App -> Client
▸ Ruby on Rails -> API
▸ Docker & docker-compose
▸ Terraform -> Provider AWS

20. $ rails new --api notepad-api

21. CODE

22. > VENTAJAS DE RAILS
▸ Productividad
▸ Tooling
▸ Test
▸ Comunidad

23. > DESVENTAJAS DE RAILS
▸ Performance
▸ ORM -> Active record

24. > PATH
▸ Create React App -> Client
▸ Ruby on Rails -> API
▸ Docker & docker-compose
▸ Terraform -> Provider AWS

26. Docker permite crear (y correr
código en) contenedores

27. Virtualizan Hardware y
corren el SO entero
Virtualizan User Space

28. FROM node:6.10
RUN mkdir /app
WORKDIR /app
COPY package.json package.json
COPY . /app
RUN npm install
RUN PORT=4000 npm run build
EXPOSE 4000
CMD npm start

29. FROM ruby:2.3.3
RUN apt-get update -qq && apt-get install -y --no-
install-recommends build-essential libpq-dev
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ADD Gemfile /usr/src/app/Gemfile
ADD Gemfile.lock /usr/src/app/Gemfile.lock
RUN bundle install --jobs 20 --retry 5
ADD . /usr/src/app
CMD rails s -b 0.0.0.0
EXPOSE 3000

30. $ docker build -t emaraschio/noteboard-api .
Sending build context to Docker daemon 109.1kB
Step 1/15 : FROM ruby:2.3.3
---> 0e1db669d557
(...)
Successfully built 385f71c63a97
Successfully tagged emaraschio/noteboard-
api:latest

31. $ docker run emaraschio/noteboard-api
=> Booting Puma
=> Rails 5.1.4 application starting in
development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.10.0 (ruby 2.3.3-p222), codename:
Russell's Teapot
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop

32. DEMO

33. DOCKER HUB

34. $ docker tag api emaraschio/api:v1
$ docker push emaraschio/api:v1

36. version: '2'
services:
api:
build: noteboard-api
image: emaraschio/noteboard-api
volumes:
- ./noteboard-api:/usr/src/app
ports:
- "3000:3000"
client:
build: noteboard-client
image: emaraschio/noteboard-client
volumes:
- ./noteboard-client:/app
ports:
- "4000:4000"
environment:
- REACT_APP_API_URL=http://localhost:3000

37. DEMO

38. > VENTAJAS DE DOCKER
▸ Velocidad
▸ Documentación
▸ Simple de usar
▸ Containers públicos

39. > DESVENTAJAS DE DOCKER
▸ Storage
▸ Seguridad ~
▸ Monitoreo por default

40. > PATH
▸ Create React App -> Client
▸ Ruby on Rails -> API
▸ Docker & docker-compose
▸ Terraform -> Provider AWS

42. Terraform nos permite manejar
infraestructura como código

46. # Configure the AWS Provider
provider "aws" {
region = "us-east-1"
}
# Create an EC2 instance
resource "aws_instance" "example_fullstack_conf" {
# AMI ID for Amazon Linux AMI 2017.09.1 (HVM)
ami = "ami-55ef662f"
instance_type = "t2.micro" # Free Tier
}

47. $ terraform plan
Resource actions are indicated with the following
symbols:
+ create
Terraform will perform the following actions:
+ aws_instance.example_fullstack_conf
ami: <computed>
Plan: 1 to add, 0 to change, 0 to destroy.

48. $ terraform apply
aws_instance.example_fullstack_conf: Creating...
ami: "" => "ami-55ef662f"
aws_instance.example_fullstack_conf: Creation
complete after 28s (ID: i-01fca7a21257cec04)
Apply complete! Resources: 1 added, 0 changed, 0
destroyed.

50. # Configure the AWS Provider
provider "aws" {
region = "us-east-1"
}
# Create an EC2 instance
resource "aws_instance" "example_fullstack_conf" {
# AMI ID for Amazon Linux AMI 2017.09.1 (HVM)
ami = "ami-55ef662f"
instance_type = "t2.micro" # Free Tier
tags {
Name = "terraform-demo-fullstack-conf"
}
}

51. $ terraform plan
Resource actions are indicated with the following
symbols:
~ update in-place
Terraform will perform the following actions:
~ aws_instance.example_fullstack_conf
tags.%: "0" => "1"
tags.Name: "" => "terraform-demo-fullstack-conf"
Plan: 0 to add, 1 to change, 0 to destroy.

52. $ terraform apply
aws_instance.example_fullstack_conf: Refreshing
state... (ID: i-01f7cec04)
aws_instance.example_fullstack_conf: Modifying...
(ID: i-01f7cec04)
tags.%: "0" => "1"
tags.Name: "" => "terraform-demo-fullstack-conf"
aws_instance.example_fullstack_conf:
Modifications complete after 6s (ID: i-01f7cec04)
Apply complete! Resources: 0 added, 1 changed, 0
destroyed.

54. $ terraform destroy
An execution plan has been generated and is shown
below.
Resource actions are indicated with the following
symbols:
- destroy
Terraform will perform the following actions:
- aws_instance.example_fullstack_conf
Plan: 0 to add, 0 to change, 1 to destroy.
aws_instance.example_fullstack_conf: Destruction
complete after 55s
Destroy complete! Resources: 1 destroyed.

56. DEMO

57. > VENTAJAS DE TERRAFORM
▸ Muy buenas abstracciones
▸ Soporta todos los Cloud Providers del
mercado
▸ Simple y de buenas prácticas

58. > DESVENTAJAS DE TERRAFORM
▸ Cuidado con los state files!
▸ Constante cambio
▸ Refactor

60. Elastic Container service (ECS) es una
manera de correr Docker en AWS

62. ECS Overview
EC2 Instance
ECS Cluster
ECS Scheduler
ECS Agent
ECS Tasks
ECS Task Definition
{
"cluster": "example",
"serviceName": ”foo",
"taskDefinition": "",
"desiredCount": 2
}
ECS Service Definition
{
"name": "example",
"image": "foo/example",
"cpu": 1024,
"memory": 2048,
"essential": true,
}

63. several servers
ECS
EC2 Instance
ECS Cluster
ECS Cluster: Instancias manejadas
por el ECS
Each server must run the ECS
Agent
ECS Agent
EC2 Instance
ECS Cluster
ECS Agent: Permite ejecutar tareas

64. ECS Service: long-running ECS
Task & ELB settings
{
"name": "example",
"image": "foo/example",
"cpu": 1024,
"memory": 2048,
"essential": true,
}
{
"cluster": "example",
"serviceName": ”foo",
"taskDefinition": "",
"desiredCount": 2
}
ECS Agent
EC2 Instance
ECS Task Definition ECS Service Definition
ECS Cluster
ECS Task: Containers a montar
con los recursos necesarios
ECS Service: Controla y mantiene
las instancias de una tarea específica

65. ECS Scheduler: Deploys Tasks
across the ECS Cluster
{
"name": "example",
"image": "foo/example",
"cpu": 1024,
"memory": 2048,
"essential": true,
}
{
"cluster": "example",
"serviceName": ”foo",
"taskDefinition": "",
"desiredCount": 2
}
ECS Agent
ECS Tasks
EC2 Instance
ECS Task Definition ECS Service Definition ECS Scheduler
ECS Cluster
ECS Scheduler: Se encarga del
deploy de las tareas en el cluster

66. resource "aws_ecs_cluster" "example_cluster" {
name = "example-cluster"
}
resource "aws_autoscaling_group" "ecs_cluster_instances" {
name = "example-cluster-instances"
min_size = 4
max_size = 4
launch_configuration =
"${aws_launch_configuration.ecs_instance.name}"
}
Creando el cluster…

67. Creando la tarea…
resource "aws_ecs_task_definition" "noteboard_api"{
family = "noteboard-api"
container_definitions = <<EOF
[{
"name": "noteboard-api",
"image": "emaraschio/noteboard-api",
"cpu": 1024,
"memory": 768,
"portMappings": [{"containerPort": 3000,"hostPort": 3000}]
}]
EOF
}

68. Creando el Load Balancer…
resource "aws_elb" "noteboard_api" {
name = "noteboard_api"
listener {
instance_port = "3000"
instance_protocol = "http"
lb_port = "3000"
lb_protocol = "http"
}
}

69. Creando el servicio…
resource "aws_ecs_service" "noteboard_api" {
name = "noteboard-api"
cluster = "${aws_ecs_cluster.example_cluster.id}"
task_definition = "${aws_ecs_task_definition.noteboard_api.arn}"
desired_count = 1
load_balancer {
elb_name = "${aws_elb.noteboard_api.id}"
container_name = "noteboard-api"
container_port = 3000
}
}

70. CODE & DEMO

71. > VENTAJAS DE ECS
▸ No tiene costo extra
▸ Integra con los load-balancers
▸ Es de los cluster managers más simples
▸ Tiene auto-scaling
▸ Mucho por crecer con Kubernetes!

72. > DESVENTAJAS DE ECS
▸ El monitoreo es mínimo
▸ No tiene service discovery
▸ Cantidad de permisos de configuración

73. > PATH
▸ Create React App -> Client
▸ Ruby on Rails -> API
▸ Docker & docker-compose
▸ Terraform -> Provider AWS

74. ¿PREGUNTAS?

75. > MUCHAS GRACIAS
https://sysarmy.com.ar/
http://maraschio.com/

76. HTTP://FSC.SYSAR.MY/