SSRを勉強したいのでインフラからやるぞ

June 22nd, 2019

正直なところ、もうサーバサイドでDBアクセスもHTML生成もロジックもゴリゴリやる時代は終わると思っていて、2019年の後半はそこから手を引くためにいろいろとチャレンジしたい。

で、これからどうなると思ってるかと言うと、フロントに移った責務をフロントで処理するようになっていくんじゃないかと思ってる。

これまでもその流れが濃かったけど、ようやくプロダクションで当たり前にそうすべきでしょうというフェーズに踏み入れつつあるという空気を感じている。

フロントの責務が増えてきたにもかかわらず、実装はサーバサイドに取り残されていて、リッチなフロントを無理してサーバサイドで組み立てるのは限界が来ているように感じるし、いびつな状態で「とりあえず動くコード」をメンテしていくのはDXが低い、正直もうやりたくない。

というわけでこれからはSSR前提のフロントエンド開発をメインにやっていくぞ!ちなみにめっちゃ初心者だぞ!

最新のnodejsを入れる

Ubuntuに最新のNode.jsを難なくインストールする - Qiita

dtsuji@tk2-220-19763:~$ node -v
v10.16.0

最新って10だっけ?まあ新しい方ではありそうなので一旦おっけー。

適当なexampleを拾ってくる

SSRのコードなんて見たこともないしイメージもつかないのでexampleを使わせてもらう。まずはインフラのイメージをつけたいだけなので。

mhart/react-server-example: A simple example of how to do server-side rendering with React (no compilation needed)

助かる。

サーバをデーモン化する

nodejsアプリケーションのデーモナイズにpm2を使う。プロセスマネージャとしてデファクトぽいので。

pm2でExpressアプリケーションをデーモン化する - Qiita

[PM2] PM2 Successfully daemonized
3.5.1

押忍。

雑にapp.jsonを置いて

{
  "name" : "app",
  "script" : "./server.js",
  "env" : {
    "NODE_ENV" : "development"
  },
  "env_production" : {
    "NODE_ENV" : "production"
  }
}

スタート。

pm2 start app.json --env production

ステータスを見る

dtsuji@tk2-220-19763:~/react-server-example$ pm2 show app                 
 Describing process with id 0 - name app                                  
┌───────────────────┬─────────────────────────────────────────────┐       
│ status            │ online                                      │       
│ name              │ app                                         │       
│ version           │ 1.4.0                                       │       
│ restarts          │ 15                                          │

いけてそう。

pm2、モニタリングとかも楽にできていいね。

外部からアクセスする

サンプルで使わせてもらってるソースが3000ポートでListenしてるので、iptablesを直す。

sudo vim /etc/iptables/iptables.rules

3000を許可。

-A INPUT -m state --state NEW -m tcp -p tcp --dport 3000 -j ACCEPT

反映。

sudo iptables-restore < /etc/iptables/iptables.rules

疎通したしSSRもできているので今回はここまで!

Screen Shot 2019-06-23 at 10.33.03

次回はコードを読んだりしていくぞ。

AUTHOR

Daisuke Tsuji
Daisuke Tsuji@dim0627

フリーのWeb Developer。

RubyとかRailsを触ってる時間が多い。コーディングもマークアップもライティングもデザインもSEOもやるタイプ。

だいたいどれもだめ。