VMのCentos7にNginxとCloud9を入れて、自分用の開発環境を作る

# はじめに
エディターって迷いますよね。特にHTMLのエディター。確かにAtomやVScodeでもかけますけど、個人的には合いませんでした。そんな時に出会ったのが`Cloud9`。お気に入りのエディターなんでどこでも使いたいんですけど、オンラインエディターなんですよね。なのでサーバーがないと動かない。VPSでインスタンスを立ててまでやりたいかというと、少し億劫。なのでVirtualMachine上に作りました。

## Nginxのインストール

公式にインストールのやり方が書いてあるので、その通りにやっていきます。
[nginx: Linux packages](http://nginx.org/en/linux_packages.html)

まず以下のコマンドを叩きます。

```
$ sudo yum install -y yum-utils
```

そうしたら、指定されているディレクトリに、指定されたファイルを作成します。

```
$ sudo vi /etc/yum.repos.d/nginx.repo
```

内容

```:/etc/yum.repos.d/nginx.repo
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
```

うまくいっているか不安だったら、以下のコマンドで確認できる。

```
$ yum info nginx
```

うまくいっていたら、インストールしよう。

```
$ sudo yum install -y nginx
```

起動時に自動で作動するように設定。

```
$ sudo systemctl enable nginx
```

起動して入れるか試してみましょう。

```
$ sudo systemctl start nginx
```

自分の場合はまずCentosのfirewallに捕まりました。
以下のコマンドでポートを開けます。

```firewall.sh
#!/bin/sh

firewall-cmd --permanent --add-service=http --zone=public
firewall-cmd --permanent --add-service=https --zone=public
firewall-cmd --permanent --zone=public --add-port=8080/tcp
firewall-cmd --permanent --zone=public --add-port=80/tcp
firewall-cmd --permanent --zone=public --add-port=443/tcp
firewall-cmd --reload
```

一応止め方は、これ。

```
$ sudo systemctl stop nginx
```


## Cloud9関連のインストール

スクリプトでインストールしていきます。

```
$ sudo vi install.sh
```


```install.sh
#!/bin/sh

# 必要なライブラリ取得
yum install -y glibc-static
yum install -y epel-release
yum install -y nodejs
yum install -y npm --enablerepo=epel

# centos用の依存ライブラリーのインストール
yum -y install gcc curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-ExtUtils-MakeMaker autoconf

yum -y install wget

```

以下のコマンドで実行します。

```
$ sudo bash install.sh
```

gitは以下のコマンドでインストールしていきます。

```
# ディレクトリへ移動
cd /usr/local/src

# サイトからgitの圧縮ファイルをインストール
sudo wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.9.4.tar.gz

# ファイルを解凍
sudo tar xzvf git-2.9.4.tar.gz

# 圧縮ファイルを削除
sudo rm -rf git-2.9.4.tar.gz

# 解凍した Git ディレクトリに移動
cd git-2.9.4/

# make コマンドでインストール
sudo make prefix=/usr/local all
sudo make prefix=/usr/local install
```

再起動すると、インストールしたgitのバージョンになります。

そうしたら、Cloud9をインストールしていきます。

```
$ cd
$ git clone https://github.com/c9/core.git c9sdk
$ cd c9skd
$ scripts/install-sdk.sh
```

## 作業用ディレクトリの作成

まず、Cloud9でコードを書いていくディレクトリを作成していきましょう。

```
$ cd
$ mkdir workspace
$ chmod 777 workspace
```

そうしたら、以下のコマンドを叩いていきます。

```
$ cd ~/c9sdk
$ node server.js -p 8080 -a user:password -w /home/user/workspace/ --listen サーバのIPアドレス
```

ログインするときに、ユーザー名とパスワードを聞かれているので、
ユーザー名：user
パスワード：password
と入力してください。止め方は、`ctl + c`です。

ただこの名前で接続すると、公開テストをしたいときに困るので、nginxに追記していきます。

nginxの設定ファイルは、`/etc/nginx/conf.d`の中に、`default.conf`として、保存されています。
以降は、そこをいじっていくのでバックアップするところから始めましょう。
(`nginx.conf`がワイルドカードで読み取ってくれるので、ファイルを追加することも可能です。)

```
$ cd /etc/nginx/conf.d
$ sudo cp default.conf default.conf.org
```

そうしたら、この`default.conf`をいじっていきます。
今回はデフォルトの設定の上に追記します。注意点としては、セミコロンをつけ忘れると、エラーが発生するので気をつけてください。

```
$ sudo vi default.conf
```

```/etc/nginx/conf.d/default.conf
server {
    listen       80;
    server_name  c9.example.com;

    location / {
        proxy_pass  http://127.0.0.1:8080;
    }
}

server {
  # デフォルトの設定
}
```

そうしたら再起動します。
(注意点としては、デフォルトの設定を消さないとドメインは使えません。)

```
$ sudo systemctl restart nginx
```

そうしたら、さっき設定したドメインで接続できるか試してみましょう。また、CUIが使えないと困るので、`forever`を利用して、バックグラウンドで起動してみましょう。

```
# foreverのインストール
$ sudo npm install forever -g

$ cd ~/c9sdk
$ forever start server.js -p 8080 -a user:password -w /home/user/workspace/ --listen サーバのIPアドレス
```

止め方。

```
# 以下のコマンドでpidの番号を調べてください
$ forever list
例) pid 1950

$ forever stop 1950
```

## Webページの公開テスト

Cloud9はデフォルトで`emmet`を使うことができます。なので、簡単にHTMLページを作成することが可能です。
そして、この仮想マシンにはNginxをインストールしているため、公開することができます！
公開されるディレクトリは、`defautl.conf`に`/usr/share/nginx/html/`と記述されています。ですので、そのディレクトリに静的ファイルを移してみましょう！

## 参考
Nginx関連
・[CentOS 7にnginxをインストールしてブラウザ確認するまで](https://qiita.com/nooboolean/items/ffcd6b2229f846f195ec)
・[Nginx を CentOS 7 にインストールする手順](https://weblabo.oscasierra.net/nginx-centos7-install/)
・[CentOS7にnginxを導入＆初期設定まとめ](http://vdeep.net/centos7-nginx)

git関連
・[CentOS7 に最新版の Git をインストールする方法](https://qiita.com/tomy0610/items/66e292f80aa1adc1161d)

install関連
・[wgetコマンドがない](http://www.sewiki.net/detail/1/26/)
・[Express.js(Node.js)をバックグラウンド実行させるにはforeverが便利](https://kennejs.com/entry/2019/04/20/033115)

Cloud9関連
・[Cloud9を自サーバにインストールしてどこでもコーディング](https://kijtra.com/article/cloud9-install/)
・[自宅サーバー（CentOS 7）にCloud9をインストールする方法](https://minory.org/cloud9-centos7-install.html)
・[CentOSな VPS 上にCloud9 IDEをインストールする手順（走り書き）](https://note.com/inagobot/n/n5ecc68100ee2)