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