フロントエンドエンジニア (実稼働まで) ひとりでできるもん

2018/10/18 NuxtMeetupでの登壇時の資料です（抜粋版）。

・Nuxt.jsを使って、Expressを含めたフルスタックのアプリケーションを実稼働させるための流れを書いています。
・Firebase等のBaasを使えばシンプルに解決する問題ではありますが、会社によってはそれらのクラウドサービスが利用できないことがあります。そういった状況を考慮した上で「典型的なWebサーバ+DBの構成でどう動かすか」を前提にしています。

Transcript

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