Emberで他のApiサーバを使うとき

概要

ローカルで開発してデータだけApiサーバから取得したいとき、
server/配下をどうにかすると便利な話。

DSRESTAdapterにHostを設定しても良いのだが、
開発だけ向き先を別ドメインに変えたい時などにしたい場合はhttp-proxyを使用する。

http-proxy

作成

proxyファイルを作成

ember g http-proxy <Local Path> <Remote URL>

doc

作成の際にserver/index.jsの上書きを聞かれるので問題ない場合はy
すでに記述がある場合は上書きしないように気をつける。
上書きをしない場合はserver/index.jsで”proxies”が読み込まれる用にする。

1
2
3
4
5
6
7
8
9
10
module.exports = function(app) {
var globSync = require('glob').sync;
var proxies = globSync('./proxies/**/*.js', { cwd: __dirname }).map(require);

// Log proxy requests
var morgan = require('morgan');
app.use(morgan('dev'));

proxies.forEach(function(route) { route(app); });
};

api配下の全てを指定するとき

例えばhttp://your-domain/api/*を利用したい場合などは

proxyファイル作成

ember g http-proxy api /api

上記のコマンドでapiのproxyファイルが作成される

server/proxies/api.jsファイル修正

作成したserver/proxies/api.jsを修正

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var proxyPath = '/api';

module.exports = function(app) {
// For options, see:
// https://github.com/nodejitsu/node-http-proxy
// 追記
var serverUrl = 'http://rco-web.shifop2.kst3.jp:80';

options = {
target: serverUrl,
changeOrigin: false
}

// var proxy= require('http-proxy').createProxyServer({});
var proxy = require('http-proxy').createProxyServer(options);

proxy.on('error', function(err, req) {
console.error(err, req);
});

app.use(proxyPath, function(req, res, next){
// include root path in proxied request
// リクエストパスをサーバUrlとローカルパス、リクエストパスに書き換え
req.url = serverUrl + proxyPath + req.url;
// proxy.web(req, res, { target: '/api' });
proxy.web(req, res);
});
};

それでもmockを利用したい場合などは設定値にする

server/index.jsを変更し、起動時environmentに値を指定する

ember sever 起動時 ember server --environment=offline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
module.exports = function(app, options) {
var globSync = require('glob').sync;
var mocks, proxies;

if (options.environment === 'offline') {
mocks = globSync('./mocks/**/*.js', {
cwd: __dirname
}).map(require);
} else {
proxies = globSync('./proxies/**/*.js', {
cwd: __dirname
}).map(require);
}

// Log proxy requests
var morgan = require('morgan');
app.use(morgan('dev'));

if (mocks) {
mocks.forEach(function(route) {
route(app);
});
}

if (proxies) {
proxies.forEach(function(route) {
route(app);
});
}
};

参考

※注 proxyファイルの書き方が、何か違うかもしれない。。

追記

上記の用に設定しなくてもserver/index.jsでmockを読み込まない用にして、
サーバ起動さの際にproxyを指定してあげれば良い。ember sever --proxy 'http://your-domain/'

参考

いちいちServerに設定するのが面倒な場合は~/.ember-cliに記述もできる

1
2
3
4
5
{
"liveReload" : true,
"environment" : "server",
"proxy" : "http://your-domain"
}

doc

ブログをHexoに移行しました

WordpressからHexoに移行した話

理由

  • 多機能だが全然使いこなせない
  • gitで全てを管理できない

上記が主な理由なのだが、何を隠そう元々4エントリーしかなかったので
心機一転環境を変えてモチベーションを上げようというのが狙い。。

移行先の選定

下記のサイトを参考に選定しました

最終的にJekyllHexoで迷い、
Node.jsの勉強になるかと思い「Hexo」を選びました。

セットアップ

公式サイトを参考にインストール(node,npmはインストールは省き)

Hexo インストール

1
2
3
4
$ npm install hexo-cli -g
$ hexo init weblog
$ cd weblog
$ hexo server

Hello Worldの記事が表示されます
すごい簡単

GitHub Pages

サーバはGitHubPagesを利用しようと思ったので、
GitHubにレポジトリを用意

1
2
3
4
5
6
$ cd weblog
$ git init
$ git remote add origin git@github.com:tetuo41/weblog.git
$ git add .
$ git commit -m "first commit"
$ git push origin master

今回は何も考えずmasterブランチで管理しようと思う

Wordpressの記事を移行

Wordpressから、記事のxmlをエクスポートしHexoに取り込む
取り込む際には「hexo-migrator-wordpress」プラグインを利用

1
2
3
$ cd weblog
$ npm install hexo-migrator-wordpress --save
$ hexo migrate wordpress <source>

取り込むとsource/_post/配下に記事が作成される
画像などは修正する必要があるので各々修正

私は画像はpost_asset_folderを利用せず、<img>タグで運用することにしました。
post_asset_folder: trueにすると記事ごとにフォルダが作成されそこに画像データを入れると
記事内でタグで便利になるっぽいですが、私はそんなに画像を使わないだろうと判断し
source/img/フォルダを作成し、そこを参照するように変更

Deploy

準備ができたので、Deploy作業設定ファイル_config.ymlを色々変更

サイトの基本情報系

1
2
3
4
5
6
7
# Site
title: Stay Rad
subtitle:
description:
author: Hiroki Hatsushika
language: ja
timezone: Asia/Tokyo

テーマ(light

1
theme: light

Deployment

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:tetuo41/weblog.git
branch: gh-pages
message: hexo deploy

私はGitHub Pagesを利用しようと思うので
別途https://github.com/hexojs/hexo-deployer-gitプラグインを入れとく

設定変更が終わったらいよいよDeploy

1
$ hexo d -g

GitHub Pageが表示される

私は独自のドメインを利用したのでCNAMEを設置して完了

感想

非常にメンテナンスしやすくなった。
MySQLサーバも必要ないし、GitHub Pageも利用できるしGitで管理もできるようになった、
画像の運用に関しては色々検討したいが、取り敢えずPluginを漁ってみようと思う。
ゆくゆくはPluginも作りたいw

HexoにWordPressの記事をマイグレートする
hexo-セットアップメモ
Hexo でブログをつくるまで

FireBase試し (EmberFire)

Google i/oでFirebaseが気になったので試しにどんなものかさわってみた
https://events.google.com/io2016/

■ 環境

node v4.4.4
npm v2.15.1
bower v1.7.9

ember v2.5.1
ember-cli v2.5.0
emberFire v1.6.6

EmberFireのTutorialを参考に試してみる

https://www.firebase.com/docs/web/libraries/ember/

Guide

https://www.firebase.com/docs/web/libraries/ember/guide.html

■ 準備

FireBase ConsoleでApp作成

■ 作成

Ember App 作成

ember-cliを利用してAppを作成

1
$ ember new emberFire-study

emberFireインストール

こちらもember-cliを使用してemberFireをインストール

1
$ ember install emberfire

インストールすると「bower.json」と「app/adapters/application.js」に
emberFireが追記されていることがわかる

emberFire設定

  • 「config/environment.js」内の先ほど作成したfirebaseのURLを設定する
1
firebase:'https://YOUR-FIREBASE-APP.firebaseio.com/'

データ作成用にモデル作成

ember-cliでモデルを作成

1
$ ember generate model post title:string body:string timestamp:number

app/models/post.js

1
2
3
4
5
export default DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
timestamp: DS.attr('number')
});

データ作成用にテンプレート作成

1
$ ember generate template posts

データ投入処理追加

  • template
1
2
3
4
5
6
7
8
9
10
11
12
<h2>New Post</h2>
<ul class="post-publish">
<li>
{{input value=title placeholder="Title"}}
</li>
<li>
{{textarea value=body placeholder="Body"}}
</li>
<li>
<button {{action "publishPost"}}>Publish</button>
</li>
</ul>
  • controller
1
$ ember generate controller posts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Ember from 'ember';

// app/controllers/posts.js
export default Ember.Controller.extend({
sortProperties: ['timestamp'],
sortAscending: false, // sorts post by timestamp
actions: {
publishPost: function() {
var newPost = this.store.createRecord('post', {
title: this.get('title'),
body: this.get('body'),
timestamp: new Date().getTime()
});
newPost.save();
}
}
});

サーバを立ち上げ動作確認

1
$ ember s

http://localhost:4200/

http://localhost:4200/posts

「Publis」ボタンを押してblogを投稿

FireBase Console画面にて確認

無事登録されていることを確認

データ一覧を参照する処理を追記

  • route
1
$ ember generate route posts

途中でTemplesを上書きするか聞いてくるので取り敢えず「No」!

1
2
3
4
5
export default Ember.Route.extend({
model: function() {
return this.store.findAll('post');
}
});

先ほどのtemplesに下記を追記

1
2
3
4
5
6
<section>
{{#each model as |post|}}
<div>{{post.title}}</div>
<div>{{post.body}}</div>
{{/each}}
</section>

サーバを立ち上げ動作確認

1
$ ember s

http://localhost:4200/posts

上記の通り登録したものが表示されればOK。
他にもコメントなどのリレーションのコードもあるが割愛w

GitHub

github

JAWSDAYS 2015でみたSession

memo

安達 輝雄


blog

土居 正行
https://speakerdeck.com/mdoi/kai-fa-suruyouniyun-yong-suruinhura-jaws-days-2015?slide=1

西谷 圭介

照井 将士

大崎 充博

cron Memo

$ vi /var/log/cron

passwd

pwconv

pwunconv

$ cat /etc/shadow

$service crond restart

Passenger Memo

必要なモノをインストール

1
$ yum install httpd httpd-devel apr-devel apr-util-devel curl-devel

Passengerをインストール

1
$ gem install passenger

apache moduleインストール

1
$ passenger-install-apache2-module

設定ファイル追加

1
2
3
LoadModule passenger_module ~/mod_passenger.so
PassengerRoot ~/passenger-x.y.z
PassengerDefaultRuby ~/ruby

httpd.conf 変更追加

1
$ vi /etc/httpd/conf.d/passenger.conf

Thanks for the link.
http://babiy3104.hateblo.jp/entry/2013/08/30/193034
http://morizyun.github.io/blog/passenger-install-apache-ruby-rails/
http://petitviolet.hatenablog.com/entry/20130804/1375604128

MIME type Memo

.doc application/msword
.xls application/vnd.ms-excel
.ppt application/vnd.ms-powerpoint

.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.pptx application/vnd.openxmlformats-officedocument.presentationml.presentation

vagrant Memo

64bitだったver

$ vagrant box add centos64_64 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20130427.box

$ init centos64_64

32bitver

$ vagrant box add centos64_32 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-i386-v20130427.box

Vargrant認識 Vargrantファイル作成

$ vagrant init centos64_32

起動

$ vagrant up

仮想サーバー接続

$ vagrant ssh

停止

$ vagrant halt

削除

$ vagrant destroy

Thanks for the link.
http://k-holy.hatenablog.com/entry/2013/08/30/192243

tmail

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
def mail_data(mFile)
file = File.open(mFile).read
mail = TMail::Mail.parse(file)
#p mail.to # 送信先
#p mail.from # 送信元
idx = 1 # ファイル名
mail.parts.each do |m|
if nil != m['content-disposition']
m.base64_decode
attach_fileNm = m['content-disposition']['filename']
#File.open("#{CLIENTDATAPATH}/#{attach_fileNm}.#{ext(m)}", 'w') do |f|
File.open("#{CLIENTDATAPATH}/#{attach_fileNm}", 'w') do |f|
f.write m.body
end
end
idx += 1
end

CTYPE_TO_EXT = {
'image/jpeg' => 'jpg',
'image/gif' => 'gif',
'image/png' => 'png',
'image/tiff' => 'tiff',
'text/plain' => 'txt',
'application/vnd.ms-excel' => 'csv'
}

def ext( mail )
CTYPE_TO_EXT[mail.content_type] || 'txt'
end

Thanks for the link.
ここ