GCE（GoogleComputeEngine）の「f1-micro」を用いて無料でNuxtやAngularの開発環境を構築してみる

# はじめに
## 要旨
* GCE ( Google Compute Engine ) の f1-micro なら無料で Ubuntu サーバ動かせるよ。
* Nuxt や Angular などの開発環境をそこに構築してみるよ。
    * 別に Nuxt や Angular に限らず何したってよいですが……
* メモリが貧弱で swap メモリ追加しないとロクに dev サーバすら立ち上がらないので、対応するよ。
* リモートインスタンス内に立ち上がった localhost:3000 / :4200 の dev サーバへ外部からアクセスするために nginx 使うよ。

## 誰向け？
* 無料 Linux 環境を手に入れたい人
* ローカルに開発環境なんて作りたくない人
* コンテナあんまり好きじゃない人

## 前提的注意点
* 無料で使えるのは 1 インスタンスのみ


# GCE でインスタンス（サーバ）を立てる
## ざっとやること
* GCP の利用開始手続き
* GCP で新しいプロジェクトを作成
* GCE でインスタンスを立てる https://console.cloud.google.com/compute
    * リージョン：us-west1 ( オレゴン )
    * ゾーン：us-west1-* ( a, b, c いずれでも可 )
    * マシンタイプ：f1-micro
    * ディスク：永続 30 GB
    * イメージ：Ubuntu 18.04 ( 現在執筆時の最新 LTS ver. として )
    * ファイアウォール：80, 443 トラフィックを許可
    * ネットワーク：外部 IP 固定
* 詳細は参考記事へ……
    * 公開鍵の登録と SSH 接続確認
    * 課金ログ書き出しの設定
    * セキュリティまわりの確保

### 参考記事
* [これから始めるGCP（GCE）　安全に無料枠を使い倒せ](https://qiita.com/Brutus/items/22dfd31a681b67837a74)
* [GCE の無料枠のサーバを立るときに、初見でハマりそうなところ](https://qiita.com/ndxbn/items/7ef0a96e409a5b5837bd)


# サーバに SSH 接続してやること
## 前置き
* Ubuntu を前提としていますので CentOS とかなら apt を yum に置き換えるなどしてください。

## 初期設定
* パッケージ更新

```
sudo apt-get update
sudo apt-get upgrade
sudo apt update
sudo apt upgrade
```

* node.js と npm をインストール

```
sudo apt install -y nodejs npm
```

* yarn インストール
    * 適当に home あたりで

```
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install yarn
```

## swap メモリを追加
* 物理メモリ／ suwap メモリの確認方法

```
free -m
```

* cd で swapfile 作成するところに移動した後で以下を実行
    * *** G のところが容量。 5GB 追加したければ、 5G と入力

```
sudo fallocate -l ***G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
```

* /etc/fstab に下記の1行を追加

```
/swapfile none swap sw 0 0
```

* 再起動

```
sudo shutdown -r now
```


### 参考記事
* [Google Compute EngineのUbuntu VMにスワップ領域を作成する](https://ex-ture.com/blog/2018/06/01/create-swap-on-ubuntu-gce/)


## nginx
* インストール

```
sudo apt-get install nginx
```

* conf を書く
    * port 番号を適宜書き換える ( デフォルトの場合 nuxt は 3000 / angular は 4200 )

```
cd /etc/nginx/sites-available/
sudo vi default
```

``` nginx
server {
  listen 80 default_server;
  listen [::]:80 default_server;
  index index.html;

  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}
```

* conf 再読込

```
sudo nginx -s reload
```

# Nuxt / Angular のプロジェクト作成と dev サーバー起動
## Nuxt の場合
* vue-cli のインストール

```
sudo npm i -g @vue/cli @vue/cli-init
```

* プロジェクトを作成したいディレクトリへ移動

* プロジェクト作成 ( vue init の場合 )
    * nuxt-community/starter-template 以外を選んでももちろん構いません

```
vue init nuxt-community/starter-template my-project-name
```

* プロジェクト作成 ( create-nuxt-app の場合 )

```
sudo npm install -g create-nuxt-app
create-nuxt-app my-project-name
```

* dev サーバー起動
    * 2 行目の yarn は初回時にパッケージインストールを走らせるため実行

```
cd my-project-name
yarn
yarn dev
```

* localhost:3000 で起動するので、ブラウザからインスタンスに割振った固定外部 IP を直で叩いて、表示されるかどうか確認
    * 表示されなかったら nginx の設定を要確認

## Angular の場合
* angular-cli のインストール

```
npm install -g @angular/cli
```




* プロジェクトを作成したいディレクトリへ移動

* プロジェクト作成

```
ng new my-project-name
```

* dev サーバー起動

```
cd my-project-name
ng serve --open
```

* localhost:4200 で起動するので、ブラウザからインスタンスに割振った固定外部 IP を直で叩いて、表示されるかどうか確認
    * 表示されなかったら nginx の設定を要確認


# おわりに
* アメリカ西海岸に置いてあるメモリ 512MB の共有サーバなので、遅いですが、今のところ無料で好き勝手に使えるのはありがたい話です。
    * ちなみに、この環境だと、ホットリロードの速度では Nuxt が Angular を圧倒してます。
* この環境にさらにデータベースを置いて走らせたりすると相当厳しそうですが、パフォーマンスチューニングのしがいがあると燃える人であれば……
* Angular なら [Stackblitz](https://stackblitz.com/) 使えばいいんじゃん？　とか冷たいこと言わないでください。