春ですね。＾ ＾
なにか新しいことをはじめたくなりますね。＾ ＾
前回はnodebrew、Node.js、npmのインストールを行いました。
今回は、Express か Koa を選んで導入していきましょう。
と、思いましたが。
決めました。
Express4でいこうと。
スタティックなサーバを立てるのであれば、
Koa であろうが、Express であろうが大した違いはないのですが、せっかくなので、Viewをつかってみたいところ。そうなると英語のドキュメントがまったく読めない僕に採ったはKoaはまだ時期尚早だったのです。
というわけで、はりきってExpress4をセットアップしていきましょう。
作業は基本的にローカルで行い、gitにpushして、サーバ上でgitからpullして実行することにします。
ゴールまでの道のり
- VPSサーバ借りる
- Ubuntu入れる
- Nginx入れる
- nodebrew、Node.js入れる
- nmp入れる
- git入れる ← 前回はここまで
- Express
か Koa入れる ← 今回はここ - 急遽webpack入れる（理由は後述）
- サイトつくる
express-generatorを導入
Express4からは express-generator をつかって雛形をつくるのがいけてるやり方みたいです。
適当なディレクトリで、
npm init -y
でpackage.jsonを作成
npm install --save express-generator
で express-generator をインストール。
本当はyarnをつかいたかったんですが、僕の実力ではubuntuにyarnを入れることができずに泣く泣くnpmでインストール。ローカルではyarnをつかっても良いっちゃ良いのですが、一応バージョンを合わせるためにローカルもサーバもnpmで統一します。
express-generator
細かいオプションは Express のアプリケーション生成プログラム に記載してありますが、
僕はpug、compassをつかいたいので、
express -v pug -c compass app
で雛形を作成。
app以下に移動して、
npm start
を実行すると、
てってれー。
無事にExpressが起動しました。簡単ですね。
リポジトリにプッシュ / リポジトリからプル
.sass-cache node_modules
をignoteしてリポジトリにプッシュ。
この際プッシュするのはapp以下で良いでしょう。
サーバにログインして、3000番ポートを開けておきましょう。
sudo ufw allow 3000
sudo ufw reload
リポジトリをcloneし、app以下に移動して、
npm start
IPアドレスの3000番にアクセスすると、
てってれー。
無事にExpressが起動しています。
が。
プロセスが落ちました。
どうやらcompassをつかうにはrubyが必要な模様。
ローカル（Mac）にはrubyがはいっていたので動いてたんですね。全然気づきませんでした。
webpackの導入を決意
サーバにrubyをインストールしてもよいのですが、scssをcssにコンパイルしてからアップすればrubyなんていらないので、ローカルでコンパイルしてからpushすることにしました。
で、どうせなら、autoprefixerもつかいたいし、babelもつかいたい。
いつものようにgulpを使おうとも思ったのですが、2017年なのでwebpackをつかうことにしました。特に深い理由はありません。
というわけで、次回はwebpackを導入したいと思います。
おまけ
rubyがなくてエラーを吐きましたが、再度、
npm start
を実行したところ、
Port 3000 is already in use
と、既に3000番が使われているという旨のエラーがでました。
落ちたようで落ちてなかったんですね。
そんなときは、
lsof -i :3000
でプロセスのPIDを探し、
kill -9 PID
でkillすることができます。
