getting started ansible


centOSを3つ立ち上げて、そのうちの一つにepel、ansibleをインストールします。

vagrant.file

  config.vm.define "host" do |node|
    node.vm.box = "bento/centos-6.7"
    node.vm.hostname = "host"
    node.vm.network :private_network, ip: "192.168.43.51"
  end

  config.vm.define "web" do |node|
  node.vm.box = "bento/centos-6.7"
    node.vm.hostname = "web"
    node.vm.network :private_network, ip: "192.168.43.52"
  end

  config.vm.define "db" do |node|
  node.vm.box = "bento/centos-6.7"
    node.vm.hostname = "db"
    node.vm.network :private_network, ip: "192.168.43.53"
  end

vagrant ssh host
[vagrant@host ~]$ wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
[vagrant@host ~]$ sudo rpm -Uvh epel-release-6-8.noarch.rpm
[vagrant@host ~]$ sudo yum -y install ansible
[vagrant@host ~]$ ansible --version
ansible 2.2.0.0
  config file = /etc/ansible/ansible.cfg
  configured module search path = Default w/o overrides

vi .ssh/config

Host web
 HostName 192.168.43.52
Host db
 HostName 192.168.43.53

アクセス権を変更し、秘密鍵、公開鍵を作成して、web, dbにcopy。

vagrant@host ~]$ chmod 600 .ssh/config
[vagrant@host ~]$ ssh-keygen -t rsa
[vagrant@host ~]$ ssh-copy-id web
[vagrant@host ~]$ ssh-copy-id db

すると、web, dbにログインできるようになります。

[vagrant@host ~]$ ssh web
[vagrant@web ~]$ exit
logout
Connection to 192.168.43.52 closed.
[vagrant@host ~]$ ssh db
[vagrant@db ~]$

hostファイルの作成

[vagrant@host ~]$ vi hosts

[web]
192.168.43.52

[db]
192.168.43.53

[vagrant@host ~]$ vi ansible.cfg

[defaults]
hostfile = ./hosts

Chef template

chef-repo > site-cookbooks > hello > recipes > default.rb

template "index.html" do 
	path "/var/www/html/index.html"
	source "index.html.erb"
	mode 0644
end

chef-repo > site-cookbooks > hello > templates > default > index.html.erb

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	hello
</body>
</html>

MinGW　mysys-opensshとmsys-rsyncのインストール

mysys-opensshとmsys-rsyncをインストールし、windowsの環境変数に、C:\MinGW\bin;C:\MinGW\msys\1.0\binを追加。C:\MinGW\msys\1.0\etc\fstabにc: /cygdrive/cを追加して、再度\chef\chef-repo> knife solo cook 192.168.33.10 –ssh-user vagrantを実行。

resolving cookbooks for run list: ["hello"]
Synchronizing Cookbooks:
  - hello (0.1.0)
Installing Cookbook Gems:
Compiling Cookbooks...
Converging 1 resources
Recipe: hello::default
  * log[Hello world] action write


Running handlers:
Running handlers complete
Chef Client finished, 1/1 resources updated in 46 seconds

出来ました！長かった。。。

workstationからvimをインストール
chef-repo > site-cookbooks > hello > recipes > default.rb

package "vim-enhanced" do 
 action :install 
end

Running Chef: sudo chef-solo -c ~/chef-solo/solo.rb -j ~/chef-solo/dna.json
Starting Chef Client, version 12.16.42
resolving cookbooks for run list: ["hello"]
Synchronizing Cookbooks:
  - hello (0.1.0)
Installing Cookbook Gems:
Compiling Cookbooks...
Converging 1 resources
Recipe: hello::default
  * yum_package[vim-enhanced] action install
    - install version 7.4.629-5.el6 of package vim-enhanced

Running handlers:
Running handlers complete
Chef Client finished, 1/1 resources updated in 02 minutes 02 seconds

a

iptable: stop

service "iptables" do
	action :stop
end

[vagrant@localhost ~]$ sudo service iptables status
iptables: ファイアウォールが稼働していません。

getting started Chef

Chefはインフラをコードで記述する技術で、workstationからchef serverにcookbookを送って、nodeの管理を行います。
Chef

workstationにchefのインストール

gem install chef
gem install knife-solo

knife-configureで設定していきます。

knife configure

1. Chefのリポジトリ(cookbook)を作成…workstation
2. Nodeをchefに対応する
3. cookbookを作る
4. cookbookをnodeに反映

リポジトリ作成

> knife solo init chef-repo
> cd chef-repo

nodeをchef対応にする

> knife solo prepare 192.168.33.10 --ssh-user vagrant
Bootstrapping Chef...
vagrant@192.168.33.10's password:
Thank you for installing Chef!
Generating node config 'nodes/192.168.33.10.json'...

workstationよりcookbookの作成

\chef-repo> knife cookbook create hello -o site-cookbooks

chef-repo > site-cookbooks > hello > recipes > default.rb

#
# Cookbook Name:: hello
# Recipe:: default
#
# Copyright 2016, YOUR_COMPANY_NAME
#
# All rights reserved - Do Not Redistribute
#
log "hello world"

chef-repo > nodes > 192.168.33.10.json

{
  "run_list": [
  	"recipe[hello]"
  ],
  "automatic": {
    "ipaddress": "192.168.33.10"
  }
}

\chef\chef-repo> knife solo cook 192.168.33.10 --ssh-user vagrant
ERROR: RuntimeError: Failed to launch command ["rsync", "-rL", "--chmod=ugo=rwX", "--rsh=ssh vag
--exclude=revision-deploys", "--exclude=.git", "--exclude=.hg", "--exclude=.svn", "--exclude=.bz
/gems/knife-solo-0.6.0/lib/knife-solo/resources/patch_cookbooks/", ":~/chef-solo/cookbooks-1"]

rsyncコマンドがないとのエラー表示

Processing　Classとanimation

int num = 500;
Point[] points = new Point[num];

void setup() {
  size(640, 360, P3D);
  pixelDensity(displayDensity());

  for (int i = 0; i < num; i++) {
    points[i] = new Point();
  }
}

void draw() {
  background(255);
  translate(width/2, height/2, 0);
  rotateY(frameCount * 0.01);

  for (int i = 0; i < num; i++) {
    points[i].update();
    points[i].display();
  }

  for (int i = 0; i < num; i++) {
    for (int j = i + 1; j < num; j++) {
      float d = dist(
        points[i].x, 
        points[i].y, 
        points[i].z, 
        points[j].x, 
        points[j].y, 
        points[j].z
        );
      if (d < 40) {
        stroke((int) map(d, 0, 40, 0, 255));
        strokeWeight(1);
        line(
          points[i].x, 
          points[i].y, 
          points[i].z, 
          points[j].x, 
          points[j].y, 
          points[j].z
          );
      }
    }
  }
}

Point.java

class Point {
  float x;
  float y;
  float z;
  float targetX;
  float targetY;
  float targetZ;
  float radius;
  
  Point() {
    setTarget();
    x = targetX;
    y = targetY;
    z = targetZ;
  }
  
  void update(){
    if (frameCount % 120 == 0){
      setTarget();
    }
    x += (targetX - x) * 0.05;
    y += (targetY - y) * 0.05;
    z += (targetZ - z) * 0.05;
  }
  
  void setTarget(){
    if (random(2) < 1){
      radius = 150;
    } else {
      radius = 75;
    }
    float phi = random(TWO_PI);
    float unitZ = random(-1, 1);
    targetX = radius * sqrt(1 - unitZ * unitZ) * cos(phi);
    targetY = radius * sqrt(1 - unitZ * unitZ) * sin(phi);
    targetZ = radius * unitZ;
  }
  
  void display() {
    stroke(0);
    strokeWeight(3);
    point(x, y, z);
  }

}

Processingで球体の描画

for文でdThetaを増やしながら、rotateYをframeCountで増やして回転させています。

float radius = 150;
float dPhiStep = 0;
float dPhiStepVelocity = 0.05;

void setup(){
  size(640, 360, P3D);
  pixelDensity(displayDensity());
}

void draw(){
  background(255);
  translate(width/2, height/2, 0);
  rotateY(frameCount * 0.02);
  
  float lastX = 0;
  float lastY = 0;
  float lastZ = 0;
  
  for(float dTheta = 0, dPhi = 0; dTheta <= 180; dTheta++, dPhi += dPhiStep){
    float theta = radians(dTheta);
    float phi = radians(dPhi);
    
    float x = radius * sin(theta) * cos(phi);
    float y = radius * sin(theta) * sin(phi);
    float z = radius * cos(theta);
    
    
    
    stroke(0);
    if (lastX != 0){
    strokeWeight(1);
    line(lastX, lastY, lastZ, x, y, z);
    }
    strokeWeight(8);
    point(x, y, z);
    
    lastX = x;
    lastY = y;
    lastZ = z;
  }
  dPhiStep += dPhiStepVelocity;
  
}

Todo list by vue.js

v-on, v-attr, v-classで機能追加しています。データの追加はpush,削除はspliceです。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My ToDos</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<style>
		body {
			font-size: 13px;
			font-family: Arial;
		}
		h1 {
			font-size: 14px;
			border-bottom:1px solid #ddd;
			padding: 0 0 5px;
		}
		ul {
			list-style-type: none;
			padding: 0;
			margin: 0 0 5px;
		}
		ul > li {
			padding: 0 0 5px;
		}
		input[type=text]{
			padding: 4px;
			border-radius: 4px;
		}
		.done {
			text-decoration: line-through;
			color: #aaa;
		}
		.linkLike {
			color: blue;
			cursor: pointer;
			font-weight: normal;
		}
	</style>
</head>
<body>
	<div id="myapp">
		<h1>
			My ToDos
			<small>({{remaining}}/{{todos.length}})</small>
			<span class="linkLike" v-on="click:purge">[purge]</span>
		</h1>
		<ul>
			<li v-repeat="todos">
				<input type="checkbox" v-attr="checked: done" v-on="click: done = !done">
				<span v-class="done: done">{{task}}</span>
				<span class="linkLike" v-on="click:del($index)">[x]</span>
			</li>
		</ul>
		<input type="text" v-model="newTask" placeholder="new task..." v-on="keyup:add | key enter">
	</div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
	<script>
	var vm = new Vue({
            el: '#myapp',
            data: {
            	newTask: '',
            	todos : [
            	 {task: 'task 1', done: false},
            	 {task: 'task 2', done: true},
            	 {task: 'task 3', done: false}
            	]
            },
            computed: {
            	remaining: function(){
            		var count = 0;
            		for (var i = 0, j = this.todos.length; i < j; i++){
            			if(!this.todos&#91;i&#93;.done){
            				count++;
            			}	
            		}
            		return count;
            	}
            },
            methods: {
            	add: function(){
            		this.todos.push({
            			task: this.newTask,
            			done: false
            		});
            		newTask = ''
            	},
            	del: function(index){
            		if (confirm("are you sure?")){
            			this.todos.splice(index, 1);
            		}
            	},
            	purge: function(){
            		var i = this.todos.length;
            		while (i--){
            			if(this.todos&#91;i&#93;.done){
            				this.todos.splice(i, 1);
            			}
            		}
            	}
            }
        });
	</script>
</body>
</html>

Vue.js

-インタラクティブなインターフェイス
-JavaScriptフレームワーク
-軽量、他のライブラリに依存しない
-ブラウザIE8以下は対応しない
object data/method interface MVVM

CDN :https://cdnjs.com/libraries/vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.0/vue.common.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<style>
	</style>
</head>
<body>
	<div id="mycounter">
		<div v-text="count"></div>
		<button v-on="click: countUp">Up</button>
	</div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
	<script>
	// object data/method interface MVVM
	// counter

	var vm = new Vue({
		el: '#mycounter',
		data: {
			count: 0
		},
		methods: {
			countUp: function(){
				this.count++;
			}
		}
	});
	</script>
</body>
</html>

mustatch, v-html

<div>{{'content: ' + content}}</div>
<div v-html="content"></div>

表示非表示

var vm = new Vue({
		el: '#myapp',
		data: {
			content: 'helloworld',
　　　　　　　　　　　　　　myStyle: 'red'
			showContent: true
		}
	});

v-repeat

<div id="myapp">
		<ul>
			<li v-repeat="d1">{{$value}}</li>
		</ul>
		<ul>
			<li v-repeat="d2">{{$key}} - {{$value}}</li>
		</ul>
		<ul>
			<li v-repeat="d3">{{name}} - {{score}}</li>
		</ul>
	</div>

		<p>
			<input type="text" v-model="name">
			{{name}}
		</p>

フィルター

		<div v-text="msg | uppercase"></div>
		<div v-text="msg | capitalize"></div>
		<div>{{$data | json}}</div>
        <div id="myapp">
		<li v-repeat="users | filterBy 't' in 'name'">
                <li v-repeat="users | filterBy | orderBy 'name' -1">
		{{name}} - {{score}}
	</div>

computed property

	<div id="myapp">
		side: <input type="text" v-model="side">
		area: {{area}}
	</div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
	<script>
	var vm = new Vue({
            el: '#myapp',
            data: {
            	side: 20
            },
            computed: {
            	area: function(){
            		return this.side * this.side;
            	}
            }
        });
	</script>

TypeScript tutor

静的型付け

var x:number  = 10;
x = "hello";

コンパイルエラーとなります。

var x:number  = 10;
x = "hello";

様々な型

// number, string boolean, any
var i = 10;
var x; // var x: any

var results: number[]
results = [10, 5, 3]

列挙型

enum Signal {
  Red = 0,
  Blue = 1,
  Yellow = 2
}
var result: Signal;

// if (result === Signal.Yellow){}
// if (result === Signal['Yellow']){}
console.log(Signal[2])

関数宣言

function add(a: number, b?: number): number {
 if (b){
 return a + b;
 } else{
 return a + a;
 }
}

console.log(add(5, 3));

関数式

var add = (a: number, b: number): number =>{
 return a + b;
}
var add = (a: number, b: number): number => a + b
console.log(add(5, 3));

関数のオーバーロード

function add(a: number, b: number): number; //シグネチャ
function add(a: string, b: string): string;

function add(a: any, b: any): any {
 if(typeof a === "string" && typeof b === "string"){
 return a + " " + b;
 }
 return  a + b;
}
console.log(add(5, 3));
console.log(add("hello", "world"));

class

class User {
  name: string;
  constructor(name: string){
     this.name = name;
  }
  sayHi(); void {
  console.log("hi! i am " + this.name);
  }
}

var tom = new User("tom");
console.log(tom.name);
tom.sayHi();

getter, setter

class User {
  name: string;
  constructor(private _name: string){
     this.name = name;
  }
  sayHi(); void {
  console.log("hi! i am " + this.name);
  }
  get name(){
   return this._name;
  }
  set name(newValue: string){
    this._name = newValue;
  }
}

extends, override

class User {
  name: string;
  constructor(private _name: string){
     this.name = name;
  }
  sayHi(); void {
  console.log("hi! i am " + this.name);
  }
}

class AdminUser extends User{
 private _age: number;
 constructor(_name: string, _age: number){
  super(_name);
  this._age = _age;
 }
  public sayHi(): void {
    console.log("my age:" + this._age);
    super.sayHi();
  }
}

private:メソッドの中のみ可能
protected:クラスの中のみアクセス可能

静的メンバ:static

class User {
  name: string;
  constructor(private _name: string){
     this.name = name;
     User.count++;
  }
  sayHi(); void {
  console.log("hi! i am " + this.name);
  }
  static count: number = 0;
  
}

インターフェイス

interface Result {
  a: number;
  b: number;
}


function getTotal(result: {a: number; b: number}){
  return result.a + result.b;
}

var result = {
 a: 32,
 b: 58
};

console.log(getTotal(result));

interfaceの継承

interface SpringResult {
  a: number;
}

interface FallResult{
 b: number;
}

interface FinalResult extends SpringResult, FallResult {
 final?: number;
}

ジェネリクス

function getArray<T>(value: T): T[]{
 return[value, value, value];
}

console.log(getArray<number>(3));
console.log(getArray<string>("hello"));

ジェネリクスの制約

interface Result {
  a: number;
  b: number;
}


class MyData<T extends Result>{
  constructor(public value: T){}
  getArray(): T[]{
    return [this.value, this.value, this.value];
  }
}

内部モジュール

module UserModule{
  export var name = "yamada";
  export modlue AddressModlue {
     var zip = "123-4567"
  }
}

console.log(UserModule.name);
console.log(UserModlue.AddressModlue.zip);

Getting started Type Script

TypeScriptは大規模開発にも適したjavascriptの拡張ランゲージです。microsftが開発しています。npmでインストールします。

[vagrant@localhost typescript]$ sudo npm install -g typescript
/usr/bin/tsc -> /usr/lib/node_modules/typescript/bin/tsc
/usr/bin/tsserver -> /usr/lib/node_modules/typescript/bin/tsserver
typescript@2.0.10 /usr/lib/node_modules/typescript

拡張子はtsを使います。
main.ts

class User {

}

console.log("hello world")

変換後のjsファイルです。
main.js

var User = (function () {
    function User() {
    }
    return User;
}());
console.log("hello world");

[vagrant@localhost typescript]$ tsc main.ts
[vagrant@localhost typescript]$ ls
main.js  main.ts
[vagrant@localhost typescript]$ node main.js
hello world