読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その3 - Expressの導入とwebpackを入れる決意を固めるまで 😎

春ですね。^ ^

なにか新しいことをはじめたくなりますね。^ ^

前回はnodebrew、Node.js、npmのインストールを行いました。
今回は、Express か Koa を選んで導入していきましょう。

kimizuka.hatenablog.com

kimizuka.hatenablog.com


と、思いましたが。

決めました。

Express4でいこうと。

スタティックなサーバを立てるのであれば、

kimizuka.hatenablog.com

kimizuka.hatenablog.com


Koa であろうが、Express であろうが大した違いはないのですが、せっかくなので、Viewをつかってみたいところ。そうなると英語のドキュメントがまったく読めない僕に採ったはKoaはまだ時期尚早だったのです。

というわけで、はりきってExpress4をセットアップしていきましょう。
作業は基本的にローカルで行い、gitにpushして、サーバ上でgitからpullして実行することにします。



ゴールまでの道のり

  1. VPSサーバ借りる
  2. Ubuntu入れる
  3. Nginx入れる
  4. nodebrew、Node.js入れる
  5. nmp入れる
  6. git入れる ← 前回はここまで
  7. Express か Koa 入れる ← 今回はここ
  8. 急遽webpack入れる(理由は後述)
  9. サイトつくる


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

を実行すると、

f:id:kimizuka:20170413211037p:plain

てってれー。
無事にExpressが起動しました。簡単ですね。



リポジトリにプッシュ / リポジトリからプル
.sass-cache
node_modules

をignoteしてリポジトリにプッシュ。
この際プッシュするのはapp以下で良いでしょう。

サーバにログインして、3000番ポートを開けておきましょう。

sudo ufw allow 3000
sudo ufw reload

リポジトリをcloneし、app以下に移動して、

npm start

IPアドレスの3000番にアクセスすると、

f:id:kimizuka:20170413211037p:plain

てってれー。
無事に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することができます。