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