Posted at

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 接続確認

    • 課金ログ書き出しの設定

    • セキュリティまわりの確保




参考記事


サーバに 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


参考記事


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