$30 off During Our Annual Pro Sale. View Details »

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

gyarasu
October 18, 2018

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

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

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

gyarasu

October 18, 2018
Tweet

More Decks by gyarasu

Other Decks in Technology

Transcript

  1. フロントエンドエンジニア
    (実稼働まで)
    ひとりでできるもん
    2018/10/18 NuxtMeetup#5
    パーソルキャリア株式会社
    株式会社オムニス
    吉次洋毅

    View Slide

  2. 自己紹介
    ● 吉次 洋毅(ヨシツグ ヒロキ)
    ● 1991年生(27歳)
    ● 徳山高専 専攻科修了
    ● 経歴
    ○ 1年目〜3年目: ぐるなび(主にPHPエンジニア)
    ○ 3年目〜現在: パーソルキャリア(主にフロントエンド。 React, Vue/Nuxt。)
    ○ 今年の8月〜: オムニス(主にフロントエンド。 Vue/Nuxt。副業。)

    View Slide

  3. 今日お話すること
    ● DODAと(開発中の)開発中新サービスの紹介(前置き)
    ● nuxt-full-stack-templateの紹介
    ● Nodeサーバを実稼働に合わせて整える
    あれ、Nuxtの話すくない...

    View Slide

  4. 2018/10/2 DODAはリブランディングして新しくなりまし
    た。
    とはいえ、サイトの使い方そのものは急に大きく変わるこ
    とはない。

    View Slide

  5. 「検索、やめてみよう」→新規サービスとして作ろう
    ● 検索条件の難しさ
    ● ヒット件数の多さ
    細かく条件を設定できて、たくさん情報が出るのはメリットだが、
    人によってはデメリットにもなる

    View Slide

  6. ざっくりイメージ
    いくつかの求人を表示して興味の有無を選択

    機械学習

    いい感じのレコメンドを出す
    ※細かい検索はしない
    ※スキマ時間を有効活用できるように思考する時間をできるだけ削る

    View Slide

  7. 今日は鋭意開発中のサービスにまつわるお話です。

    View Slide

  8. 技術スタック(現時点)
    ● フロントエンド
    ○ Nuxt.js(SSR)
    ○ PWA(nuxt-pwa-module)
    ● バックエンド
    ○ Express.js
    ○ MySQL
    ※機械学習部分は別部隊が開発し、APIで連携している
    これだけ。
    今後、サービスのグロースに合わせて見直していく必要はあるかも。

    View Slide

  9. 体制(現時点) 人が少ない!
    ● インフラエンジニア: 1人(忙しい)
    ● フロントエンドエンジニア(サーバサイドも兼任): 1人(吉次。それなりに時間を割け
    る)
    ● 企画: 1人
    ● デザイナー: 1人(忙しい)
    ● 機械学習→別部隊
    ものづくり先行で進め、適宜デザインを取り入れながら
    少ない人数でローンチまでは早くしたい!

    View Slide

  10. 新規サービス。
    とにもかくにもPoCを成立させる必要がある。

    View Slide

  11. こんな環境でフロントエンドエンジニアが開発の(ほぼ)
    全部をカバーできたら素敵!

    View Slide

  12. ガワを作って企画のイメージを具体化させる
    (フロントエンドエンジニアの強み)

    実は裏側も作っててちゃんとサービスとして動きます
    (+αの価値)

    View Slide

  13. 良さそう(小並感)

    View Slide

  14. そんなフロントエンドエンジニアのために作りました

    View Slide

  15. Nuxtフルスタックアプリケーションテンプレート
    [nuxt-full-stack-template]
    https://github.com/gyarasu/nuxt-full-stack-template
    [mysql57-docker]
    https://github.com/gyarasu/mysql57-docker

    View Slide

  16. 構成はシンプル
    これだけでも基本的な Webアプリケーションは作れる。

    View Slide

  17. 含んでいるもの
    ● Nuxt.js: フロントエンド(SSR)
    ○ 認証チェックミドルウェア
    ● Express.js: バックエンドAPI
    ○ MySQLへの接続
    ○ サンプルのAPI(認証ルート含む)
    ○ セッション管理
    ○ 【WIP】ロギング
    ○ 【WIP】環境別の設定ファイル
    ○ 【WIP】エラーハンドリング
    ○ 【WIP】マルチプロセスでの Nodeサーバ稼働・プロセス監視・ 80番ポートでの起動
    ● MySQLコンテナ
    ○ MySQL5.7
    ○ サンプルテーブル自動生成

    View Slide

  18. package.json

    View Slide

  19. 【本題】Nodeサーバを実稼働に向けて整備する
    ● マルチプロセスでどうやって動かす?
    ● 80番ポート使える?(ApacheやNginxは使う?)
    ● クラスタ構成でうまくロギングできる?

    View Slide

  20. マルチプロセス稼働

    View Slide

  21. $npm run buld
    $npm run start

    View Slide

  22. productionモードで起動するが、
    実稼働環境でこれで動かすことはなさそう

    View Slide

  23. $npm run start cluster mode
    コア数4のマシンで動かす場合

    View Slide

  24. $npm run start cluster mode
    コア数4のマシンで動かす場合
    リソース持て余し

    View Slide

  25. どうやるか?
    ● 自分でプログラムを書く
    ○ https://nodejs.org/api/cluster.html#cluster_how_it_works
    ● PM2を使う
    ○ http://pm2.keymetrics.io/docs/usage/cluster-mode/

    View Slide

  26. どうやるか?
    ● 自分でプログラムを書く
    ○ https://nodejs.org/api/cluster.html#cluster_how_it_works
    ● PM2を使う
    ○ http://pm2.keymetrics.io/docs/usage/cluster-mode/
    「自分で頑張らない」が幸せになる
    秘訣?
    クラスタ以外にもいろいろ楽。

    View Slide

  27. PM2 vs 自力
    自分で頑張る
    ツールに任せる
    これだけ。
    instance: 0にしとくと勝手にそのマシンのコア数分の
    クラスタで起動してくれる。

    View Slide

  28. 80番ポート問題

    View Slide

  29. NodeでWebサーバを立てるときにつまずくこと
    ● 80番で動かしたい
    ○ well known portはrootユーザでの実行が必要
    ○ root以外のユーザでも起動ができる
    ○ http://pm2.keymetrics.io/docs/usage/specifics/#listening-on-port-80-wo-root
    ○ authbindを導入して、pm2のエイリアスを設定する

    View Slide

  30. リバースプロキシとしてApacheやNginxは?
    ● Apache(80)×Node(3000)はあんまりやらない?
    ○ 駆動方式が違うものの組み合わせ(プロセス駆動 ×イベント駆動)
    ○ 他のサービス(例えば PHPのAPI)なども一緒にプロキシしたい場合?
    ● Nginx(80)×Node(3000)はよくある気がする
    ● 結論としては「無くてもできる」

    View Slide

  31. クラスタ構成でのロギング

    View Slide

  32. アクセスログ等を適切にファイル出力する
    ● クラスタ構成で1つのファイルにログ出力
    ○ それぞれのノードが 1つのファイルに書き込みに行くと干渉し合ってしまう
    ● pm2×log4jsで解決!

    おまじない的にこれを書いておけば後は
    PM2がよし
    なにやってくれる。

    View Slide

  33. PM2でできること
    ● プロセス監視とモニタリング
    ● ファイル変更時に自動的にプロセス再起動
    ● メトリクスの設定(コード内に埋め込んで計測)
    ● 環境別に環境変数設定
    などなど。便利!
    http://pm2.keymetrics.io/

    View Slide

  34. フロントエンドの枠を飛び出そう!

    View Slide


  35. View Slide