Slide 1
Slide 1 text
フロントエンドエンジニア
（実稼働まで）
ひとりでできるもん
2018/10/18 NuxtMeetup#5
パーソルキャリア株式会社
株式会社オムニス
吉次洋毅
Slide 2
Slide 2 text
自己紹介
● 吉次 洋毅（ヨシツグ ヒロキ）
● 1991年生（27歳）
● 徳山高専 専攻科修了
● 経歴
○ 1年目〜3年目: ぐるなび（主にPHPエンジニア）
○ 3年目〜現在: パーソルキャリア（主にフロントエンド。 React, Vue/Nuxt。）
○ 今年の8月〜: オムニス（主にフロントエンド。 Vue/Nuxt。副業。）
Slide 3
Slide 3 text
今日お話すること
● DODAと（開発中の）開発中新サービスの紹介（前置き）
● nuxt-full-stack-templateの紹介
● Nodeサーバを実稼働に合わせて整える
あれ、Nuxtの話すくない...
Slide 4
Slide 4 text
2018/10/2 DODAはリブランディングして新しくなりまし
た。
とはいえ、サイトの使い方そのものは急に大きく変わるこ
とはない。
Slide 5
Slide 5 text
「検索、やめてみよう」→新規サービスとして作ろう
● 検索条件の難しさ
● ヒット件数の多さ
細かく条件を設定できて、たくさん情報が出るのはメリットだが、
人によってはデメリットにもなる
Slide 6
Slide 6 text
ざっくりイメージ
いくつかの求人を表示して興味の有無を選択
↓
機械学習
↓
いい感じのレコメンドを出す
※細かい検索はしない
※スキマ時間を有効活用できるように思考する時間をできるだけ削る
Slide 7
Slide 7 text
今日は鋭意開発中のサービスにまつわるお話です。
Slide 8
Slide 8 text
技術スタック（現時点）
● フロントエンド
○ Nuxt.js（SSR）
○ PWA（nuxt-pwa-module）
● バックエンド
○ Express.js
○ MySQL
※機械学習部分は別部隊が開発し、APIで連携している
これだけ。
今後、サービスのグロースに合わせて見直していく必要はあるかも。
Slide 9
Slide 9 text
体制（現時点） 人が少ない！
● インフラエンジニア: 1人（忙しい）
● フロントエンドエンジニア（サーバサイドも兼任）: 1人（吉次。それなりに時間を割け
る）
● 企画: 1人
● デザイナー: 1人（忙しい）
● 機械学習→別部隊
ものづくり先行で進め、適宜デザインを取り入れながら
少ない人数でローンチまでは早くしたい！
Slide 10
Slide 10 text
新規サービス。
とにもかくにもPoCを成立させる必要がある。
Slide 11
Slide 11 text
こんな環境でフロントエンドエンジニアが開発の（ほぼ）
全部をカバーできたら素敵！
Slide 12
Slide 12 text
ガワを作って企画のイメージを具体化させる
（フロントエンドエンジニアの強み）
＋
実は裏側も作っててちゃんとサービスとして動きます
（+αの価値）
Slide 13
Slide 13 text
良さそう（小並感）
Slide 14
Slide 14 text
そんなフロントエンドエンジニアのために作りました
Slide 15
Slide 15 text
Nuxtフルスタックアプリケーションテンプレート
[nuxt-full-stack-template]
https://github.com/gyarasu/nuxt-full-stack-template
[mysql57-docker]
https://github.com/gyarasu/mysql57-docker
Slide 16
Slide 16 text
構成はシンプル
これだけでも基本的な Webアプリケーションは作れる。
Slide 17
Slide 17 text
含んでいるもの
● Nuxt.js: フロントエンド（SSR）
○ 認証チェックミドルウェア
● Express.js: バックエンドAPI
○ MySQLへの接続
○ サンプルのAPI（認証ルート含む）
○ セッション管理
○ 【WIP】ロギング
○ 【WIP】環境別の設定ファイル
○ 【WIP】エラーハンドリング
○ 【WIP】マルチプロセスでの Nodeサーバ稼働・プロセス監視・ 80番ポートでの起動
● MySQLコンテナ
○ MySQL5.7
○ サンプルテーブル自動生成
Slide 18
Slide 18 text
package.json
Slide 19
Slide 19 text
【本題】Nodeサーバを実稼働に向けて整備する
● マルチプロセスでどうやって動かす？
● 80番ポート使える？（ApacheやNginxは使う？）
● クラスタ構成でうまくロギングできる？
Slide 20
Slide 20 text
マルチプロセス稼働
Slide 21
Slide 21 text
$npm run buld
$npm run start
Slide 22
Slide 22 text
productionモードで起動するが、
実稼働環境でこれで動かすことはなさそう
Slide 23
Slide 23 text
$npm run start cluster mode
コア数4のマシンで動かす場合
Slide 24
Slide 24 text
$npm run start cluster mode
コア数4のマシンで動かす場合
リソース持て余し
Slide 25
Slide 25 text
どうやるか？
● 自分でプログラムを書く
○ https://nodejs.org/api/cluster.html#cluster_how_it_works
● PM2を使う
○ http://pm2.keymetrics.io/docs/usage/cluster-mode/
Slide 26
Slide 26 text
どうやるか？
● 自分でプログラムを書く
○ https://nodejs.org/api/cluster.html#cluster_how_it_works
● PM2を使う
○ http://pm2.keymetrics.io/docs/usage/cluster-mode/
「自分で頑張らない」が幸せになる
秘訣？
クラスタ以外にもいろいろ楽。
Slide 27
Slide 27 text
PM2 vs 自力
自分で頑張る
ツールに任せる
これだけ。
instance: 0にしとくと勝手にそのマシンのコア数分の
クラスタで起動してくれる。
Slide 28
Slide 28 text
80番ポート問題
Slide 29
Slide 29 text
NodeでWebサーバを立てるときにつまずくこと
● 80番で動かしたい
○ well known portはrootユーザでの実行が必要
○ root以外のユーザでも起動ができる
○ http://pm2.keymetrics.io/docs/usage/specifics/#listening-on-port-80-wo-root
○ authbindを導入して、pm2のエイリアスを設定する
Slide 30
Slide 30 text
リバースプロキシとしてApacheやNginxは？
● Apache(80)×Node(3000)はあんまりやらない？
○ 駆動方式が違うものの組み合わせ（プロセス駆動 ×イベント駆動）
○ 他のサービス（例えば PHPのAPI）なども一緒にプロキシしたい場合？
● Nginx(80)×Node(3000)はよくある気がする
● 結論としては「無くてもできる」
Slide 31
Slide 31 text
クラスタ構成でのロギング
Slide 32
Slide 32 text
アクセスログ等を適切にファイル出力する
● クラスタ構成で1つのファイルにログ出力
○ それぞれのノードが 1つのファイルに書き込みに行くと干渉し合ってしまう
● pm2×log4jsで解決！
○
おまじない的にこれを書いておけば後は
PM2がよし
なにやってくれる。
Slide 33
Slide 33 text
PM2でできること
● プロセス監視とモニタリング
● ファイル変更時に自動的にプロセス再起動
● メトリクスの設定（コード内に埋め込んで計測）
● 環境別に環境変数設定
などなど。便利！
http://pm2.keymetrics.io/
Slide 34
Slide 34 text
フロントエンドの枠を飛び出そう！
Slide 35
Slide 35 text
終