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

みかづきブログ その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することができます。

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.jsの環境を整えるまでの道のり - その2 - nodebrew、Node.js、npmの導入 😎

春ですね。^ ^

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

前回はUbuntuのインストールから初期設定までと、Nginxのインストール&起動を行いました。

kimizuka.hatenablog.com

今回ははりきって、nodebrew、Node.js、npmを導入していきましょう。



ゴールまでの道のり

  1. VPSサーバ借りる
  2. Ubuntu入れる
  3. Nginx入れる ← 前回はここまで
  4. nodebrew、Node.js入れる ← 今回はここから
  5. nmp入れる
  6. git入れる
  7. Express か Koa 入れる
  8. サイトつくる



curlの導入

apt-getでインストールできないものをインストールするためにcurlを導入します。

sudo apt-get install curl



nodebrewの導入

Nodeのバージョンを管理して切り替えられるようにする為にnodebrewを導入します。
複数のNode.jsのバージョンを管理するには、nodeenvとかnodistとかをつかうという手もあるのですが、普段使い慣れているnodebrewをつかうことにしました。

nodebrewのインストール
sudo curl -L git.io/nodebrew | perl - setup
pathを通す
sudo vim .bashrc

export PATH=$HOME/.nodebrew/current/bin:$PATH を追加してpathを通します。

反映
source ~/.bashrc



Node.jsの導入

いよいよNode.jsを導入します。

最新の安定版をインストール
sudo nodebrew install-binary stable

install-binaryをつかって高速にいれましょう。

http://kimizuka.hatenablog.com/entry/2016/11/10/091649

最新の安定版を使用
nodebrew use stable



npmのアップデート

npmをアップデートしておきます。

npm update -g


さて、これでnodebrew、Node.js、npmが導入できたので、
早速ExpressかKaoを導入してみようと思ったのですが、
サーバ上でいろいろ開発するのは面倒なので、
順番を変えて、先にローカルで開発したものをサーバに同期できる仕組みをつくってしまうことにします。
で、いろいろ考えたのですが、単純にGitを導入することにしました。
ローカルでgit pushを行い、サーバでgit pullを行なうことで同期を図ります。
GithubをつかうかBitbucketをつかうか迷ったのですが、
のちのち人には見られたくないソースをコミットするかもしれないので、Bitbucketでプライベートリポジトリをつくることにしました。

Gitの導入

Gitのインストール
sudo apt-get install git
初期設定
git config --global user.name "<ユーザ名>"

ユーザー名を設定。

git config --global user.email "<メールアドレス>"

一応メールアドレスも設定

鍵の作成
ssh-keygen -t rsa
鍵の表示
cat ~/.ssh/id_rsa.pub
Bitbucketに鍵の登録

https://bitbucket.org/ki_230/kimizuka.fm/admin/access-keys/ から登録できます。

これで、ローカルのプロジェクトをサーバに同期できるようになりました。
次回はExpressかKoaかを選択してセットアップしていきたいと思います。

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.jsの環境を整えるまでの道のり - その1 - Ubuntu導入からNginxの起動まで 😎

春ですね。^ ^

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

かれこれ7年ぐらいさくらのVPSをつかっているのですが、「さくらのVPS乗り換えキャンペーン」たるものをつかって新しいサーバに乗り換えてみることにしました。

www.sakura.ad.jp

いままでは、CentOS + Ruby + Rails という構成で、
サーバのことは探り探り、というかほとんど人に教えてもらいながらなんとかする感じでした。

しかし、最近、Electronとかを使うようになって、Node.jsを触る機会が増えたので、折角なのでサーバにNode.jsをいれて、いろいろ自分でできるようになってみようと思ったのがすべてのはじまりです。



ゴールまでの道のり

  1. VPSサーバ借りる
  2. Ubuntu入れる
  3. Nginx入れる
  4. nodebrew、Node.js入れる
  5. nmp入れる
  6. git入れる
  7. Express か Koa 入れる
  8. サイトつくる

という感じを目指そうと思います。



VPSサーバ借りる編

vps.sakura.ad.jp

なにも難しいことはありません。
上記URLから楽々借りることができます。
石狩、東京、大阪のどこを借りようかは深く考えていなかったのですが、近くにいたサーバサイドエンジニアに「同じ条件なら近くで借りたほうがよいYo!」とアドバイスを受けたので、東京リージョンのSSDを借りることにしました。
申込みが完了すると初期パスワードが書いてあるメールが送られてきます。



Ubuntu導入編

初期設定ではCentOSが入っているのですが、
今回は(特に理由はないですが)Ubuntuを入れたかったのでOSを入れ直しました。
なので、メールに記載されているパスワードをつかうことはありませんでした。
この際、標準インストールをつかうと、僕の実力不足により何故かいろんなことがうまくいかなかったので、なんだかんだでカスタムインストールでUbuntuを入れました。

help.sakura.ad.jp

このサイトに設定手順が書いてあります。



Ubuntuセットアップ編

sudo権限を持ったユーザーの追加、apt-getのアップデート / アップグレード、vimのインストール、自動アップデートの設定と、最低限のことしかやってないです。のちにもうちょっと色々設定するかもしれません。

ユーザーの追加
sudo adduser username
追加したユーザーにsudo権限の付与
sudo gpasswd -a username sudo
apt-getのアップデート
sudo apt-get update
apt-getのアップグレード
sudo apt-get upgrade
vimのインストール
sudo apt-get install vim
unattended-upgradesの導入
sudo apt-get install unattended-upgrades
unattended-upgradesの適用
sudo dpkg-reconfigure -plow unattended-upgrades



ファイヤーウォールの設定

iptablesたるものを設定しよう思ったのですが、僕にはレベルが高すぎたので、iptablesを簡単に設定できると噂のufwをつかうことにしました。

gihyo.jp

ufwのインストール
sudo apt-get install ufw

⇒ 既にインストールされてました。

ufwの有効化
sudo ufw enable
すべての通信を受け付けなくする
sudo ufw default REJECT
sshを許可
sudo ufw allow ssh
httpを許可
sudo ufw allow http
httpsを許可
sudo ufw allow https
リロード
sudo ufw reload
ステータスの確認
sudo ufw status

これで最低限の通信は許可できました。



sshのポート変更

近所のサーバサイドエンジニアが、「sshのポートを22番から変更したほうが良いYo!さもないと攻撃受けまくるYo!チェケラッチョ。」というので、変更しました。

ポートの変更
sudo vim /etc/ssh/sshd_config

ポート番号を適当な番号に変更します。

リスタート
sudo service ssh restart

反映します。

22番ポートの取り消し
sudo ufw delete allow 22
新しいポートの許可
sudo ufw allow ポート番号

これで(最低限は)安心ですね。 ^ ^



Nginxのインストール / 設定

Nginxのインストール
sudo apt-get install nginx
Nginxの起動
sudo systemctl start nginx 
Nginxの状態確認
sudo systemctl status nginx 
ブラウザで確認!

f:id:kimizuka:20170407142319p:plain



標準インストールではこの手順を踏んでも、なぜがブラウザでアクセスできず、
ここまでくるのにとても時間がかかりました。(カスタムインストールで一発でした)

次回は、Node.jsの導入を行いたいと思います。


おまけ

標準インストールでうまくいかず、OSを再インストールしまくったのですが、
OSを再インストールしてsshログインしようとする度に、

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

となりました。
その度に、

ssh-keygen -R IPアドレス

で設定を削除すると再度ログインできるようになります。
20回以上OSを再インストールした僕にとっては、大変お世話になったコマンドです。