はじめに

要旨

• 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）　安全に無料枠を使い倒せ
• GCE の無料枠のサーバを立るときに、初見でハマりそうなところ

サーバに 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にスワップ領域を作成する

nginx

• インストール

sudo apt-get install nginx

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

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

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 使えばいいんじゃん？　とか冷たいこと言わないでください。