入社してから運用している
サービスの運用改善奮闘記
JJUG CCC 2017 FALL 2017/11/18
#jjug_ccc #ccc_e5
フリュー株式会社
佐藤慧太 @SatohJohn
自己紹介
2
本日の目的
3
JJUG CCCとフリュー
4
今回も
「改善」について話します
5
目次
6
ピクトリンク
7
ピクトリンク
8
ピクトリンク
などなどたくさんの機能がある
9
目次
10
課題
11
The Twelve-Factor App
12
The Twelve-Factor App
13
The Twelve-Factor App - III. 設定
14
一元管理の考慮点
15
Spring Cloud Config
16
Spring Cloud Config
17
Spring Cloud Config
18
configサーバの場所が
変わると設定変えなきゃ�いけない
19
Service Discovery
(Netflix Eureka)
20
Service Discovery
21
Service Discovery
22
Service Discovery を使った�Spring Cloud Config の メリット
23
Service Discovery を使った�Spring Cloud Config の デメリット
24
configサーバ(bootstrap.yml)
25
spring:
application:
name: アプリケーション名（clientが指定する
spring.cloud.config.server:
git:
uri: configのレポジトリ
username: githubのusername
password: githubのpassword
eureka.client.serviceUrl.defaultZone: eurekaサーバの場所
client側(bootstrap.yml) Spring Bootから繋ぐ場合
26
spring:
cloud:
config:
name: oracle-rdbms(取得してくる情報)
profile: prod
label: master
discovery:
enabled: true
serviceId: configサーバの名前
eureka.client.serviceUrl.defaultZone: eurekaサーバの場所
client側(bootstrap.yml) Spring Bootから繋ぐ場合
27
spring:
cloud:
config:
name: oracle-rdbms(取得してくる情報)
profile: prod
label: master
discovery:
enabled: true
serviceId: configサーバの名前
eureka.client.serviceUrl.defaultZone: eurekaサーバの場所
github上のリソースファイル
28
リソースの一元管理が
できるようになった
29
今後
30
目次
31
課題
32
Require.js
33
Require.js - 問題点
34
webpack
35
webpack - 問題点
36
webpack実行環境の作成
37
非エンジニアの作業を
考えると
Node.jsのインストールは
敷居が高い
38
運用スタイル
39
環境構築の考慮点
40
frontend maven plugin
41
frontend maven pluginのメリット
42
frontend maven pluginのデメリット
43
frontend maven pluginを使う際のpom.xmlの設定
44
<plugin>
<executions>
<execution>
<id>install node</id>
<goals><goal>install-node-and-npm</goal></goals>
</execution>
<execution>
<id>npm install</id>
<goals><goal>npm</goal></goals>
</execution>
<execution>
<id>webpack build</id>
<goals><goal>webpack</goal></goals>
</execution>
</executions>
</plugin>
frontend maven pluginのTips
45
JavaScriptの依存解決が�できた
46
webpackによる改善点
47
frontend maven pluginのデモ
48
https://github.com/furyu-john/frontend-maven
今後
49
gulp.js
50
目次
51
課題
52
スプレッドシートの内容
53
UIテストを自動化したい
54
自動化の考慮点
55
Gauge
56
Gauge
57
Gaugeのメリット
58
Gaugeのデメリット
59
Gaugeのプロジェクト構成
60
Gaugeのプロジェクト構成
61
Gauge
Gauge
Java
DbUnit
Selenide
Gaugeの用語
62
Gauge | 説明 | ユニテ |
シナリオ | テスト単位 | @Testの�メソッド |
ステップ | 実施内容 | コード一行 |
コンセプト | ステップの 集合 | メソッド |
specファイルの記述方法
63
# ログイン
======================
## 非会員がトップページにアクセスした場合、ログイン画面に遷移する
* "/top/menu"にアクセスする
* URLが"/login/top"か検証する
* ログイン画面が表示されているか検証する
stepの定義
64
@Step("<url>にアクセスする")
public void openUrl(String url) {
Selenide.open(url);
}
@Step("URLが<url>か検証する")
public void verifyUrl(String url) {
String actualUrl = Selenide.url();
assertThat(actualUrl, is(url));
}
@Step("ログイン画面が表示されているか検証する")
public void verifyPageIsLogin() {
$("input[type='email']").should(exist);
$("input[type='password']").should(exist);
$("input[value='ログイン']").should(exist);
}
specファイルの記述方法(ファイル)
65
* 初期データとして<file:specs/ログイン/init01.xml>を登録する
specファイル
定義
@Step("初期データとして<file>を登録する")
public void addRecords(String records) throws Exception {
IDataSet dataSet = getDataSet(records);
DbunitManager.insertRecords(dataSet);
}
specファイルの記述方法(テーブル)
66
* 以下のテーブルをクリアする
|name |
|---------------------------|
|HOGE |
|FUGA |
|PIYO |
specファイル
定義
@Step("以下のテーブルをクリアする <table>")
public void truncateTable(Table table) {
List<String> tableNames = table.getTableRows()
.stream().map(r -> r.getCell("name")).collect(Collectors.toList());
DbunitManager.truncateTables(tableNames);
}
SetupとTear down
67
# 通常有料会員化
======================
* ピクトリンクにログインする
…..ほにゃらら......
___
* "9000000000000"のアカウント情報を以下のテーブルから削除する
|table |
|---------|
| ACCOUNT |
| SESSION |
| COOKIE_LOGIN |
* キャリアサイトをログアウトする
大きくなってきたらコンセプトにまとめる
68
* Topページが表示されていること
specファイル
# Topページが表示されていること
* ページタイトルが"ピクトリンク"であるか検証する
* URLが"/top/menu"か検証する
cptファイル
詰まったこと
69
Chrome Driver
70
mavenから実行する
71
UIテストの自動化が�できた
72
Gaugeのデモ
73
https://github.com/furyu-john/gauge-sample
今後
74
目次
75
まとめ
76
まとめ
77
最後に
78
フリューでは
エンジニアを募集してます
79
80
81
一緒に働きませんか！？
82
Fin
83