2017-04-12

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

春ですね。＾＾

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

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

kimizuka.hatenablog.com

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

ゴールまでの道のり

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

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を導入します。

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かを選択してセットアップしていきたいと思います。

2017-04-07

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

Mac

春ですね。＾＾

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

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

www.sakura.ad.jp

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

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

ゴールまでの道のり

VPSサーバ借りる
Ubuntu入れる
Nginx入れる
nodebrew、Node.js入れる
nmp入れる
git入れる
Express か Koa 入れる
サイトつくる

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

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を再インストールした僕にとっては、大変お世話になったコマンドです。

2017-04-03

Koaをつかってスタティックなサーバをたてる 😎

JavaScript

kimizuka.hatenablog.com

いままではExpressをつかっていましたが、
もう2017年なので、これからは積極的にKoaをつかっていこうと思いました。

Koaとは

Koaとは next generation web framework for node.js です。
よくわからないけど、Node.js向けの次世代のウェブフレームワークなんでしょうね。きっと。
次世代と聞くと、次世代ゲーム機と呼ばれたセガサターン並みの実力を期待してしまいますね。＾＾

Koa - next generation web framework for node.js

Node.js用のフレームワークは数あれど、
KoaはExpressの開発チームが開発しているフレームワークとの噂なので、
これを機にExpressから乗り換えてみようと思いました。

導入手順

package.jsonをつくる

yarn init -y

必要なモジュールをインストール

yarn install babel-cli
yarn install babel-preset-es2015
yarn install babel-preset-es2017
yarn install koa
yarn install koa-static-server

のちに解説で解説しますが、Expressのときよりもモジュールがたくさん必要になります。

package.jsonを編集

{
  "name": "koa-static",
  "version": "1.0.0",
  "main": "app.js",
  "license": "MIT",
  "babel": {
    "presets": [
      "es2015",
      "es2017"
    ]
  },
  "scripts": {
    "start": "babel-node app.js"
  },
  "dependencies": {
    "babel-cli": "^6.24.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-es2017": "^6.22.0",
    "koa": "^2.2.0",
    "koa-static-server": "^1.0.0"
  }
}

app.jsを編集

"use strict";

import Koa from "koa";
import serve from "koa-static-server";

const app = new Koa();

app.use(serve({
  rootDir: "public"
}));

app.listen(3000);

publicディレクトリ以下にHTMLを用意

HELLO KOA !

最終的なディレクトリ構成

koa-static/
　└ app.js
　└ nodemodules/
　　　└ ...
　　　└ ...
　└ package.json
　└ public/
　　　└ index.html
　└ yarn.lock

解説

Koaのアプリケーションをasyncを使ったりしてモダンに書きたいが故に、

"babel-cli": "^6.24.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-es2017": "^6.22.0",

を入れてます。それに伴い、

yarn start

のタスクも、

node app.js

ではなく、

babel-node app.js

となっています。
それ以外は特に問題ないとおもいます。
モダンに書くことにいちばん労力をかけるってなんだかなぁって感じですが、きっと時が解決してくれることでしょう。

ゴールまでの道のり

curlの導入

nodebrewの導入

nodebrewのインストール

pathを通す

反映

Node.jsの導入

最新の安定版をインストール

最新の安定版を使用

npmのアップデート

Gitの導入

Gitのインストール

初期設定

鍵の作成

鍵の表示

Bitbucketに鍵の登録

ゴールまでの道のり

VPSサーバ借りる編

Ubuntu導入編

Ubuntuセットアップ編

ユーザーの追加

追加したユーザーにsudo権限の付与

apt-getのアップデート

apt-getのアップグレード

vimのインストール

unattended-upgradesの導入

unattended-upgradesの適用

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

ufwのインストール

ufwの有効化

すべての通信を受け付けなくする

sshを許可

httpを許可

httpsを許可

リロード

ステータスの確認

sshのポート変更

ポートの変更

リスタート

22番ポートの取り消し

新しいポートの許可

Nginxのインストール / 設定

Nginxのインストール

Nginxの起動

Nginxの状態確認

ブラウザで確認！

おまけ

Koaとは

導入手順

package.jsonをつくる

必要なモジュールをインストール

package.jsonを編集

app.jsを編集

publicディレクトリ以下にHTMLを用意

最終的なディレクトリ構成

解説